Scroll the page only when the first radio button is clicked

Question

Scroll the page only when the first radio button is clicked

After selecting a radio button with the ID "yourgoal", a div is displayed on my page. I want the page to scroll to that div only the first time a button in "yourgoal" is clicked. Below is the code I am currently using. However, I do not want the page to scroll to the div after the initial click.

$('input:radio[name="yourgoal"]').change(function() {
                 if ($('#calculations1').css('display') == 'none') {
                            $('html, body').animate({
                            scrollTop: $("#scrollto").offset().top
                            }, 1500);

                    }

The issue I'm facing is that it disrupts the other functions within the .change() method. I don't want to include all the functions inside the if statement and then duplicate them in an else {} block as it seems like too much repetitive code (which also causes issues). Is there a way to have a simple if statement that doesn't interfere with the rest of the actions in the .change function?

I might be overcomplicating this – perhaps there's a simpler solution?

Thank you in advance!

javascript jquery css

Answer 1

Answer №1

$('input:radio[name="yourgoal"]').one('change',
    function () {
        if ($('#calculations1').css('display') == 'none') {
            $('html, body').animate({
                scrollTop: $("#scrollto").offset().top
          }, 1500);
       }
    }
);

If you want the event to trigger only once and be automatically removed afterwards, using .one() is recommended.

To keep additional code that needs to stay after the first change event, you can use event namespacing and attach multiple change events.

$('input:radio[name="yourgoal"]').one('change.firstChange',
    function () {
        if ($('#calculations1').css('display') == 'none') {
            $('html, body').animate({
                scrollTop: $("#scrollto").offset().top
            }, 1500);
        }
    }
);
$('input:radio[name="yourgoal"]').on('change.allChanges',
    function () {
        // Additional code that stays attached
    }
);

It seems like using .one() won't work in this case because it will be attached to each radio button individually with the same name. If you only want to scroll upon the first selection of any radio button sharing the yourgoal name, you can implement it as shown below:

Fiddle: http://jsfiddle.net/31s3LLjL/3/

$('input:radio[name="yourgoal"]').on('change.firstChange',
    function () {
        $('input:radio[name="yourgoal"]').off('change.firstChange');
        $('html, body').animate({
            scrollTop: $("#scrollto").offset().top
        }, 1500);
    }
);
$('input:radio[name="yourgoal"]').on('change.allChanges',
    function () {
        // Other change actions
    }
);

Answer 2

$('input:radio[name="yourgoal"]').one('change',
    function () {
        if ($('#calculations1').css('display') == 'none') {
            $('html, body').animate({
                scrollTop: $("#scrollto").offset().top
          }, 1500);
       }
    }
);

If you want the event to trigger only once and be automatically removed afterwards, using .one() is recommended.

To keep additional code that needs to stay after the first change event, you can use event namespacing and attach multiple change events.

$('input:radio[name="yourgoal"]').one('change.firstChange',
    function () {
        if ($('#calculations1').css('display') == 'none') {
            $('html, body').animate({
                scrollTop: $("#scrollto").offset().top
            }, 1500);
        }
    }
);
$('input:radio[name="yourgoal"]').on('change.allChanges',
    function () {
        // Additional code that stays attached
    }
);

It seems like using .one() won't work in this case because it will be attached to each radio button individually with the same name. If you only want to scroll upon the first selection of any radio button sharing the yourgoal name, you can implement it as shown below:

Fiddle: http://jsfiddle.net/31s3LLjL/3/

$('input:radio[name="yourgoal"]').on('change.firstChange',
    function () {
        $('input:radio[name="yourgoal"]').off('change.firstChange');
        $('html, body').animate({
            scrollTop: $("#scrollto").offset().top
        }, 1500);
    }
);
$('input:radio[name="yourgoal"]').on('change.allChanges',
    function () {
        // Other change actions
    }
);

Answer 3

Answer №2

If you want to prevent other callbacks from being executed on a specific event, you can utilize event.stopImmediatePropagation().

$('input:radio[name="yourgoal"]').one('change',function(event) {
  event.stopImmediatePropagation();
  if ($('#calculations1').css('display') == 'none') {
    $('html, body').animate({
      scrollTop: $("#scrollto").offset().top
    }, 1500);
  }
});

Just remember to ensure that your code comes before any other change handler definitions.

Answer 4

If you want to prevent other callbacks from being executed on a specific event, you can utilize event.stopImmediatePropagation().

$('input:radio[name="yourgoal"]').one('change',function(event) {
  event.stopImmediatePropagation();
  if ($('#calculations1').css('display') == 'none') {
    $('html, body').animate({
      scrollTop: $("#scrollto").offset().top
    }, 1500);
  }
});

Just remember to ensure that your code comes before any other change handler definitions.

Scroll the page only when the first radio button is clicked

Answer №1

Answer №2

Similar questions

ensure that mocha does not consistently skip tests

Create a Bootstrap div containing a button that adjusts to different screen sizes on the

Ways to achieve outcomes from functions employing concatMap within rxjs?

Why isn't this button aligning in the center properly?

Detecting page scrolling in Angular can be a challenging task

Unable to properly shut the sliding-over modal

Step-by-step tutorial for making a mesmerizing fade out grunge background

jQuery's visibility check function is not functioning properly

My function won't get called when utilizing Angular

Modifying the value of an HTML5 input type 'color' using JavaScript

Struggling with flipping div functionality in IE9 on flipping content demo

The XMLHttpRequest's readystate gets stuck at 1 stage

Setting up Geolocation

Access PDF files with parameters using ASP.NET MVC and AJAX technology

Dynamic progress bar based on time remaining

Errors in AJAX calls can sometimes result in an "ERR_EMPTY_RESPONSE" being

Condensing an Array of Objects into a solitary result

Jquery UI sortable not detecting changes in attributes of list items

Issue with directive not activating when attribute is changed

What is the best way to set an object's value to null in AngularJS?