Solved

Javascript working with multiple plugins in HTML

Posted on 2009-06-27
5
287 Views
Last Modified: 2013-11-18
I am working with several javascript plugins.  

First, I am using JQuery Cycle

http://www.malsup.com/jquery/cycle/

And inside that I am trying to use noobSlide

http://www.efectorelativo.net/laboratory/noobSlide/

I get each one to work independently but not together.  Is it possible to get these to work together?  I am just learning javascript so this is all pretty new to me.  Thanks in advance.
<script type="text/javascript" src="js/mootools-1.2-core.js"></script>

<script type="text/javascript" src="js/_class.noobSlide.packed.js"></script>

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

<script type="text/javascript" src="js/jquery.cycle.all.js"></script>

<script type="text/javascript">
 

$(function() { 

    $('#left')

	.cycle({

	fx: 'fade',

	timeout: 0,

	pager: '#navlist',

	pagerAnchorBuilder: function(idx, slide) {

		return '#navlist li:eq(' + idx + ') a';

	}

	});

	 $('#right')

	.cycle({

	fx: 'fade',

	timeout: 0,

	pager: '#navlist',

	pagerAnchorBuilder: function(idx, slide) {

		return '#navlist li:eq(' + idx + ') a';

	}

	});  

	

}); 
 

window.addEvent('domready',function(){

			

		//SAMPLE 7

		var startItem = 3; //or   0   or any

		var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*60-568)+'px').set('opacity',0.8);

		var fxOptions7 = {property:'left',duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}

		var thumbsFx = new Fx.Tween(thumbs_mask7,fxOptions7);

		var nS7 = new noobSlide({

			box: $('box7'),

			items: [0,1,2,3,4,5,6,7],

			handles: $$('#thumbs_handles7 span'),

			fxOptions: fxOptions7,

			onWalk: function(currentItem){

			thumbsFx.start(currentItem*60-568);

		},

		startItem: startItem

		});

		//walk to first with fx

		nS7.walk(0);

	

	

	});
 

</script>

Open in new window

0
Comment
Question by:el_suavo
  • 3
  • 2
5 Comments
 
LVL 12

Expert Comment

by:sajayj2009
ID: 24727404
The problem is with same javascript variable/function names calling in different javascript. You can use <iframe> on your main index page, and call different plugin from iframe src page.

Thats all!!
0
 

Author Comment

by:el_suavo
ID: 24727454
Sorry but I am pretty new.  Could you spell that out in a little more detail?
0
 
LVL 12

Expert Comment

by:sajayj2009
ID: 24727518
Suppose your index page content is like this

<body>
<table><tr><td><iframe src="slideshow1.html"></iframe></td>
<td><iframe src="slideshow2.html"></iframe></td>
<td><iframe src="slideshow3.html"></iframe></td>
</tr></table>

</body>

now; inside each html, include different javascript you wish to see in main page. like;

slideshow1.html
==============
< script src = "firstscript.js"></script>

any functions ();

slideshow2.html
=============
< script src = "secondscript.js"></script>

any functions ();

0
 

Author Comment

by:el_suavo
ID: 24728572
Actually this is all being done on one page with <div> to separate the different sections.  I am not using tables at all.  Can it still work?
0
 

Accepted Solution

by:
el_suavo earned 0 total points
ID: 24730698
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this article you will learn how to create a free basic website on Bitbucket, a git service provider. Polymer creates dynamic HTML components, which allow more flexibility than static HTML. This tutorial uses Ubuntu Linux but can also be done on W…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

863 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

20 Experts available now in Live!

Get 1:1 Help Now