PDA

View Full Version : onClick DIV popup



nikomou
03-03-2009, 10:51 AM
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
03-03-2009, 08:48 PM
you could modify this (http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/) or this (http://www.dynamicdrive.com/dynamicindex5/linkdescribe.htm)

nikomou
03-03-2009, 10:03 PM
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
03-03-2009, 10:29 PM
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
03-03-2009, 11:16 PM
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
03-04-2009, 12:31 AM
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
03-04-2009, 01:01 PM
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
03-06-2009, 01:53 AM
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
03-06-2009, 03:04 AM
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);
}


}