PDA

View Full Version : ultimate fade script and behaviors



tester123
02-18-2008, 04:28 PM
1) Script Title:
Ultimate Fade-in slideshow (v1.51)

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

3) Describe problem:

I have a problem with the ie7 policy with this script.
If i disable policy: "binary and script behaviors" this script returns an error and doesn't start.

In IE7 is possible to enable specific behaviors, but i can't find the behavior this script is using (normally a behavior is an htc file or something like #default#homePage) but i cannot find in the source code something like this.

Is there anyone that could help me to identify this behavior to enable?

Thank you!

jscheuer1
02-18-2008, 05:04 PM
As with many settings in IE, this one is misleading. There is no 'behavior' in the strict sense required by this script. It does use the alpha opacity style filter. However, this may or may not be the issue, though most likely it is, as other scripts without this style filter work fine when that setting is disabled.

If this truly is the case, there are various ways of looking at/dealing with this issue:


The setting is enabled by default, so don't worry about it.

Don't use the script.

Edit the script so that the alpha opacity style filter is not used.

Edit the script in an attempt to only use this filter when it is allowed.

Use http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm with fade turned off.

tester123
02-18-2008, 05:31 PM
Thank you for your answer,

the problem is that i am a system administrator of browsers with this setting disabled (IE7 gives me the ability to enable specific behaviors), and i would like to add this "behavior" to the whitelist to correctly see a website that is using this script.

But as you told me this is not a real behavior, so now i don't know what to enable...

I will try to search for this alpha opacity style filter, maybe there is a way to add this as a behavior and it could run correctly.

Any other informations on this issue will be appreciated.

Thank you.

jscheuer1
02-18-2008, 05:51 PM
Perhaps something here:

http://www.google.com/search?hl=en&client=opera&rls=en&hs=9jU&sa=X&oi=spell&resnum=0&ct=result&cd=1&q=whitelist+alpha+opacity+filter&spell=1

will help. In the meantime, I have made a copy of the script that will work with fade in IE if this is enabled, without fade in IE if it is disabled (simply replace the main script from the line indicated to the end):


////NO need to edit beyond here/////////////

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){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
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")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (var p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
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;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></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.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
try{
@end @*/
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
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
}
catch(e){}
@end @*/
}
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)
}
}

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)
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
try{
@end @*/
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
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
}catch(e){}
@end @*/
}


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()
}

Other browsers should be unaffected.

jscheuer1
02-18-2008, 06:06 PM
Oh, another thing, as far as I know, enabling that entire setting is not hazardous. Do you know any different?

tester123
02-19-2008, 10:11 AM
Some time ago (more than one year ago) a vulnerability came out and remains unpatched for a while, so we have disabled this option.

http://www.microsoft.com/technet/security/bulletin/ms06-055.mspx

Nowadays no other vulnerabilities regarding this option came out, so we are considering the fact to re-enable this options, but for now we have to manually add every specific behavior (or "not real" behavior...)

jscheuer1
02-19-2008, 11:28 AM
I was under the impression, looking around after I asked that question, that it has now been patched. If I was in your shoes though, I would want to make certain of it. As an individual end user and creative person, I deal with those issue primarily by using IE only for testing purposes. I really don't want to be browsing with the software that has that big red X painted on it.