createElement in opera

[qwertyuiop]

Hi,
I'm using the code below on a page, but Opera doesn't render it. It works in Firefox and IE though.

function addStyleSwitchBar(){
var light = document.createElement('img');
light.setAttribute('id', 'light');
light.setAttribute('src', 'light.png');

var aLight = document.createElement('a');
aLight.setAttribute('href', 'javascript:setStyle(1)');
aLight.appendChild(light);

var dark = document.createElement('img');
dark.setAttribute('id', 'dark');
dark.setAttribute('src', 'dark.png');

var aDark = document.createElement('a');
aDark.setAttribute('href', 'javascript:setStyle(2)');
aDark.appendChild(dark);

var styleSwitcherDiv = document.createElement('div');
styleSwitcherDiv.setAttribute('id', 'styleswitcher');
styleSwitcherDiv.appendChild(aLight);
styleSwitcherDiv.appendChild(aDark);

document.body.appendChild(styleSwitcherDiv);
}

window.onload = function(){
addStyleSwitchBar();
}


All that the code is doing is adding this:
<div id="styleswitcher">
<a href="javascript:setStyle(1)"><img id="light" src="light.png"></a>
<a href="javascript:setStyle(2)"><img id="dark" src="dark.png"></a>
</div>

And the CSS that styles it...
#styleswitcher {
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
}

How do I fix this?

[qwertyuiop]

According to websites, Opera supports createElement(), but I just can't see why it doesn't work.

[Bill Posters]

Works fine for me in Opera8.5/Mac.


Fwiw, you might consider dropping the anchors and adding the js functionality directly as an onclick events of the img elements themselves.

i.e.

css
#styleswitcher {
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
}

#styleswitcher img {
cursor: pointer;
}

js
function addStyleSwitchBar() {

var light = document.createElement('img');
light.setAttribute('id', 'light');
light.setAttribute('src', 'http://www.google.com/images/google_sm.gif');
light.setAttribute('alt', 'Set style to light.');
light.setAttribute('onclick', 'setStyle(1); return false;');

var dark = document.createElement('img');
dark.setAttribute('id', 'dark');
dark.setAttribute('src', 'http://www.google.com/images/google_sm.gif');
dark.setAttribute('alt', 'Set style to dark.');
dark.setAttribute('onclick', 'setStyle(2); return false;');

var styleSwitcherDiv = document.createElement('div');
styleSwitcherDiv.setAttribute('id', 'styleswitcher');

styleSwitcherDiv.appendChild(light);
styleSwitcherDiv.appendChild(dark);

document.body.appendChild(styleSwitcherDiv);

}

window.onload = function() {

addStyleSwitchBar();

}

(creates) markup
<div id="styleswitcher">
<img id="light" src="light.png" alt="Set style to light." onclick="setStyle(1); return false;">
<img id="dark" src="dark.png" alt="Set style to dark." onclick="setStyle(2); return false;">
</div>


Just a thought.

[Kor]

yes, the way of coding

a href="javascript:somefunction()"
is deprecated. Anyway, even so the correct code should have been

a href="javascript:void(somefunction())"

So that you use either Bill Posters' s solution (by the way, Bill, in this case you don't need return false). But, instead of setAttribute('onclick',...) I should have been used rather

element.onclick=function(){...}

or

<a href="#" onclick="somefunction();return false">

(Now, Bill, return fase has a real role, it will prevent the scrolling top folowing the # anchor )

[Bill Posters]

(by the way, Bill, in this case you don't need return false)…
I did know that. I just threw it in there out of force of habit, as it were.

Thanks for pointing it out to the OP, though.

[Kor]

I did know that. I just threw it in there out of force of habit, as it were.

Thanks for pointing it out to the OP, though.
I thought so. :thumbsup: I also use to do some redundant things sometime. I didn't mean it was wrong, it was just usless.

[qwertyuiop]

Since there was nothing wrong with the actual function, I spent forever trying to figure out why it wasn't working. I figured out that another function was interfering with it. The order of the functions in the .js file was messing it up in Opera. Finally figured it out though! :)

Bill: Is it better to use onclick on the <img> tag instead of <a>?

I have another question, what browsers support the code that I used (in the addStyleSwitchBar() function)? Is there anything I can do to optimize it? There's a slight delay between the page load and the style switch bar load.

Thanks for the help.

[Bill Posters]

Bill: Is it better to use onclick on the <img> tag instead of <a>?
Having thought about it some more, there are various usability and accessibility reasons why it might be better to nest the img elements within anchors as you already do, rather than use the onclick method as I previously suggested.

There are reasons both for and against each approach, but both seem to end up pretty evenly matched. So, for the sake of simplicity, I feel that you might be best served by sticking with the use of anchors in this case.


I have another question, what browsers support the code that I used (in the addStyleSwitchBar() function)? Is there anything I can do to optimize it? There's a slight delay between the page load and the style switch bar load.

Thanks for the help.
It's generally advised that you check for certain capabilities right at the start of a function (or js class) to ensure that only those UAs capable of executing the methods within the function attempt to run it.

e.g.
function addStyleSwitchBar() {

if (!document.createElement) return; // if the UA doesn't support document.createElement method return to the document and ignore this script

var light = document.createElement('img');
light.setAttribute('id', 'light');
light.setAttribute('src', 'light.png');

…
It's called 'object detection' (http://www.google.com/search?q=javascript+%22object+detection%22) and is the naturalk inheritor to tasks previously undertaken by 'browser sniffing'.
You could check for support of each method used in a script, but by and large, browsers began supporting createElement, setAttribute and appendChild in the same respective version.
You can find more detailed info here (http://www.quirksmode.org/index.html?/js/support.html).