Doubke marquee div by JavaScript

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Himelchowdhury
    New Member
    • Nov 2014
    • 2

    Doubke marquee div by JavaScript

    I want to create a code like including two div
    First div will lunch by marquee style left to right 300px when a person click on open then I want to open menus inside div with marquee style.
    I want menus will appear after 5 second of first div appearance. I create the code but I cant set up the delaying of menu
    I mean all contents are starting at one time
    Code:
    <!DOCTYPE html>
    <html>
    <head><style>body{background-color:black; color:white;}.cdv{background-color:gray; width:200px; height:40px; font-size:20px; border-bottom:1px outset red; border-bottom-right-radius:2em; padding:5px 10px 0px;}
    .csv{width:300px; height:30px; font-size:10px; padding:10px 0px 0px;}</style>
    <meta charset="ISO-8859-1">
    <script type="text/
    javascript">
    function expandCollapse(showHide) {
    var hideShowDiv =document.getElementById(showHide);
    var label =
    document.getElementById("expand");
    if (hideShowDiv.style.display =='none') {
    label.innerHTML= label.innerHTML.replace("[+]", "[-]");
    hideShowDiv.style.display = 'block';} else {
    label.innerHTML= label.innerHTML.replace("[-]", "[+]");
    hideShowDiv.style.display = 'none';
    }
    }
    </script>
    <title>Expand collapse
    sample</title>
    </head>
    <body>
    <div>
    <div style="background-color:black; width:100px; height:20px; padding:0px 0px 0px; color:aqua;" onclick="expandCollapse('showHide
    ');" id="expand">[+]Open Tray 
    </div>
    </div>
    <div id="showHide"
    style="display: none; height:0px;">
    <marquee behavior="slide" direction="right" scrollamount="5" loop="1"><div style="height:600px; border-right:3px solid red; border-top:1px solid red; border-bottom:18px inset red; width:200px; background-color:white; border-bottom-right-radiis:2em; border-top-right-radius:2em; "><marquee behavior="slide" direction="right" scrollamount="5" loop="1"><div class="cdv">Hello</div></marquee><hr color="red" align="center" width="150"><a href="onclick.html"><div class="csv"><b>Onclick</b></div></a></marquee></div>
    </div>
    </body>
    </html>
    <div style=""><b>Top content should go through into this <hr/></b></div>
    
    
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html>
    <body>
    
    <p>Click "Try it". Wait 3 seconds. The page will alert "Hello".</p>
    
    <button onclick="setTimeout(function(){alert('Hello')},3000);">
    Try it</button>
    
    </body>
    </html>
    Last edited by Himelchowdhury; Jan 29 '15, 01:09 PM. Reason: Code set up
Working...