PDA

View Full Version : Problem with Ultimate Fade Script and IE8



matt-c
11-10-2009, 09:23 AM
1) Script Title: Ultimate Fade v1.5

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Im trying to set up a page with 3 images slideshows on which fade into each other but they need to stagger so that they dont all fade at the same time, which is why i've used v1.5 rather than the newer v2.

It works fine apart from on IE8 where sometimes it loses the sequence and they start fading too soon or at the same time.

Also if you right click anywhere on the page it "pauses" the script and also messes up the sequence. It's as if the timing is still running but no fading is occurring, until you click off the right click menu, and then it will continue to fade but not in the correct sequence.

Thanks for your help.

Matt

matt-c
11-10-2009, 09:25 AM
Javascript used:


var stagger=0


var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder, bgpic){
this.pausecheck=pause
this.mouseovercheck=0
this.delayf=delay
this.delay=delay/2
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
this.postimages=new Array() //preload images
if (iebrowser&&dom||dom) { //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="imgDiv'+this.slideshowid+'" style="display:none;">')
for (var i_tem = 0; i_tem < this.theimages.length; i_tem++)
document.write('<img src="'+this.theimages[i_tem][0]+'">\n')
document.write('</div>')

for (var p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=document.getElementById('imgDiv'+this.slideshowid).getElementsByTagName('img')[p].src
}
document.write('<div style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px; background:url(/Portals/0/images/homepage/' +bgpic+') no-repeat bottom right;">\n')
document.write('<span id=LB0'+this.slideshowid+' style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;left:-50px;top:-18px"></span>\n')
document.write('<span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;"><span id=LB1'+this.slideshowid+' style="position:absolute;left:0;top:0;font-size:1px;width:0;height:10px;"></span></span></span>\n')
document.write('<div id="show'+this.slideshowid+'" style="visibility:hidden;">\n')
}

else
for (var p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

if (iebrowser&&dom||dom) {//if IE5+ or modern browsers (ie: Firefox)
var filtering=typeof document.body.style.opacity!=='string'? 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-khtml-opacity:10;-moz-opacity:10;' : ''
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;'+filtering+'opacity:10;background-color:'+fadebgcolor+'"></div><img id="temp'+this.slideshowid+'" style="position:relative;z-index:1000;" src="'+this.theimages[0][0]+'"><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;'+filtering+'opacity:10;background-color:'+fadebgcolor+'"></div></div></div></div>')
}
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.images_loading_bar()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay) //time between each loop of the images - aprox 15 secs
obj.delay=obj.delayf
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
//if (this.pausecheck==1) //if pause onMouseover enabled, cache object
//var cacheobj=this
//if (this.mouseovercheck==1)
//setTimeout(function(){cacheobj.rotateimage()}, 100)
//else
if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
//if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
//var cacheobj=this
//var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
//crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
//crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
//}
this.rotateimage()
}

fadeshow.prototype.images_loading_bar=function(){
var m00=document.getElementById('imgDiv'+this.slideshowid).getElementsByTagName('img');
var m01=m00.length;
var m02=0;
for(var i=0;i<m01;i++)
m02+=(m00[i].complete)?1:0;
document.getElementById('LB1'+this.slideshowid).style.width=Math.round(m02/m01*100)+'px';
if(m02==m01){this.readyFlag=1;setTimeout("document.getElementById('LB0"+this.slideshowid+"').style.display='none';document.getElementById('show"+this.slideshowid+"').style.visibility='visible';if(["+this.slideshowid+"+1]==fadearray.length)startAll()",300);}
else setTimeout("fadearray["+this.slideshowid+"].images_loading_bar()", 64);
}

function startAll(){
var ready=0
for (var i_tem = 0; i_tem < fadearray.length; i_tem++)
ready+=fadearray[i_tem].readyFlag? 1 : 0;
if (ready==fadearray.length)
for (i_tem = 0; i_tem < fadearray.length; i_tem++){
if (stagger){
setTimeout("fadearray["+i_tem+"].startit()", stagger*i_tem)
setTimeout("document.getElementById('temp"+i_tem+"').style.display='none'", 1000+stagger*i_tem)
}
else {
fadearray[i_tem].startit()
setTimeout("document.getElementById('temp"+i_tem+"').style.display='none'", 1000)
}
}
else
setTimeout("startAll()",300)
}

matt-c
11-10-2009, 09:25 AM
in the html:


