onClick DIV popup

[nikomou]

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?!

	<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!

[Master_script_maker]

you could modify this or this

[nikomou]

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

<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...

<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> 

[Nile]

Replace:

        el.style.display = 'none'; 
        el = document.getElementById('more' + id); 
        el.innerHTML = 'more...';

With:

        setTimeout(function(){
          el.style.display = 'none'; 
          el = document.getElementById('more' + id); 
          el.innerHTML = 'more...'; 
        }, 3000);

[Master_script_maker]

For mouseout:

<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>

[nikomou]

thanks for your help!

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

<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

[Nile]

Here:

<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>

[nikomou]

thanks nile, think i've confused everybody though!

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

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

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..

javascript:Toggle(1,9);return false;

thanks for your help

[Master_script_maker]

i think i understand what you are saying. try this:

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);
}

}