Using jQuery to verify a CSS property of an element upon window resizing

Question

Using jQuery to verify a CSS property of an element upon window resizing

Is it possible to include a window resize function in this code?

jQuery(document).ready(function($){         
    var $MyDiv1 = $('#mydiv1');
        if ($MyDiv1.length && $MyDiv1.css('position') == 'fixed') { 
           console.log ( '#mydiv1 is fixed' );      
        } else {    
           console.log ( '#mydiv1 is not fixed' );      
        }       
 });

The current setup only works if the page is refreshed after resizing. I would like to continuously check whether MyDiv1's position is fixed or not while the window is being resized. Any help would be appreciated. Thank you.

javascript jquery html css

Answer 1

Answer №1

$(document).ready(checkIfFixed);
$(window).on('resize', checkIfFixed);

function checkIfFixed() {
    var $myDiv = $('#myDiv');
    if ($myDiv.length && $myDiv.css('position') == 'fixed') { 
        console.log('#myDiv is fixed');      
    } else {    
        console.log('#myDiv is not fixed');      
    }   
}

Another method involves triggering one event within another:

$(window).on('resize', function() {
    var $myDiv = $('#myDiv');
    if ($myDiv.length && $myDiv.css('position') == 'fixed') { 
        console.log('#myDiv is fixed');      
    } else {    
        console.log('#myDiv is not fixed');      
    }  
});
$(document).ready(function() {
    $(window).trigger('resize');
});

If you place your code at the end of the page to avoid using $(document).ready, it becomes even simpler:

$(window).on('resize', function() {
    var $myDiv = $('#myDiv');
    if ($myDiv.length && $myDiv.css('position') == 'fixed') { 
        console.log('#myDiv is fixed');      
    } else {    
        console.log('#myDiv is not fixed');      
    }  
}).trigger('resize');

Source : jQuery combine .ready and .resize

Answer 2

$(document).ready(checkIfFixed);
$(window).on('resize', checkIfFixed);

function checkIfFixed() {
    var $myDiv = $('#myDiv');
    if ($myDiv.length && $myDiv.css('position') == 'fixed') { 
        console.log('#myDiv is fixed');      
    } else {    
        console.log('#myDiv is not fixed');      
    }   
}

Another method involves triggering one event within another:

$(window).on('resize', function() {
    var $myDiv = $('#myDiv');
    if ($myDiv.length && $myDiv.css('position') == 'fixed') { 
        console.log('#myDiv is fixed');      
    } else {    
        console.log('#myDiv is not fixed');      
    }  
});
$(document).ready(function() {
    $(window).trigger('resize');
});

If you place your code at the end of the page to avoid using $(document).ready, it becomes even simpler:

$(window).on('resize', function() {
    var $myDiv = $('#myDiv');
    if ($myDiv.length && $myDiv.css('position') == 'fixed') { 
        console.log('#myDiv is fixed');      
    } else {    
        console.log('#myDiv is not fixed');      
    }  
}).trigger('resize');

Source : jQuery combine .ready and .resize

Answer 3

Answer №2

Below are two ways to handle window resize events using javascript:

$(window).on('resize', function(){
 //code here
});

or alternatively:

window.onresize = function() {
 //code here
}

COMPLETE CODE:

function checkDivPosition(){ 
    var $MyDiv1 = $('#mydiv1');
    if ($MyDiv1.length && $MyDiv1.css('position') == 'fixed') { 
       console.log ( '#mydiv1 is fixed' );      
    } else {    
       console.log ( '#mydiv1 is not fixed' );      
    }
}
jQuery(document).ready(function($){         
  checkDivPosition();
});
window.onresize = function() {
  checkDivPosition();
}

Answer 4

Below are two ways to handle window resize events using javascript:

$(window).on('resize', function(){
 //code here
});

or alternatively:

window.onresize = function() {
 //code here
}

COMPLETE CODE:

function checkDivPosition(){ 
    var $MyDiv1 = $('#mydiv1');
    if ($MyDiv1.length && $MyDiv1.css('position') == 'fixed') { 
       console.log ( '#mydiv1 is fixed' );      
    } else {    
       console.log ( '#mydiv1 is not fixed' );      
    }
}
jQuery(document).ready(function($){         
  checkDivPosition();
});
window.onresize = function() {
  checkDivPosition();
}

Using jQuery to verify a CSS property of an element upon window resizing

Answer №1

Answer №2

Similar questions

Removing an individual HTML element within a form using JavaScript Fetch() in the presence of multiple components

Making a form select element responsive within a bootstrap 4 card component

Utilizing base64_encode versus json_encode to pass encoded data through a hidden input

Transmitting HTML content to the browser from the client using Node.js

I am looking to customize the color of my Material UI switch

Assessing the usage of $parse in a directive within an ng-repeat loop in Angular version 1.4.5

Code behind implementing a new System.Drawing.Font

Issue with window.localStorage.setItem not functioning properly on mobile devices

Using jqGrid with the jQuery.get() method

Preventing direct URL access with Angular redirects after refreshing the page

Need Some Help Reversing the Direction of This CSS Mount Animation?

Is there a way to use HTML and CSS to switch the style of a dynamic decimal number to either Roman numerals or Katakana characters within a specified HTML element, such as a tag, div

Bootstrap creates a small and calculated width for elements

"Experiencing a problem with Next.js 13 where the User Context is not functioning properly outside of _app

Creating pagination in Vue using an array of objects

A guide on transferring documents between collections using Mongoose and MongoDB

Can you identify the issue with this jQuery code snippet?

Issue encountered: ENOENT - There is no file or directory located at the specified path for ... .steampath

Limiting the draggable element within a compact container using jquery UI

Tips on utilizing the identical template in ngIf