...

View Full Version : Two JS scripts - One for IE & One For all other browsers



KatGirl
12-31-2006, 08:11 AM
Happy New Year Everyone!

I've recently applied the Ultimate Fade-In Slideshow (v1.5): by Dynamic Drive.com for a group of images I wish to display because it is so cross browser friendly. The fade in feature actually works in Fire Fox.

But I've noticed that IE doesn't display the "fade out" effects like it does in the Fade-in image slideshow using the "Fade" filter (IE) by javascriptkit.

So my question:

Is it at all possible to use both scripts on the same page, but calling the Ultimate Fade in Slideshow for Non-IE browsers, and using the "Fade" filter IE slideshow for just IE browsers?

I've tried implimenting this a couple of ways, but nothing seems to work:

I've used:
1)


<script language="javascript" src="js/nonIE_Slideshow.js" type="text/javascript"></script>

<!--[if IE]
<script language="javascript" src="js/IE_Slideshow.js" type="text/javascript"></script>
<![endif]-->


2)


<script language="javascript" src="nonIE_Slideshow.js" type="text/javascript"></script>

<!--[if lte IE 7]
embed actual FADE FILTER IE CODE here
<![endif]-->


When I embed the code between if statements, nothing works not even the js script I've called via link.

As for the other (1) the non-IE file displayed in IE, and totally disregarded the IE_Slideshow file altogether even though the IE js file came last in the sequence.

I would be grateful if someone could please advise if:

a) its possible to run two scripts on the same page, that basically does the same thing, but purposefully directed at different browsers.

Thank you
And I apologise if this has been asked before. I did actually spend the afternoon clicking through all 20 pages of the forum trying to find a post that was requesting something similiar and I couldn't see anything.

KatGirl

EDIT: Sorry everyone. I've just realised that it is impossible to do this, as I've stated because (silly me) I've just noticed that both scripts are calling two different embeded script tags in the body section of the page.

ie;
non-ie script

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 267, 400, 0, 3500, 0, "")
</script>

ie script:


<a href="javascript:gotoshow()">
<img src="styleImages/slideshow/400x267/img1.jpg" id="slideshow" border="0" style="filter:progid:DXImageTransform.Microsoft.Fade(duration=2); width="267" height="400" /></a>

dolt!

However, my question still is valid. Is it possible to bring two different js scripts into the page, even with two different calling tags (I don't know what else to call them) and still produce a slideshow effect for different browsers.

Sorry for late editing.
KatGirl

felgall
12-31-2006, 08:39 AM
Here's a script that will run one version of the code for browwsers that understand JScript (ie IE) and another for browsers that understand Javascript (ie all browsers except IE). Just substitute the two lots of code for the alerts.


<script type="text/javascript">
/*@cc_on
@if (@_jscript)
alert('This browser is running JScript');
@else */
alert('This browser is NOT running JScript');
/*
@end
@*/
</script>

This uses the JScript version of IE conditionals instead of the HTML version. Just make sure you keep the start and end of the comments in the right place because IE is the only browser that actually reads the conditional commands.

Philip M
12-31-2006, 08:49 AM
Try

<!--[if !IE]
<script type="text/javascript" src="js/nonIE_Slideshow.js" "></script>
<![endif]-->

<!--[if IE]
<script type="text/javascript" src="js/IE_Slideshow.js" "></script>
<![endif]-->

KatGirl
12-31-2006, 10:06 AM
Hey felgall & Philip M

Thanks for the quick reply.

@Philip M

I inserted



<!--[if !IE]
<script type="text/javascript" src="js/nonIE_Slideshow.js" "></script>
<![endif]-->

<!--[if IE]
<script type="text/javascript" src="js/IE_Slideshow.js" "></script>
<![endif]-->


into the head section of my html document - I'm using FP as a visual editor only, but use Notepad to code. The if statements pulled up red, so I removed the double "" at the end of the script but the red text still remained throughout the rest of the page. I'm thinking that there is an error there, but I don't know enough about if statements to validate that.


@felgall

I'm so sorry but your wonderful advice is well and truly beyond my comprehension.


<script type="text/javascript">
/*@cc_on
@if (@_jscript)
alert('This browser is running JScript');
@else */
alert('This browser is NOT running JScript');
/*
@end
@*/
</script>


I don't even know where to start.

What I thought I'd do, to make life simplier for everyone is to post the two files and ask someone to kindly review them and offer an alternative ONE FILE that will give me the FADE FILTER effects of IE.js file yet retain the NON_IE fade slideshow.

FIRST JS FILE - IE BROWSERS

<script language="javascript">
// display transistional product images
var slidespeed=2000
var slideimages=new Array("images/slideshow/400x267/img1.jpg","images/slideshow/400x267/img10.jpg","images/slideshow/400x267/img2.jpg","images/slideshow/400x267/img9.jpg",
"images/slideshow/400x267/img5.jpg","images/slideshow/400x267/img6.jpg","images/slideshow/400x267/img7.jpg","images/slideshow/400x267/img8.jpg","images/slideshow/400x267/img3.jpg","images/slideshow/400x267/img4.jpg")
var slidelinks=new Array("http://www.dynamicdrive.com","http://www.javascriptkit.com","http://www.cssdrive.com")

var whichlink=0
var whichimage=0
var imgobj, filtersupport, blenddelay
var imageholder=new Array()
for (i=0;i<slideimages.length;i++){ //preload images
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
window.location=slidelinks[whichlink]
}

function slideit(){
if (filtersupport)
imgobj.filters[0].apply()
imgobj.src=imageholder[whichimage].src
if (filtersupport)
imgobj.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()", slidespeed+blenddelay)
}
window.onload=function(){
imgobj=document.getElementById("slideshow") //access img obj
filtersupport=imgobj.filters //check for support for filters
blenddelay=(filtersupport)? imgobj.filters[0].duration*1000 : 0
slideit()
}
</script>


HTML that calls the js script into play:

<a href="javascript:gotoshow()">
<img src="images/slideshow/400x267/img1.jpg" id="slideshow" border="0" style="filter:progid:DXImageTransform.Microsoft.Fade(duration=2); width="267" height="400" alt="Slideshow" /></a>



SECOND JS FILE - NON IE BROWSERS


<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow (v1.5): Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["images/slideshow/400x267/img1.jpg", "", ""]
fadeimages[1]=["images/slideshow/400x267/img2.jpg", "", ""]
fadeimages[2]=["images/slideshow/400x267/img3.jpg", "", ""]
fadeimages[3]=["images/slideshow/400x267/img4.jpg", "", ""]
fadeimages[4]=["images/slideshow/400x267/img5.jpg", "", ""]
fadeimages[5]=["images/slideshow/400x267/img6.jpg", "", ""]
fadeimages[6]=["images/slideshow/400x267/img7.jpg", "", ""]
fadeimages[7]=["images/slideshow/400x267/img8.jpg", "", ""]
fadeimages[8]=["images/slideshow/400x267/img9.jpg", "", ""]
fadeimages[9]=["images/slideshow/400x267/img10.jpg", "", "s"]

//var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
//fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
//fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
//fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var fadebgcolor="white"

////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 (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:DXImageTr ansform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTr ansform.Microsoft.alpha(opacity=10);-moz-opacity:10;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
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{
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)
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=obj.degree/100
}


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



