PDA

View Full Version : JavaScript Conflict



amboya
08-15-2011, 02:33 PM
Hai I have the two code below running on the website am developing.I think there seems to be a conflict between the slide show code and the main menu.
When the drop down menu is clicked the slide show overrides the main menu hence the sub links hidden behind the slide show.
What I need is to have the sub menu displayed on top of the slideshow.


<!--Codes for sildeshow starts here -->
<script type="text/javascript" src="jquery.min.js"></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: [600, 350], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/homeimages/1.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["images/homeimages/2.jpg", "", "", "Our Customers comes first."],
["images/homeimages/3.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["images/homeimages/4.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["images/homeimages/5.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["images/homeimages/6.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["images/homeimages/7.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["images/homeimages/8.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["images/homeimages/9.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["images/homeimages/10.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["images/homeimages/4.jpg", "", "", "What a beautiful scene with everything changing colors."]
//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 4000, //transition duration (milliseconds)
descreveal: "peekaboo",
togglerid: ""
})


var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [172, 85], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/homeimages/P6.jpg", "", "", ""],
["images/homeimages/P7.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""],
["images/homeimages/P8.jpg", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 100, //transition duration (milliseconds)
descreveal: "none",
togglerid: ""
})


</script>
<!--Codes for sildeshow ends here -->


<!--Codes for main menu starts here -->
<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css" />

<script type="text/javascript" src="chromejs/chrome.js">

/***********************************************
* Chrome CSS Drop Down Menu- (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 full source code
***********************************************/
</script>
<!--Codes for main menu ends here -->

JShor
08-15-2011, 04:41 PM
jQuery.noConflict();

http://api.jquery.com/jQuery.noConflict/

amboya
08-16-2011, 09:28 AM
Hey JShor
I have checked the site but still cant understand where to add the no conflict code in my code.Am new,if you can explain more will appreciate.

jscheuer1
08-16-2011, 02:55 PM
You don't need to add it, you need to remove it from the fadeslideshow.js file. Add the comment token (red) as shown:


/* 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=settingarg
settingarg=null
var setting=this.setting
setting.fadeduration=setting.fad

There could still be other problems. If so and you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.