CSS through jQuery not applied

Question

I am in a process to make a slideshow responsive. I am using simple jQuery to achieve this. My logic is:

If width of window is < 620, make the changes in CSS through jQuery.
else
set default(fixed) css

I have a element who has top:470px fixed css when the window is of normal size. If the size of the window goes below 620, I've changed this to be relative to the image size (which changes on window resize). Here is my code:

function resizeVideo() {
  var width = $(window).width();
  if(width < 620) {
    $('#controls').css('top', $('img').height());
  }
  else {
    $('#controls').css('top', '470');
  }
}
$(window).resize(resizeVideo);

In this way, the controls would stick to the bottom of the image when size is less than 620. Some of the problems which are stopping me right now are:

Whenever I'm maximizing the window from a size which is less than 620, the images scale back to its original sizes, but the #controls element remains at the same height as it was before maximizing.
When I resize the window to a size greater than 620, then too the #controls stay somewhere around 345px when in actual, the height of the image is greater.
Whenever the image in the slideshow changes and I resize the window at that time, the #controls goes at the top of everything, i.e. it doesn't apply the top: property at all.

I have asked all these queries in on single question because all of them are about the #controls element and I believe that fixing one would automatically fix others. Any pointers would be highly appreciated!

Sascha Krause · Accepted Answer · 2013-04-25 10:33:51Z

2

You need the 'px' suffix when manipulating the css via jQuery.

function resizeVideo() {
  var width = $(window).width();
  if(width < 620) {
    $('#controls').css('top', $('img').height()+'px'); // $.height() returns the height without 'px' - so we need to add it manually
  } else {
    $('#controls').css('top', '470px');
  }
}
$(window).resize(resizeVideo);

answered Apr 25, 2013 at 10:33

Sascha Krause

3071 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tim Vermaelen Over a year ago

Make sure you checked it x-browser without "px" to meet business requirements.

Ajit S Over a year ago

Sure. I will have to keep this in mind while testing. Thank you for the tip. +1 :)

Tim Vermaelen · Accepted Answer · 2013-04-25 10:38:52Z

1

Think you have to wrap a closure function inside .resize() e.g. $(window).resize(function(){ resizeVideo(); });.

Also because the function resizeVideo is not a reference you will have to call it with ()

For the jquery .css() function they've made some css hooks you can use without strings so to apply css it will be: $('#controls').css({top: 470 + "px"});

edited Apr 25, 2013 at 10:38

answered Apr 25, 2013 at 10:33

Tim Vermaelen

7,0792 gold badges27 silver badges39 bronze badges

Collectives™ on Stack Overflow

CSS through jQuery not applied

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related