jQuery Embedded in Dojo Accordion Panes

Exclusive offer: get 50% off this eBook here
jQuery UI 1.6: The User Interface Library for jQuery

jQuery UI 1.6: The User Interface Library for jQuery — Save 50%

Build highly interactive web applications with ready-to-use widgets of the jQuery user interface library

$26.99    $13.50
by Jayaram Krishnaswamy | February 2009 | Open Source PHP Web Development

The Dojo Toolkit is an Open source JavaScript toolkit which can be used to develop stunning web pages. I liked it from the very beginning. It is very fast and provides lots of tools to work with DOM, Animations, AJAX etc. The base code is lightweight (~26 KB). jQuery, even lighter, also Open Source, is the write-less, do-more, cross-browser, CSS3 compliant JavaScript library. In this article by Dr. Jayaram Krishnaswamy, we will experiment embedding jQuery in DOJO 123's Accordion widget and try to identify if there exists any cross-code interactions. The code is also tested for cross-browser suitability.

Basic DOJO 123 accordion

In my earlier article I had used the version of the Toolkit which had the accordion in the Widgets. In the latest version which I am using, the accordion is found in digit/layout. The code is similar to that in the earlier article. Basically you create a accordion container and then place the accordion panes inside the container. In referencing the Dojo library I am using part of the references from the Dojo Toolkit 123 installed on my local IIS and part of the reference from the AOL site (uses the 1.0.0 script).

Listing 1: AccordionOrig.htm: A basic accordion with three panes [DOJO 123]

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accordion Pane with jQueries</title>
<style type="text/css">
@import "http://localhost/Dojo123/dojo123/dijit/themes/tundra/tundra.css";
@import "http://localhost/Dojo123/dojo123/dojo/resources/dojo.css"
</style>

<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.AccordionContainer");
</script>
</head>
<body class="tundra">
<div dojoType="dijit.layout.AccordionContainer" duration="200"
style="margin-right: 30px; width: 400px; height: 400px; overflow: scroll">
<!--Pane 1 -->
<div dojoType="dijit.layout.AccordionPane" selected="true" title="Page 1"
style="color:red;overflow: scroll; background-color:#FFFF80;">
<!--Pane 1 content-->
<p >Test 1</a></p >
</div>
<!--Pane 2 -->
<div dojoType="dijit.layout.AccordionPane" title="Page 2"
style="overflow: scroll;background-color:#FFFF80;">
<!--Pane 2 content-->
<p >Test 2</p >
</div>
<!-- Pane 3-->
<div dojoType="dijit.layout.AccordionPane" title="Page 3"
style="color:magenta;overflow: scroll;background-color:#FFFF80;">
<!--Pane 3 content-->
<p >Test 3</a></p >
</div>
</div>
</body>
</html>

This page when browsed to, will display the accordion as shown in Figure 1. This was cross-browser compatible in the following browsers: IE 6.0, Opera 9.1, Firefox 3.0.5, and Safari 3.2.1. The page did not render correctly (all panes completely open) in Google Chrome 1.0.154.43.

Figure 1

jQuery UI 1.6: The User Interface Library for jQuery

jQuery API Components used in the article

jQuery 1.3 downloaded from this site is used as a source for the script. From the API reference only two simple components were chosen to be embedded in the panes - the Selector and the Effects. The slideUp() effect where in, when you click on the code sensitive area the region of the area on the web page slides up.

H1 Selector styled using jQuery

Using jQuery you can selectively apply style to tags, ids, etc. In the example shown in the code that follows the H1 tag is styled using jQuery.

Listing 2: H1SelectorJQry.htm: Tag styling with jQuery

<html>
<head></head>
<body>
<script language="JavaScript"
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://localhost/JayQuery/jquery-1.3.min.js">
</script>
<h1>Jquery inside a DOJO Accordion Pane</h1>
<script type="text/JavaScript">
$(document).ready(function(){
$("h1").css("color", "magenta");});
</script>
</body>
<html>

In the above, the jQuery code (inside the script tags) renders the h1 tag in the color shown as in Figure 2.

Figure 2

