www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 17 of 17

Thread: [RESOLVED] Link Hover Addition

  1. #16
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    i have just modified my last version of the script which had bugs in Opera and now it seems to be working w/o any bug (tested in FF, IE, Opera, Avant /this one is an IE clone/ and Netscape browser):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Link Hover Addition</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    <!--
    body{
    color: #000;
    background-color: #f8f8ff;
    font-family: Verdana, Helvetica;
    font-size: 12px;
    padding: 10px 10px 10px 10px;
    margin: 0px 0px 0px 0px;
    }
    a:link,a:active,a:visited{
    color: #000;
    background-color: transparent;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    }
    a:hover{
    color: #338a1b;
    background-color: transparent;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    }
    #mainDiv{
    position: absolute;
    top: 100px;
    left: 150px;
    width: 200px;
    padding: 20px 20px 20px 20px;
    text-align: center;
    border: 1px dashed #cdc;
    }
    #anotherDiv{
    position: absolute;
    top: 100px;
    right: 150px;
    width: 200px;
    padding: 20px 20px 20px 20px;
    text-align: center;
    border: 1px dashed #cdc;
    }
    .bracket_hid{
    color: #f8f8ff;
    background-color: transparent;
    font-weight: bold;
    font-size: 14px;
    margin-left: 3px;
    margin-right: 3px;
    }
    .bracket_vis{
    color: #a63944;
    background-color: transparent;
    font-weight: bold;
    font-size: 14px;
    margin-left: 3px;
    margin-right: 3px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="mainDiv">
    <h2>Menu</h2><br />
    <a href="#null">Link 1</a><br /><br />
    <a href="#null">Link 2</a><br /><br />
    <a href="#null">Link 3</a><br /><br />
    <a href="#null">Link 4</a><br /><br />
    <a href="#null">Link 5</a>
    </div>
    <div id="anotherDiv">
    <h2>Another content</h2><br />
    <a href="#null">Link 1</a><br /><br />
    <a href="#null">Link 2</a><br /><br />
    <a href="#null">Link 3</a><br /><br />
    <a href="#null">Link 4</a><br /><br />
    <a href="#null">Link 5</a>
    </div>
    <script language="JavaScript" type="text/javascript">
    <!--
    var dlinks = document.getElementById("mainDiv").getElementsByTagName("A");
    var dl = document.links;
    var timer;
    
    for(var x = 0; x < dlinks.length; x++){
    var temp = dlinks[x].innerHTML;
    dlinks[x].innerHTML = "<span class='bracket_hid'>[<\/span>" + temp + "<span class='bracket_hid'>]<\/span>";
    dlinks[x].setAttribute("id", "dlink_" + x);
    dlinks[x].onmouseover = function(){doTarget(this.id,15);}
    dlinks[x].onmouseout = function(){
    if(timer != ""){clearTimeout(timer);}
    this.childNodes[0].className = "bracket_hid";
    this.childNodes[2].className = "bracket_hid";
    }
    }
    
    for(var k = 0; k < dl.length; k++){dl[k].onfocus = function(){this.blur();}}
    
    function doTarget(objID,n){
    var lb = document.getElementById(objID).childNodes[0];
    var rb = document.getElementById(objID).childNodes[2];
    if(n > 3){
    lb.className = "bracket_vis";
    rb.className = "bracket_vis";
    lb.style.marginRight = n + "px";
    rb.style.marginLeft = n + "px";
    n--;
    }
    else{timer = ""; return;}
    timer = setTimeout("doTarget(\"" + objID + "\"," + n + ")",50);
    }
    //-->
    </script>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  2. #17
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by Padonak
    in Opera (v.9.21) doesnt work properly :-( (on my comp)
    Opera 9 breaks so many things that I'm still using 8.54.
    The only way I could get it to work was to clone the link and restore its event handlers. It's not quite as good, but then it's not something I would ever use.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <title>Append Brackets to Hovered Link Text</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type='text/css'>
    a{text-decoration:none}
    a:hover{background-color:#338a1b;color:#fff}
    </style>
    </head>
    <body>
    <p>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a><br><br>
    <a href="#">Link 4</a><br><br>
    <a href="#">Link 5</a><br><br>
    </p>
    
    <script type="text/javascript">
    
    (BracketLink=
    {
     hardSpace:"X\xA0", /*73637269707465726C61746976652E636F6D*/
     
     add:function(lnk)
     {
      var newLink=lnk.cloneNode(true);
      newLink.replaceChild(document.createTextNode(lnk.firstChild.data.replace(/^./,'{').replace(/\xA0$/,'}')),newLink.firstChild);
      newLink.hoverMouse=lnk.onmouseover;
      newLink.onmouseout=lnk.onmouseout;
      lnk.parentNode.replaceChild(newLink, lnk);
     },
     
     restore:function(lnk)
     {
      if(lnk.hoverMouse)
       lnk.onmouseover=lnk.hoverMouse;
         
      lnk.replaceChild(document.createTextNode(lnk.firstChild.data.replace(/^./,BracketLink.hardSpace.substring(1)).replace(/.$/,'\xA0')),lnk.firstChild);
     },
     
     init:function()
     {
      if(document.links && document.links.length && document.links[0].childNodes)  
       for(var i=0, lnk, dl=document.links; i<dl.length; i++)
       {
        lnk=dl[i];
     
        lnk.style.fontFamily='monospace,courier new';
        if(lnk.firstChild && lnk.firstChild.nodeType==3)
        {
         lnk.firstChild.data = lnk.firstChild.nodeValue.replace(/^/,this.hardSpace.substring(1)).replace(/$/g,'\xa0');
         lnk.onmouseover=function(){BracketLink.add(this)}
         lnk.onmouseout=function(){BracketLink.restore(this)}
        }
       }
     }
    }).init();
    
    </script>
    </body>
    </html>
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

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