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.