SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery version problem - function not defined

    Hi,

    I'm currently using a search form autocomplete on my site using query-1.2.6.min.js.

    I need to get a content slider on there too, which uses, jquery/1.3.2/jquery.min.js and jqueryui/1.5.3/jquery-ui.min.js

    When I include all the files, it doesnt work, I get 'function not defined errors' only one or the other.

    Is there a .js file that incorporates them all which I could use?

    Any advice much appreciated, many thanks

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Firstly, those versions are all very very old. jQuery is currently up to version 1.7.2! (You can quite often use the latest version even when plugins come with an older version. You'll have to test of course.)

    However, regardless of what versions you have, you should only ever include 1 version of the jQuery library. Something that is likely happening here is something like this:
    Code:
    - jQuery 1.2.6 included
        - Autocomplete script 
    
    - jQuery 1.3.2 included
        - jQuery UI 1.5.3 included
        - Content slider script included
    When your scripts are included in this order, everything is fine up until the point where the second jQuery library is included. It will essentially overwrite the $ and jQuery variables, meaning that any plugins that have attached themselves to the jQuery object will be removed.

    The solution is simple, just include 1 version of the jQuery library before all other scripts that require jQuery.

    Did this fix it? If not, it might be worth putting up a sample page to see what's happening in greater detail.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've updated my jquery files but still no joy, here is my code, if you could help that would be great.

    Many thanks


    Files:

    HTML Code:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" ></script>
    Code:
    $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    HTML Code:
    <div id="featured" >
    		  <ul class="ui-tabs-nav">
    	        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
    	        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
    	        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
    	        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
    	      </ul>
    
    	    <!-- First Content -->
    	    <div id="fragment-1" class="ui-tabs-panel" style="">
    			<img src="images/image1.jpg" alt="" />
    			 <div class="info" >
    				<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
    			 </div>
    	    </div>
    
    	    <!-- Second Content -->
    	    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
    			<img src="images/image2.jpg" alt="" />
    			 <div class="info" >
    				<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
    				<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
    			 </div>
    	    </div>
    
    	    <!-- Third Content -->
    	    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
    			<img src="images/image3.jpg" alt="" />
    			 <div class="info" >
    				<h2><a href="#" >35 Amazing Logo Designs</a></h2>
    				<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
    	         </div>
    	    </div>
    
    	    <!-- Fourth Content -->
    	    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
    			<img src="images/image4.jpg" alt="" />
    			 <div class="info" >
    				<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
    				<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
    	         </div>
    	    </div>
    
    		</div>

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You're trying to apply jQuery UI tabs to the <ul>, but you actually want to apply it to the container for things to work.

    i.e.
    Code:
    $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    (And make sure that code gets called inside of a document.ready block)
    Code javascript:
    $(document).ready(function(){
        $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

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