prototype - internet explorer problem ?

[dragovian]

hey,

i am working on a webdesign for my boss and i was doing some scripting cause he wanted to be able to "zoom/enlarge" something using a simple zoombutton.

the code i wrote works perfectly in firefox en safari, but in ie7 and ie8 it just doesn't :(

var checker=true;
$('sparanimatieB').observe('click', function(event){
if(checker==true)
{
$('sparanimatie2').writeAttribute("width","427px");
$('sparanimatie2').writeAttribute("height","405px");
$('sparanimatie3').writeAttribute("width","427px");
$('sparanimatie3').writeAttribute("height","405px");
Element.extend($('sparanimatie'));
$('sparanimatie').setStyle({"width":"427px"});
$('sparanimatie').setStyle({"height":"405px"});
$('sparanimatie').setStyle({"position":"absolute","left":"-100px"});
checker = false;}
else
{
$('sparanimatie2').writeAttribute("width","227px");
$('sparanimatie2').writeAttribute("height","205px");
$('sparanimatie3').writeAttribute("width","227px");
$('sparanimatie3').writeAttribute("height","205px");
Element.extend($('sparanimatie'));
$('sparanimatie').setStyle({"width":"227px"});
$('sparanimatie').setStyle({"height":"205px"});
$('sparanimatie').setStyle({"position":"absolute","left":"0px"});
checker = true;}
});

i thought it might have something to do with the "writeAttribute" function so i changed it to this

var checker=true;
$('sparanimatieB').observe('click', function(event){
if(checker==true)
{
$('sparanimatie2').setStyle({"width":"427px"});
$('sparanimatie2').setStyle({"height":"405px"});
$('sparanimatie3').setStyle({"width":"427px"});
$('sparanimatie3').setStyle({"height":"405px"});
Element.extend($('sparanimatie'));
$('sparanimatie').setStyle({"width":"427px"});
$('sparanimatie').setStyle({"height":"405px"});
$('sparanimatie').setStyle({"position":"absolute","left":"-100px"});
checker = false;}
else
{
$('sparanimatie2').setStyle({"width":"227px"});
$('sparanimatie2').setStyle({"height":"205px"});
$('sparanimatie3').setStyle({"width":"227px"});
$('sparanimatie3').setStyle({"height":"205px"});
Element.extend($('sparanimatie'));
$('sparanimatie').setStyle({"width":"227px"});
$('sparanimatie').setStyle({"height":"205px"});
$('sparanimatie').setStyle({"position":"absolute","left":"0px"});
checker = true;}
});

but it still aint working in internet explorer :(

i thought prototype was to erase all browser"inefficiencies" :( ?

that's the whole purpose i tried learning it XD

[Airshow]

Drago,

So what behaviour do you get in IE? It's hard to disgnose without knowing the symptoms.

Airshow

[index7]

I had problem with prototype on IE.

I can't say that prototype is 100% cross-browser

[dragovian]

well first of all the behavior i get in firefox is that it changes width/height and positioning.

in internet explorer i get nothing :/

apparently for some reason it gets stuck on the "writeAttribute" or the "setStyle"

which is absolutely weird, cause i set a testhtml in dreamweaver with just divs and they work perfectly fine in ie and firefox, but for some reason on my website they don't ;s

it's an swf object i'm trying to resize btw, could that have something to do with it ?

but even if, it still doesn't say why it does work in firefox and safari and why it doesn't in ie

[Airshow]

So does IE give a javascript error?

[dragovian]

yes it does.

i managed to trace the problem with the resizing of the swf object.

for some reason it gives

"null" is null or not an object.

as error. :s

[Airshow]

Have a look at the HTML for the swf. If I recall correctly, the <object> gets an ID while the <embed> gets a NAME.

I guess you need to find the right syntax to address the <embed> by name (or is it the <object by ID> ?) in Prototype speak.

In either case, the Prototype API should tell you how.

Airshow

[dragovian]

well after some work in dreamweaver i managed to "fix" it.

for those interested here is how i did it.

i made 2 css-classes

#sparanimatie3klass {
    width:427px;
    height:405px;
}
#sparanimatie3 {
    width:227px;
    height:205px;
}

i deleted the id for sparanimatie2

and i made my prototype as follows ;)

var checker=true;

$('sparanimatieB').observe('click', function(event){
if(checker==true)
{
$('sparanimatie').setStyle({"width":"427px"});
$('sparanimatie').setStyle({"height":"405px"});
$('sparanimatie3').writeAttribute("id","sparanimatie3klass");

checker = false;}
else
{
$('sparanimatie').setStyle({"width":"227px"});
$('sparanimatie').setStyle({"height":"205px"});
$('sparanimatie3klass').writeAttribute("id","sparanimatie3");
checker = true;}
});

that fixed it for ie

[Airshow]

Drago,

If that works, then so might this:

.s_large {
	width:427px;
	height:405px;
}
.s_small {
	width:227px;
	height:205px;
}

var checker = true;
	$('sparanimatieB').observe('click', function(event){
	if(checker==true){
		$('sparanimatie').writeAttribute("class","s_large");
		$('sparanimatie3').writeAttribute("class","s_large");
		checker = false;
	}
	else{
		$('sparanimatie').writeAttribute("class","s_small");
		$('sparanimatie3').writeAttribute("class","s_small");
		checker = true;
	}
});

In fact, if this works, then the javascript will boil right down to:

var checker = true;
$('sparanimatieB').observe('click', function(event){
	var c = (checker) ? "s_large" : "s_small";
	$('sparanimatie').writeAttribute("class", c);
	$('sparanimatie3').writeAttribute("class", c);
	checker = !checker;
	}
});

It seems better, if you can, to have the same mechanism (class swapping) for both cases. Also I sense something dangerous in id swapping.

Airshow