Solved

JS conflict

Posted on 2009-05-19
5
845 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
  • 3
  • 2
5 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

749 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