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
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"
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.)
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>
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?
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.)
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>
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.
use [code]YOUR CODE GOES HERE[/code] or burn in Hell
[RESOLVED] Link Hover Addition
Reply With Quote
Originally Posted by mcfrosty
Bookmarks