Small div popup

**augathra** · Feb 20, 2005 14:06

Hello, would someone explain to me how forum's get divs to popup once they click a link? Like the "Quick Links" in sitepoint's navigation.

Thanks

**bd2bowl** · Feb 20, 2005 14:48

hope this answers your question ...<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>popup alert</title>
<script type="text/javascript">

</script>
</head>
<body>
<input type="button" onclick=popup() value="popup"
</body>

</html>

**someonewhois** · Feb 20, 2005 14:52

Code:

 <script type="text/javascript">
 window.onclick = function()
 {
    el = document.getElementById('test');
    el.style.display='none';
 }
 function showit()
 {
    el = document.getElementById('test');
     el.style.display='block';
 
    return false;
 }
 </script>
 <a href="#" onclick="showit();">Hello?</a>
 <div id="test" style="display:none;">
 Hello!
 </div>

Did it on the fly, but you should get the idea. Basically it shows on click of that link, then it hides it on click anywhere in the window.

**augathra** · Feb 20, 2005 15:37

I suppose I should know quite a bit about JS before I really try to use this. I see what's going on, but if something is wrong, I'm not sure what to do. It works, but when I click in the window, it doesn't disappear.

I did get this to work:

Code:

<script type="text/javascript">
 function showit()
 {
    el = document.getElementById('test');
	if(el.style.display == 'block') {
	  el.style.display = 'none';
	} else if(el.style.display == 'none') {
      el.style.display= 'block';
	}
    return false;
 }
 </script>

I could use it, but I like yours more with the window click. if you are willing, would you revise it so it disappears when the windows clicked?

**augathra** · Feb 20, 2005 15:40

oO, I think I can do it on my own! I'll try first, if I can't, i'll let everyone know. Thanks

**someonewhois** · Feb 20, 2005 15:48

This'll work:

Code:

 <script type="text/javascript">
 	function DisplayDiv(el)
 	{
 		alert('gah?');
 		e = document.getElementById(el);
 		e.style.display = 'block';
 		return false;
 	}
 	function ShowTest()
 	{
 		setTimeout("document.getElementById('test').style.display='block';", 50);
 		return false;
 	}
 	document.onclick = function() { document.getElementById('test').style.display='none'; }
 
 </script>
 <a href="#" onclick="return ShowTest()">Hello?</a>
 <div id="test" style="display: none;">
 	Hello world!
 </div>

The setTmeout seems to be required, because when you click the link it invokes document.onclick AFTER it invokes ShowTest() - so it'd show and hide immediately after. The timeout gives it 50ms before it'll show - so it's hidden, it'll be re-hidden then showed 50ms later. Works fine for me. Good luck!

**augathra** · Feb 20, 2005 17:26

Hello, I can't get this piece of code to work. I know what's wrong, but not sure how to fix it. Here it is

Code:

function CloseMenu(menutokill) {
  alert(menutokill);
  setTimeout("document.getElementById(menutokill).style.display = 'none';", 500);
}

IE is telling me "menutokill" is undefined. The alert says test. If I replace menutokill with 'test', it works.

Any ideas?

**someonewhois** · Feb 20, 2005 17:28

I'm not a genius at JS - but I'd assume you have to leave quoets in order to get it to work.

Code:

setTimeout("document.getElementById("+menutokill+").style.display = 'none';", 500);

It's probably seeing menutokil as a string, so it's thinking the div's id is menutokill.

**augathra** · Feb 20, 2005 17:37

I tried that, still gives me an error. It says "Object required"?

**vgarcia** · Feb 20, 2005 17:39

settimeout expects a function reference, not a string. Someonewhois was close. Here's one that may work:

Code:

setTimeout(function ()
{
document.getElementById(menutokill).style.display = 'none';
}, 500);

This still doesn't do that cool animation thing that SP's layers do though.

**someonewhois** · Feb 20, 2005 17:41

Just tested it and clued in... You just need quotes.

Code:

  setTimeout("document.getElementById('"+menutokill+"').style.display = 'none';", 500);

**augathra** · Feb 20, 2005 17:55

oO, cool stuff. Thank you someonewhois and vgarcia.

Since vgarcia brought it up, lol, how does sitepoint do that?

**someonewhois** · Feb 20, 2005 17:58

I'm guessing it uses setInterval and basically onclick shows the div, then every few ms it makes the height and width a few pixels more, until it's at the specified time then it kills the loop.

**vgarcia** · Feb 20, 2005 18:02

Originally Posted by augathra

oO, cool stuff. Thank you someonewhois and vgarcia.

Since vgarcia brought it up, lol, how does sitepoint do that?

