2 classes for the same text

**MTD** · 08-22-2006, 03:47 PM

How can I add two classes to the same link? (One of the classes is set up with javascript, the other is just a normal CSS style)

**DimX** · 08-22-2006, 03:50 PM

Code:

class="classone classtwo"

**MTD** · 08-22-2006, 10:42 PM

i tried that, but for some reason it doesn't seem to work.

**ItsMeOnly** · 08-22-2006, 11:12 PM

then you must be testing on some very outdated browser, like IE5.0

**Twey** · 08-22-2006, 11:22 PM

Could you provide a demo?

**mburt** · 08-23-2006, 12:10 AM

I'm not really sure of the question in hand, either.

**jscheuer1** · 08-23-2006, 06:18 AM

HTML Code:

<a href="some.htm" class="classone classtwo">Link Text</a>

is the proper way to do this in an HTML tag. If you are setting things via javascript, it would depend upon just what you wanted to do. If you want to take the existing className and add to it:

Code:

el.className=el.className+' classtwo';

where the variable 'el' represents the element that you want to do this to. Removing the second class could be done like so:

Code:

el.className=el.className.replace(/ classtwo/, '');

There are so many ways to do things in javascript though, the above are just examples - ideas. Exactly how you go about this should be tailored to all possible situations that could arise on your page(s) that use the code.

**MTD** · 08-23-2006, 04:29 PM

So, here is the code that I'm trying to use. the two classes work fine seperatly, just not together.

Code:

<head>
<style type="text/css"> 
.xlink {cursor:url("pound.cur")} 



</style> 


<script type="text/javascript">
var bulletimg='<img id="bullet" style="position:absolute; left: -300px" src="bah.gif">'

var bulletoffX=2 //Set horizontal offset of bullet image from link's root. (ie: -2 or 5)
var bulletoffY=8 //Set vertical offset of bullet image from link's root. (ie: -2 or 5)

function caloffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function displaybullet(linkobj){
bulletobj.style.left=caloffset(linkobj, "left")-bulletobj.width-bulletoffX+"px"
bulletobj.style.top=caloffset(linkobj, "top")-bulletoffY+linkobj.offsetHeight/3+"px"
bulletobj.style.visibility="visible"
}

function modifylinks(){
bulletobj=document.all? document.all.bullet : document.getElementById("bullet")
for (i=0; i<document.links.length; i++){
if (document.links[i].className=="ddbullet"){
document.links[i].onmouseover=function(){displaybullet(this)}
document.links[i].onmouseout=function(){bulletobj.style.visibility="hidden"}
}
}
}

if (document.all || document.getElementById)
document.write(bulletimg)

if (window.addEventListener)
window.addEventListener("load", modifylinks, false)
else if (window.attachEvent)
window.attachEvent("onload", modifylinks)
else if (document.getElementById || document.all)
window.onload=modifylinks

</script>
</head>
<body>
<a href="scops.html" class="ddbullet xlink" STYLE="text-decoration: none" target="B">S.C.O.P.s</a>
</body>

Thanks for the help so far.

**Twey** · 08-23-2006, 04:37 PM

Change this line:

Code:

if (document.links[i].className=="ddbullet"){

to:

Code:

if (document.links[i].className.indexOf("ddbullet") !== -1){

**MTD** · 08-23-2006, 04:45 PM

That change in code fixed it. Thanks!

Thread: 2 classes for the same text

Thread Tools

Search Thread

2 classes for the same text

Bookmarks

Bookmarks

Posting Permissions