Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

[Javascript] Slide in ombouwen naar slide uit

MichielPH
1 antwoord
  • Ik heb een javascriptje waarmee ik een verborgen <div> box zichtbaar kan laten insliden, waarna hij dus te lezen is door de bezoekers. Ook kan de box weer worden verborgen maar dat gaat niet zoals ik het graag zou willen. Nu wordt namelijk in 1 keer de visibility weer op hidden gezet, terwijl ik hem eigenlijk netjes zou willen laten uitsliden. Ik moet dus de inslide functies initboxv2() en dropinv2() om zien te bouwen naar een precies tegenovergestelde functie, alleen lukt dat niet. Wie helpt?

    # # # # #

    In de <head> staat:

    <?
    <style type="text/css">
    <!–
    #dropinboxv2cover{
    width: 600px;
    height: 90px;
    position:absolute;
    z-index: 100;
    overflow:hidden;
    visibility: hidden;
    }

    #dropinboxv2{
    width: 580px;
    height: 70px;
    background-color: #ffffff;
    padding: 4px;
    position:absolute;
    left: 0;
    top: 0;
    }
    //–>
    </style>

    <script type="text/javascript">
    <!–
    var dropboxleft=0 // Positie van de div (links, in pixels)
    var dropboxtop=0 // Positie van de div (top, in pixels)
    var dropspeed=2 // Snelheid van het binnensliden in pixels

    var ie=document.all
    var dom=document.getElementById

    function initboxv2(){ // De functie die wordt aangeroepen om in te sliden
    if (!dom&&!ie)
    return
    crossboxcover=(dom)?document.getElementById("dropinboxv2cover") : document.all.dropinboxv2cover
    crossbox=(dom)?document.getElementById("dropinboxv2"): document.all.dropinboxv2
    scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
    crossbox.height=crossbox.offsetHeight
    crossboxcover.style.height=parseInt(crossbox.height)+"px"
    crossbox.style.top=crossbox.height*(-1)+"px"
    crossboxcover.style.left=dropboxleft+"px"
    crossboxcover.style.top=dropboxtop+"px"
    crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
    dropstart=setInterval("dropinv2()",5)
    }

    function dropinv2(){ // De eigenlijk slide functie (denk ik)
    scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
    if (parseInt(crossbox.style.top)<0){
    crossboxcover.style.top=scroll_top+dropboxtop+"px"
    crossbox.style.top=parseInt(crossbox.style.top)+dropspeed+"px"
    }
    else{
    clearInterval(dropstart)
    crossbox.style.top=0
    }
    }

    function dismissboxv2(){ // De functie die de div weer laat verdwijnen als je op sluiten knikt.
    if (window.dropstart) clearInterval(dropstart)
    crossboxcover.style.visibility="hidden"
    }

    function truebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    //–>
    </script>
    ?>

    # # # # #

    In de <body> staat:

    <?
    <a href="#" onClick="initboxv2();">Slide in</a>

    <div id="dropinboxv2cover">
    <div id="dropinboxv2">
    Tekst blablabla
    <a href="#" onClick="dismissboxv2();return false">Sluiten</a>
    </div>
    </div>
    ?>

    # # # # #

    De functie dismissboxv2() zou dus moeten worden omgebouw, waarbij hij precies de tegenovergestelde werking krijgt van de functies initboxv2() en dropinv2(). Als ik alles omdraai lukt het me niet om hem werkend te krijgen.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.