Results 1 to 9 of 9

Thread: onClick DIV popup

  1. #1
    Join Date
    Aug 2005
    Posts
    174
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default onClick DIV popup

    hello,

    can anyone guide me how to create a simple ul menu, that shows a div when clicked? The div should start just next to the li, and not distrupt it's positioning. use apsoulute positioning?!

    Code:
    	<ul>
    	<li><a href="#" onclick="showdivbelow">About</a></li>
                                         <div>Content here</div>
    	<li><a href="#" onclick="showdivbelow">About</a></li>
                                         <div>Content here</div>
    	<li><a href="#" onclick="showdivbelow">About</a></li>
                                         <div>Content here</div>
    	<li><a href="#" onclick="showdivbelow">About</a></li>
                                         <div>Content here</div>
    	</ul>
    thanks for reading!

  2. #2
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    you could modify this or this
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  3. #3
    Join Date
    Aug 2005
    Posts
    174
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Ok, i've found this script from this site: http://lists.evolt.org/archive/Week-...24/116152.html and have implemented it successfuly..

    I just want to know how I could modify the code, so that if mouse is not over the pop up div for say 3 seconds, then to hide the div. Could anybody help me with this? thanks

    PHP Code:
    <script language="Javascript 1.2"
    type="text/javascript">
    function 
    show(id)
    {
        
    el document.getElementById(id);
        if (
    el.style.display == 'none')
        {
            
    el.style.display '';
            
    el document.getElementById('more' id);
            
    el.innerHTML 'less...';
        } else {
            
    el.style.display 'none';
            
    el document.getElementById('more' id);
            
    el.innerHTML 'more...';
        }
    }

    </script> 
    and then for your link...

    PHP Code:
    <a id="moreinfo"
    onclick="javascript:show('info');return false;"
    href="info.html" target="_new">more...</a>

    <
    div id="info" style="display: none">
    Other Info in Here
    </div

  4. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Replace:
    Code:
            el.style.display = 'none'; 
            el = document.getElementById('more' + id); 
            el.innerHTML = 'more...';
    With:
    Code:
            setTimeout(function(){
              el.style.display = 'none'; 
              el = document.getElementById('more' + id); 
              el.innerHTML = 'more...'; 
            }, 3000);
    Jeremy | jfein.net

  5. #5
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    For mouseout:
    Code:
    <script type="text/javascript"> 
    function show(id) { 
        el = document.getElementById(id); 
        if (el.style.display == 'none') { 
            el.style.display = ''; 
            el = document.getElementById('more' + id); 
            el.innerHTML = 'less...'; 
            el.onmouseout=function() {
              setTimeout(function() {
                show(id);
              }, 3000);
            };
        } else { 
            el.style.display = 'none'; 
            el = document.getElementById('more' + id); 
            el.innerHTML = 'more...'; 
        } 
    }
    </script>
    Last edited by Master_script_maker; 03-03-2009 at 11:51 PM.
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  6. #6
    Join Date
    Aug 2005
    Posts
    174
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    thanks for your help!

    how could i change this code, to time out on mouse out of the div

    Code:
    <script type="text/javascript">  
    function Toggle(IDS,n) { 
    
      for (i=0; i<n; i++) { document.getElementById('DB'+i).style.display='none'; } 
      document.getElementById('DB'+IDS).style.display = ''; 
      setTimeout(function(){
    
    document.getElementById('DB'+IDS).style.display = 'none'; 
    
    }, 3000);
    
    
    } 
    </script>
    thanks

  7. #7
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Here:
    Code:
    <script type="text/javascript">
      function Toggle(IDS, n) {
        for (i = 0; i < n; i++) {
          setTimeout(function() {
            document.getElementById('DB' + i).style.display = 'none';
          },
          3000);
        }
        document.getElementById('DB' + IDS).style.display = '';
        setTimeout(function() {
          document.getElementById('DB' + IDS).style.display = 'none';
        },
        3000);
      }
    </script>
    Jeremy | jfein.net

  8. #8
    Join Date
    Aug 2005
    Posts
    174
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    thanks nile, think i've confused everybody though!

    I found another piece of code than the one i originaly posted:

    Code:
    function Toggle(IDS,n) { 
    
      for (i=0; i<n; i++) { document.getElementById('DB'+i).style.display='none'; } 
      document.getElementById('DB'+IDS).style.display = ''; 
      setTimeout(function(){
    
    document.getElementById('DB'+IDS).style.display = 'none'; 
    
    }, 10000);
    
    
    }
    and call it using
    Code:
    javascript:Toggle(0,9);return false;
    at the moment, the this hides the div after ten seconds of being clicked, but i would only like to change this so it will only hide after 3 seconds of mouseout of the popup div, or if another toggle is being called..

    Code:
    javascript:Toggle(1,9);return false;
    thanks for your help

  9. #9
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    i think i understand what you are saying. try this:
    Code:
    function Toggle(IDS,n) { 
      for (i=0; i<n; i++) { document.getElementById('DB'+i).style.display='none'; } 
      document.getElementById('DB'+IDS).style.display = ''; 
      document.getElementById('DB'+IDS).onmouseout=(function(i) {  
        setTimeout((function(i) {return function() {document.getElementById(i).style.display="none";};})(i), 3000);
      })('DB'+IDS);
    }

    }
    Last edited by Master_script_maker; 03-06-2009 at 03:11 AM.
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

Bookmarks

Posting Permissions

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