Using jQuery to reset variables after the browser has been resized

Question

Using jQuery to reset variables after the browser has been resized

I am attempting to develop a jQuery function that can be invoked both when the page loads and when the browser window is resized.

jQuery(document).ready(function($) {

function setWidth() {
    var windowWidth = $(window).width();
    var boxWidth = $('#addbox').width();
    var paddingWidth = (windowWidth - boxWidth) / 2;
};

$(setWidth);

$(window).resize(setWidth);

$(".scroll").click(function(event){     
    event.preventDefault();
    $('html,body').animate({scrollLeft:$(this.hash).offset().left-paddingWidth}, 750);
});

});

However, it seems like this code is not functioning properly as Firebug indicates that paddingWidth is undefined. What mistake am I making?

jquery css

Answer 1

Answer №1

Variables retain the scope in which they were initially defined (using var). In this scenario, it signifies that their scope is limited to setWidth and they are reset with each execution of the method.

To ensure functions in descendant scopes have access to their values, it is recommended to move them into a broader scope.

jQuery(document).ready(function ($) {
    var windowWidth, boxWidth, paddingWidth; // variables declared in this scope

    function setWidth() {
        windowWidth = $(window).width(); // variables set within this scope
        boxWidth = $('#addbox').width();
        paddingWidth = (windowWidth - boxWidth) / 2;
    };

    setWidth(); // calling the function

    $(window).resize(setWidth);

    $(".scroll").click(function (event) {
        event.preventDefault();
        $('html,body').animate({
            scrollLeft: $(this.hash).offset().left - paddingWidth
        }, 750);
    });
});

It's worth noting that $(setWidth) may seem unnecessary and inefficient. It essentially means "call setWidth when the document is ready". Since you're already within a jQuery(document).ready handler, simply executing the function with setWidth() suffices.

Answer 2

Variables retain the scope in which they were initially defined (using var). In this scenario, it signifies that their scope is limited to setWidth and they are reset with each execution of the method.

To ensure functions in descendant scopes have access to their values, it is recommended to move them into a broader scope.

jQuery(document).ready(function ($) {
    var windowWidth, boxWidth, paddingWidth; // variables declared in this scope

    function setWidth() {
        windowWidth = $(window).width(); // variables set within this scope
        boxWidth = $('#addbox').width();
        paddingWidth = (windowWidth - boxWidth) / 2;
    };

    setWidth(); // calling the function

    $(window).resize(setWidth);

    $(".scroll").click(function (event) {
        event.preventDefault();
        $('html,body').animate({
            scrollLeft: $(this.hash).offset().left - paddingWidth
        }, 750);
    });
});

It's worth noting that $(setWidth) may seem unnecessary and inefficient. It essentially means "call setWidth when the document is ready". Since you're already within a jQuery(document).ready handler, simply executing the function with setWidth() suffices.

Answer 3

Answer №2

Give this a try

When the document is ready, use jQuery to center a box when the window is resized:

jQuery(document).ready(function($) {

var paddingWidth = 0;

function setWidth() { 
    var windowWidth = $(window).width(); 
    var boxWidth = $('#addbox').width();
    paddingWidth = (windowWidth - boxWidth) / 2; 
};

$(setWidth);

$(window).resize(setWidth);

$(".scroll").click(function(event){     
    event.preventDefault(); 
    $('html,body').animate({scrollLeft:$(this.hash).offset().left-paddingWidth}, 750); 
});

Answer 4

Give this a try

When the document is ready, use jQuery to center a box when the window is resized:

jQuery(document).ready(function($) {

var paddingWidth = 0;

function setWidth() { 
    var windowWidth = $(window).width(); 
    var boxWidth = $('#addbox').width();
    paddingWidth = (windowWidth - boxWidth) / 2; 
};

$(setWidth);

$(window).resize(setWidth);

$(".scroll").click(function(event){     
    event.preventDefault(); 
    $('html,body').animate({scrollLeft:$(this.hash).offset().left-paddingWidth}, 750); 
});

Using jQuery to reset variables after the browser has been resized

Answer №1

Answer №2

Similar questions

Discover the secret to extracting a unique style from inspect mode and incorporating it into your CSS design

What can be done to address the narrowing of the left div element as the right div's child elements grow in size?

Update the div and table without waiting for a specific time interval when an event happens

Issue with the URL associated with the CSS file

Engaging JavaScript Navigation

Is there a way for my box to avoid reaching the bottom of the page?

Optimizing user experience: Implementing different views/orders for mobile and desktop using Bootstrap

Use jQuery AJAX to send a query string containing a hyperlink to the server and retrieve the results

Styling CSS: Tips for making the left column shrink as the window size decreases

Scrolling horizontally in ng-grid version 2.0.11

My element's padding being overlooked by Tailwind CSS

Content and picture within a <button> element do not align on the same row when using flexbox in Firefox browser

What is the best way to enable drag-and-drop functionality for all child elements with the

What is the best way to extract the lowest and highest values from a `rangpicker` when using a price slider?

The September/October 2013 release of the Ajax Control Toolkit is causing conflicts with jQuery

What is causing justifyContent: space-between not to function properly?

Scroll smoothly to anchor using variable speed in jQuery

Trouble with HTML CSS rendering compatibility across different browsers

Text wrapping to the right of an image in Bootstrap columns

Only one successful call to Jquery is made, and subsequent attempts will yield the same result