Jquery calculation with variables

Question

Hi guys got a problem hopefully you can help,

var imageHeight = $("#slider > Img").height();
var imageFloat = (imageHeight + 31 / 2);

alert(imageFloat);

$("#slidernavright").css("marginTop",(imageFloat));

Can anyone see the issue here, the alert on imageFloat is bringing back a value of 15.5 which means the imageHeight is not being accounted for, The variable imageHeight is working and retrieving the correct number of the height image, also the margin is working and the div tag is being moved down by 15.5px. Dont know much about jQuery, I think this is just a syntax issue.

Have you tried with a lower case I ? $("#slider > img").height(); — arkihillel
– arkihillel, Commented Oct 24, 2013 at 21:45
So if you replaced alert(imageFloat); with alert(imageHeight);, it produces a number other than 0? — Dan Goodspeed
– Dan Goodspeed, Commented Oct 24, 2013 at 21:45

Blazemonger · Accepted Answer · 2013-10-24 21:53:00Z

1

Are you computing this before or after window.onload? If the image hasn't completely loaded yet, jQuery can't retrieve the height.

window.onload = function() {
  var imageHeight = $("#slider > img").height();
  var imageFloat = (imageHeight + 31 / 2); // perhaps you meant (imageHeight+31)/2 ?
  $("#slidernavright").css("marginTop",imageFloat);
};

edited Oct 24, 2013 at 21:53

answered Oct 24, 2013 at 21:46

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

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

2 Comments

Aaron Prowse Over a year ago

erm not too sure but tried this didnt work I am loading the document like this ?$(document).ready(function(){ $("#slider > Img#1").fadeIn(500); startSlider(); sliderControl(); controlHeight(); });

Blazemonger Over a year ago

The document is ready before the images are loaded - you have to wait for the window to load. You can also tie it to just the image load, but there are tricks to be careful of; window.onload is easier.

Blue Skies · Accepted Answer · 2013-10-24 21:56:24Z

0

Most likely the img isn't fully loaded, so its height is 0.

To fix it, put an onload handler on the img. And also, check to see if it is cached using the .complete property, and of so, invoke the handler manually.

$("#slider > Img")
    .on("load", function() {
        var imageHeight = $(this).height();
        var imageFloat = (imageHeight + 31 / 2);

        alert(imageFloat);

        $("#slidernavright").css("marginTop",(imageFloat));
    })
    .filter(function() { return this.complete; })
    .trigger("load");

And keep in mind that / has higher precedence than +, so this:

var imageFloat = (imageHeight + 31 / 2);

is doing this:

var imageFloat = (imageHeight + (31 / 2));

instead of this:

var imageFloat = ((imageHeight + 31) / 2);

edited Oct 24, 2013 at 21:56

answered Oct 24, 2013 at 21:49

Blue Skies

2,99520 silver badges19 bronze badges

4 Comments

Aaron Prowse Over a year ago

this is working as such but imageHeight is producing the value of 991 which is like the size of the whole document and not the size of the #slider > Img

Blue Skies Over a year ago

@AaronProwse: Did you try my updated answer? I made it simpler. $(this).height() should give you the height of the image.

Aaron Prowse Over a year ago

working thanks mate :) much appreciated! is there away of adapting this so that the imageFloat is dynamic and updated everytime the image size changes without refresh? because the slider image basically stretches to the screen so is that possible to have the margin top adjusting for browser size change difference without refreshing?

Blue Skies Over a year ago

@AaronProwse: You mean like if the user adjusts the window size? If so, then put a "resize" handler on window that runs the same code. It will run as the user resizes the window.

HC_ · Accepted Answer · 2013-10-24 21:47:34Z

0

Are you SURE imageHeight is being calculated properly? I just tested it with imageHeight = 5 and it worked fine for me, even without the order of operations stuff.

answered Oct 24, 2013 at 21:47

HC_

1,08011 silver badges24 bronze badges

Comments

zero323 · Accepted Answer · 2013-10-24 22:25:10Z

0

try using something like parseInt() -- var * = parseInt(imageHeight);

This will give the actual int value, usually when you get values like this .height() they return the string representation of the value and not the actual int value. I had an issue with this a few days ago.

edited Oct 24, 2013 at 22:25

zero323

331k108 gold badges982 silver badges958 bronze badges

answered Oct 24, 2013 at 22:01

user2917770

1

Collectives™ on Stack Overflow

Jquery calculation with variables

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related