dynamic css using jquery width() and on() method

Question

$(document).on(".wrapper-parallax", function(){
    var height = $(window).width() / 8; 

    $(this).css("margin-top",height);
}

this code seem doesn't run in 'real time', I want the result (margin-top's value) to change along I resizing the window.

I think you are trying var height = $(window).height() / 8; instead. — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Dec 17, 2013 at 9:04

Arun P Johny · Accepted Answer · 2013-12-17 09:04:56Z

3

You need to write a window resize handler

$(window).resize(function () {
    var height = $(window).width() / 8; //may be height() here instead of width()
    $(".wrapper-parallax").css("margin-top", height);
}).resize()

answered Dec 17, 2013 at 9:04

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

Bhojendra Rauniyar Over a year ago

I've never seen like that: $(window).resize(....).resize() can you explain about it?

Arun P Johny Over a year ago

@C-link that is to call the resize handler on initialization so that when the page loads you will have the correct value set..

codingrose · Accepted Answer · 2013-12-17 09:05:48Z

0

You are missing trailing px

Try:

$(document).on(".wrapper-parallax", function(){
    var height = $(window).width() / 8; 
    $(this).css("margin-top",height+"px");
}

answered Dec 17, 2013 at 9:05

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

Comments

Ringo · Accepted Answer · 2013-12-17 09:06:32Z

0

Try this:

$(window).resize(function(){
    var height = $(this).height() / 8; 

    $('.wrapper-parallax').css("margin-top", height + 'px');
}

answered Dec 17, 2013 at 9:06

Ringo

3,9873 gold badges25 silver badges38 bronze badges

Collectives™ on Stack Overflow

dynamic css using jquery width() and on() method

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related