<tr>
<td><script type="text/javascript">
var stagger=9000
new fadeshow(fadeimages3, 218, 127, 0, 4000, 0, 1, "3children-StMary.jpg") </script></td>
<td width="3%"> </td>
<td><script type="text/javascript">
var stagger=3000
new fadeshow(fadeimages2, 218, 127, 0, 4000, 0, 2, "consultants-meeting.jpg") </script></td>
<td width="3%"> </td>
<td><script type="text/javascript">
var stagger=1500
new fadeshow(fadeimages, 218, 127, 0, 4000, 0, 3, "gansu-project.jpg") </script></td>
</tr>
<tr>

ddadmin
11-10-2009, 10:05 AM
Hmm I'm not too clear what you're trying to do as far as "stagger" the 3 slideshows. In v2.0 of the script both the fade duration and pause between image changes can be customized for each instance of the slideshow, just like in the older version.

matt-c
11-10-2009, 10:15 AM
By stagger i mean i want image 1 to start then after a bit image 2 to start, then 3, i.e. sequentially. And then i want this to carry on so the images dont change at the same time. I couldnt work out how to do this with v2 and then i came accross v1.5 which has a stagger var.

The problem seems to still be there with v2 anyway. If you look on the v2 page: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
and right click (wait a few secs then click off menu) in IE8 the images will 'pause' and then continue once you click off the right click menu, but now the images change in tandom rather than sequentially.

I hope that clarifys the problem..

thanks

matt-c
11-10-2009, 11:03 AM
Ok testing V2 again and it seems the right click doesnt effect it as bad, the timings seem to go back to normal.

However how do i achieve a stagger effect? I need 3 images changing at the same rate but starting at different times...

Thanks

ddadmin
11-10-2009, 10:30 PM
Ok if I understood correctly, you want to be able to add a different initial pause to each slideshow instance on the page, so the first slideshow starts rotating say 2 seconds after the page has loaded, the 2nd 5 seconds etc. If so, try using the modified .js file attached below. Then to specify a custom delay before a particular slideshow starts, inside its initialization code, define the "stagger" option:


var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
stagger: 4000,
togglerid: "fadeshow2toggler"
})

The above will cause the slideshow to start rotating 4 seconds after the page has loaded.

matt-c
11-11-2009, 08:58 AM
Excellent! Thanks for your help.

However im still getting the same problem in IE8, where by if you right click it will stop the images changing (whilst the right click menu is up) and if you leave it long enough the stagger is lost and the images start changing at the same time again.

Thanks

Matt

ddadmin
11-11-2009, 11:00 AM
You can try disabling the feature of pausing the slideshow when the mouse hovers over it. Inside the .js file, find the following line:


setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover

and change true above to false.

matt-c
11-11-2009, 11:17 AM
i've already got that commented out

matt-c
11-11-2009, 11:50 AM
I've found a way that sort of works.

By detecting a right click and then calling the "new fadeSlideShow(etc....)" bit thats in the html, effectively restarting the sequence.

It works for a right click however there are other features in IE8 which causes it to pause such as highlighting text brings up a little blue box which when clicked brings up a menu with social links for blogs and google search etc.

So ideally i need a way to detect that the script has stopped then restart it?

thanks

ddadmin
11-11-2009, 09:43 PM
Hmm by disabling the script from pausing onMouseover, that in itself should suffice in preventing the script from pausing when the user right clicks inside the slideshow. Does it at least not pause anymore when the mouse moves over it?

matt-c
11-12-2009, 08:44 AM
yes it doesnt pause when the mouse moves over it now. The right click doesnt necessarily have to on the images it can be anywhere on the page, it seems to be ie8 stopping the script (or stopping the images from changing) whilst the right click menu is up.

It still happens when IE8 is in compatibilty mode which is supposed to render pages in earlier versions of IE.

It also happens for a lot of the DD scripts, so its not just this one that's effected.

thanks

ddadmin
11-13-2009, 07:03 AM
Ah ok I didn't realize you were talking about right clicking anywhere inside the document halting the script, versus just within the slideshow itself. Having run a test, I see this as well, though I'm not sure why IE8 is doing this. It appears to be a browser quirk however, as there's nothing in the script that should cause this per say.

I did notice that if you disable the right click menu in IE8, that also takes care of the issue. The code to do this is:


document.oncontextmenu=function(){return false}

matt-c
11-13-2009, 09:18 AM
Thanks yes that sorts out the right click, however something else which causes the same problem is another feature of IE8 when you highlight text or images it brings up a little blue box near to what you've highlighted, when you click on the box it brings up a menu (similar to the right click) with blog links and google links etc. Which pauses the script.

Anyway to get rid of this?

thanks for your help.

ddadmin
11-13-2009, 11:40 PM
Hmm you can try disabling text selection in IE, by doing:


document.onselectstart=function(){return false}

matt-c
11-17-2009, 08:47 AM
Yeh thats done the trick.

Thanks for your help.