...

View Full Version : Trying to set the attribute to an element without much success:\



Tiram
01-19-2006, 03:12 PM
I have this JavaScript that should set the class attribute of the DIV#main to e.g. "1200pluss" or whatever, depending on window width -- but I can't get it to work! This is the script:


function getBrowserWidth()
{
if (window.innerWidth)
{
return window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth != 0)
{
return document.documentElement.clientWidth;
}
else if (document.body)
{
return document.body.clientWidth;
}
return 0;
}

function changeClass()
{
var theWidth = getBrowserWidth();
var theElement = document.getElementById("main");
if ( theWidth > 1400 )
{
theElement.setAttribute('class','1400pluss');
}
else if (theWidth > 1200)
{
theElement.setAttribute('class','1200pluss');
}
else if (theWidth > 800)
{
alert(theElement + ' 800px+');
}
else
{
theElement.setAttribute('class','fallback');
}
return true;
}

(Feel free to ignore the bit corresponding to "theWidth > 800" -- that's my test line:)

The script detects the width just fine, and using an alert or a doc.write works, but not "setAttribute":\

A friend suggested using this instead:


theElement.className='fallback';

... but that didn't work either.

I've put up a copy of the page in question here:

http://tiram.org/temp/argh/index.html

... and the script here:

http://tiram.org/temp/argh/test.js

... if you want to have a closer look at it.

I'd appriciate any help on the subject!

Bill Posters
01-19-2006, 03:19 PM
Possibly something to do with the fact that class and id values mustn't start with a numeral.

W3C: Syntax and Basic Data Types: 4.1.3 Characters and case (http://www.w3.org/TR/2004/CR-CSS21-20040225/syndata.html#q6)



In CSS 2.1, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit. Only properties, values, units, pseudo-classes, pseudo-elements, and at-rules may start with a hyphen (-); other identifiers (e.g. element names, classes, or IDs) may not.

Tiram
01-19-2006, 03:24 PM
Ouch -- that was slightly embarassing. (I ought to have known better!) But fixing it doesn't seem to help:\

Bill Posters
01-19-2006, 04:45 PM
Seems to be setting the new class/className ok when I test it out locally.

Tiram
01-19-2006, 08:58 PM
Using the same code as what I pasted in? 'Couse I can't make it work *frown* If you don't mind, could I see the scripting you tested with? (To see what I did wrong ...:)

M :)

Mr J
01-19-2006, 09:11 PM
For IE I think you should use

theElement.setAttribute('className','newrule');

Cross browser maybe

theElement.setAttribute((document.all?"className":"class"),"newrule")

Tiram
01-19-2006, 10:12 PM
> theElement.setAttribute('className','newrule');

> But setAttribute should work with /any/ attribute, so I shouldn't have to use className at all?

Bill Posters, you actually tested my code as you found it, and made it work? Is it possible to have a peek at your code? (In case you made any changes that would help me:)

Mr J
01-19-2006, 10:55 PM
Try my example


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">

function changeRule1(){
document.getElementById("div1").setAttribute("class","rule2")
}

function changeRule2(){
document.getElementById("div1").setAttribute("class","rule1")
}

function changeRule3(){
document.getElementById("div1").setAttribute("className","rule2")
}

function changeRule4(){
document.getElementById("div1").setAttribute("className","rule1")
}

</script>


<style>

.rule1{
width:200px;
color:#00FF00;
background-color:#005500;
}

.rule2{
width:200px;
color:#0000FF;
background-color:#000055;
}


</style>
</HEAD>
<BODY>


<div id="div1" class="rule1">
IE requires<BR><BR>
setAttribute("className","rule2")<BR><BR>
while Moz requires<BR><BR>
setAttribute("class","rule2")


</div>
<BR><BR>
Works in Moz
<a href="#null" onclick="changeRule1()">Rule 2</a> <a href="#null" onclick="changeRule2()">Rule 1</a>
<BR><BR>
Works in IE
<a href="#null" onclick="changeRule3()">Rule 2</a> <a href="#null" onclick="changeRule4()">Rule 1</a>
</BODY>
</HTML>

Vladdy
01-20-2006, 05:37 AM
DOM HTML shortcut:
(http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037)
HTMLElement.className = 'myclass'

works just fine in both IE and Gecko....

Mr J
01-20-2006, 02:00 PM
HTMLElement.className = 'myclass'

works just fine in both IE and Gecko....

That is true but Tiram was using setAttribute()

Kor
01-20-2006, 02:25 PM
> But setAttribute should work with /any/ attribute, so I shouldn't have to use className at all?

This is a part of the endless and stubborn "fight" between browsers on one side, and between browsers and W3C on the other.

For instance IE uses setAttribute('className') while Moz uses setAttribute('class'). To avoid complicate coding, you may safely use
object.className=' ';
It is also a DOM method (lower level) but don't worry, is a valid one. And fortunatelly is cross-browser.

Speaking about setAttribute()... There is also a problem changing the type attribute for an input (it looks like IE5 on Mac don't like it), but again, the old
object.type=' '
saves the code...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum