Jquery toggle not working with slider

Question

I have a div that is hidden until clicking on a link and then it toggles into view. My code was working fine until I implemented a larger piece of javascript to implement a slider that eases back and forth with mouse movement within the hidden div. My question is how can I combine these two codes (the old and the new) effectively. Right now, I can only get everything to work correctly if the div is not hidden.

$("#media").click(function () {
     $("#mediadetails").toggle(2000, function() {
});
$("#mediaclose").click(function() {
     $("#mediadetails").toggle(2000);
})

javascript for slider

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$mediadetails = $("#mediadetails");
$thumbScroller = $("#thumbScroller");
$thumbScroller_container = $("#thumbScroller .container");
$thumbScroller_content = $("#thumbScroller .content");
$thumbScroller_thumb = $("#thumbScroller .thumb");

$(window).load(function() {

    sliderLeft = $thumbScroller_container.position().left;
    padding = $mediadetails.css("paddingRight").replace("px", "");
    sliderWidth = $(window).width() - padding;
    $thumbScroller.css("width", sliderWidth);
    var totalContent = 0;

    //get content width
    $thumbScroller_content.each(function() {
        var $this = $(this);
        totalContent += $this.innerWidth();
        $thumbScroller_container.css("width", totalContent);
    });

    //content scrolling
    $thumbScroller.mousemove(function(e) {
        if ($thumbScroller_container.width() > sliderWidth) {
            var mouseCoords = (e.pageX - this.offsetLeft);
            var mousePercentX = mouseCoords / sliderWidth;
            var destX = -(((totalContent - (sliderWidth)) - sliderWidth) * (mousePercentX));
            var thePosA = mouseCoords - destX;
            var thePosB = destX - mouseCoords;
            var animSpeed = 900; //ease amount
            var easeType = "easeOutCirc";
            if (mouseCoords > destX) {
                //$thumbScroller_container.css("left",-thePosA);
                //without easing
                $thumbScroller_container.stop().animate({
                    left: -thePosA
                }, animSpeed, easeType);

                //with easing
            } else if (mouseCoords < destX) {
                //$thumbScroller_container.css("left",thePosB); //without easing
                $thumbScroller_container.stop().animate({
                    left: thePosB
                }, animSpeed, easeType);

                //with easing
            } else {
                $thumbScroller_container.stop();
            }
        }
    });

    //thumbnails mouse over/out & initial state
    var fadeSpeed = 200;

    $thumbScroller_thumb.each(function() {
        var $this = $(this);
        $this.fadeTo(fadeSpeed, 0.4);
    });

    $thumbScroller_thumb.hover(

    function() { //mouse over
        var $this = $(this);
        $this.fadeTo(fadeSpeed, 1);
    }, function() { //mouse out
        var $this = $(this);
        $this.fadeTo(fadeSpeed, 0.4);
    });
});

//browser resize
$(window).resize(function() {
    //$thumbScroller_container.css("left",sliderLeft); //without easing
    $thumbScroller_container.stop().animate({
        left: sliderLeft
    }, 400, "easeOutCirc"); //with easing
    var newWidth = $(window).width() - padding;
    $thumbScroller.css("width", newWidth);
    sliderWidth = newWidth;
});
    </script>

Answer 1

According to my knowledge JavaScript not working for hidden content.That's why it works for unhidden content. so we need to unhide div before your large scripts take place.

Okay Try this, Change your larger scripts $(window).load(function() {//your script}); to any function as for example function my_slider(){//your script} (this will disables the executing slider at document load) And call that function inside your toggling script like

$("#media").click(function () {
     $("#mediadetails").toggle(2000, function() {
my_slider();
});
$("#mediaclose").click(function() {
     $("#mediadetails").toggle(2000);
})

What we did is rather calling your slider onload we execute it, once you click the hidden div to unhide.

Try this if it make sense to you