Slidetoggle + external html : Jquery load() + scroll issues

Question

This is the Script part with the issues

<script type="text/javascript">

// To deploy big preview vertically :
var deployer;
deployer = "";

function deploy() {
    $("#" + deployer.substring(0, 4)).slideToggle({
        duration: 500,
        easing: 'easeOutCirc'
    });
}

function reset(bigno) {
    var attendre = false;
    var deployno = deployer.substring(0, 4);
    // close other pictures if opened
    if ((deployer == deployno + "_on") && (deployno != bigno)) {
        $("#" + deployno).slideToggle({
            duration: 300,
            easing: 'easeOutCirc'
        });
        attendre = true;
    }
    // if picture is opened or closed
    if (deployer == bigno + "_on") // if bigno is deployeddeployer = bigno + "_off"; // bigno closed
    else deployer = bigno + "_on"; // bigno opened
    // deploy the current picture
    if (attendre) setTimeout(deploy, 600);
    else deploy();
}
$(document).ready(function() {
    $(".vignette01").click(function() {
        reset("big1");
        return false;
    });
    $(".vignette02").click(function() {
        reset("big2");
        return false;
    });
    $(".vignette03").click(function() {
        reset("big3");
        return false;
    });
    $(".vignette04").click(function() {
        reset("big4");
        return false;
    });
});
$("#big1").toggle(false);
$("#big2").toggle(false);
$("#big3").toggle(false);
$("#big4").toggle(false);
// To scroll :
$(document).ready(function() {
    $('html, body').animate({
        scrollTop: $('div#topdocpart').offset().top
    }, 800, 'easeOutCirc');
});
$(function() {
    $('.vignette a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1000, 'easeOutCirc');
        event.preventDefault();
    });
});
//load pages on click on small preview open a html content in #bigonglet
$(document).ready(function() {
    $('.vignette2 a').click(function() {
        var url = $('.onglet2 a').attr('href');
        $('#bigonglet').load(url);
        return false;
    });
    $('.vignette1 a').click(function() {
        var url = $('.onglet1 a').attr('href');
        $('#bigonglet').load(url);
        return false;
    });
});
</script>

I have an issue i can't solve by myself. I lost half of my hair last night trying to solve it ;). if any NIIIIIIIIICE (and talented) person on this website could help me it should be very cool. I try to make a kind of image gallery in jQuery ...

A preview (don't click on the links page1 and page2)

The main idea is to deploy vertically with slidetoggle some contents loaded in some external html pages . You can see it is not working.

1- how to have a delay before the html contents appears ?

• to wait the slidetoggle is deployed or to define a delay

2- how :

• to close the current html content already opened when i reclick on its button ?
• to close the current html content already opened and open a new one ?

As you see there is also a scroll function (which scroll to each big preview on click).

- so how to regroup those 3 actions on each button ?

scroll, slidetoggle, load an external html with a delay.

Thank you very much for your help. I try very hard but my level is low.

(This is the html if needed)

<!-- Part Top div -->
        <div class="part" id="topdocpart"></div>
<!-- Header -->
<div id="header">
        <!-- the href of .onglet is loaded in #bigonglet -->
        <ul>
           <li class="onglet onglet1"><a href="creations/page01.html">Page1</a></li>
           <li class="onglet onglet2"><a href="creations/page02.html">Page2</a></li>
        </ul>

        <!-- this div load the iframe content-->
        <div id="bigonglet"></div>

        <!-- those div allows to slide vertically -->   
        <div class="part" id="part1" style='position:absolute; top:160px;'></div>
        <div class="part" id="part2" style='position:absolute; top:340px;'></div>   


</div>


<!-- main section -->

<div id="globalcontent">
    <div id="content">

    <!-- Row 01 : small preview -->

        <div class="rowsmallpreview">
            <div class="vignette vignette1">
            <a href="#part1" class="vignette01"><img  src="imbdg/badge01.jpg" width="236" height="130" alt="work01" /></a>            
            </div>

            <div class="vignette vignette2">
            <a href="#part1" class="vignette02"><img  src="imbdg/badge02.jpg" width="236" height="130" alt="work01" /></a>            
            </div>
        </div>

        <!-- Row 01 : big preview to hide (up and down)-->

        <div id="big1" class="workview"></div>
        <div id="big2" class="workview"></div>


    <!-- Row 02 -->

        <div class="rowsmallpreview">
            <div class="vignette">
            <a href="#part2" class="vignette03"><img  src="imbdg/badge03.jpg" width="236" height="130" alt="work01" /></a>            
            </div>

            <div class="vignette">
            <a href="#part2" class="vignette04"><img  src="imbdg/badge04.jpg" width="236" height="130" alt="work01" /></a>            
            </div>
        </div>

        <!-- Row 01 : big preview to hide (up and down)-->

        <div id="big3" class="workview"></div>
        <div id="big4" class="workview"></div>

    </div>
</div>

---

I made this code :

var deployer;                                                       
        deployer = "";                                                  
        var url ="";


        function deploydown() {
                url = $("#"+deployer.substring(0,6)+' a').attr('href');
                $("#"+deployer.substring(0,6)).slideDown({duration: 700, easing: 'easeOutCirc'}).load(url);
                }



            function reset(bigno) {
                var attendre=false;                                         
                var deployno=deployer.substring(0,6);                           



                if((deployer == deployno+"_on") && (deployno != bigno))                 
                {
                    $("#"+deployno).slideUp({duration: 300, easing: 'easeOutCirc'});    
                    attendre = true;  
                }



                if((deployer == deployno+"_on") && (deployno == bigno))                 
                {
                $("#"+deployno).slideUp({duration: 500, easing: 'easeOutCirc'});   
                    attendre = true;
                }



                if (deployer == bigno+"_on")                    
                    deployer = bigno+"_off";                    
                else
                    deployer = bigno+"_on";                 



                if ((attendre) && (deployno != bigno))                  
                    {
                    setTimeout(deploydown,400);                         
                    }

                else if ((attendre) && (deployno == bigno))         
                    {
                    $("#"+deployer.substring(0,6)); 
                    }


                else
                    {
                    deploydown();
                    }

            }

So now it is loading an external html with load() load(url)

but how to "reset" the loading when it is closed ?

For exemple to swich the current html loaded by an empty one when it slideUp . then
reload the html when it slideDown .

Thanks for your help.

Answer 1

since there is an order of operations... what you can do is:

 $(SELECTOR).slideToggle().load(url);

That way, it will slide open before loading the url. A different example showing order of operations is:

 $(SELECTOR).slideToggle().slideToggle().slideToggle().slideToggle().slideToggle();

which will toggle 5 times in a row.