SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    switching an elemet ID/Firefox?

    I am trying to use Javascript to augment the functionality of my CSS and avoid CSS hacks.. I've been told is the best way to go.

    So I was toying around with changing an elemnt's ID... thus essentially applying an alternate style to it dynamically. Can Firefox (and IE Win) change IDs using code like "document.getElementById(oldID).id='newID'"? I got it to work on Safari, and IE mac... but it's not taking on Firefox.



    I admit the following function is far from graceful, but I am no javascripter.. in fact I just started in CSS like 3 or 4 months ago.


    function css(idit){
    var elemental = document.getElementById(idit);
    if (idit !='switch1'){
    elemental.id = 'switch1';}
    else{ elemental.id = 'switch2';}
    }


    This would apply to some markup such as...

    <div id="cont" >
    <div id="switch" onclick= "css(this.id)"> this text will be switched</div> </div>


    Since the function works in the afore mentioned browsers ( and I did an alert on the "elemantal" and "idit" variables).. I concluded my conditional (if) statement is working and the variables are being passed correctly.

    What am I missing or is it FF and IE win?

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    A lot more people have JavaScript disabled than have CSS disabled and so using conditional comments in the HTML to fix any stylesheet problems for IE is the best way to go.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Felgall,
    thank you for your response, practically i would have a conditional statement that loads the javascript only in the browsers that are needed... but I am curious to know if FF simply doesn't accept the ".id='whatever'". My observations suggest that the ID IS being changed but that no visual change occurs, as if Firefox is not dynamically rerendering the page.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Have you tried using a class rather than an id. Perhaps some browsers don't update when the id is changed since with an id needing to be unique within a web page there is seldom a real need to change it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

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