Clicky

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>                             
1: 2: 3: 4: 5: 6: 7: 8: 

Select allOpen 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      }); });                             
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 

Select allOpen in new window



Full site here.

asked 12/12/2011 12:50

j2isndhu's gravatar image

j2isndhu ♦♦


8 Answers:
Might be a dumb question, have you tried calling the code that fixes the nav issue in onload event?
link

answered

gregg_s's gravatar image

gregg_s

Sorry, my knowledge is limited to CSS & Html, Javascript is new to me. Your question isn't dumb, could be what is needed?
link

answered 2011-12-12 at 11:54:13

j2isndhu's gravatar image

j2isndhu

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
    }
link

answered 2011-12-12 at 12:21:57

gregg_s's gravatar image

gregg_s

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.
link

answered 2011-12-12 at 12:44:21

gregg_s's gravatar image

gregg_s

Absolutely works across all browsers! Thanks, you're a true life-saver. Can make my deadline now :)
link

answered 2011-12-12 at 12:45:54

j2isndhu's gravatar image

j2isndhu

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!
link

answered 2011-12-12 at 13:14:43

gregg_s's gravatar image

gregg_s

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.
link

answered 2011-12-12 at 16:50:52

gregg_s's gravatar image

gregg_s

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.
link

answered 2011-12-12 at 16:53:35

j2isndhu's gravatar image

j2isndhu

Your answer
[hide preview]

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Tags:

×3
×4

Asked: 12/12/2011 12:50

Seen: 235 times

Last updated: 12/12/2011 05:14