When the window is resized, the css('position') method may return undefined

Question

When the window is resized, the css('position') method may return undefined

Here is the code I am using to detect the browser resize event:

 window.onresize = function(){
 var style = $('#button-selection').css('position');
 if(style == "relative"){
 $("#button-section").css("position"," ");
 }else if(style == "fixed"){
    $("#button-section").css("position","relative");
 }              
 };

When I run this code, the style returns undefined. I have tried running it when the document is ready as well as using window ready, but the result is the same. Both methods still return undefined!

jquery css

Answer 1

Answer №1

Modify this:

var style = $('#button-selection').position();

to this:

var style = $('#button-selection').css('position');

.position() retrieves the element's coordinates.

According to the documentation:

Retrieve the current coordinates of the first matched element, relative to the offset parent.

Update:

Replace $(window).resize() with this instead. I have a test scenario here: in this code snippet.

$(window).resize(function () {
  var style = $('button').css('position');
  if (style == "relative") {
    alert('relative');
  } else if (style == "fixed") {
    alert('fixed');
  }
});

Answer 2

Modify this:

var style = $('#button-selection').position();

to this:

var style = $('#button-selection').css('position');

.position() retrieves the element's coordinates.

According to the documentation:

Retrieve the current coordinates of the first matched element, relative to the offset parent.

Update:

Replace $(window).resize() with this instead. I have a test scenario here: in this code snippet.

$(window).resize(function () {
  var style = $('button').css('position');
  if (style == "relative") {
    alert('relative');
  } else if (style == "fixed") {
    alert('fixed');
  }
});

Answer 3

Answer №2

According to the jQuery documentation, the .position() method is used to retrieve the current coordinates of the first element within a set of matched elements, relative to its offset parent.

It is recommended to utilize the following code snippet:

var position = $('#button-selection').position();

Answer 4

According to the jQuery documentation, the .position() method is used to retrieve the current coordinates of the first element within a set of matched elements, relative to its offset parent.

It is recommended to utilize the following code snippet:

var position = $('#button-selection').position();

When the window is resized, the css('position') method may return undefined

Answer №1

According to the documentation:

Update:

Answer №2

Similar questions

I aim to arrange three div elements in a single row with varying widths - placing one on the left, another in the center, and the last

Utilizing the jQuery plugin JFormSlider to conceal a specific slide

Acquiring JSON data within a JavaScript function using PHP

gmap3 has encountered an error: undefined is not a valid function

Is there a way to incorporate both duration and easing effects when using slideToggle()?

How can CSS be used to create columns with text of different sizes?

What steps can be taken to modify this jQuery code so that any changes made are also saved to localStorage

What is the best way to modify the selection text background with CSS?

Is there a way for me to store the output of an AJAX call?

The JQuery-AJAX script in my Django application, intended to show a preset value in a calculated field, is not functioning as expected

When working with a set of objects, consider utilizing jQuery's InArray() method to effectively handle

Rotate the image as you hover your cursor over it

Using Custom .woff Format Fonts in Sendgrid: A Guide

Add class or id dynamically when clicked

Encoding data into JSON and creating interactive charts with Highcharts

Using jQuery to retrieve the text content of child elements

The rating and comment section is failing to adapt to smaller screens, creating a terrible user experience

2 column setup in the last row of a CSS grid

The vanishing act: Semantic UI menu disappears when you click

Retrieve the present value from a Selectpicker using jQuery within the Codeigniter Framework