jQuery UI 1.6: The User Interface Library for jQuery

jQuery Effect: slideUp()

The htm page with the listing 3 when browsed to, displays a pale green 300 x 300 square corresponding to the styling of the p tag as shown in Figure 4. When clicked anywhere inside this square, the square slides up and disappears. This is the slideUp() effect.

Listing 3: p_slideUp.htm: Jquery Effect

<html>
<head></head>
<body>
<script language="JavaScript"
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://localhost/JayQuery/jquery-1.3.min.js">
</script>

<div><p style="width:300; height:300;
background-color:palegreen; color:darkgreen;">Test</p></div>
<script type="text/JavaScript">
$("p").click(function () {
$(this).slideUp();
});
</script>
</body>
<html>

This page gets displayed as shown in Figure 3. When you click anywhere in the pale green area the "P" region slides up.

Figure 3

jQuery UI 1.6: The User Interface Library for jQuery

jQuery UI 1.6: The User Interface Library for jQuery Build highly interactive web applications with ready-to-use widgets of the jQuery user interface library
Published: February 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

jQuery code embedded in the Dojo accordion panes

In order to test if there are any interactions that may arise out of jquery code being placed inside a Dojo object, the two API codes from jQuery were inserted into the panes as shown in the following code. Some slight alterations were also made to the title with some styling applied as shown in the style tags.

Listing 4: jquery code embedded in Dojo Accordion panes jQueryInAccordion.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accordion Pane with jQueries</title>
<style type="text/css">
@import "http://localhost/Dojo123/dojo123/dijit/themes/tundra/tundra.css";
@import "http://localhost/Dojo123/dojo123/dojo/resources/dojo.css"
</style>

<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.AccordionContainer");
</script>
</head>
<body class="tundra">
<div dojoType="dijit.layout.AccordionContainer" duration="200"
style="margin-right: 30px; width: 400px; height: 300px; overflow: scroll">
<!-- Pane 1 Content -->
<div dojoType="dijit.layout.AccordionPane" selected="true" title="Hodentek"
style="color:red;overflow: scroll; background-color:#FFFF80;">
<p ><a href="http://hodentek.blogspot.com">My Blog</a></p >
</div>

<!-- Pane 2 Content -->
<div dojoType="dijit.layout.AccordionPane" title="JQuery:Selector"
style="overflow: scroll;background-color:#FFFF80;">
<!--jquery:Selector goes here-->
<script language="JavaScript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://localhost/JayQuery/jquery-1.3.min.js">
</script>
<h1>Jquery inside a DOJO Accordion Pane</h1>
<script language="JavaScript">
$(document).ready(function(){
$("h1").css("color", "green");
});
</script>
<!--end jquery-->

</div>

div dojoType="dijit.layout.AccordionPane" title="JQUERY:Slideup() effect"
style="color:magenta;overflow: scroll; background-color:#FFFF80;">

<!--jquery:effect goes here-->
<p style="width:300; height:300; background-color:palegreen;
color:darkgreen;">Test</p>
<script type="text/JavaScript">
$("p").click(function () {
$(this).slideUp();
});
</script>

<!--end jquery-->
</div>
</div>
</body>
</html>

Figure 4 shows the rendering of the above page in Opera browser. Except for Google Chrome all other browsers rendered this page the same way and the accordion panes behaved the same way. The sensitive area when clicked slid up even in Google Chrome although the panes themselves were rendered flat (all panes displayed in the open position, Figure 6).

Figure 4

jQuery UI 1.6: The User Interface Library for jQuery

When the third pane was clicked, the slideUp() effect was active in all browsers as shown in Figure 5 including the Google Chrome (although the accordion was poorly rendered, see Figure 6).

Figure 5

jQuery UI 1.6: The User Interface Library for jQuery

This was a surprise as a (300 x 300) area expected [seen earlier] in the JQUERY:Slideup() pane failed to render. The sensitive area had shrunk to the size shown in Figure 5. The reasons (guess at this point) for this could be in how CSS that gets prioritized (cascaded!!!), Dojo Toolkit or jQuery. However, if you were to put up a p selector styling in the <head/> of the HTML page the full area gets rendered.

