Wrox Programmer Forums
BOOK: Beginning JavaScript and CSS Development with jQuery
This is the forum to discuss the Wrox book Beginning JavaScript and CSS Development with jQuery by Richard York; ISBN: 9780470227794
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning JavaScript and CSS Development with jQuery section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
Old May 4th, 2012, 04:33 AM
Registered User
Join Date: Feb 2012
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Thumbs up Ch16 (tabs) corrections for later jQuery versions


The final tabs example works fine up to version 1.4.4 of jQuery and 1.6.0 of iQueryUI. Then each of these does it's own special thing to ruin the app (but exactly the same thing right up to the latest versions of both js libraries).

Some work and hints from http://docs.jquery.com/UI/Tabs led me to the working code below. Essentially the jQuery selector loses the "<" and the html has classes defined in the relevant divs (for the CSS to work) and updated links to the js files (hosted by google rather than local, in this case). Change the CSS link if you want to play with the look.

.html file (note, CSS is taken externally making the example .css obsolete in this case)...

<!DOCTYPE html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type='text/javascript' src='Figure 16-6.js'></script>
<div id="tmpTabExample" class="ui-tabs">
<a href="#tmpTab-1"><span>First Tab</span></a>
<a href="#tmpTab-2"><span>Second Tab</span></a>
<a href="#tmpTab-3"><span>Third Tab</span></a>
<a href="tab.html" title="tmpTab-4"><span>Fourth Tab</span></a>

<div id="tmpTab-1" class="ui-tabs-hide">
First tab is activated by default.
<div id="tmpTab-2" class="ui-tabs-hide">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse
id sapien. Suspendisse rutrum libero sit amet dui...
<div id="tmpTab-3" class="ui-tabs-hide">
Lorem ipsum dolor sit amet...
<div id="tmpTab-4" class="ui-tabs-hide">

.js file...
$(document).ready(function() {
fx : {
opacity : 'toggle',
duration : 'fast'

Hope that helps others!

Similar Threads
Thread Thread Starter Forum Replies Last Post
Can't seem to logout - CH16 Corewave BOOK: Professional ASP.NET 4 : in C# and VB 1 February 21st, 2012 10:13 AM
Can't seem to logout - CH16 Corewave BOOK: Beginning ASP.NET 4 : in C# and VB 1 February 20th, 2012 10:10 PM
Ch 4 Possible Corrections under Symfony: deejaydmk BOOK: Building PHP Applications with Symfony, CakePHP, and Zend Framework 0 November 5th, 2011 01:22 AM
Problem in IE 8 With Newer Versions of jQuery tknyc BOOK: Beginning JavaScript and CSS Development with jQuery 1 April 13th, 2011 02:32 PM
What is the protocol to summit corrections to the tbroom BOOK: Beginning ASP.NET 2.0 BOOK VB ISBN: 978-0-7645-8850-1; C# ISBN: 978-0-470-04258-8 5 August 16th, 2006 12:48 PM

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.