SitePoint Sponsor

User Tag List

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

    changing "content" with DOM

    am not much for Javascript, but DOM does come in handy for somethings.

    I know how to change the contents of a DIV using a DOM script. But I was wondering if there was a way to just change part of the content using DOM.

    Specifically, what if I had an entire section of a page contained in a div, but merely wanted to use DOM to change , lets say the CLASS or ID name? The only way I know how uses .innerHTML, and essentially would require to rewrite the entire mark up of the DIV just to change its ID... not cool.

    Thanks in advance..

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    5 Thread(s)
    var div = document.getElementById('content');
    div.setAttribute('id','new-id');
    div.className = 'new-class';

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,827
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    so then why wouldn't this script work (in IE)... to TOGGLE visibility via switching CSS IDs?


    <script>
    var browser = navigator.appName;

    function MSdrop(target){

    if (browser == "Microsoft Internet Explorer"){
    THIS=document.getElementById('target');
    showTHIS = THIS +"_sho"
    THIS.setAttribute('id',showTHIS);
    }
    }



    function MSshut(target){
    if (browser == "Microsoft Internet Explorer"){
    THIS=document.getElementById('target');
    THIS.setAttribute('id',THIS);
    }
    }


    </script>


    ---

    CSS

    * html #prt, * html #rs {display: none;}
    * html #prt_sho, #rs_sho {display: block;}


    ----

    HTML ( sample)


    <li onmouseover="MSdrop('prt')" onmouseout="MSshut('prt')">
    <a href="portfolio_pages/port_adv_first.html"id="port"><span>portflio</span></a>
    <div id="prt">
    tons of junk here...
    </div>


    I also wish I knew how to send the div's id attribute AUTOMATICALLY ( as opposed to
    putting it in separately each time I call the function. I was thinking I could do it by using something like ... onmouseover="MSdrop(this.getAttribute.id).. but that wasnt it so I settled for typing it manually each instance.

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    5 Thread(s)
    The method setAttribute() doesn't work "correctly" in IE.

    http://www.quirksmode.org/bugreports...d_with_th.html

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,827
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    so then there is no way to change the ID of a DIV??

  6. #6
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    5 Thread(s)
    try:

    element.id = 'whatever';

  7. #7
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    5 Thread(s)
    I've come across this problem to, but normally I get around it using a class name instead avoiding/putting if off altogether, but this seems to work after doing minor research.

    var elementClone = element.cloneNode(true);
    elementClone.setAttribute('id',"new-id");
    elementClone.setAttribute('class',"new-class");
    var myParent = element.parentNode;
    myParent.replaceChild(elementClone,element);

    Kind off sucks you need to replace the node, but that seems as if its the best way to accomplish it cross browser.

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,827
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    oddz,

    I'll try it. .. I guess what confuses me is that I have no classes in my mark up and am only trying to change specific ids....

    so that I may understand this ( assuming i had a function that had the variable"element" which is the name of the ID I am trying to change....right?
    so if... ELEMENT = "RES"
    what the parser would understand is this...


    var elementClone = RES.cloneNode(true);
    elementClone.setAttribute('id',('RES'+'_sho');
    elementClone.setAttribute('class',('RES'+'_sho'); \\ is this part necessary ???\\\
    var myParent = RES.parentNode;
    myParent.replaceChild(elementClone,RES);

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You can get it working by checking if the element exists first before working with it.
    Please don't sniff for specific browsers. That path leads to brittle code.

    Here is the code that works across all the big browsers, not just microsoft.

    Code javascript:
    function MSdrop(target){
    	var el = document.getElementById(target);
    	if (el) {
    		el.id = target+"_sho";
    	}
    }
    function MSshut(target){
    	var el = document.getElementById(target+"_sho");
    	if (el) {
    		el.id = target;
    	}
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,827
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    THANK YOU PMW...

    thats beautiful...and I understand the code now...

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Thank you. That's one of the best compliments that a programmer can get, that his code is clearly understandable.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •