Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onMouseOver/Out visibility effects

    hi all,

    i am using this javascript code which i found on a random website to create a tooltip style popup. in my head is:

    Code:
    <script type="text/javascript">
    function showmenu(elmnt)
    {
    document.getElementById(elmnt).style.visibility="visible"
    }
    function hidemenu(elmnt)
    {
    document.getElementById(elmnt).style.visibility="hidden"
    }
    </script>
    
    <style type="text/javascript">
    #twittericon {
    position: fixed;
    bottom:148px;
    left: 6%;
    width: 33px;
    height:29px;
    z-index: 49;
     }
     
    #tweet{
    position:fixed;
    bottom:178px;
    left: 3%;
    max-width:310px;
    color:#333333;
    font-family:Arial Narrow,Arial,Sans-serif;
    font-size:12px;;
    z-index:6000;
    visibility: hidden;
    }
    </style>
    in my body is:
    Code:
    <div id="twittericon" onMouseOver="showmenu('tweet')" onMouseOut="hidemenu('tweet')"> 
    <a href="http://twitter.com/bubblejam" target="_blank">
    <img src="http://nang-nang.net/tumblr/blog/twit-bird.gif" width="33" height="29" /></a>
    </div>
    <div id="tweet"> 
    (latest tweet generating code)
    </div>
    this creates a little bird, which displays latest tweet when rolled-over.

    you can see a working example of this here:
    http://nang-nang.net/tumblr/blog/try.html

    my question are:
    (1) can i add something to the javascript to create a delay when onMouseOut so that the tweet doesn't disappear immediately?

    also
    (2) could i also add something to the javascript to create a visual effect when onMouseOver or onMouseOut occurs? like a fade in effect? or slide up effect? i've been playing around with scriptaculous effects but i'm not sure how to combine that script with my script above.

    an answer to (1) at least would be very much appreciated!

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    there is probably a more elegant way to do this, but this:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var t;
    function showmenu(elmnt)
    {
    document.getElementById(elmnt).style.visibility="visible"
    }
    function hidemenu(elmnt)
    {
    document.getElementById(elmnt).style.visibility="hidden";
    clearTimeout(t);
    }
    </script>
    
    <style type="text/javascript">
    #twittericon {
    position: fixed;
    bottom:148px;
    left: 6%;
    width: 33px;
    height:29px;
    z-index: 49;
     }
     
    #tweet{
    position:fixed;
    bottom:178px;
    left: 3%;
    max-width:310px;
    color:#333333;
    font-family:Arial Narrow,Arial,Sans-serif;
    font-size:12px;;
    z-index:6000;
    visibility: hidden;
    }
    </style>
    </script>
    </head>
    <body>
    <div id="twittericon" onMouseOver="showmenu('tweet')" onMouseOut="t=setTimeout('hidemenu(\'tweet\')',3000)"> 
    <a href="http://twitter.com/bubblejam" rel="nofollow" target="_blank">
    <img src="http://nang-nang.net/tumblr/blog/twit-bird.gif" width="33" height="29" /></a>
    </div>
    <div id="tweet" style="visibility:hidden"> 
    (latest tweet generating code)
    </div>
    </body>
    </html>
    makes the tweet disappear after 3 seconds (or 3000 milliseconds, which you can change to suit).

    I don't know much about fade ins and slide ups - it seems that the easiest way to do them is with jquery.

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks xelawho!

    that was the exact little snippet of javascript i needed.

    i think you're right about needing jquery or something extra to fade in and slide ups... but the website i'm making has so many javascripts in it now i'm afraid for conflicts so i'll probably just leave it out!

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Here's one that fades away but,
    it might really be simpler with jqueery

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="daveyerwin">
    <title>Untitled</title>
    <script type="text/javascript">
    
    function showmenu(elmnt){
    	var target = document.getElementById(elmnt);	
    	fade(target,"unFade")	;
    }
    function hidemenu(elmnt){
    	var target = document.getElementById(elmnt);
    	fade(target,"fade");
    }
    var isFading = null;
    function fade(target,a){
    	if(a == "unFade"){
    		target.style.visibility="visible";
    		if(isFading)clearTimeout(isFading);
    		target.style.opacity = 1;
    		target.style.filter = 'alpha(opacity=100)';		
    		return;
    	}		
    	var opacityLevel=100;
    	function fader(){
    		if(opacityLevel-=5 > 1){
    	    		isFading = setTimeout(fader,5);
    		}else{	    		
    			target.style.visibility="hidden";			
    			return;
    	   	}
    		target.style.opacity = opacityLevel / 100;
    		target.style.filter = 'alpha(opacity='+opacityLevel+')';	   	
    	}   	
    	fader();
    }
    </script>
    
    <style type="text/css">
    #twittericon {
    	position: fixed;
    	bottom:148px;
    	left: 6%;
    	width: 33px;
    	height:29px;
    	z-index: 49;
     }
     
    #tweet{
    	position:fixed;
    	bottom:178px;
    	left: 3%;
    	max-width:310px;
    	color:#333333;
    	font-family:Arial Narrow,Arial,Sans-serif;
    	font-size:12px;;
    	z-index:6000;
    	visibility: hidden;
    }
    </style>
    </head>
    <body>
    <div id="twittericon"> 
    <a href="http://twitter.com/bubblejam" rel="nofollow" >
    	<img src="http://nang-nang.net/tumblr/blog/twit-bird.gif" alt="tweet" width="33" height="29" 
     onmouseover="showmenu('tweet')" onmouseout="hidemenu('tweet')" >
    </a>
    </div>
    
    <div id="tweet"> 
    	(latest tweet generating code)
    </div>
    </body>
    </html>
    Last edited by DaveyErwin; 09-10-2011 at 08:43 PM.


  •  

    Posting Permissions

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