"JQuery code causing window width to display only when viewport is being resized, not upon initial page

Question

"JQuery code causing window width to display only when viewport is being resized, not upon initial page

I am currently facing an issue where the viewport width is not being displayed on page load. Does anyone know what might be causing this problem and how it can be resolved?

function onViewWidthChange() {
    var viewWidth = $(window).width();
    console.log(viewWidth);
    if (viewWidth > 776) {
        $("area[data-toggle]").click(function(e) {
            e.preventDefault();  // prevent navigating
            var selector = $(this).data("toggle");  // get corresponding element
            $(".detail-box").hide();
            $(".detail-box"+selector).show().addClass('animated fadeIn');
        });
    }
}

$(window).on('load, resize', onViewWidthChange);

javascript jquery html css

Answer 1

Answer №1

Using a comma as a separator is not necessary. The elements can be separated by space and it will still work. For more information, please visit the following link.

$(window).on('load resize', mobileViewUpdate);

Answer 2

Using a comma as a separator is not necessary. The elements can be separated by space and it will still work. For more information, please visit the following link.

$(window).on('load resize', mobileViewUpdate);

Answer 3

Answer №2

You might be invoking this function inside a ready handler, which means the window has already finished loading and the window load event has been triggered.

Therefore, adding a load event listener at that moment will never execute.

Answer 4

You might be invoking this function inside a ready handler, which means the window has already finished loading and the window load event has been triggered.

Therefore, adding a load event listener at that moment will never execute.

"JQuery code causing window width to display only when viewport is being resized, not upon initial page

Answer №1

Answer №2

Similar questions

Assign values to the 'files' property of a Grunt task configuration using a custom function

The issue of a property name not existing on a type in Typescript and Angular2

Transforming JSON data in Node JS according to the city

What is the best way to select an element with a dynamic ID in jQuery?

Disable other actions during jquery change event validation

ngBlur functions correctly only when focused element is tabbed out of

Transform every occurrence of http:// to https:// with the help of jQuery or Javascript

Utilize import and export statements to transfer an HTML tag between two JavaScript files

How to align two divs in CSS when they are not always both present

Using Django templating, you can incorporate other templates with the `

The anonymous function in the Google strategy is not being executed

Incorporate a fresh element into an object after its initial creation

AngularJS directive doesn't refresh template when scope values are fetched dynamically through ajax requests

Combining arrays of JSON Objects and organizing them with Javascript

Filter out specific fields from an object when populating in MongoDB using the aggregate method

What could be causing the Ioncol not triggering the Onclick event?

Using jQuery to access specific elements within the DOM by navigating through the document structure

Using ASP.NET MVC, pass a list of values separated by commas to an action method

Error: The dynamic selection function is experiencing an issue where it is unable to read the "map" property of an undefined

Restrict the maximum character count within a TextArea using jQuery