Javascript conflicts

JavaScript
1

OK I am a novice at best when it comes to javascript and I am trying to use two on a page - the page isnt live but I can upload if needed. I am trying to use two javascripts on a page - one for a slider and one for an image gallery. They work if they are added on their own but ass soon as I add them both thats when one or the other stops working. I hope someone can help I must have been sat looking at the screen and searching around for about 8 hrs lol.

thanks in advance

Here are the two that are causing issues.

    <script type="text/javascript">
		$(document).ready(	
			function() {
				//initialize scroller
				$(".container").wtScroller({
					num_display:3,
					slide_width:234,
					slide_height:120,
					slide_margin:1,
					button_width:35,
					ctrl_height:25,
					margin:10,	
					auto_scroll:true,
					delay:4000,
					scroll_speed:1000,
					easing:"",
					auto_scale:true,
					move_one:false,
					ctrl_type:"scrollbar",
					display_buttons:true,
					display_caption:true,
					mouseover_caption:false,
					caption_align:"bottom",
					caption_position:"inside",					
					cont_nav:true,
					shuffle:false
				});
				
				//initialize lightbox for scroller
				$("a[rel='scroller']").wtLightBox({
					rotate:true,
					delay:4000,
					transition_speed:600,
					display_number:true,
					display_dbuttons:true,
					display_timer:true,
					display_caption:true,
					caption_align:"bottom",					
					cont_nav:true,
					auto_fit:true,
					easing:""
				});
			}
			
		);
	</script>

<script type="text/javascript">
	$(document).ready(function(){
		//$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
		$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
	});
</script>
2

it seems to be a case of accidental function clobbering

code 1:
$(document).ready(function()…

code 2:
$(document).ready(function()…

so it rewrites the ‘on document ready function’ and cause to conflict

try this instead:

<script type=“text/javascript”>
$(document).ready(
function()
{

					//initialize scroller
					$(".container").wtScroller({
						num_display:3,
						slide_width:234,
						slide_height:120,
						slide_margin:1,
						button_width:35,
						ctrl_height:25,
						margin:10,	
						auto_scroll:true,
						delay:4000,
						scroll_speed:1000,
						easing:"",
						auto_scale:true,
						move_one:false,
						ctrl_type:"scrollbar",
						display_buttons:true,
						display_caption:true,
						mouseover_caption:false,
						caption_align:"bottom",
						caption_position:"inside",					
						cont_nav:true,
						shuffle:false
					});//end of $(".container").wtScroller({
					
					//initialize lightbox for scroller
					$("a[rel='scroller']").wtLightBox({
						rotate:true,
						delay:4000,
						transition_speed:600,
						display_number:true,
						display_dbuttons:true,
						display_timer:true,
						display_caption:true,
						caption_align:"bottom",					
						cont_nav:true,
						auto_fit:true,
						easing:""
					});//end of $("a[rel='scroller']").wtLightBox({
					
					$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
				};//end of function()
			);//end of $(document).ready(

</script>

3

If you move the script tags to just before the </body> tag then you can get rid of the need for the $(document).ready test and just run the code it contained directly.

4

Thanks for the replies - I have tried to find a neater scroller but I am still having the same trouble. I thought with it having less code it may be a bit neater and less cumbersome but still getting errors when bith used together - the updated code is

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

<script type="text/javascript" src="js/jqueryslidemenu.js"></script>


<script type="text/javascript">
	$(document).ready(function(){
		//$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
		$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
	});
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> 
</script>
<!--<script type="text/javascript" src="/js/common.js"></script>-->
<script type="text/javascript" src="http://simplyscroll.googlecode.com/files/jquery.simplyscroll-1.0.4.min.js"></script>
<link rel="stylesheet" href="jquery.simplyscroll-1.0.4.css" media="all" type="text/css">
<script type="text/javascript"> 
(function($) {
	$(function() {
		$("#scroller").simplyScroll({
			autoMode: 'loop'
		});
		
	});
})(jQuery);
</script>
5

That looks like it uses a lot more code than the previous one rather than less. Just because JavaScript is in a separate file (as it all should be) doesn’t mean that it isn’t a part of the script.

6

it just seems neater than the other but is it simple for me to fix or is there not enough info there - its strange because again they both work if they are used on their own but Im not sure even what I need to look for to solve the error (tutorial wise)

In your post above you mentioned getting rid of the need for the $(document).ready - do I just delete this from each one?

Thanks