jQuery - margin-top not updating in chrome

Question

I'm trying to animate some IMG elements by updating the top margin with some simple maths.

It goes like this:

$('.spd2').css('margin-top', - offsetPC * 12 + '%');

It is applyed to IMGs like this:

<img src="img/pgDadosImportantes_i001.png" class="spd1" 
    style="right: 30%; top: 45%; z-index:10;" />

With this style set in css doc:

.ilustras {
    width: 960px;
    height: 100%;
    position: absolute;
    z-index: 0;
}

.ilustras img {
    position: absolute;
    float: right;
    width: auto; 
    height: auto;
    display: inline-block;
}

It works in Firefox and IE very well. The problem is that in chrome, the value of margin-top is not being updated.

I tried several changes to all involved elements, changing attributes as position, float, width, height, display... and chaned some ways of naming marginLeft, margin-left in jQuery.

Nothing is working with Chrome. If I apply a static number it works.

I have a sample here:

http://unitfour.com.br/HotsiteCluster/

Apreciate any help!!

*sorry about my english and my code... I'm a Brazilian Designer working out both!

$('.spd1').css('margin-top', - offsetPC * 12 + '%'); you should write this in your jquery script, as in img tag you have given class="spd1" — Rohit O, Jul 19 '12 at 15:46
Debugging the offsetPC var, Google Chrome is the only one that returns "infinity". — Fabio Montone, Jul 19 '12 at 18:07
@FabioMontone: Can you tell us where offsetPC is set and what value it has? — T. Junghans, Jul 20 '12 at 10:36
@TJ. It was set and the value was variable depending on the percentage of the page scroll. But It was not showing in Webkit (Chrome / Safari) because - in a strange fashion - they don't get scrollTop(); values. I've solved the problem using **bold**window.pageYOffset**bold** to compose my vars. Hope that help other people! Thank you all for helping! — Fabio Montone, Jul 23 '12 at 15:05

score 0 · Answer 1 · answered Jul 20 '12 at 10:46

0

Try something like :

$('.spd2').css('margin-top', ((parseInt($('.spd2').css('margin-top')) - offsetPC) * 12) + '%');

And tell us if it is OK.

answered Jul 20 '12 at 10:46

sdespont

13,915
9
56
97

score 0 · Accepted Answer · edited Jul 24 '12 at 08:03

0

It was not showing in Webkit (Chrome / Safari) because - in a strange fashion - they don't get scrollTop(); values. I've solved the problem using window.pageYOffset to compose my vars. Hope that help other people! Thank you all for helping!

edited Jul 24 '12 at 08:03

Druid

6,423
4
41
56

answered Jul 23 '12 at 15:07

Fabio Montone

39
2
10

Adding to your solution, this post may help to explain why scrollTop does not work: http://stackoverflow.com/questions/1830080/jquery-scrolltop-doesnt-seem-to-work-in-safari-or-chrome-windows – T. Junghans Jul 23 '12 at 19:03

jQuery - margin-top not updating in chrome

2 Answers2