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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Two Jquery files conflicting on one page

    Hello All,
    I am new to the forums and using Jquery with Javascript. I have a social networking widget from Adobe widget browser and a Prettyphoto lightbox off of the net. It's either one or the other working right now and I can't understand the coder lingo to deal with call functions so they can work together. I set up a mock page, pasted below, to show you exactly how it looks in the head and body. I'll provide any more info you may need. I appreciate your patience and time helping the noob.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <title>How can I get these two javascripts to work?</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <link rel="stylesheet" href="onlineportfolio.css" type="text/css"/>
    
    <!--Heres the Pretty Photo lightbox -->
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
    <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
    
    <!--And the Networking widget -->
    <script src="includes/jquery-1.4.2.js" type="text/javascript"></script>
    <link rel="stylesheet" href="jQuery/css/style.css"  type="text/css">
    <script src="jQuery/js/jquery.jsocial.js" type="text/javascript"></script>
    
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2149023" binding="#social" />
    </oa:widgets>
    -->
    </script>
    
    </head>
    
    <body>
    
    <div id="demoreel"><a href="http://www.youtube.com/watch?feature=player_profilepage&v=PEb1qak3z" rel="prettyPhoto" title="Demo Reel"><img src="images/demoreel.png" alt= "Demo reel" width="160" height="47" border="0"></a></div>
    
    <div id="networkwidget">
    
    <div class="social">
    <script type="text/javascript">
    // BeginOAWidget_Instance_2149023: #social
    	
    	$('.social').jsocial({
    			twitter		:  '',
    			facebook	:  'facebook.com/',
    			flickr		:  '',
    			delicious	:  '',
    			linked		:  'linkedin.com/profile/',
    			youtube		:  'youtube.com/user/',
    			feed		:  '',
    			friendfeed	:  '',
    			digg		:  '',
    			lastfm		:  '',
    			center		: false,	
    			inline		: true,
    			small		: false,
    			newPage		: false
    		});
    	// EndOAWidget_Instance_2149023
      </script>
      </div>
      
      </div>
      
    <script type="text/javascript" charset="utf-8">
    		$(document).ready(function(){
    			$("a[rel^='prettyPhoto']").prettyPhoto();
    		});
    </script>  
    </body>
    
    </html>

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I suggest that you place the style sheets first and then the scripts. But you should remove all the 'charset' attributes from these as they are not valid.

    But you are also loading two jQuery libraries - you should only load one.
    Code:
    <link rel="stylesheet" href="onlineportfolio.css" type="text/css"/>
    <link rel="stylesheet" href="jQuery/css/style.css"  type="text/css">
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />
    
    <!--Heres the Pretty Photo lightbox -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
    
    <!--And the Networking widget -->
    <script src="includes/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="jQuery/js/jquery.jsocial.js" type="text/javascript"></script>
    And the folowing type is not correct:
    Code:
    <script type="text/xml">
    The following lines are not a script, so I assume these lines should be placed somewhere within the <body>.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

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