Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Javascript working with multiple plugins in HTML

Posted on 2009-06-27
5
Medium Priority
?
295 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
[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 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

Hire Technology Freelancers with Gigs

Work with 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

Find out what you should include to make the best professional email signature for your organization.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

618 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