Results 1 to 5 of 5

Thread: Scripting while using SSI calls 2 versions of jQuery

  1. #1
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Scripting while using SSI calls 2 versions of jQuery

    1) Script Title: MegaMenu
    1a)Script Title: Ultimate fade slide show.

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ddmegamenu.htm
    2a)http://www.dynamicdrive.com/dynamici...nslideshow.htm

    3) Describe problem:
    MegaMenu uses jQuery 1.5.2
    Fadeinslideshow uses jQuery 1.4.2
    I've been using both of the above scripts on static web pages, both work fine when using either version as the jQuery source.
    I am in the middle of converting the web site to SSI separating out my pages and headers, etc.
    If I use 1.5.2, only the menu will work. If I use 1.4.2, only the slide show will work. If I use both, neither work.

    How can I use both or do I need to use both? I do very little java scripting, but can modify as needed. I really like both of these script results!
    Last edited by jscheuer1; 11-11-2012 at 04:04 AM. Reason: Format

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    You don't need both. The menu and the slideshow should work fine together on the same page.

    I'd suggest updating to jQuery 1.6.4. Place that before the script tags for the menu and the slideshow. So in the head you would have something like:

    Code:
    <link rel="stylesheet" type="text/css" href="ddmegamenu.css" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    
    <script src="ddmegamenu.js">
    
    /***********************************************
    * DD Mega Menu (c) Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
    
    </script>
    
    <script type="text/javascript" src="fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //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: "ondemand",
    	togglerid: ""
    })
    
    
    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:'manual', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "always",
    	togglerid: "fadeshow2toggler"
    })
    
    </script>
    <script type="text/javascript">
    
    ddmegamenu.docinit({
    	menuid:'solidmenu',
    	dur:200 //<--no comma after last setting
    })
    
    	
    ddmegamenu.docinit({
    	menuid:'megaanchorlink',
    	dur:500,
    	easing:'easeInOutCirc' //<--no comma after last setting
    })
    
    </script>
    The only difference being that in place of the highlighted parts you would use your own initializations for the slideshow(s) and menu(s) you're actually using.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    John;
    Thanks for the input. It did not seem to work. Two pages to reference, first using SSI calls

    http://www.ewarbirds.org/automotive/...risminor.shtml
    This will not work correctly, the slide show does not display.

    This is the older version I was using for the same page and it works, but I need use the SSI calls.
    http://www.ewarbirds.org/automotive/...rrisminor.html

    Thanks in advance!

    peter

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    You've included the fadeslideshow.js file twice. Get rid of one of them. From the page's source code as viewed in the browser:

    Code:
     . . . ify-v1" content="ePApIkQw+GoYBX3/s7+CP2dnCzTAOTIUp7cSJHWDyqM=">
    <meta name="verify-v1" content="NLzsSx/FL7Tqx5g+5z611IkoloPvjZieji4WIz+AzgQ=">
    <link rel="stylesheet" type="text/css" href="../style/emx_nav_new.css">
    <link rel="stylesheet" type="text/css" href="../style/ddfiles/ddmegamenu.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    
    <script type="text/javascript" src="../scripts/fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    <script type="text/javascript" src="../scripts/ddmegamenu.js">
    
    /***********************************************
    * DD Mega Menu (c) Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
    </script>
    <script type="text/javascript">
    
    ddmegamenu.docinit({
    	menuid:'solidmenu',
    	dur:200 //<--no comma after last setting
    })
    
    </script>
    
    
    <!--banner_top closes out the HEADER-->
    <!--add individual page javascript here-->
    <script type="text/javascript" src="../scripts/fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [400, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["images/morris/morris.1.jpg","","",""],
    		["images/morris/morris.2.jpg","","",""],
    		["images/m . . .
    That's probably due to its being on two includes or its being on the main page and on an include. There could also be other problems. But best to fix this and see.

    Edit: I did some testing and it's not the only problem:


    You do need to get rid of that duplicate call to fadesliseshow.js but that's not enough. Once you get rid of it, this is how things need to be organized in the head:

    Code:
     . . . fy-v1" content="ePApIkQw+GoYBX3/s7+CP2dnCzTAOTIUp7cSJHWDyqM=">
    <meta name="verify-v1" content="NLzsSx/FL7Tqx5g+5z611IkoloPvjZieji4WIz+AzgQ=">
    <link rel="stylesheet" type="text/css" href="../style/emx_nav_new.css">
    <link rel="stylesheet" type="text/css" href="../style/ddfiles/ddmegamenu.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    
    <script type="text/javascript" src="../scripts/fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [400, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["images/morris/morris.1.jpg","","",""],
    		["images/morris/morris.2.jpg","","",""],
    		["images/morris/morris.3.jpg","","",""],
    		["images/morris/morris.4.jpg","","",""],
    		["images/morris/morris.5.jpg","","",""],
    		["images/morris/morris.6.jpg","","",""]
    
    	],
    	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 1000, //transition duration (milliseconds)
    	descreveal: "always",
    	togglerid: ""
    })
    
    </script>
    <script type="text/javascript" src="../scripts/ddmegamenu.js">
    
    /***********************************************
    * DD Mega Menu (c) Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
    </script>
    <script type="text/javascript">
    
    ddmegamenu.docinit({
    	menuid:'solidmenu',
    	dur:200 //<--no comma after last setting
    })
    
    </script>
    
    
    </head>
    Well, it can be any order as long as jQuery comes first, the two other external scripts come before the on page script code that use them, and the on page script code for the menu comes after the on page script code for the slideshow.

    BTW, this is not used:

    Code:
    ddmegamenu.docinit({
    	menuid:'megaanchorlink',
    	dur:500,
    	easing:'easeOutBack' //<--no comma after last setting
    })
    So I got rid of it.
    Last edited by jscheuer1; 11-16-2012 at 01:21 PM. Reason: solution
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Thanks!

    John;
    Been working too many late nights on this. Thanks for your expertise! The order of the script calls on the page did the trick. Once I moved the mega menu page script to AFTER the fade slideshow, it works just great! Thanks for a wonderful resource!
    Peter
    Last edited by jscheuer1; 11-17-2012 at 02:44 PM. Reason: excessive quoting

Similar Threads

  1. AnimatedColapse with later versions of Jquery
    By neilrmessick in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-29-2011, 11:01 PM
  2. Different Jquery Versions on same site
    By spookymix in forum JavaScript
    Replies: 4
    Last Post: 09-28-2010, 08:45 PM
  3. regarding whitelist of calls
    By mandadi in forum PHP
    Replies: 4
    Last Post: 11-12-2009, 02:52 AM
  4. Battle Of The Versions
    By techno_race in forum Computer hardware and software
    Replies: 1
    Last Post: 05-19-2008, 03:10 AM
  5. IE different versions
    By Girard Ibanez in forum HTML
    Replies: 9
    Last Post: 02-06-2007, 09:30 PM

Bookmarks

Posting Permissions

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