www.webdeveloper.com
Results 1 to 9 of 9

Thread: Creating a "Hover-Box" in javascript

  1. #1
    Join Date
    Nov 2009
    Posts
    11

    Creating a "Hover-Box" in javascript

    Hi,

    I've recently been wondering how i could acheive what I call a "hover-box", you know the thing that looks a lot like a pop-up apart dosn't annoy you, and sometimes makes the background of the webpage grey while its up.

    If you still don't know what I'm on about take for example daniweb, if you don't have a registered account then you get this little "hover-box" telling you about danniweb etc..

    Could someone tell me how this could be acheived? And possibly give me some code to work with? (I not amazing with javascript but need to do this for a project)..


    Thanks In Advance,


    Joe

  2. #2
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,096
    Deleted
    Last edited by donatello; 11-30-2009 at 07:32 AM.

  3. #3
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,096
    Sorry, I visited DaniWeb and do not see the 'pop-up', but remember that I saw something like "greybox" running over there some time ago.

    Disregard my previous answer if that is not what you are seeking...

    The effect I saw on DaniWeb - if I remember correctly, was akin to "greybox" - a non-annoying popup.

    See it here:
    http://orangoo.com/labs/GreyBox/

  4. #4
    Join Date
    Apr 2009
    Location
    Leeds, England
    Posts
    101
    I've been trying to create the same effect myself; I've experimented with a few different ideas in javascript, but I haven't had a look at it in a while, but I'll have a quick look...

  5. #5
    Join Date
    Apr 2009
    Location
    Leeds, England
    Posts
    101
    Alright, I've not perfected it yet, but it should give you a good start; I haven't yet managed to align the box vertically, and the code is in a pretty crude state, but I'm sure you can sort that out. If I make any progress, I'll post it here.

    Here's what I've got so far:
    Code:
    <html>
    	<head>
    		<script type = "text/javascript">
    			function popup() {
    				document.getElementById('container1').style.visibility='visible';
    				document.getElementById('container2').style.visibility='visible';
    				document.getElementById('window').style.visibility='visible';
    			}
    			function popdown() {
    				document.getElementById('window').style.visibility='hidden';
    				document.getElementById('container1').style.visibility='hidden';
    				document.getElementById('container2').style.visibility='hidden';
    			}
    		</script>
    	</head>
    	<body>
    		<div style = "position:relative;margin-left:auto;margin-right:auto;">
    			<div style = "z-index:0;" onclick = "popup();">
    				main page
    			</div>
    			<div id = "container1" style = "z-index:1;visibility:hidden;position:fixed;left:0px;top:0px;width:100&#37;;height:100%;background-color:#000000;opacity:0.1;filter:alpha(opacity=10);text-align:center;">
    				&nbsp;
    			</div>
    			<div id = "container2" style = "z-index:1;visibility:hidden;position:fixed;left:0px;top:0px;width:100%;height:100%;text-align:center;">
    				<div id = "window" style = "z-index:2;visibility:hidden;position:relative;margin-right:auto;margin-left:auto;background-color:#dddddd;width:80%;height:80%;text-align:center;opacity:1.0;filter:alpha(opacity=100);">
    					popup window
    					<a style = "position:absolute;right:1px;top:1px" onclick = "popdown();">close</a>
    				</div>
    			</div>
    		</div>
    
    	</body>
    </html>
    If you open the page and click the text, the page darkens slightly, and a box opens.
    Last edited by JTweedie; 11-30-2009 at 09:07 AM.

  6. #6
    Join Date
    Nov 2009
    Posts
    11
    Quote Originally Posted by JTweedie View Post
    Alright, I've not perfected it yet, but it should give you a good start; I haven't yet managed to align the box vertically, and the code is in a pretty crude state, but I'm sure you can sort that out. If I make any progress, I'll post it here....
    Awsome. Ill try to work on it, you can try to work on it, and hopefully eventually we can get a nice looking one of those things (still don't know what they are called)..

    I will also post any progress I make here (if I manage to make any).


    Regards,

    Joe

  7. #7
    Join Date
    Nov 2009
    Posts
    11
    Ok.. I've attempted a go at improving this, it uses AJAX and stuff to fade the box in.. For some reason the box dosn't fade in though, it just appears (I told it to fade in but it isn't). Also I've tried organising more with CSS.

    Here is the HTML file:

    Code:
    <html>
    	<head>
    	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    		<script type = "text/javascript">
    			function popup() {
    			$("#link").fadeOut();
    			$("#content").fadeOut();
    			$("#window").fadeIn();
    			$("#container1").fadeIn();
    			$("#container2").fadeIn();
    				document.getElementById('container1').style.visibility='visible';
    				document.getElementById('container2').style.visibility='visible';
    				document.getElementById('window').style.visibility='visible';
    			}
    			function popdown() {
    			$("#link").fadeIn();
    			$("#content").fadeIn();
    			$("#window").fadeOut();
    			$("#container1").fadeOut();
    			$("#container2").fadeOut();
    <!-- 			
    				document.getElementById('window').style.visibility='hidden';
    				document.getElementById('container1').style.visibility='hidden';
    				document.getElementById('container2').style.visibility='hidden';
    -->
    			}
    		</script>
    		<link rel="stylesheet" type="text/css" href="theme.css" />
    	</head>
    	<body onLoad="javascript:popup();">
    		<div id="popup">
    			<div id="link" style = "z-index:0;" onclick = "popup();">
    				Pop-up again!
    			</div>
    			<div id = "container1">
    				&nbsp;
    			</div>
    			<div id = "container2">
    				<div id = "window">
    					popup window
    					<a style = "position:absolute;right:1px;top:1px" onclick = "popdown();">close</a>
    				</div>
    			</div>
    		</div>
    		<br/><br/><br/>
    		<div id="content">
    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit, risus non malesuada fringilla, mauris elit rutrum lorem, vitae sodales purus ipsum at felis. Cras varius blandit est, quis molestie turpis vestibulum eu. Cras luctus lectus eu libero rutrum egestas. Nullam quam risus, sagittis ut posuere vitae, aliquam at mi. Praesent quam orci, dignissim et commodo ac, tempor ut mi. In massa risus, sagittis interdum condimentum eu, fermentum at tortor. Cras mollis molestie ante ut pellentesque. Nulla vehicula, orci non iaculis rutrum, mi nisl facilisis ante, et interdum ante purus laoreet magna. Sed ac urna a velit consectetur imperdiet. In hac habitasse platea dictumst. Pellentesque fringilla varius metus a semper. Maecenas eget blandit neque. Fusce condimentum, arcu quis vehicula mattis, arcu mauris adipiscing lectus, quis semper velit tellus et mauris. Ut ullamcorper diam eu ante posuere aliquet. Quisque gravida congue mi eu fringilla. Vivamus id urna eros, molestie vulputate eros. In hac habitasse platea dictumst. In mollis, magna ac pulvinar scelerisque, risus justo tincidunt dui, id rutrum eros dolor vel tellus. In bibendum posuere bibendum.
    	</div>
    	</body>
    </html>
    And here is the CSS:

    Code:
    #window{
    z-index:2;
    visibility:hidden;
    position:relative;
    margin-right:auto;
    margin-left:auto;
    background-color:#FF0000;
    width:80%;height:80%;
    text-align:center;
    opacity:1.0;
    filter:alpha(opacity=100);
    }
    #popup{
    position:relative;
    margin-left:auto;
    margin-right:auto;
    }
    #container1{
    z-index:1;
    visibility:hidden;
    position:fixed;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background-color:#000000;
    opacity:0.1;
    filter:alpha(opacity=10);
    text-align:center;
    }
    #container2{
    z-index:1;
    visibility:hidden;
    position:fixed;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    text-align:center;
    }
    As I've said I still cant get it to fade in properly. And with I.E (the latest one, not 6) and opera it won't work properly. In I.E it has one red, and one black box (and there not really boxes, just strips), and in opera there is just no box that appears, and the link to get it up won't work..

    Any improvments to this, or other people's progress on it wouold be great.


    Thanks In Advance,


    Joe

  8. #8
    Join Date
    Nov 2009
    Posts
    11
    ALSO: I didn't want the backdrop to fade away either. I really wanted it to sort of greyout, or maybe just go slightly transparent.. If anyone knows how to do this, or has acheived this is would be great to know how..


    Thanks In Advance,

    Joe

  9. #9
    Join Date
    Nov 2009
    Posts
    11
    I've worked on a little cookies system to go with it too which I am personally going to use..:

    Here is the script:

    Code:
    <html>
    	<head>
    	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    		<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    		<script type = "text/javascript">
    
    			function getCookie(c_name)
    {
    if (document.cookie.length>0)
      {
      c_start=document.cookie.indexOf(c_name + "=");
      if (c_start!=-1)
        {
        c_start=c_start + c_name.length+1;
        c_end=document.cookie.indexOf(";",c_start);
        if (c_end==-1) c_end=document.cookie.length;
        return unescape(document.cookie.substring(c_start,c_end));
        }
      }
    return "";
    }
    
    function setCookie(c_name,value,expiredays)
    {
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
    }
    
    function checkCookie()
    {
    visited=getCookie('Visited');
    if (visited!=null && visited!="")
      {
      alert('Ive seen you before');
      setCookie('Visited','value',365);
      }else{
      popup();
      setCookie('Visited','value',365);
    }
    }
    
    			function popup() {
    document.getElementById('container1').style.visibility='visible';
    				document.getElementById('container2').style.visibility='visible';
    				document.getElementById('window').style.visibility='visible';
    			$("#window").fadeOut();
    			$("#container1").fadeOut();
    			$("#container2").fadeOut();
    			$("#window").fadeIn();
    			$("#container1").fadeIn();
    			$("#container2").fadeIn();
    				document.getElementById('container1').style.visibility='visible';
    				document.getElementById('container2').style.visibility='visible';
    				document.getElementById('window').style.visibility='visible';
    			}
    			function popdown() {
    			$("#window").fadeOut();
    			$("#container1").fadeOut();
    			$("#container2").fadeOut();
    			$("#link").fadeIn();
    			$("#content").fadeIn();
    			}
    			
    		</script>
    		<link rel="stylesheet" type="text/css" href="media/css/theme.css" />
    		
    	</head>
    	<body onLoad="javascript:checkCookie()">
    		<div id="popup">
    			<div id="link" style = "z-index:0;" onclick = "popup();">
    				Pop-up again!
    			</div>
    			<div id = "container1">
    				&nbsp;
    			</div>
    			<div id = "container2">
    				<div id = "window"><br/><br/>
    					<img src="Logo.jpg"><br/><br/><br/><br/>
    					Content<br/><br/>
    					<a style = "position:absolute;right:1px;top:1px" onclick = "popdown();"><img src="x.png"></a>
    				</div>
    			</div>
    		</div>
    		<br/><br/><br/>
    		<div id="content">
    		<br/><br/>
    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit, risus non malesuada fringilla, mauris elit rutrum lorem, vitae sodales purus ipsum at felis. Cras varius blandit est, quis molestie turpis vestibulum eu. Cras luctus lectus eu libero rutrum egestas. Nullam quam risus, sagittis ut posuere vitae, aliquam at mi. Praesent quam orci, dignissim et commodo ac, tempor ut mi. In massa risus, sagittis interdum condimentum eu, fermentum at tortor. Cras mollis molestie ante ut pellentesque. Nulla vehicula, orci non iaculis rutrum, mi nisl facilisis ante, et interdum ante purus laoreet magna. Sed ac urna a velit consectetur imperdiet. In hac habitasse platea dictumst. Pellentesque fringilla varius metus a semper. Maecenas eget blandit neque. Fusce condimentum, arcu quis vehicula mattis, arcu mauris adipiscing lectus, quis semper velit tellus et mauris. Ut ullamcorper diam eu ante posuere aliquet. Quisque gravida congue mi eu fringilla. Vivamus id urna eros, molestie vulputate eros. In hac habitasse platea dictumst. In mollis, magna ac pulvinar scelerisque, risus justo tincidunt dui, id rutrum eros dolor vel tellus. In bibendum posuere bibendum.
    
    Cras vitae justo eu lacus ultrices sollicitudin id id sapien. Maecenas aliquet viverra tristique. Aenean accumsan, massa id rhoncus sagittis, diam purus cursus odio, dignissim iaculis dui nisi sed libero. Etiam lacinia consequat dui, nec semper risus congue vitae. Integer euismod viverra vehicula. Etiam porta imperdiet mattis. Praesent rhoncus pharetra nunc et pharetra. In hac habitasse platea dictumst. Sed augue mi, congue id pharetra in, tempus consequat nulla. Fusce mauris nibh, malesuada et molestie ut, commodo pulvinar felis. Mauris rhoncus, ante nec venenatis auctor, tellus urna scelerisque nulla, quis vulputate turpis mauris a nulla. Maecenas vehicula, mi eu consequat imperdiet, nulla libero pretium lectus, ac venenatis lectus lacus in ipsum. Nam rhoncus diam eget purus malesuada commodo. Proin eget tortor erat.
    	</div>
    	</body>
    </html>
    And again here is the CSS file (cant remember if I editied it or not):

    Code:
    #window{
    z-index:2;
    visibility:hidden;
    position:relative;
    margin-right:auto;
    margin-left:auto;
    background-color:#383a41;
    width:80%;height:80%;
    text-align:center;
    opacity:1.0;
    filter:alpha(opacity=100);
    }
    #window a{
    color: #B3B1B1
    }
    #popup{
    position:relative;
    margin-left:auto;
    margin-right:auto;
    }
    #container1{
    z-index:2;
    position:fixed;
    visibility: hidden;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background-color:#383a41;
    opacity:0.1;
    filter:alpha(opacity=10);
    text-align:center;
    }
    #container2{
    color:#FFFFFF;
    font-size:12pt; 
    font-weight:bold;
    font-family: Myriad Pro, Helvetica;
    z-index:2;
    position:fixed;
    visibility: hidden;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    text-align:center;
    }
    #container2 h1{
    font-weight:bold;
    text-decoration: underline
    }

    I would love to see peoples advances on this. (And possibly ways to make the background grey out).


    Thanks In Advance,

    Joe

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles