setAttribute not working in IE

[pgb]

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>

[Bill Posters]

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.

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.)

[pgb]

Brilliant! Thanks.

[pgb]

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?

[Bill Posters]

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.

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.

[Kor]

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

[pgb]

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

[Beagle]

www.quirksmode.org documents a lot of browser bugs and provides workarounds for many.

[Bill Posters]

See also: www.positioniseverything.net