Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Location
    Australia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Two JS scripts - One for IE & One For all other browsers

    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)
    Code:
    <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)
    Code:
    <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
    Code:
    <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:
    Code:
    <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
    Last edited by KatGirl; 12-31-2006 at 08:17 AM. Reason: I forgot to add...

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.

    Code:
    <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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    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]-->

  • #4
    New to the CF scene
    Join Date
    Dec 2006
    Location
    Australia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey felgall & Philip M

    Thanks for the quick reply.

    @Philip M

    I inserted

    Code:
    <!--[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.

    Code:
    <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
    Code:
    <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:
    Code:
    <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
    Code:
    <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:DXImageTransform.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:DXImageTransform.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
    Code:
    <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

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Philip had the right idea.
    Code:
    <!--[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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New to the CF scene
    Join Date
    Dec 2006
    Location
    Australia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Code:
    <!--[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:
    Code:
    <!--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

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Ugh don't combine Phillips and Felgalls suggestions. Use one or the other.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New to the CF scene
    Join Date
    Dec 2006
    Location
    Australia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    New to the CF scene
    Join Date
    Dec 2006
    Location
    Australia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •