Shopies
asked on
JS conflict
Hi experts,
I have two slideshows in one page and both require some files, you can see them below:
<script type="text/javascript" src="scripts/mootools-1.2-
<script type="text/javascript" src="scripts/_class.noobSl
AND
<script src="scripts/mootools-12.j
<script src="scripts/mootools-12-m
I want to make them both work ne removing the confliction. Can someone help please? A full file source is below too.
I have two slideshows in one page and both require some files, you can see them below:
<script type="text/javascript" src="scripts/mootools-1.2-
<script type="text/javascript" src="scripts/_class.noobSl
AND
<script src="scripts/mootools-12.j
<script src="scripts/mootools-12-m
I want to make them both work ne removing the confliction. Can someone help please? A full file source is below too.
<link href="skin/cms/css/noobslide.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
// use this to pull the divs in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow DIV:first');
// uncomment below to pull the divs randomly
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<div style="text-align:center;width:100%;padding:10px 0 10px 0">{adv}</div>
<table cellspacing="0" cellpadding="0" width="98%" align="center">
<tr>
<td width="70%" valign="top" style="padding-left:20px;">
<table cellspacing="0" cellpadding="0" width="100%" align="center">
<tr>
<td colspan="3">
<!-- START BLOCK : main_article -->
<link rel="stylesheet" href="skin/cms/css/_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="skin/cms/css/noobslide.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/mootools-1.2-core.js"></script>
<script type="text/javascript" src="scripts/_class.noobSlide.packed.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
//SAMPLE 4 (walk to item)
var nS4 = new noobSlide({
box: $('box4'),
items: $$('#box4 div'),
size: 480,
handles: $$('#handles4 span'),
onWalk: function(currentItem,currentHandle){
$('info4').set('html',currentItem.getFirst().innerHTML);
this.handles.removeClass('active');
currentHandle.addClass('active');
}
});
//SAMPLE 5 (mode: vertical, using "onWalk" )
var info5 = $('info5').set('opacity',0.5);
var sampleObjectItems =[
{title:'Morbi elementum', autor:'Lorem', date:'5 Jun 2007', link:'http://www.link1.com'},
{title:'Mollis leo', autor:'Ipsum', date:'6 Dic 2007', link:'http://www.link2.com'},
{title:'Nunc adipiscing', autor:'Dolor', date:'9 Feb 2007', link:'http://www.link3.com'},
{title:'Phasellus volutpat pharetra', autor:'Sit', date:'22 Jul 2007', link:'http://www.link4.com'},
{title:'Sed sollicitudin diam', autor:'Amet', date:'30 Set 2007', link:'http://www.link5.com'},
{title:'Ut quis magna vel', autor:'Consecteur', date:'5 Nov 2007', link:'http://www.link6.com'},
{title:'Curabitur et ante in', autor:'Adipsim', date:'12 Mar 2007', link:'http://www.link7.com'},
{title:'Aliquam commodo', autor:'Colom', date:'10 Abr 2007', link:'http://www.link8.com'}
];
var nS5 = new noobSlide({
mode: 'vertical',
box: $('box5'),
size: 180,
items: sampleObjectItems,
addButtons: {
previous: $('prev5'),
play: $('play5'),
stop: $('stop5'),
next: $('next5')
},
onWalk: function(currentItem){
info5.empty();
new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info5);
new Element('p').set('html','<b>Autor</b>: '+currentItem.autor+' <b>Date</b>: '+currentItem.date).inject(info5);
}
});
});
</script>
<!-- SAMPLE 4 -->
<h2>Sample 4</h2>
<div class="sample">
<div class="mask3">
<div id="box4">
<div>
<h3>1. Lorem ipsum dolor sit amet</h3>
<img src="img1.jpg" alt="Photo" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
</div>
<div>
<h3>2. Nullam porttitor tortor et sem</h3>
<img src="img2.jpg" alt="Photo" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p>
<p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
</div>
</div>
</div>
<h4>Show: <span id="info4"></span></h4>
<p class="buttons" id="handles4">
<span>1. Uno</span>
<span>2. Dos</span>
<span>3. Tres</span>
<span>4. Cuatro</span>
<span>5. Cinco</span>
<span>6. Seis</span>
<span>7. Siete</span>
<span>8. Ocho</span>
</p>
</div>
<table ID="main_article" cellspacing="0" cellpadding="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0">
<tr>
<td class="ma_head_rc" nowrap> </td>
<td width="100%" class="head"><b>".1 *-/J+ :</b> {fixed_date}</td>
<td class="ma_head_lc" nowrap> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2"><span><img src="uploads/{thumb}" alt="{title}" height="180"/></span></td>
<td valign="top">
<label style="padding:16px 4px 7px 4px;">{fixed_title}<br><span class="sm_text" style="color:#767171;">[ {fixed_date} ]</span><p>{brief}</p></label>
</td>
</tr>
<tr>
<td height="100%" valign="bottom">
<label style="vertical-align: bottom;height:10px;float:left;"><a href="article.php?act=read_art&id={id}"><img src="skin/cms/images/details.jpg"></a><a href="article.php?act=printable_version&id={id}"><img src="skin/cms/images/print.jpg"></a><a href="article.php?act=send_friend&id={id}"><img src="skin/cms/images/send2friend.jpg"></a></label></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END BLOCK : main_article -->
</td>
</tr>
<tr>
<td colspan="3" align="center" style="padding:10px;" valign="middle">{middle_adv}</td>
</tr>
<tr>
<td width="50%" nowrap valign="top" align="right">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
{right_col}
</td>
</tr>
<tr>
<td>
{forums}
</td>
</tr>
</table>
</td>
<td style="width:16px;" nowrap> </td>
<!-- START BLOCK : left_col -->
<td width="50%" nowrap valign="top" align="left">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
{left_col}
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" width="100%" align="center">
<tr>
<td class="green_mb_tlc" nowrap></td>
<td class="green_mb_b" width="100%">'3*(J'F</td>
<td class="green_mb_trc" nowrap></td>
</tr>
<tr>
<td colspan="3" class="poll_block">
<iframe name="I1" marginwidth="0" marginheight="0" src="components/poll/ajax-poller.php" height="250" width="100%" scrolling="no" border="0" frameborder="0"></iframe>
</td>
</tr>
<tr>
<td colspan="3" class="article_block_devider">» '3*(J'F'* 3'(B)</td>
</tr>
<tr>
<td class="hot_articles" colspan="3" align="right">
<ul>
<!-- START BLOCK : old_polls -->
<li><a href="poll.php?act=archive&id={id}">{question}</a></li>
<!-- END BLOCK : old_polls -->
</ul>
</td>
</tr>
<tr>
<td class="hot_articles" colspan="3" align="right">
<ul>
<!-- START BLOCK : current_topics -->
<li><a href="article.php?act=read_art&id={id}" title="{title}">{title}</a></li>
<!-- END BLOCK : current_topics -->
</ul>
</td>
</tr>
<tr>
<td colspan="3" class="more_articles"></b>» <a href="forum.php?act=archive">'DE2J/ EF 'D%3*(J'F'*</a></td>
</tr>
<tr>
<td colspan="3">
<div>
<div class="spiffyfg">
<!-- content goes here -->
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
</div>
</td>
</tr>
<tr>
<td height="16"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- END BLOCK : left_col -->
</tr>
<tr>
<td colspan="3">
<div>
<div class="hp_sliderfg">
<script src="scripts/mootools-12.js" type="text/javascript"></script>
<script src="scripts/mootools-12-more.js" type="text/javascript"></script>
<script src="scripts/imagegallery.js" type="text/javascript"></script>
<link rel='stylesheet' href='skin/cms/css/imagegallery.css' type='text/css' />
<div id="log"></div>
<div id="img_gallery">
<div id="fullimg">
<img src="skin/cms/images/slider/ajax-loader.gif" class="loading" />
<br>
</div>
<a href="#" id="moveleft">Left</a>
<div id="wrapper">
<ul id="items">
<!-- START BLOCK : hp_banners -->
<li><a href="uploads/{picture}" id="first" class="item">
<img class="thumb" alt="img" src="uploads/{picture}"/>
</a></li>
<!-- END BLOCK : hp_banners -->
</ul>
</div>
<a id="moveright" href="#">Right</a>
</div>
</div>
<b class="hp_slider">
<b class="hp_slider5"></b>
<b class="hp_slider4"></b>
<b class="hp_slider3"></b>
<b class="hp_slider2"><b></b></b>
<b class="hp_slider1"><b></b></b></b>
</div>
</td>
</tr>
</table>
</td>
<td width="30%" align="center" valign="top">
<table cellspacing="0" cellpadding="0" width="100%">
<!-- START BLOCK : pics_block -->
<link rel="stylesheet" href="skin/cms/css/_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="skin/cms/css/noobslide.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/_class.noobSlide.packed.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
//SAMPLE 5 (mode: vertical, using "onWalk" )
var info5 = $('info5').set('opacity',0.5);
var sampleObjectItems =[
{title:'Morbi elementum', autor:'Lorem', date:'5 Jun 2007', link:'http://www.link1.com'},
{title:'Mollis leo', autor:'Ipsum', date:'6 Dic 2007', link:'http://www.link2.com'},
{title:'Nunc adipiscing', autor:'Dolor', date:'9 Feb 2007', link:'http://www.link3.com'},
{title:'Phasellus volutpat pharetra', autor:'Sit', date:'22 Jul 2007', link:'http://www.link4.com'},
{title:'Sed sollicitudin diam', autor:'Amet', date:'30 Set 2007', link:'http://www.link5.com'},
{title:'Ut quis magna vel', autor:'Consecteur', date:'5 Nov 2007', link:'http://www.link6.com'},
{title:'Curabitur et ante in', autor:'Adipsim', date:'12 Mar 2007', link:'http://www.link7.com'},
{title:'Aliquam commodo', autor:'Colom', date:'10 Abr 2007', link:'http://www.link8.com'}
];
var nS5 = new noobSlide({
box: $('box5'),
size: 240,
items: sampleObjectItems,
interval: 3000,
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut,
wait: false
},
addButtons: {
previous: $('prev5'),
play: $('play5'),
stop: $('stop5'),
next: $('next5')
},
onWalk: function(currentItem){
info5.empty();
new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info5);
new Element('p').set('html','<b>Autor</b>: '+currentItem.autor+' <b>Date</b>: '+currentItem.date).inject(info5);
}
});
});
</script>
<tr>
<td class="hot_articles" style="text-align:center;">
<div class="sample">
<div class="mask2">
<div id="box5">
<!-- START BLOCK : pics_slide -->
<span><img src="uploads/{thump}" alt="{title}" width="240" /></span>
<!-- END BLOCK : pics_slide -->
</div>
<div id="info5" class="info"></div>
</div>
<span id="prev5"><< Previous</span>
<span id="play5">Play ></span>
<span id="stop5">Stop</span>
<span id="next5">Next >></span>
</div>
</td>
</tr>
<!-- END BLOCK : pics_block -->
<!-- START BLOCK : arts -->
<tr>
<td class="side_bar_devider">EB'D'* E*EJ2)</td>
</tr>
<tr>
<td class="hot_articles">
<ul>
<!-- START BLOCK : mini_arts -->
<li> <a href="article.php?act=read_art&id={id}">{title}</a></li>
<!-- END BLOCK : mini_arts -->
</ul>
</td>
</tr>
<!-- END BLOCK : arts -->
<!-- START BLOCK : multi_block -->
<tr>
<td class="side_bar_devider">'DEC*() 'D*A'9DJ)</td>
</tr>
<tr>
<td class="hot_articles">{multi_media}</td>
</tr>
<tr>
<td class="hot_articles">
</td>
</tr>
<!-- END BLOCK : multi_block -->
<tr>
<td class="hot_articles" align="center"><br>
<!-- <iframe name="I1" marginwidth="0" marginheight="0" src="components/weather/weather_international.swf" height="300" width="100%" align="right" scrolling="no" border="0" frameborder="0"></iframe> -->
<!-- START BLOCK : weather -->
<iframe src="http://news.bbc.co.uk/weather/forecast/1284/Next3DaysEmbed.xhtml?target=_parent" allowTransparency="true" width="85%" height="435" scrolling="no" frameborder="0">You must have a browser that supports iframes to view the BBC weather forecast</iframe>
<!-- END BLOCK : weather -->
</td>
</tr>
<tr>
<td>
<div>
<div class="spiffyfg">
<!-- content goes here -->
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
What do you mean?
You have two slideshows and one does not work at all because it does not have a container named correctly.
You have two slideshows and one does not work at all because it does not have a container named correctly.
ASKER
That container is irrelevant it doesn't belong to anyone of those slideshows. See the full code for the first slideshow (noobslide) and the other (img gallery) you would see that both have what it's needed to play correctly. Beside, when I remove one of them, the other works perfectly.
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow DIV.active');
Gives javascript error because there is no div called slideshow.
I downloaded noob and jquery just to test and if you get a javascript error like this, the execution of other scripts on the page will stop
So if you have THREE slideshows, remove this one since that is giving error. If you have TWO slideshows, then one of them must have a container called slideshow.
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow DIV.active');
Gives javascript error because there is no div called slideshow.
I downloaded noob and jquery just to test and if you get a javascript error like this, the execution of other scripts on the page will stop
So if you have THREE slideshows, remove this one since that is giving error. If you have TWO slideshows, then one of them must have a container called slideshow.
ASKER