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 gets an ID while the gets a NAME.

I guess you need to find the right syntax to address the by name (or is it the ?) 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