slideshow height changing on refresh with jquery slideshow

here's an interesting one for you all!

My pages are loading a slideshow made using jquery cycle plugin absolutely fine. The slideshows have a variable height so I had to use some code to assess the height of each slide and resize the slideshow wrapper accordingly (as chrome was having a problem)

so it all works fine when you load the page - when you do that the inherited height of the slideshow is lost - so any text in the page below the slideshow moves up the page and behind the slideshow - only seems to be an issue with the first slide though, as it corrects itself after that...

here's an example page (please don't judge the rest of my code - this is just a development site, I know if needs cleaning up!!) - the text underneath (with the soundcloud embed) the image is the bit that's affected by the slide height. http://www.frootful.co.uk/index-z.php/?p=7

and here's the code making the slideshow work (there's some play/pause functions in there too)

<script type="text/javascript">     
$(document).ready(function() {
    $('#toggle').bind("click", function() {
    if ($(this).attr("class") == "play")
    $(this).attr("class", "pause");
    else
    $(this).attr("class", "play");
}); 
var toggle = $('#toggle').click(function() {
    var paused = slideshow.is(':paused');
    slideshow.cycle(paused ? 'resume' : 'pause', true);
}); 
var slideshow = $('#slideshow').cycle({
        fx:      "fade",
        pager:   "#single-slideshow-nav",
        timeout:  4000,
        prev:    "#prev",
        next:    "#next",
           after: onAfter,
        pause: true
    });
}); 
function onAfter() {
    //get the height of the current slide
    var $ht = $('.slidewrap').height();
    //set the container's height to that of the current slide
    $("#slideshow").height($ht);
} 
</script> 

My javascript isn't great, so if people could explain开发者_如何学编程 answers that would be doubly helpful!

Thanks

EDIT -----------

added a better example page (http://www.frootful.co.uk/index-z.php/?p=7), as mentioned above the bit of text underneath is the bit thats beign affected by the slide height...

---

(At the time of answering.) Your example page doesn't contain any slides, nor any div called toggle.

Your JavaScript contains two $(document).ready blocks both of which try to setup click handlers for #toggle (even though that doesn't exist.) You could/should probably merge these into one code block.

I'm guessing the paused and resumed functions are meant to return a value, so you need to add a return to them both. (i.e. return !byHover; if that's what you meant)

What else? I guess you could try using add/remove/toggleClass instead of manipulating classes through attr, but I doubt that'll make a difference.