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 9 of 9
  1. #1
    pgb
    pgb is offline
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer setAttribute not working in IE

    The point of this script is to hide links that use Javascript if it's not supported.

    It works fine in FF but IE doesn't open the popup. I have a similar problem with a style switcher.

    If the links are hardcoded into the html no problem, but then they will be there for no purpose to non-Javascript browsers.

    <script type="text/javascript">
    <!--

    function addLoadEvent(func)
    {
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
    window.onload = func;
    }
    else
    {
    window.onload = function()
    {
    if (oldonload) //this bit added for IE7 runtime error
    {
    oldonload();
    }
    func();
    }
    }
    }

    function insertAfter(newElement,targetElement)
    {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement)
    {
    parent.appendChild(newElement);
    }
    else
    {
    parent.insertBefore(newElement,targetElement.nextSibling);
    }
    }

    function preparePopup()
    {
    var popup = document.createElement("a"); //place the anchor
    popup.setAttribute("href","newpage.html"); //give it a page to display
    popup.setAttribute("class","popup"); //set the hook for the popup
    var abouttext = document.createTextNode("About this popup") //some text for the link
    popup.appendChild(abouttext); //follow the anchor with the text

    var intro = document.getElementById("intro"); //get the position from the doc...
    insertAfter(popup,intro); //stick the popup in after it using premade function called insertAfter
    }

    function prepareLinks()
    {
    var links = document.getElementsByTagName("a"); // make an array of all links in doc
    for (var i=0; i<links.length; i++) // loop through this array
    {
    if (links[i].className == "popup") // if a link has the class popup...
    {
    links[i].onclick = function() //execute the behaviour when link is clicked
    {
    popUp(this.getAttribute("href")); //pass the value of the links href to the premade popup function
    return false; //cancel default behaviour so link isnt followed in original window
    }
    }
    }
    }

    function popUp(winURL)
    {
    window.open(winURL,"popup","width=320,height=320"); // open a new window
    }
    addLoadEvent(preparePopup);
    addLoadEvent(prepareLinks);
    -->
    </script>

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    The point of this script is to hide links that use Javascript if it's not supported.
    Erm…
    I think you mean 'to present js-dependent links only to users with js', right?


    Two points. when using the setAttribute method to set a class name, IE requires you to use className.
    i.e. [i]obj.setAttribute('className','blah');

    It's one of IE's many *charming* foibles.
    Due to these foibles, many regard it better (read: mroe straight-forward) to take the 'DOM 0' approach.

    i.e. obj.className = 'blah';

    It enjoys better browser support, both in terms of x-browser and backward compatibility.


    Secondly, if you are using js to create links which use a popup window, it would be preferably if you were to create the links as usual in the markup, and then overlay some js to divert the link to a popup for those users with js.
    Users without js will still be able to use the link. It will simply open in the current window.

    It's referred to as 'progressive enhancement'.

    e.g.
    Code:
    window.onload = doIt;
    	
    function doIt() {
    	
    	var allLinks = document.getElementsByTagName('a');
    	for (var i = 0, thisLink; thisLink = allLinks[i]; i++) {
    		if (thisLink.className == 'popup') {
    			thisLink.onclick = function() {
    				var newWin = window.open(this.href,'popup','width=320,height=320');
    				return false;
    			}
    		}
    	}
    	
    }
    
    …
    
    <a href="http://www.google.com/" class="popup">Google</a>
    You should endeavour to notify users when a link is going to open in a new window.
    To this end, you might at least, additionally consider adding some padding-right and a new window icon for the .popup class in your stylesheet.

    (There is much more you can do to enhance new window links and make the more flexible and degradable. e.g.)
    Last edited by Bill Posters; 06-29-2006 at 04:55 PM.

  • #3
    pgb
    pgb is offline
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Brilliant! Thanks.

  • #4
    pgb
    pgb is offline
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    BTW I have a similar problem with a style switcher. Again js dependent so using similar method.

    This time I think the offending code is...

    linka.setAttribute("onclick","setActiveStyleSheet('big'); return false;");

    Is there something like onclickDo?

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Iirc, IE (or one of the better known browsers [though it's probably IE]) will actually add the event attribute to the DOM, but it won't actually work.
    Again, using DOM 0 is an effective alternative.

    e.g.
    Code:
    linka.onclick = function() { setActiveStyleSheet('big'); return false; }
    Due to a number of these types of support issues/bugs, I use DOM 0 for all these types of operations - and will continue to do so until the bugs relating to them are no longer an issue.
    Last edited by Bill Posters; 06-29-2006 at 05:16 PM.

  • #6
    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
    IE (at least IE6) has not a bright implementation of DOM. But it looks like Moz has its hesitations as well. Regarding setAttribute() and getAttribute() there are additional notes:

    1. IE needs Camel Case attributes, in case of compounded, for instance
    getAttribute('colSpan')

    2. in case of "nonstandard" attributes (attributes "invented" by coder and attached dynamically to the element for some needs) Moz responds well only with DOM 0 as it considers getAttribute() and getAttributeNode() suitable only for standard attributes. On the contrary, in case of some standard HTML attributes (for instance type), IE does not like the dynamic change of the attribute at all.

    3. confusingly, IE considers attributes returned by DOM 2 getAttributeNode() sometimes as objects

    alert(element.getAttributeNode(att)) // alerts [object], while Moz alerts [object Attribute]

    sometimes as attributes

    alert(element.getAttributeNode(att).nodeType) // alerts 2 same as Moz, which means attribute node

    - All the above concern the HTML DOM, not XHTML/XML DOM --
    Last edited by Kor; 06-30-2006 at 09:29 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    pgb
    pgb is offline
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Is there a list of fixes for browser DOM quirks?

    Thanks again, this is a great forum. Is there a list of fixes for browser quirks anywhere?

  • #8
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    www.quirksmode.org documents a lot of browser bugs and provides workarounds for many.

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts


  •  

    Posting Permissions

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