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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Where can I find this script of very similar script?

    On this website: http://evancoleman.net/index.php
    I really like on the top how the menu has like 5 or 6 icons, and when you hover over them it shows a bubble with the name in them. Does anybody know where I can find this script? Thanks.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,145
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Search this forum or Google for tooltips.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by neex1233 View Post
    Does anybody know where I can find this script?
    You should ask yourself how can you code a script like that, not where you can find a script. You should first learn JavaScript, and after that you may analyze whichever code, use it, change it or write one of your own. Finding a script is not enough. You should understand how is written and how to use it.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #menu {
     position:relative;
    }
    
    #menu IMG{
     margin-Right:20px;
    }
    
    #tooltip {
      position:absolute;overflow:hidden;left:0px;top:35px;width:60px;height:45px;border:solid black 0px;
      background-Image:url(http://themes.nimblehost.com/rw_common/themes/NimbleHostThemes-v2/images/head.png);
      background-Repeat:none;
    }
    
    #tooltip DIV{
      position:absolute;left:10px;top:18px;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    // Animate (11-January-2010)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Initialising the Script.
    //
    // The script is initialised by assigning an instance of the script to a variable.
    // e.g A = new zxcAnimate('left','id1')
    // where:
    //  A           = a global variable                                                               (variable)
    //  parameter 0 = the mode(see Note 1).                                                           (string)
    //  parameter 1 = the unique ID name or element object.                                           (string or element object)
    //  parameter 1 = the initial value.                                                              (digits, default = 0)
    
    // **** Executing the Effect
    //
    // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
    // where:
    //  A           = the global referencing the script instance.                                 (variable)
    //  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
    //  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
    //  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
    //  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
    //                 field 0 the minimum value. (digits)
    //                 field 1 the maximum value. (digits)
    //  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    //
    //  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //  Note 2:  The default units(excepting opacity) are 'px'.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  The scale is of particular use when re-calling the effect
    //           in mid progression to retain an constant rate of progression.
    //  Note 4:  The current effect value is recorded in A.data[0].
    //  Note 5:  A function may be called on completion of the effect by assigning the function
    //           to the animator intance property .Complete.
    //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //
    
    
    
    // **** Functional Code(1.52K) - NO NEED to Change
    
    function zxcAnimate(mde,obj,srt){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[srt||0];
     return this;
    }
    
    zxcAnimate.prototype={
    
     animate:function(srt,fin,ms,scale,c){
      clearTimeout(this.to);
      this.time=ms||this.time||0;
      this.neg=srt<0||fin<0;
      this.data=[srt,srt,fin];
      this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
      this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
      this.inc=Math.PI/(2*this.mS);
      this.srttime=new Date().getTime();
      this.cng();
     },
    
     cng:function(){
      var oop=this,ms=new Date().getTime()-this.srttime;
      this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
      this.apply();
      if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
      else {
       this.data[0]=this.data[2];
       this.apply();
       if (this.Complete) this.Complete(this);
      }
     },
    
     apply:function(){
      if (isFinite(this.data[0])){
       if (this.data[0]<0&&!this.neg) this.data[0]=0;
       if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
       else zxcOpacity(this.obj,this.data[0]);
      }
     }
    
    }
    
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    
    </script>
    
    
    
    </head>
    
    <body>
     <div id="menu" >
      <img src="http://evancoleman.net/images/home.png" />
      <img src="http://evancoleman.net/images/products.png" />
      <img src="http://evancoleman.net/images/donate.png" />
      <img src="http://evancoleman.net/images/blog.png" />
      <img src="http://evancoleman.net/images/contact.png" />
      <img src="http://evancoleman.net/images/about.png" />
      <div id="tooltip" >
       <div>Home</div>
      </div>
     </div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Menu(o){
     var menu=document.getElementById(o.MenuID);
     var imgs=menu.getElementsByTagName('IMG');
     this.items=[];
     for (var ary=o.MenuItems,z0=0;z0<imgs.length;z0++){
      this.items[z0]=[imgs[z0].offsetLeft,ary[z0][0]||'',ary[z0][1]||0];
      this.addevt(imgs[z0],'mouseover','slide',z0);
     }
     var tooltip=document.getElementById(o.ToolTipID);
     this.txt=tooltip.getElementsByTagName('DIV')[0];
     var lft=this.items[0][0];
     tooltip.style.left=lft+'px';
     tooltip.style.width=this.items[0][2]+'px';
     this.txt.innerHTML=this.items[0][1];
     this.tooltip=new zxcAnimate('left',tooltip,lft);
     this.ms=o.Duration||500;
    }
    
    
    Menu.prototype={
    
     slide:function(nu){
      this.tooltip.animate(this.tooltip.data[0],this.items[nu][0],this.ms);
      this.tooltip.obj.style.width=this.items[nu][2]+'px';;
      this.txt.innerHTML=this.items[nu][1];
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
     }
    
    
    }
    new Menu({
     MenuID:'menu',
     ToolTipID:'tooltip',
     MenuItems:[
      ['Home',55],
      ['Products',75],
      ['Donate',65],
      ['Blog',50],
      ['Contact',70],
      ['About',60]
     ],
     Duration:500
    });
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    neex1233 (11-11-2010)

  • #5
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks! But I have one problem. If you look at the image I attached, the bubble has no tail. I've been trying to fix this but I can't.
    Attached Thumbnails Attached Thumbnails Where can I find this script of very similar script?-eg.png  

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    To add a tail, you have to have an image of the tail and then you just have to position it relative to the main tooltip box.

    It's not hard to do, and if Vic is feeling his overly-generous self, maybe he'll do it for you. But if you really want to do a lot of stuff like this, maybe it's time to learn JavaScript, as Kor said.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    if you are refering to the triangle pointing at the icon this is part of the tootip background image
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #8
    New Coder
    Join Date
    Oct 2010
    Location
    Denver
    Posts
    26
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Nice Script. How can you add links for each of these icons?

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Quote Originally Posted by Rangers View Post
    Nice Script. How can you add links for each of these icons?
    ?? Same way it's been done since 1996 or so.

    <a href="url you want to link to"><img ...></a>

    Add some CSS to style it the way you like and done.

    Did you mean something different??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Quote Originally Posted by vwphillips View Post
    if you are refering to the triangle pointing at the icon this is part of the tootip background image
    ?? Really? I didn't look at the code. I just assumed it would need to be a separate image to accomodate the stretching/squeezing, else the size of the triangle would vary.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New Coder
    Join Date
    Mar 2010
    Location
    New Jersey USA
    Posts
    81
    Thanks
    13
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by Rangers View Post
    Nice Script. How can you add links for each of these icons?
    Two thinks you will need to do...

    add this to your css (in the <head> section)
    Code:
    a { text-decoration:none }
    and change the part with the images to this...

    Code:
      
    <a href="whatever1.html"><img border="0" img src="http://evancoleman.net/images/home.png" />
    <a href="whatever1.html"><img border="0" img src="http://evancoleman.net/images/products.png" />
    <a href="whatever1.html"><img border="0" img src="http://evancoleman.net/images/donate.png" />
    <a href="whatever1.html"><img border="0" img src="http://evancoleman.net/images/blog.png" />
    <a href="whatever1.html"><img border="0" img src="http://evancoleman.net/images/contact.png" />
    <a href="whatever1.html"><img border="0" img src="http://evancoleman.net/images/about.png" />


  •  

    Posting Permissions

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