Solved

JS conflict

Posted on 2009-05-19
5
813 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
/***
    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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now