www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: [RESOLVED] Link Hover Addition

  1. #1
    Join Date
    Jun 2006
    Posts
    8

    resolved [RESOLVED] Link Hover Addition

    I am trying to add squiggley brackets to each side of my main navigation links when the mouse passes over each. I'm stealing the idea from complementaryduo.com, but when I disected their css, I found a background image was being used, and I rather wanted to avoid that.

    is there some easy javascript that will allow me to do this without needing a background image? I need to be able to work with it in conjunction with the css, such that my hover text color still applies to the brackets that will appear. (each navigation link is one word long)(if a color is needed, just use #338a1b).

    I'm really this bad with js, so some assitance would be much appreciated

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    using arrays is caused by Opera.

    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{
    width: 100%;
    text-align: center;
    margin-top: 100px;
    }
    .bracket{
    color: #a63944;
    background-color: transparent;
    font-weight: bold;
    font-size: 14px;
    margin-left: 5px;
    margin-right: 5px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="mainDiv">
    <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.links;
    var temp = new Array();
    
    for(var n = 0; n < dlinks.length; n++){
    
    dlinks[n].onmouseover = function(){
    temp.push(this.innerHTML);
    if(this.innerHTML.indexOf("bracket")!= -1){return;}
    else{
    this.innerHTML = "<span class='bracket'>[<\/span>" + temp[0] + "<span class='bracket'>]<\/span>";
    }
    }
    
    dlinks[n].onmouseout = function(){
    this.innerHTML = temp[0];
    temp.length = 0;
    }
    
    dlinks[n].onfocus = function(){this.blur();}
    }
    //-->
    </script>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Jun 2006
    Posts
    8
    I do thank you for the time you put into helping me, however there is one small problem. whenever I roll the mouse sideways after hovering over the link, the link is replaced by the message "undefined"

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    i havent noticed this bug (btw it appears only in IE). anyway this must help:

    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{
    width: 100%;
    text-align: center;
    margin-top: 100px;
    }
    .bracket{
    color: #a63944;
    background-color: transparent;
    font-weight: bold;
    font-size: 14px;
    margin-left: 5px;
    margin-right: 5px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="mainDiv">
    <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.links;
    var temp = new Array();
    
    for(var n = 0; n < dlinks.length; n++){
    
    dlinks[n].onmouseover = function(){
    if(navigator.userAgent.indexOf("Opera") < 0){temp.length = 0;}
    temp.push(this.innerHTML);
    if(this.innerHTML.indexOf("bracket")!= -1){return;}
    else{
    this.innerHTML = "<span class='bracket'>[<\/span>" + temp[0] + "<span class='bracket'>]<\/span>";
    }
    }
    
    dlinks[n].onmouseout = function(){
    this.innerHTML = temp[0];
    if(navigator.userAgent.indexOf("Opera") != -1){temp.length = 0;}
    }
    
    dlinks[n].onfocus = function(){this.blur();}
    }
    //-->
    </script>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    and here is advanced version w/o using arrays :-)))

    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{
    width: 100%;
    text-align: center;
    margin-top: 100px;
    }
    .bracket{
    color: #a63944;
    background-color: transparent;
    font-weight: bold;
    font-size: 14px;
    margin-left: 3px;
    margin-right: 3px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="mainDiv">
    <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.links;
    var temp;
    var timer;
    
    for(var n = 0; n < dlinks.length; n++){
    
    dlinks[n].onmouseover = function(){
    var temp = this.innerHTML;
    if(this.innerHTML.indexOf("bracket")!= -1){return;}
    else{
    this.innerHTML = "<span id='lbrak' class='bracket'>[<\/span>" + temp + "<span  id='rbrak' class='bracket'>]<\/span>";
    doTarget(15);
    }
    }
    
    function doTarget(n){
    var lb = document.getElementById("lbrak");
    var rb = document.getElementById("rbrak");
    if(n > 3){
    lb.style.marginRight = n + "px";
    rb.style.marginLeft = n + "px";
    n--;
    }
    else{timer = ""; return;}
    timer = setTimeout("doTarget(" + n + ")",50);
    }
    
    dlinks[n].onmouseout = function(){
    if(timer != ""){clearTimeout(timer);}
    this.removeChild(document.getElementById("lbrak"));
    this.removeChild(document.getElementById("rbrak"));
    }
    
    dlinks[n].onfocus = function(){this.blur();}
    }
    //-->
    </script>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  6. #6
    Join Date
    May 2004
    Location
    FL
    Posts
    3,447
    Padonak,
    That's pretty nice. Mind if I post it over on JavaScript Source? Of course, I'll give you the credit and a link back to your Web site. (I just need the name and URL you want to use.)
    Lee

    ""Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened."" -- Sir Winston Churchill

  7. #7
    Join Date
    Jun 2006
    Posts
    8
    whoa, sweetness. thanks so much for your help, Padonak!
    Last edited by mcfrosty; 06-21-2007 at 10:58 AM.

  8. #8
    Join Date
    Jun 2007
    Posts
    104
    Nice effect Padonak! I've retooled the script a little bit so that the effect wasn't applied to all links on the page, and I converted it from using innerHTML to utilizing the DOM a bit more (and because of this I had to add some error trapping). Forgive me for messing with your code but I'm becoming a bit of a DOM addict.

    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    var dlinks = document.getElementById('mainDiv').getElementsByTagName('a');
    var timer;
    
    for(var n = 0; n < dlinks.length; n++){
    
    dlinks[n].onmouseover = function(){
    	var txt = null;
    	for( var i in this.childNodes ){ 
    		try{
    			if(this.childNodes[i].className == 'bracket' || this.childNodes[i].getAttribute('class') == 'bracket') return; 
    		}catch(e){ if(this.childNodes[i].className == 'bracket') return;  }
    		if(this.childNodes[i].nodeType=='3') txt = this.childNodes[i].cloneNode(false);
    	}
    	while(this.childNodes.length != 0){ this.removeChild(this.childNodes[0]); }
    	var left = document.createElement('span');
    	var right = document.createElement('span');
    	left.setAttribute('id','lbrak'); left.setAttribute('class','bracket'); left.appendChild(document.createTextNode('['));
    	right.setAttribute('id','rbrak'); right.setAttribute('class','bracket'); right.appendChild(document.createTextNode(']'));
    	left.className = 'bracket'; right.className="bracket"; /* IE sucks */
    	this.appendChild(left); this.appendChild(txt); this.appendChild(right);
    	doTarget(15);
    }
    
    function doTarget(n){
    var lb = document.getElementById("lbrak");
    var rb = document.getElementById("rbrak");
    if(n > 3){
    lb.style.marginRight = n + "px";
    rb.style.marginLeft = n + "px";
    n--;
    }
    else{timer = ""; return;}
    timer = setTimeout("doTarget(" + n + ")",50);
    }
    
    dlinks[n].onmouseout = function(){
    	try{
    		if(timer != ""){clearTimeout(timer);}
    		this.removeChild(document.getElementById("lbrak"));
    		this.removeChild(document.getElementById("rbrak"));
    	}catch(e){ }
    }
    
    dlinks[n].onfocus = function(){this.blur();}
    }
    //-->
    </script>
    Last edited by stevea; 06-21-2007 at 11:16 AM.

  9. #9
    Join Date
    May 2004
    Location
    FL
    Posts
    3,447
    Hey stevea,

    I have to say, that is a bit better than Padonak. I also am "a bit of a DOM addict". However, if I place the script in the head section or in an external file and use the window.onload command, I get an error: "Error: doTarget is not defined". Any ideas here?
    Lee

    ""Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened."" -- Sir Winston Churchill

  10. #10
    Join Date
    May 2004
    Location
    FL
    Posts
    3,447
    Hey stevea,

    I have to say, that is a bit better than Padonak. I like that it doesn't effect the other links. I also am "a bit of a DOM addict". Mind if I use it over on JavaScript Source? Of course, I'll give you and Padonak the credit and a link back to both your Web sites. (I just need the name and URL you want to use.)
    Lee

    ""Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened."" -- Sir Winston Churchill

  11. #11
    Join Date
    Jun 2007
    Posts
    104
    Hey LeeU, I'd be thrilled if you used it. I don't have a personal website (how odd for a web developer huh?), though you could credit me as Steve Aurigema (second to Padonak of course).

    I can tell from his code that Padonak could have done the same thing, I just happen to be bored at work .

    Anyway I've added a wrapper function so that it can be called from the onLoad.

    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    var dlinks = document.getElementById('mainDiv').getElementsByTagName('a');
    var timer;
    function init(){
    	for(var n = 0; n < dlinks.length; n++){
    		dlinks[n].onmouseover = function(){
    			var txt = null;
    			for( var i in this.childNodes ){ 
    				try{
    					if(this.childNodes[i].className == 'bracket' || this.childNodes[i].getAttribute('class') == 'bracket') return; 
    				}catch(e){ if(this.childNodes[i].className == 'bracket') return;  }
    				if(this.childNodes[i].nodeType=='3') txt = this.childNodes[i].cloneNode(false);
    			}
    			while(this.childNodes.length != 0){ this.removeChild(this.childNodes[0]); }
    			var left = document.createElement('span');
    			var right = document.createElement('span');
    			left.setAttribute('id','lbrak'); left.setAttribute('class','bracket'); left.appendChild(document.createTextNode('['));
    			right.setAttribute('id','rbrak'); right.setAttribute('class','bracket'); right.appendChild(document.createTextNode(']'));
    			left.className = 'bracket'; right.className="bracket"; /* IE sucks */
    			this.appendChild(left); this.appendChild(txt); this.appendChild(right);
    			doTarget(15);
    		}
    
    		dlinks[n].onmouseout = function(){
    			try{
    				if(timer != ""){clearTimeout(timer);}
    				this.removeChild(document.getElementById("lbrak"));
    				this.removeChild(document.getElementById("rbrak"));
    			}catch(e){ }
    		}
    
    		dlinks[n].onfocus = function(){this.blur();}
    	}
    }
    function doTarget(n){
    	var lb = document.getElementById("lbrak");
    	var rb = document.getElementById("rbrak");
    	if(n > 3){
    		lb.style.marginRight = n + "px";
    		rb.style.marginLeft = n + "px";
    		n--;
    	}
    	else{timer = ""; return;}
    	timer = setTimeout("doTarget(" + n + ")",50);
    }
    
    //-->
    </script>

  12. #12
    Join Date
    May 2004
    Location
    FL
    Posts
    3,447
    Looks good, Steve. I did have to move the function init(){ above the variables but it works now. Thanks.

    @Padonak, did you get my message above [post #6]?
    Lee

    ""Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened."" -- Sir Winston Churchill

  13. #13
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    lol guys! whats going on here ? :-)
    2LeeU of course feel free doing what you want with this script :-) i have never thought it will be so interesting to the others :-) i have no website too so you may just write that there lives somewhere in Russia a man called Padonak :-) but I think, that it would be best to not mention me absolutely because i am not a webdeveloper :-) it is just a hobby and self-education to go at this site and trying to help people if i can to. i am a plumber :-)

    2stevea thanx for modifying the script :-)

    BUT! i must worry you guys that this script still has a little bug in Opera! If you move your mouse fast over the links upwards or downwards the brackets will not be removed. this happens not every time you move your mouse over them but it happens. may be the timeout must be decreased or something else must be done to debug the script...

    2ALL please excuse me for my disgusting english (i am russian)
    Last edited by Padonak; 06-21-2007 at 03:07 PM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  14. #14
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by mcfrosty
    I am trying to add squiggley brackets to each side of my main navigation links when the mouse passes over each.
    Here's an alternative approach, using a monospace font to avoid displacing surrounding content.
    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)
     {
      lnk.replaceChild(document.createTextNode(lnk.firstChild.data.replace(/^./,'{').replace(/\xA0$/,'}')),lnk.firstChild)
     },
     
     restore:function(lnk)
     {
      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!

  15. #15
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    in Opera (v.9.21) doesnt work properly :-( (on my comp)
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

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