Ultimate Fade-in Slideshow - javascript conflict?

[hugh]

Ultimate Fade-in Slideshow

http://www.dynamicdrive.com/dynamici...nslideshow.htm

I don't know whether this is a problem with Ultimate Fade-in Slideshow or with Smooth Navigational Menu (http://www.dynamicdrive.com/dynamici...smoothmenu.htm) ....but when I run the two on the same page the slideshow stops working, it doesn't display anything, just blank area where images should be.

If I replace Smooth Navigational Menu with AnyLink Dropdown Menu (old version) the slideshow script works fine.

Sorry, haven't got an online url, testing locally.

Hugh

[jscheuer1]

It could be a lot of things. First off, test in the browser, not in some editor's Preview Mode. If there's still a problem, here's what I would suggest -

Use only one copy of jQuery:

Get rid of:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

and:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Use just:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

and place that just once in the head before the tags for the fadeslideshow.js and ddsmoothmenu.js scripts.

Then using a text only editor like NotePad, edit the fadeslideshow.js script commenting out the noConflict line like so:

/* Ultimate Fade-in slideshow (v2.4)
* Last updated: May 24th, 2010. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize
//May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added.

var fadeSlideShow_descpanel={
	controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
	fontStyle: 'normal 11px Verdana', //font style for text descriptions
	slidespeed: 200 //speed of description panel animation (in millisec)
}

//No need to edit beyond here...

//jQuery.noConflict()

function fadeSlideShow(settingarg){
	this.setting=sett . . .

Counterintuitive I know, but noConflict is for use with other script libraries, not when jQuery is the only script library on the page.

Use that version of fadeslisow.js and refresh the page.

If that doesn't fix things, you will need to put up a live demo of the problem and give us a link to it so we can check it out.

[hugh]

Hello John,

Thanks for the very full reply. That fixed it!

In fact, it seemed to make no difference whether I queried out the 'no.conflict' or not - that version of the slideshow worked no problem. Must just have been the old version I was using (which didn't use an external .js file)

Anyway it's working fine now, thanks for the assistance

Hugh

[MurdoC]

Sorry for hijacking this thread but this is the closest topic i can find with regards to my problem.

site: http://brilliantoppor2nity.com/web/index.php
problem: My Smooth Navigational Menu stops working as soon as the slideshow is loaded.

http://www.dynamicdrive.com/dynamici...nslideshow.htm
http://www.dynamicdrive.com/dynamici...smoothmenu.htm

[jscheuer1]

There's a lot "wrong"* with that page. However, the menu is working. It's just that the drop downs are hidden behind the slideshow. To fix just that much, using a text only editor like NotePad, in your ddsmoothmenu.css file, make the additions and changes as highlighted:

.ddsmoothmenu{
/* font: bold 12px Verdana;
background: #414141;  background of menu bar (default state)*/


font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FCEACE;
text-decoration:none;
position: relative;
z-index: 1009;
width:1000px;
float:left;
margin:12px 0 1px 0;
display:block;
height:26px;
/ height:25px;
}

.ddsmoothmenu ul{
z-index:1010;
margin: 0;
padding: 0;
list-style-type: none;
}


/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: le . . .

The browser cache may need to be cleared and/or the page refreshed to see changes.


*The down arrow image for the menu is missing, which shows up as a broken image token in some browsers. There are too many copies of jQuery on the page. The cufon code is duplicated. There are 5 heads (only one is allowed). Those are all that jumped out at me, I'm sure there's more.

[MurdoC]

Thank you very much. That solved it.

As for the several "head" & "jquery" would that be related due to the fact that i have them on each file called in the index file.

it's like calling below files using php-include in the index.php:
header file
footer file
sidebar file
*all above use each head & jquery.

[jscheuer1]

Yes, although I cannot know for certain without seeing the raw PHP code, that seems to be a likely explanation for the duplicated tags.

But that's not how includes are meant to be used. Each include need not be a page in its own right. In most cases they should not.

What matters is that, once all includes for a given page are assembled by the server and sent to the browser, they present an error free valid page. Failing that, one should shoot for at least error free. The next fall back position would be "workable". That page falls into the last category.