?
Solved

JS conflict

Posted on 2009-05-19
5
Medium Priority
?
865 Views
Last Modified: 2012-05-07
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-core.js"></script>
<script type="text/javascript" src="scripts/_class.noobSlide.packed.js"></script>

AND

<script src="scripts/mootools-12.js" type="text/javascript"></script>
<script src="scripts/mootools-12-more.js" type="text/javascript"></script>

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+' &nbsp; &nbsp; <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>&nbsp;</td>
									<td width="100%" class="head"><b>".1 *-/J+ :</b> {fixed_date}</td>
									<td class="ma_head_lc" nowrap>&nbsp;</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>&nbsp;</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">&nbsp;</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+' &nbsp; &nbsp; <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">&lt;&lt; Previous</span>
		<span id="play5">Play &gt;</span>
		<span id="stop5">Stop</span>
		<span id="next5">Next &gt;&gt;</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>

Open in new window

0
Comment
Question by:Shopies
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 24428887
I do not see
<div id="slideshow">
    <img src="img/img1.jpg" alt="" class="active" />
    <img src="img/img2.jpg" alt="" />
    <img src="img/img3.jpg" alt="" />
</div>

anywhere
0
 

Author Comment

by:Shopies
ID: 24429812
OKay, we can add it but the confliction has to be solved. I don't think the problem is there.!! What do you think?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24429830
What do you mean?

You have two slideshows and one does not work at all because it does not have a container named correctly.
0
 

Author Comment

by:Shopies
ID: 24432090
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.
 
 
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24432455
/***
    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.
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question