Two jQuery scripts on one page

j05hr · 11-23-2011, 01:08 PM

My page currently has two jQuery scripts on one page. I know you can only have one library on each page to make them both work but I'm not sure what scripts to take out and what to leave in.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Focus4People</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
		 <link rel="stylesheet" type="text/css" href="wt-rotator.css"/>
		 <style type="text/css">
		/* style used for preview page only */
		html {
			height:100%;
			background:#EEE;
			background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%);
			background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC));
    	}
    	body {
			width:100%;
			height:100%;
			margin:0;
		}
		h1 {
			font-size:15px;
			font-weight:normal;
			color:#B5FF00;
			margin:0;
		}
		.container{
			position:absolute;
			width:825px;
			height:300px;
			top:50%;
			left:50%;
			margin-top:-150px;
			margin-left:-412px;
		}
    </style>
	<!-- SliderSliderSliderSliderSliderSliderSliderSliderSlider -->
	<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.wt-rotator.min.js"></script>
	<script type="text/javascript">
    	$(document).ready(	
			function() {
				$(".jqSlider").wtRotator({
					width:825,
					height:300,
					thumb_width:24,
            		thumb_height:24,
					button_width:24,
					button_height:24,
					button_margin:5,
					auto_start:true,
					delay:5000,
					play_once:false,
					transition:"fade",
					transition_speed:800,
					auto_center:true,
					easing:"",
					cpanel_position:"inside",
					cpanel_align:"BR",
					timer_align:"top",
					display_thumbs:true,
					display_dbuttons:true,
					display_playbutton:true,
					display_thumbimg:false,
           			display_side_buttons:false,
					display_numbers:true,
					display_timer:true,
					mouseover_pause:false,
					cpanel_mouseover:false,
					text_mouseover:false,
					text_effect:"fade",
					text_sync:true,
					tooltip_type:"image",
					lock_tooltip:true,
					shuffle:false,
					block_size:75,
					vert_size:55,
					horz_size:50,
					block_delay:25,
					vstripe_delay:75,
					hstripe_delay:180			
				});
			}
		);
    </script>  
	<!-- SliderSliderSliderSliderSliderSliderSliderSliderSlider -->
	  <!-- NavNavNavNavNavNavNavNavNavNavNavNavNavNav -->  
		<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
		<script type="text/javascript" src="jquery.easing.min.js"></script>		
		<script type="text/javascript" src="jquery.lavalamp.min.js"></script>
		<script type="text/javascript">
        $(function() {
            $("#1, #2, #3").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return true;
                }
            });
        });
    </script>
	 <!-- NavNavNavNavNavNavNavNavNavNavNavNavNavNav -->  
	</head>

Any help is much appreciated.

VIPStephan · 11-23-2011, 01:33 PM

Files like <script type="text/javascript" src="jquery-1.2.3.min.js"></script> are the core libraries. It has the version number in the file name (here version 1.2.3). Now look through the code and note another occurrence reading “jquery-1.6.1.min.js”. What does this tell you about the script? Which library is the more recent one? And which one should you usually use? And what would be the logical conclusion as to which library to discard?

However, you have another problem: Not only do you have two versions of jQuery included, you also included yet another JS library, namely prototype, which is likely to conflict with jQuery and its plugins. You shouldn’t just copy and paste together random stuff from the internet. Choose one framework, understand it, and stick with it.

j05hr · 11-23-2011, 01:39 PM

Discard the older one and use jquery-1.6.1.min.js? I take out the other one and still only one script works. Is there anything else I need to do?

VIPStephan · 11-23-2011, 01:48 PM

You need to use plugins that are current. I can tell you that a plugin that comes with/requires jQuery 1.2.3 is likely to be way outdated. It’s probably not working because many things in jQuery have changed since then.