• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 420
  • Last Modified:

Javascript only seems to work on window resize instead of on browser load

My site has a Jquery cycle slideshow that can change based upon size of the browser window...

I had a problem with the nav appearing behind the slideshow. This javascript fixes the problem but code only tends to fire when the window is resized and not when the browser is loaded. Any assistance would be very much appreciated!

PS: Works fine in Firefox but not in any other browser...

----------HTML----------

<div class="slideshow">
<img src="work/japan_11.03/hope_for_japan_1.jpg" class="a" alt="Japan 11/03: Title page"/>
<img src="work/japan_11.03/hope_for_japan_2.jpg" class="a" alt="Japan 11/03: Land of the rising sun"/>
<img src="work/japan_11.03/hope_for_japan_3.jpg" class="a" alt="Japan 11/03: Fishing for inspiration"/>
<img src="work/japan_11.03/hope_for_japan_4.jpg" class="a" alt="Japan 11/03: A little place called home"/>
<img src="work/japan_11.03/hope_for_japan_5.jpg" class="a" alt="Japan 11/03: Shinkasen"/><img src="work/japan_11.03/hope_for_japan_6.jpg" class="a" alt="Japan 11/03: Getting back into the swing of things"/>
<img src="work/japan_11.03/hope_for_japan_7.jpg" class="a" alt="Japan 11/03: Remembered and not forgotten"/>
</div>

Open in new window


----------Javacript----------

jQuery(function () {
    var resizeTimer = 0;
    $(window).resize(function (evt) {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            onResize(evt);
        }, 200);
    }).trigger('resize');

    function onResize() {
        var slide_img = $(".slideshow img").outerHeight(true);
        //alert(slide_img); // the height of the slide including margin and padding
        $(".slideshow").height(slide_img); // explicitly set the height to the calculated height
    }

    $('.slideshow').after('<div id="nav">').cycle({
        fx: 'fade',
        sync: true,
        speedIn: 500,
        speedOut: 500,
        timeout: 10000,
        pager: '#nav',
        next: '.slideshow',
        slideResize: false

    });
});

Open in new window


Full site here.
0
j2isndhu
Asked:
j2isndhu
  • 5
  • 3
1 Solution
 
GreggCommented:
Might be a dumb question, have you tried calling the code that fixes the nav issue in onload event?
0
 
j2isndhuAuthor Commented:
Sorry, my knowledge is limited to CSS & Html, Javascript is new to me. Your question isn't dumb, could be what is needed?
0
 
GreggCommented:
Good point! My thought was that if you have fixed the issue with onresize(). Do the same in onload(). You can only call one method in the onload event. That might be the same with onresize. Which is why you set it to a function and call any and all methods inside that one function. So it makes me wonder if this could work.

window.onload = function () {
        var slide_img = $(".slideshow img").outerHeight(true);
        //alert(slide_img); // the height of the slide including margin and padding
        $(".slideshow").height(slide_img); // explicitly set the height to the calculated height
    }
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
GreggCommented:
window.onload = function () {
        var slide_img = $(".slideshow img").outerHeight(true);
        //alert(slide_img); // the height of the slide including margin and padding
        $(".slideshow").height(slide_img); // explicitly set the height to the calculated height
    };

i forgot the ending semicolon. i think that is right this time.
0
 
j2isndhuAuthor Commented:
Absolutely works across all browsers! Thanks, you're a true life-saver. Can make my deadline now :)
0
 
GreggCommented:
thanks for kind words! i have to say, i thought the suggestion was too obvious given the code you posted. To me, looks like you are savvy in js.

Great job!
0
 
GreggCommented:
Im curious, do you think its possible that the slide show has a higher zindex than the menu? Could you take a look at CSS and see if that might be the case. If so, that potentially could fix the issue allowing you to remove js fix.
0
 
j2isndhuAuthor Commented:
Credit goes to these guys for the script. I am new to js but I am learning!

The .slideshow div collapses as the elements inside are absolutely positioned, the div is unaware there is anything inside it. The script dynamically calculates the height of the images and assigns that value to the .slideshow div to stop it collapsing.

If I set the slideshow to a fixed width/height I would not need the js but I believe it is needed for me to achieve a resizable slideshow within my fluid CSS layout.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now