Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts

    Two jQuery scripts on one page

    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.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,474
    Thanks
    6
    Thanked 980 Times in 953 Posts
    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.
    Last edited by VIPStephan; 11-23-2011 at 01:36 PM.

  • #3
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts
    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?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,474
    Thanks
    6
    Thanked 980 Times in 953 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •