SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Thread: Small div popup

  1. #1
    SitePoint Guru augathra's Avatar
    Join Date
    Jul 2004
    Location
    united states
    Posts
    826
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Small div popup

    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

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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">
    <!-----------------------------------------------------------
    function popup()
    {
    alert("Hello World")
    }
    -------------------------------------------------------------->
    </script>
    </head>
    <body>
    <input type="button" onclick=popup() value="popup"
    </body>

    </html>

  3. #3
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Guru augathra's Avatar
    Join Date
    Jul 2004
    Location
    united states
    Posts
    826
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    SitePoint Guru augathra's Avatar
    Join Date
    Jul 2004
    Location
    united states
    Posts
    826
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oO, I think I can do it on my own! I'll try first, if I can't, i'll let everyone know. Thanks

  6. #6
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  7. #7
    SitePoint Guru augathra's Avatar
    Join Date
    Jul 2004
    Location
    united states
    Posts
    826
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  8. #8
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Guru augathra's Avatar
    Join Date
    Jul 2004
    Location
    united states
    Posts
    826
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that, still gives me an error. It says "Object required"?

  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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.

  11. #11
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just tested it and clued in... You just need quotes.

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

  12. #12
    SitePoint Guru augathra's Avatar
    Join Date
    Jul 2004
    Location
    united states
    Posts
    826
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oO, cool stuff. Thank you someonewhois and vgarcia.

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

  13. #13
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote 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.

  15. #15
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  16. #16
    SitePoint Guru augathra's Avatar
    Join Date
    Jul 2004
    Location
    united states
    Posts
    826
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, you guys definately know JS. Thanks for all your help!


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
  •