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.
j2isndhuAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Apple OS

From novice to tech pro — start learning today.