Figure 6: Page rendering in Google Chrome 1.0.154.43

jQuery UI 1.6: The User Interface Library for jQuery

Summary

The article described the result of embedding jQuery code in a HTML page with an accordion using the Dojo Toolkit 123. For the simple code used, jQuery and Dojo 123 displayed similarly in all tested browsers. The Accordion was however rendered poorly in Google Chrome. Also using the http://o.aolcdn.com/dojo/1.2.3/dojo/dojo.xd.js instead of the ..dojo/1.0.0 file all browsers including Google Chrome rendered the page correctly but the pane with the slideUp() did not change.

jQuery UI 1.6: The User Interface Library for jQuery Build highly interactive web applications with ready-to-use widgets of the jQuery user interface library
Published: February 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Jayaram Krishnaswamy

Jayaram Krishnaswamy studied at the Indian Institute of Science in Bangalore India and Madras University in India and taught at the Indian Institute of Technology in Madras. He went to Japan on a Japanese Ministry of Education Research scholarship to complete his PhD in Electrical Engineering from Nagoya University. He was a Post-Doctoral Fellow at Sydney University in Australia; a Government of India Senior Scientific Officer at the Indian Institute of Science in Bangalore and Indian Institute of Technology at Kanpur; a Visiting Scientist at the Eindhoven Institute of Technology in the Netherlands; a visiting Professor of Physics at the Federal University in Brazil; an Associate Research Scientist at a government laboratory in São Jose dos Campos in São Paulo, Brazil; a visiting scientist at the National Research Council in Ottawa, Canada before coming to USA in 1985. He has also taught and worked at the Colorado State University in Fort Collins and North Carolina State University in Raleigh, North Carolina. He worked with Northrop Grumman Corporation on a number of projects related to high energy electron accelerators and Free Electron Lasers. These projects were undertaken at the Brookhaven National Laboratory in Long Island and in the Physics Department at Princeton University. He has over 80 publications in refereed and non-refereed publications and 8 issued patents. He is fluent in Japanese and Portuguese and lives in Honolulu, Hawaii, USA.

He has been working in IT-related fields since 1997. He was once a Microsoft Certified Trainer in Networking and a Siebel Certified developer. He has worked with several IT related companies, such as the Butler International in their Siebel practice, with several IBM sub-contractors and smaller companies. Presently he is active in writing technical articles in the IT field to many online sites such as http://CodeProject.com, http://APSFree.com, http://DevShed.com, http://DevArticles.com, http://OfficeUsers.org, http://ASPAlliance.com, Egghead Café, http://SSWUG.org, Packt Article Network, http://databasedev.co.uk, http://cimaware.com, and many others. Between 2006 and 2010 he wrote more than 400 articles mostly related to database and web related technologies covering Microsoft, Oracle, Sybase, ColdFusion, Sun, and other vendor products.

He has written four books all published by Packt related to Microsoft Database and Application Development: SQL Server Integration Services Using Visual Studio 2005, Learning SQL Server Reporting Services 2008, Microsoft SQL Azure; Enterprise Application Development, and Microsoft Visual Studio Lightswitch Business Application Development. He regularly writes for his four blogs on Blogger; http://Hodentek.blogspot.com, http://HodentekHelp.blogspot.com, http://HodentekMobile.blogspot.com, and http://HodentekMSSS.blogspot.com. He received the 2011 Microsoft Community Contributor award.

Contact Jayaram Krishnaswamy

Books From Packt

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques
Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Learning Dojo
Learning Dojo

Magento Beginner's Guide
Magento Beginner's Guide

jQuery Reference Guide
jQuery Reference Guide

Learning Joomla! 1.5 Extension Development
Learning Joomla! 1.5 Extension Development

JBoss Portal Server Development
JBoss Portal Server Development

WordPress Plugin Development (Beginner's Guide)
WordPress Plugin Development (Beginner's Guide)

Practical Plone 3: A Beginner's Guide to Building Powerful Websites
Practical Plone 3: A Beginner's Guide to Building Powerful Websites

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software