HTML FOR NON-IE BROWSERS


<script language="javascript" type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 267, 400, 0, 3500, 1, "R")
</script>


If someone is able to integrate both files into ONE FILE, and offer one HTML output that would be absolutely brilliant.

Again, thank you all for your patience.

KatGirl

_Aerospace_Eng_
12-31-2006, 11:26 AM
Philip had the right idea.

<!--[if !IE]>
<script type="text/javascript" src="js/nonIE_Slideshow.js" "></script>
<![endif]-->

<!--[if IE]>
<script type="text/javascript" src="js/IE_Slideshow.js" "></script>
<![endif]-->
but he forgot a few brackets. Felgalls suggestion should work just as well.

KatGirl
12-31-2006, 12:07 PM
Thanks for the heads up...


Can someone please check my code to make sure I have this right, as its pulling this error in FP and the script won't run:

Line: 311
Char: 1
Error: "fadeshow" is undefined
Code: 0;
URL: local PC url /FrontPageTempDir/pvw20A.htm

This is in the HEAD section

<!--[if !IE]>
/*@cc_on
@if (@_jscript)
alert('<script type="text/javascript">
// display IE slideshow
code here for IE slideshow
</script>');
@else */
alert('<script language="javascript" type="text/javascript">
code here for non-IE slideshow</script>');
/*
@end
@*/
<![endif]-->



in html page:

<!--START IE SLIDESHOW-->
<a href="javascript:gotoshow()">
<img src="images/slideshow/400x267/img1.jpg" id="slideshow" border="0" style="filter:progid:DXImageTransform.Microsoft.Fade(duration=2);" width="267" height="400" alt="IE Slideshow" /></a>
<!--END IE SLIDESHOW-->

<!--START NON IE BROWSERS SLIDESHOW-->
<script language="javascript" type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 267, 400, 0, 3500, 1, "")
</script>
<!--END NON IE BROWSERS SLIDESHOW-->


I'm assuming that I can place both call tags together in the HTML document?
Any advice would be greatly received.

Thanks heaps.

Kate

_Aerospace_Eng_
12-31-2006, 01:17 PM
Ugh don't combine Phillips and Felgalls suggestions. Use one or the other.

KatGirl
12-31-2006, 01:30 PM
So I discovered....

I've been playing around with the suggestions, and I've since learned that felgall's suggestion can live quite nicely inside the body tag. I had no idea that it lived there until I decided to throw it in and give it a whirl.

But where do I put the html output? Does it too go inside the ('') or outside where the other html lives? Do I use the [script type] java tag too?

And,

can I use both "HTML" outputs, or just one?

These are question a non-javascript person is fast learning.

Thanks for your help.

KatGirl
12-31-2006, 10:43 PM
Just to update all...

After playing with both suggestions for the greater part of the night, the end result is that I cannot get both scripts to work on the same page regardless of which code or link or epithet I use, as clearly I don't know what I'm doing, and when I do it, it doesn't work....

So in the end Ive canned the idea and I will stick with simplicity over pretties. I wish to thank all who helped me thus far.

I do appreciate your efforts.

Philip M
01-01-2007, 06:25 PM
This is part of your problem.

<script language="javascript" type="text/javascript">

Use one or the other, but not both. Prefer:<script type="text/javascript">

Sorry for some typos in my earlier post. I will try harder in future!
Thie following is correct and ought to work:-

(best to place in the <BODY> section)

<!--[if !IE]>
<script type="text/javascript" src="js/nonIE_Slideshow.js"></script>
<![endif]-->

<!--[if IE]>
<script type="text/javascript" src="js/IE_Slideshow.js"></script>
<![endif]-->

Have another go and see what you get! And don't try to change anything in the above!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum