www.webdeveloper.com
Results 1 to 5 of 5

Thread: Make div go upwards

  1. #1
    Join Date
    Apr 2012
    Posts
    2

    Make div go upwards

    Hey guys!

    Iīve been trying this since 2 days now. I want to make a div go upwards (height) as I click on a button.
    I got a solution which goes down (with javascript -> getting the id from the div and change the height), but I donīt get it upwards.

    In the picture in the attachement I got 4 divīs. the one with the x should go upwards. I now that I must work with z-index to "overlap" the other div.

    http://s7.directupload.net/file/d/2871/7xaptk6n_jpg.htm

    Do you guys have any solution to this?

    Thanks in advance

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,450
    Hi there pascal1712,

    and a warm welcome to these forums.

    Try this little example...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>upwardly mobile</title>
    
    <style type="text/css">
    body {
        min-width:322px;
        background-color:#f0f0f0;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
     }
    #container {
        position:relative;
        width:0;
        height:0;
        margin:340px auto 0;
     }
    #button {
        width:70px;
        margin:20px 0 0 -35px;
        cursor:pointer;
     }
    #box {
        position:absolute;
        bottom:0;
        left:-151px;
        width:300px;
        border:1px solid #999;
        overflow:hidden;
        box-shadow:#666 4px 4px 12px;
        background-color:#fff;
     }
    #box div {
        height:280px;
        padding:10px;
        overflow:auto;
        font-size:75%;
        color:#333;
     }
    .hide {
        display:none;
     }
    </style>
    
    <script type="text/javascript">
    
    function init(){
       hgt=300;
       delay=20;
       c=0;
       test=true;
       es=null;
       obj=document.getElementById('box');
       document.getElementById('container').className='';
    
    document.getElementById('button').onclick=function() {
       clearTimeout(es);
       test==true?
      (test=false,this.value='shrink'):
      (test=true,this.value='expand');
       expand();
      }
     }
    
    function expand() {
       test==false?c+=2:c-=2;
       obj.style.height=c+'px';
    if(c>hgt) {
       c=hgt;
       clearTimeout(es);
       return;
     }
    if(c<0) {
       c=0;
       clearTimeout(es);
       return;
     }
       c>0?obj.className='':obj.className='hide';
    
       es=setTimeout(function(){expand()},delay);
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    </script>
    
    </head>
    <body>
    
    <div id="container"  class="hide">
    
    <input id="button" type="button" value="expand">
    
    <div id="box" class="hide">
    <div>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p><p>
    Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
    lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
    ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
    euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu 
    et mauris scelerisque tristique. Donec fringilla mauris dolor, 
    sit amet vulputate lacus. Nulla feugiat mattis nulla non 
    tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis 
    nisi eget neque tempus facilisis eu quis sapien.
    </p>
    </div>
    </div><!-- end #box -->
    
    </div><!-- end #container -->
    
    </body>
    </html>
    
    coothead

  3. #3
    Join Date
    Apr 2012
    Posts
    2
    You nailed it
    I got it working! Thank you!
    But now I got another problem
    I loaded a external html file in the div. The contact form works, but in the other div I want to show a jquery image slider. If I open the jquery image slider html it works perfectly, but if i click on a button and the div opens up, it only shows the loading gif of the image slider.
    Iīve tested out plenty of things, but didnīt get it working.

    Thanks in advance!

  4. #4
    Join Date
    Nov 2011
    Posts
    64
    Code:
     c>0?obj.className='':obj.className='hide';
    Can you explain this line ? I want to know what it means.

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,450
    Hi there stevengoh,

    the explanations may be found here...

    coothead

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