Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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:

    Code:
    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:

    Code:
    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!

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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


    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.
    Last edited by Bill Posters; 01-19-2006 at 04:21 PM.

  • #3
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ouch -- that was slightly embarassing. (I ought to have known better!) But fixing it doesn't seem to help:\

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Seems to be setting the new class/className ok when I test it out locally.

  • #5
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    For IE I think you should use

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

    Cross browser maybe

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

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #7
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    > 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

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Try my example

    PHP Code:
    <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> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    DOM HTML shortcut:
    (http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-58190037)
    HTMLElement.className = 'myclass'

    works just fine in both IE and Gecko....
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    HTMLElement.className = 'myclass'

    works just fine in both IE and Gecko....
    That is true but Tiram was using setAttribute()
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #11
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Tyram
    > 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...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •