Back To Website Design Forum

2 jquerys on the same page

  • Rika
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Oct 14, 2009
  • Posts: 14
  • Loc: Singapore
  • Status: Offline

Post March 18th, 2010, 9:29 am

I'm trying to put 2 jquery plugins on the same html page. However it only works when there is one jquery. i know it can be done since i have seen websites using 2 jquerys. Can anyone help with this? I'm really stuck.
Code: [ Select ]
<link rel="stylesheet" type="text/css" href="css/featuredcontentglider.css" />
<link rel="stylesheet" type="text/css" href="css/contactform.css" />
<script language="javascript" type="text/javascript">
function clearText(field)
{
  if (field.defaultValue == field.value) field.value = '';
  else if (field.value == '') field.value = field.defaultValue;
}
</script>


<link rel="stylesheet" type="text/css" href="css/jquery.accessible-news-slider.css" />
<script language="javascript" type="text/javascript" src="scripts/jquery-1.2.6.pack.js"></script>
<script language="javascript" type="text/javascript" src="scripts/jquery.accessible-news-slider.js"></script>
<script language="javascript" type="text/javascript">
    
    $(function() {
    
        $( "#example_1" ).accessNews({
        headline : "Candy Coated",
        speed : "normal",
            slideBy : 2
      });
        
    });
    
</script>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/featuredcontentglider.js"></script>
<script language="javascript" src="scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
      $(document).ready(function(){

        $("#contactLink").click(function(){
          if ($("#contactForm").is(":hidden")){
            $("#contactForm").slideDown("slow");
          }
          else{
            $("#contactForm").slideUp("slow");
          }
        });
        
      });
      
      function closeForm(){
        $("#messageSent").show("slow");
        setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
      }
    </script>
  1. <link rel="stylesheet" type="text/css" href="css/featuredcontentglider.css" />
  2. <link rel="stylesheet" type="text/css" href="css/contactform.css" />
  3. <script language="javascript" type="text/javascript">
  4. function clearText(field)
  5. {
  6.   if (field.defaultValue == field.value) field.value = '';
  7.   else if (field.value == '') field.value = field.defaultValue;
  8. }
  9. </script>
  12. <link rel="stylesheet" type="text/css" href="css/jquery.accessible-news-slider.css" />
  13. <script language="javascript" type="text/javascript" src="scripts/jquery-1.2.6.pack.js"></script>
  14. <script language="javascript" type="text/javascript" src="scripts/jquery.accessible-news-slider.js"></script>
  15. <script language="javascript" type="text/javascript">
  16.     
  17.     $(function() {
  18.     
  19.         $( "#example_1" ).accessNews({
  20.         headline : "Candy Coated",
  21.         speed : "normal",
  22.             slideBy : 2
  23.       });
  24.         
  25.     });
  26.     
  27. </script>
  28. <script type="text/javascript" src="scripts/jquery.min.js"></script>
  29. <script type="text/javascript" src="scripts/featuredcontentglider.js"></script>
  30. <script language="javascript" src="scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
  31. <script type="text/javascript">
  32.       $(document).ready(function(){
  34.         $("#contactLink").click(function(){
  35.           if ($("#contactForm").is(":hidden")){
  36.             $("#contactForm").slideDown("slow");
  37.           }
  38.           else{
  39.             $("#contactForm").slideUp("slow");
  40.           }
  41.         });
  42.         
  43.       });
  44.       
  45.       function closeForm(){
  46.         $("#messageSent").show("slow");
  47.         setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
  48.       }
  49.     </script>
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post March 18th, 2010, 9:29 am

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post March 19th, 2010, 11:09 am

You don't need multiple copies of actual jquery base. Remove line 28 and line 13. Then move line 30 to be the first js call. The reason it doesn't work is that you simply overwriting the library code each time and causing conflicts.

You can have multiple plugins (items that extend the jquery base) but only one base version of jquery.

I would also recommend grabbing a newer version of jquery 1.2.6 is quite old now.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com

Page 1 of 1

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 142 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.