Solved

Javascript working with multiple plugins in HTML

Posted on 2009-06-27
5
288 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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

815 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

8 Experts available now in Live!

Get 1:1 Help Now