attempting to access a variable which was initialized within a function in different sections of the code base

Question

attempting to access a variable which was initialized within a function in different sections of the code base

My goal is to retrieve a variable created within a function that is nested in a resize event parameter in jQuery. This variable should be dynamically updated each time the user resizes the browser window. I intend to utilize this variable to set the width of a div element with the class '.slide'. Essentially, whenever the user resizes the browser, I want the .slide element to adjust its width accordingly.

$(window).resize(function(){
        var windowWidth = $(window).outerWidth();
        return windowWidth;
    })

I plan to use the windowWidth variable

// To set the width of each slide equal to the window width
var slideWidth = $('.slide').css("width", windowWidth)

Here I will use slideWidth

$('.slide').css('width', slideWidth);

I may need to utilize the windowWidth variable in other parts of my code

While attempting to create a slideshow that spans the entire width of the page, I encountered issues when setting the width to 100%. Images within the slideshow would not align correctly using the float left property.

Link to problematic fiddle

Thank you for the suggestions provided thus far. However, most responses only address how to handle the resizing aspect but do not cover how the width variable can be integrated into other sections of the code. The moveSlide() function seems to be neglected in many answers, which limits reusability.

javascript jquery html css

Answer 1

Answer №1

If you're searching for it, there's no need to set slideWidth as a global variable. Instead, utilize $(window).width() to determine the current window width when resizing. See a functional example on this link.

Answer 2

If you're searching for it, there's no need to set slideWidth as a global variable. Instead, utilize $(window).width() to determine the current window width when resizing. See a functional example on this link.

Answer 3

Answer №2

It's essential to establish the variable windowwidth on a global scale

var windowwidth=$(window).outerWidth();
$(window).resize(function(){
    windowwidth = $(window).outerWidth();
    //return windowwidth;
    demo();
});
function demo()
{
    var slideWidth = $('.slide').css("width", windowwidth)
    slides.wrapAll('<div id = "slideHolder"></div>')
    slides.css({"float" : "left"});
    // var bodywidth = $('body').outerWidth();
    // var windowwidth = $(window).outerWidth()
    $('.slide').css('width', slideWidth);
    $("#slideHolder").css("width", slideWidth * numberOfSlides );
}
demo();

Take a look at this working fiddle for reference

Answer 4

It's essential to establish the variable windowwidth on a global scale

var windowwidth=$(window).outerWidth();
$(window).resize(function(){
    windowwidth = $(window).outerWidth();
    //return windowwidth;
    demo();
});
function demo()
{
    var slideWidth = $('.slide').css("width", windowwidth)
    slides.wrapAll('<div id = "slideHolder"></div>')
    slides.css({"float" : "left"});
    // var bodywidth = $('body').outerWidth();
    // var windowwidth = $(window).outerWidth()
    $('.slide').css('width', slideWidth);
    $("#slideHolder").css("width", slideWidth * numberOfSlides );
}
demo();

Take a look at this working fiddle for reference

Answer 5

Answer №3

$(window).resize(function(){
    let currentWindowWidth = $(window).outerWidth();
    return currentWindowWidth;
})

In this scenario, the window width will be confined to the function's scope and then returned as a value.

It is not being set in the global scope for access from other places.

If you want to make it accessible globally, you can do:

window.windowWidth =  $(window).outerWidth();

This way, you can access it from the global scope.

Answer 6

$(window).resize(function(){
    let currentWindowWidth = $(window).outerWidth();
    return currentWindowWidth;
})

In this scenario, the window width will be confined to the function's scope and then returned as a value.

It is not being set in the global scope for access from other places.

If you want to make it accessible globally, you can do:

window.windowWidth =  $(window).outerWidth();

This way, you can access it from the global scope.

Answer 7

Answer №4

To achieve that, simply create a global variable instead of declaring it as a local variable within the function!

Alternatively, you can utilize localStorage to store the specific width as shown below:

$.localStorage( 'example', {info:'value'} );

$.localStorage( 'example' );

Answer 8

To achieve that, simply create a global variable instead of declaring it as a local variable within the function!

Alternatively, you can utilize localStorage to store the specific width as shown below:

$.localStorage( 'example', {info:'value'} );

$.localStorage( 'example' );

Answer 9

Answer №5

functional Fiddle example.

$(document).ready(function(){
  let screenWidth = $(window).outerWidth();

In order to ensure the variable screenWidth is accessible globally, it needs to be declared within the $(document).ready function with the current window width. Remember to remove the let before screenWidth in the $(window).resize function to avoid using a local variable that cannot be accessed outside of the function.

Answer 10

functional Fiddle example.

$(document).ready(function(){
  let screenWidth = $(window).outerWidth();

In order to ensure the variable screenWidth is accessible globally, it needs to be declared within the $(document).ready function with the current window width. Remember to remove the let before screenWidth in the $(window).resize function to avoid using a local variable that cannot be accessed outside of the function.

Answer 11

Answer №6

By defining the variable windowWidth within a function, you are limiting its accessibility to only that function's scope. To make it available globally, make sure to declare windowWidth outside of any functions.

A similar adjustment was needed for the variable slideWidth in order to make your demonstration function properly. You can view the revised code in action by visiting:

JSFiddle Demo

Answer 12

By defining the variable windowWidth within a function, you are limiting its accessibility to only that function's scope. To make it available globally, make sure to declare windowWidth outside of any functions.

A similar adjustment was needed for the variable slideWidth in order to make your demonstration function properly. You can view the revised code in action by visiting:

JSFiddle Demo

Answer 13

Answer №7

To ensure your variable is accessible globally, declare it in a global scope

var windowWidth = 0;

$(window).resize(function(){
        windowWidth = $(window).outerWidth();
        return windowWidth;
    })

Answer 14

To ensure your variable is accessible globally, declare it in a global scope

var windowWidth = 0;

$(window).resize(function(){
        windowWidth = $(window).outerWidth();
        return windowWidth;
    })

attempting to access a variable which was initialized within a function in different sections of the code base

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Storing notes using HTML5 local storage

Error with toUpperCase in Select2 on markMatch operation

Enhancing user experience with Bootstrap's body padding and customizable scrollbars

Building a Strong Foundation with Bootstrap's Scaffolding and Mixins

Troubleshooting: jQuery click event not functioning correctly with if-else statement

Unable to access npm run build on localhost

Restore Bootstrap Dropdown values to their initial settings when clicked

AngularJS: Issue with watching arrays and deep $watch functionality

Having difficulty including the Column Name in the Jqgrid footer for sum calculation

React Router Link Component Causing Page Malfunction

Top method for identifying browser window modifications such as navigating back, altering the URL, refreshing, or closing the window

TypeScript multi-dimensional array type declaration

Utilizing Npm modules with a jQuery plugin

How can I transfer a collection of JSON objects from JavaScript to C#?

Verify that the input is zero and then proceed to deactivate the submit button if it is indeed zero in AngularJS

Perform an operation in JQuery after a different operation has been completed

Having issues with the alignment on Bootstrap 4, any suggestions on how to fix it?

Tips for positioning an image next to a list in HTML:

Eliminate Tracking Parameters from URL

What is the best way to create a scrollable screen in React Native?