You have to increment the width/height slowly rather than showing it all at once. Here's an example I wrote a few months ago:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
//main animation function.
//has all kinds of parameters for easy tweaking
function animate(theTarget, setWidth, setHeight, growWidth, growHeight, interval)
{
 hide();
 theTarget.style.visibility = "visible";
 setInterval(
 function()
 {
 	if (parseInt(theTarget.style.width, 10) < setWidth)
	{
	  theTarget.style.width = (parseInt(theTarget.style.width, 10) + growWidth) + "px";
	}
	if (parseInt(theTarget.style.height, 10) < setHeight)
	{
	 theTarget.style.height = (parseInt(theTarget.style.height, 10) + growHeight) + "px";
	}
	if (parseInt(theTarget.style.width, 10) > 0)
	{
	 theTarget.style.border = "1px solid black";
	}
 }, interval);
}
//check browser capabilities. 
//if a browser can't handle these objects/functions,
//it can't animate.
function checkCaps ()
{
  return (document.getElementById && document.getElementsByTagName && document.createElement);
}
//hides the target element.
function hide ()
{
  document.getElementById("other").style.width = "0px";
	document.getElementById("other").style.height = "0px";
	document.getElementById("other").style.overflow = "hidden";
	document.getElementById("other").style.border = "none";
	document.getElementById("other").style.visibility = "hidden";
}
function unimate ()
{
 hide();
 return false;
}
//creates a "hide" link. Only shows up when JS is available
//and the animation function works.
//never shows up under other circumstances because
//it would be useless ;)
function createHideLink ()
{
 	 var aLink = document.createElement("a");
 	 aLink.onclick = unimate;
 	 aLink.href = "#";
 	 var aText = document.createTextNode("hide");
 	 aLink.appendChild(aText);
 	 document.getElementById("other").appendChild(aLink);
}
window.onload = function ()
{
 if (checkCaps())
 {
   hide();
	 createHideLink();
	 
 }
}
//-->
</script>
<style type="text/css">
<!--
		#other {
					font-weight: bold;
					text-align: right;
					border: 1px solid black;
					white-space: nowrap;
					position: absolute;
					right: 0; top: 30px;
					background: skyblue;
					width: 200px;
					height: 100px;
		}
		#everything {
					margin: auto; position: relative; width: 310px;
					border: 5px solid silver;
					text-align: right;
					padding-bottom: 150px;
		}
-->
</style>
</head>
<body>
<div id="everything">
<a href="#other" id="otherlink" onclick="animate(document.getElementById('other'), 200, 100, 10, 5, 1); return false;">Other:</a>
<div id="other">
<a href="/index.html">Home</a>
<a href="/portfolio.html">Portfolio</a>
<a href="/news.html">News</a>
<br/>
</div>
</div>
</body>
</html>

This isn't the most generic function I could make (I never got around to making it as reusable as I wanted it to be) but you should be able to take some cool things from it.

**someonewhois** · Feb 20, 2005 18:09

Bah, you beat me to it.

Well, here's mine that I just finished - it only does height for now.

Code:

<script>
 var maxheight = 300;
 
 function Grow(el)
 {
 	e = document.getElementById(el);
 	oheight = e.style.height;
 	nheight = parseInt(oheight);
 	e.style.height = (nheight + 5) + 'px';
 
 	if (nheight <= maxheight)
 	{
 		// Recurse itself.
 		setTimeout('Grow("'+el+'");', 5);
 	}
 	else
 	{
 		return;
 	}
 }
 function ExpandMenu(el)
 {
 	e = document.getElementById(el);
 	e.style.display='block';
 	e.style.height = '0px';
 	setTimeout('Grow("'+el+'")', 5);
 }
 function StartExpand(el)
 {
 	setTimeout("ExpandMenu('"+el+"')", 50);
 	return false;
 }
 document.onclick = function()
 {
 	document.getElementById('test').style.display='none';
 }
 </script>
 <style type="text/css">
 /* So we can see it... */
 #test
 {
 	margin: 5px;
 	border: 2px red solid;
 	display: none;
 
 	overflow: hidden; /* This is so that it doesn't show the text first */
 }
 </style>
 
 <body>
 	<a href="#" onclick="return StartExpand('test');">Go!</a>
 
 	<div id="test">
 		TESTING.<br/>
 		TESTING.<br/>
 		TESTING.<br/>
 		TESTING.<br/>
 		TESTING.<br/>
 		TESTING.<br/>
 		TESTING.<br/>
 		TESTING.<br/>
 		TESTING.<br/>
 		TESTING.<br/>
 		TESTING.<br/>
 		TESTING.<br/>
 	</div>
 </body>

To make it faster set the +5 on line 9 to a higher number, or the 5 on line 14 to a lower number.

**augathra** · Feb 20, 2005 20:14

Wow, you guys definately know JS. Thanks for all your help!

User Tag List

Thread: Small div popup

Thread Tools

Display

Small div popup

Bookmarks

Bookmarks

Posting Permissions