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 (http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/) or this (http://www.dynamicdrive.com/dynamicindex5/linkdescribe.htm)

[nikomou]

Ok, i've found this script from this site: http://lists.evolt.org/archive/Week-of-Mon-20020624/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);
}


}