www.webdeveloper.com
Results 1 to 4 of 4

Thread: rolling div?

  1. #1
    Join Date
    Jun 2008
    Posts
    136

    rolling div?

    Hi,

    I have some html code similar to this :

    Code:
    <div><div onclick="show_the_div2">click me</div>
    
    <div id="div2">Content</div>
    
    
    </div>

    By clicking that div, the "content div" appears on the screen.
    I want to have the content div, roll down to the screen, instead of appearing out of sudden. like its moves till it shows all the div. and the backward thing, by clicking that this div goes back and hide.

    I hope I was clear enough.
    Any help?

    Thanks

  2. #2
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    i has never used mootools but that framework have some basic effect like slide content. you can see a demo at http://demos.mootools.net/Fx.Slide also, you will find there documentation on how to use it in case you want to try it.
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there asmith20002,

    here is an example for you to try...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>expand and shrink div</title>
    
    <style type="text/css">
    body {
        font-family:sans-serif;
        font-size:0.8em;
        background-color:#fc9;
     }
    #expand {
        width:80px;
        padding:5px;
        border:3px double #999;
        background-color:#fff;
        text-align:center;
        cursor:pointer;
        display:none;
     }
    #container {                             
        width:600px;
        overflow:hidden;
        background-color:#fff;
        margin:auto;
     }
    #container #inner {                      
        padding:10px;
     }
    #container p {
        margin:0;
        padding:10px;
        text-align:justify;
        text-indent:1.5em;
     }
    #container p:first-letter {
        font-family:serif;
        font-size:200%;
        color:#600;
     }
    .brdr {
        border:1px solid #999;
     }
    .go {
        color:#090;
     }
    .stop {
        color:#900;
     }
    </style>
    
    <script type="text/javascript">
    
       var c=0;
       var test=true
       var obj,obj1,obj2,hgt,exp,shr;
       var speed=50;
    
    if(window.addEventListener){
       window.addEventListener('load',init,false);
     }
    else { 
    if(window.attachEvent){
       window.attachEvent('onload',init);
      }
     }
    
    function init(){
       obj=document.getElementById('expand');
       obj1=document.getElementById('container');
       hgt=document.getElementById('inner').offsetHeight;
    
       obj.style.display='block';
       obj1.className='';
       obj1.style.height=0;
    
    obj.onclick=function(){
    if(test==true){
       expandDiv();
       test=false;
     }
    else {
       shrinkDiv();
       test=true;
       }
      }
     }
    
    function expandDiv() {
       clearTimeout(shr);
       obj1.style.height=c+'px';
       obj1.className='brdr';
       obj.firstChild.nodeValue='shrink';
       obj.className='stop';
    
       c+=20;
    if(c>=hgt) {
       c=hgt;
       clearTimeout(exp);
       return;
     }
       exp=setTimeout('expandDiv()',50);
     }
    
    function shrinkDiv() {
       clearTimeout(exp);
       obj1.style.height=c+'px';
       obj.firstChild.nodeValue='expand';
       obj.className='go';
    
       c-=20;
    if(c<0) {
       c=0;
       clearTimeout(shr);
       obj1.style.height=0;
       obj1.className='';
       return;
     }
       shr=setTimeout('shrinkDiv()',50);
     }
    </script>
    
    </head>
    <body>
    
    <div id="expand" class="go">expand</div>
    
    <div id="container" class="brdr">
    <div id="inner">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
    nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
    ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
    ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
    bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
    </p><p>
    Quisque nec enim. Nullam elementum. Quisque rhoncus. Ut cursus, pede sit amet facilisis pretium, 
    est erat congue tortor, eget tincidunt metus augue in mauris. Sed id pede. Nam varius faucibus massa. 
    In orci. Suspendisse metus nunc, egestas non, porta a, fermentum interdum, mi. Nulla vel tellus nec 
    erat consectetuer molestie. Vivamus turpis erat, rhoncus sed, ornare vel, volutpat sagittis, nibh.
    </p><p>
    Nulla libero. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. *** sociis 
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut id mauris eget felis laoreet 
    semper. Maecenas venenatis erat et orci. Aenean interdum ligula sed nisi. Nulla vel lectus eu dolor porttitor 
    tempus. Proin at nisi fringilla pede feugiat luctus. Aenean id risus. Vestibulum a erat ac ipsum fringilla 
    feugiat. Cras mauris.
    </p><p>
    
    Donec lobortis, odio non ultrices commodo, urna eros ornare lectus, quis faucibus nisi nibh sit amet lectus. 
    Nam tristique, velit ac ullamcorper adipiscing, ligula justo ullamcorper augue, ut ullamcorper sem nisi sed 
    dolor. Proin at lectus. Nam sagittis euismod lorem. Vestibulum lobortis viverra sapien. Phasellus euismod, 
    nulla quis posuere convallis, tellus urna tincidunt augue, at gravida nisl diam non mi. Sed at metus. Mauris 
    risus augue, viverra non, varius a, ornare sit amet, dolor. Pellentesque sed est vel nulla dictum pretium. 
    Suspendisse potenti. Quisque rutrum pulvinar magna.
    </p>
    </div>
    </div>
    
    </body>
    </html>
    
    coothead

  4. #4
    Join Date
    Jun 2008
    Posts
    136
    Thanks a lot for the replies

    @coothead
    Its very nice, I'm gonna study your script. Your script does not "roll" the div down, its show some part of the div each time. like a curtain is falling.
    However I need to learn it. It will come handy ^^

    @ZeroKilled
    I'd like to use this script.
    Just, when I remove the "slide in" and "slide out" links from the html, the script stops working. I only need the toggle link. but these 3 links apparently work together. Any idea?

    also, I need to know, what to change on the html, so that in some pages, I show it open by default, and in some other pages, I show it closed by default. Is that possible?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles