Set CSS properties on load with jQuery

Question

I have some elements on my website that need to be updated every time page is being scrolled or resized. So I made a small jQuery code to do that.

$(window).scroll(function(){
    setSlideshowButtons();
});

$(window).resize(function() { 
    setSlideshowButtons();
});

function setSlideshowButtons() {
    var size = $(".slides img").height(); 
    $(".navigation_buttons").css("margin-top", "-" + size/2 + "px");
}

And so far everything worked great. But than I found out that I also have to set those properties on document load. So I also put this in the document.ready function.

$(document).ready(function(){
    setSlideshowButtons();
});

But it doesn't seem to work. But when I scroll or resize the window, function runs itself and CSS properties change.

Praveen Kumar Purushothaman · Accepted Answer · 2015-08-14 11:01:36Z

1

If you are doing any manipulations like creating a Slide Show and manipulating them, then you need to execute the setSlideshowButtons() function after the plugin's initialization has been called.

Say, example:

$(document).ready(function () {
    $(".slider").slider({
      option: value,
      option: value
    });
    // Place it after the init.
    setSlideshowButtons();
});

answered Aug 14, 2015 at 11:01

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

1 Comment

orglce Over a year ago

Yeah, that was it. Thanks a lot.

Praveen Kumar Purushothaman · Accepted Answer · 2015-08-21 07:32:53Z

0

Looks like image still doesn't load, on document ready. Try to re-call function on image load.

var img = $(".slides img");
    img.onload = setSlideshowButtons;

edited Aug 21, 2015 at 7:32

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

answered Aug 14, 2015 at 11:09

Daria

2761 gold badge3 silver badges13 bronze badges

1 Comment

Praveen Kumar Purushothaman Over a year ago

That's not the issue.

Praveen Kumar Purushothaman · Accepted Answer · 2015-08-21 07:32:59Z

0

$(document).ready(function(){
    var size;
    var setSlideshowButtons = function () {
      size = $(".slides img").height(); 
      $(".navigation_buttons").css("margin-top", "-" + size/2 + "px");
    }
    setSlideshowButtons();
    $(window).on('resize scroll', setSlideshowButtons);
});

edited Aug 21, 2015 at 7:32

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

answered Aug 14, 2015 at 11:01

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

1 Comment

Praveen Kumar Purushothaman Over a year ago

That's not the issue.

Collectives™ on Stack Overflow

Set CSS properties on load with jQuery

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related