PDA

View Full Version : Curvy route map - doesn't work in ie6

wuffy77
02-11-2008, 04:36 AM
Ok I've attached an example of what I was trying to do - if you open in a proper browser you'll see it works nicely, however if you open it in IE6, you'll see it's completely rubbish - the animation effect is screwed and the png doesn't work.

Can anyone help?

I've tried a few png fixes, but they don't seem to work - though the examples on the site seem to do the job, so I may be being daft.

Quite what's up with the javascript, I really don't know as the great Coothead wrote that, so it's unlikely to be rubbish code! ;)
freshOne
02-11-2008, 04:57 AM
in firefox there is a part of the rout don't turn to red
freshOne
02-11-2008, 05:05 AM
another thing, IE6 has a problem with png..it just doesn't display it transparent :D
coothead
02-11-2008, 05:12 AM
Hi there wuffy77,

does this help....
wuffy77
02-11-2008, 05:29 AM
ah, that's the png fixed - it's still not animating at all in IE6?

It's very strange - it starts fully red so the div must be at full height from the start?!
coothead
02-11-2008, 05:59 AM
Hi there wuffy77,

it worked OK for me in my version of IE6. ;)

Try changing this line...

document.getElementById('route').style['height']=progress+'px';

...to this...

document.getElementById('route').style.height=progress+'px';

...which is the more usual method of coding it. ;)
wuffy77
02-11-2008, 06:16 AM
nope, still the same... ;o(

Using IE6 SP2?!

It's very strange it's like the javascript isn't even starting - what's stranger is that it only does this if I include the image - if I take this line out:

<img src="map.png" alt="" width="585px" height="750px" >

It works fine!?!?
coothead
02-11-2008, 06:34 AM
Hi there wuffy77,

I do not know what to suggest, as it works in my version of IE6, although I do have ...
multiple versions (http://tredosoft.com/Multiple_IE)
... installed.

You could try this slightly different version of the script...

<script type="text/javascript">

var i=0;

function setdistance() {

distance=600; //distance in miles
distancepixels=750; //height of route in pixels
distancemiles=750; //distance of the journey in miles

i++;
if(i>distance) {
return;
}

progress=130+((distancepixels/distancemiles)*i);
document.getElementById('route').style.height=progress+'px';
setTimeout('setdistance()',15);
}
window.onload=function() {
setdistance();
}

</script>

...which uses setTimeout() rather than setInterval().

Other than that, you have me stumped. :(
wuffy77
02-11-2008, 08:44 AM
damn that still doesn't work Coothead!

what's wrong with IE6?? (don't answer that - could be here all day!)

Can anyone else confirm if it works for them in IE6?
freshOne
02-11-2008, 09:27 AM
it's not working in my IE6
freshOne
02-11-2008, 09:59 AM
coothead how did u manage to make the png transparent in IE6?

EDIT: sorry for hijacking the thread, i opened a thread http://www.htmlforums.com/html-xhtml/t-transparent-png-doesnt-appear-transparent-in-ie6-100298.html
coothead
02-11-2008, 11:56 AM
Hi there wuffy77,

I am pretty well certain that this will finally work in everyones favourite browser. :agree:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#route {
position:relative;
z-index:0;
width:585px;
height:0;
background-color:#f00;
}
#route img {
position:absolute;
z-index:1;
left:0;
top:0;
width:585px;
height:750px;
}
</style>

<!--[if IE 6]>
<style type="text/css" media="projection, screen">
#route img {
background-image:expression(
this.runtimeStyle.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' +this.src+ '", sizingMethod="image")',
this.runtimeStyle.backgroundImage='none',
this.src='blank.gif'
);
}
</style
<![endif]-->
<script type="text/javascript">

var i=0;

function setdistance() {

distance=600; //distance in miles
distancepixels=750; //height of route in pixels
distancemiles=750; //distance of the journey in miles

i++;
if(i>distance) {
return;
}

progress=130+((distancepixels/distancemiles)*i);
document.getElementById('route').style.height=progress+'px';
setTimeout('setdistance()',15);
}
window.onload=function() {
setdistance();
}

</script>

</head>
<body>

<div id="route">
<img src="map.png" alt="" >
</div>

</body>
</html>
coothead
02-11-2008, 12:07 PM
Hi there freshOne,

if you open the zip file mr.wuffy you will find a png image and a transparent gif image.
If you open the html file you will find this code...

<!--[if IE 6]>
<style type="text/css" media="projection, screen">
#route img {
background-image:expression(
this.runtimeStyle.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' +this.src+ '", sizingMethod="image")',
this.runtimeStyle.backgroundImage='none',
this.src='blank.gif'
);
}
</style
<![endif]-->

...which makes the png image transparent in IE 6. ;)
freshOne
02-12-2008, 02:28 AM
thnx a million i'll check it out
wuffy77
02-13-2008, 04:23 AM
coothead - brilliant! Works amazingly well - out of interest could you explain why it didn't work before and how you fixed it?

P.S Didn't think this was a likely reality from you: 'Other than that, you have me stumped. '
coothead
02-13-2008, 04:34 AM
Hi there wuffy77,

The solution for IE6 was in the CSS not the javascript.

The #route div, although having it's height set initially to zero, was expanding to accommodate the image.
Changing it to position:relative and the image to position:absolute affected the cure. ;)