FaraJoomla Web Design and Development » jQuery

Accordion with jQuery and CSS

Faramarz — Mon, 24 May 2010 15:30:47 +0000

The jQuery accordion plugin works with nested lists or just nested divs. There are also some options available to specify the structure, the active element (to display at first) and to customize animation.

This plugin will come in handy when you are dealing with orgonizing a good chuck of content.

HTML Markup

In this markup I’m using nested divs, an

is the heading of accordion items and a nested

to show the content of each item.

Web Design

  
    Custom Website Designs
    If your looking for a fresh eye-catching custom website design then we can develop a professional high quality website for you which is designed to your exact specifications.
    Great websites do not need to cost an arm and a leg. Our process is that of getting to know your business and proposing the best fit for you in terms of features and budget, while never compromising on quality. We simply enjoy creating beautiful websites. Find out more about our services.
    Do you require a world class corporate site, a friendly welcoming community site, or even something just plain funky? Whatever your design requirements, our design and development team caters for all audiences and markets. We have a wide range of designers at our disposal all from a variety of different design backgrounds, offering you a unique and beautifully designed website.

CSS

h3.click_accordion {
	padding: 0;
	margin: 0 0 5px 0;
	background: url(../images/h2-bg.png) no-repeat;
	height: 46px;	line-height: 46px;
	width: 500px;
	font-size: 2em;
	font-weight: bold;
	float: left;
}

h3.click_accordion a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 0 0 0 35px;
}

h3.click_accordion a:hover {
	background: url(../images/h2-bg.png) no-repeat;
	background-position: 0 -46px;
}

h3.active {
	background-position: 0 -92px;
}

.container_accordion {
	margin: 0 0 5px;
	padding: 0;
	overflow: hidden;
	font-size: 1.2em;
	width: 498px;
	clear: both;
	background: #f0f0f0;
	border: 1px solid #d6d6d6;
	-webkit-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-moz-border-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}
.container_accordion .content_accordion {
	padding: 20px;
}

Setting up jQuery

You can download jQuery from the jQuery site, or you can use the hosted one on Google.

Directly after you called your jQuery, start a new

View Demo

Dropdown with jQuery and CSS

Faramarz — Sun, 16 May 2010 21:42:37 +0000

Here is a solution for a very simple drop down menu system. All you need is jQuery and these below few lines of JavaScript and CSS.

The features of this menu system are:

Unordered list as menu structure
Absence of mouse events within html
Timeout effect
Cross-browser compatible (even IE 6)
Multi-level and retains “trail”
Easy to adopt styling
Minimal JavaScript

How to do it

First thing you do is to include jQuery library (before )

I am using the jQuery library hosted on google codes, but you can download your own copy of jQuery and link it to your page.

Next step is to include the simple drop-down menu plugin. You can either include the code before , or save the code as an external JavaScript fine and include a link to it in your web page.

Note: if you are using as an external file, then you don’t need to enclose the code in .

Here is the HTML markup:


        
        	Business News
        		
        			 Companies
        			 
        				Economy
        				
        					International
        					The Buzz
                            International
        					The Buzz
                            International
        					The Buzz
        				
        			 
        			 Street Sweep
        			 Corrections
                     Street Sweep
        			 Corrections
					 
        				Economy
        				
        					International
        					The Buzz
                            International
        					The Buzz
                            International
        					The Buzz
        				
        			 
        		
        	
        	Markets
        		
        			Pre-Market Training
        			After Hours Training
        			US Stocks
        			 
        				Currencies
        				
        					Euro
        					US Dollar
        					British Pound
        				
        			 
        			 Pre-Market Training
        			After Hours Training
        			US Stocks
        			 
        				Currencies
        				
        					Euro
        					US Dollar
        					British Pound
        				
        			 
        		
        	
        	Personal Finance
        		
        			 
        				Money Magazine
        			 
        				Real Estate
        				
        					Jobs
        					Taxes
        					Autos
        					Jobs
        					Taxes
        					Autos
        				
        			 
        			 
        				Loan Center
        			 
        				Best Places to Live
        				
        					Paris
        					Sweeden
        					Ireland
        				
        			 
					 
        				Money Magazine
        			 
        				Real Estate
        				
        					Jobs
        					Taxes
        					Autos
        					Jobs
        					Taxes
        					Autos
        				
        			 
        			 
        				Loan Center
        			 
        				Best Places to Live
        				
        					Paris
        					Sweeden
        					Ireland
        				
        			 

        		
        	
        	Technology
        		
        			 Apple
        			 Google
						 
						 	Gchat
							Ad Server
							Analytics
						 
					 
        			 Techmate
        			 TechTalk
        		
        	
        	Preferences
        		
        			 Login
        			 Register
        			 Account

And here is the CSS:

* 									{ margin: 0; padding: 0; }
#page-wrap							{ width: 100%; margin: 25px auto; }
a									{ text-decoration: none; }
ul									{ list-style: none; }
p                                   { margin: 15px 0; }
ul.dropdown                         { position: relative; }
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: #ccc; }
ul.dropdown a:hover		            { color: #000; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #333;
	 								  color: #222; }
ul.dropdown li:last-child a         { border-right: none; }
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #F4B737; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }
ul.dropdown ul 						{ width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li 					{ font-weight: normal; background: #f6f6f6; color: #000;
									  border-bottom: 1px solid #ccc; float: none; }
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; }
ul.dropdown ul ul 					{ left: 100%; top: 0; }
ul.dropdown li:hover > ul 			{ visibility: visible; }

That’s it.

View Demo

How jQuery Works

Faramarz — Tue, 04 May 2010 17:31:39 +0000

In past JavaScript is used by developers for client side scripting, but now developers have several option to add the functionality of JavaScript by using other tool and libraries. jQuery is also one of the best libraries for adding javascript, ajax features in the application, although the same task can be performed through javascript but jQuery provide the readymade easy to use functions.

What is jQuery?

jQuery is very rich library of functions and methods which does the same task like JavaScript but the difference is that jQuery is easy too use and give too much flexibility to the developers. The jQuery can be used in web application irrespective of the language or technology, it can be used with PHP,asp,jsp,servlets,CGI and almost all the programming languages.

The definition mentioned in jQuery official Web Site
“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript”

The Basics

This is a basic tutorial, designed to help you get started using jQuery. If you don’t have a test page setup yet, start by creating a new HTML page with the following contents:

Edit the src attribute in the script tag to point to your copy of jquery.js. For example, if jquery.js is in the same directory as your HTML file, you can use:

Launching Code on Document Ready

The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:

window.onload = function(){ alert("welcome"); }

Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn’t run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is that the HTML ‘document’ isn’t finished loading yet, when you first try to run your code.

To circumvent both problems, jQuery has a simple statement that checks the document and waits until it’s ready to be manipulated, known as the ready event:

  $(document).ready(function(){
  // Your code here
  });

Inside the ready event, add a click handler to the link:

$(document).ready(function(){
  $("a").click(function(event){
  alert("Thanks for visiting!");
  });
  });

Save your HTML file and reload the test page in your browser. Clicking the link on the page should make a browser’s alert pop-up, before leaving to go to the main jQuery page.

For click and most other events, you can prevent the default behaviour – here, following the link to jquery.com – by calling event.preventDefault() in the event handler:

$(document).ready(function(){
  $("a").click(function(event){
  alert("As you can see, the link no longer took you to jquery.com");
  event.preventDefault();
  });
  });

Complete Example

The following is an example of what the complete HTML file might look like if you were to use the script in your own file. Note that it links to Google’s CDN to load the jQuery core file. Also, while the custom script is included in the , it is generally preferable to place it in a separate file and refer that file with the script element’s src attribute









jQuery

Adding and Removing an HTML Class

Important: The remaining jQuery examples will need to be placed inside the ready event so that they are executed when the document is ready to be worked on. See Launching Code on Document Ready above for details.

Another common task is adding (or removing) a class.

First, add some style information into the of your document, like this:


[sourcecode]
Next, add the addClass call to your script:
[sourcecode language='javascript']$("a").addClass("test");

All your a elements will now be bold.

To remove the class, use removeClass

$("a").removeClass("test");

* (HTML allows multiple classes to be added to an element.)

Special Effects

In jQuery, a couple of handy effects are provided, to really make your web site stand out. To put this to the test, change the click that you added earlier to this:

$("a").click(function(event){
   event.preventDefault();
   $(this).hide("slow");
 });

Now, if you click any link, it should make itself slowly disappear.

Callback and Functions

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. The special thing about a callback is that functions that appear after the "parent" can execute before the callback executes.

Another important thing to know is how to properly pass the callback. This is where I have often forgotten the proper syntax.

Callback without arguments

For a callback with no arguments you pass it like this:

 $.get('myhtmlpage.html', myCallBack);

Note that the second parameter here is simply the function name (but not as a string and without parentheses). Functions in Javascript are ‘First class citizens’ and so can be passed around like variable references and executed at a later time.

Callback with arguments

"What do you do if you have arguments that you want to pass?", you might ask yourself.

Wrong

The Wrong Way (will not work!)

 $.get('myhtmlpage.html', myCallBack(param1, param2));

This will not work because it calls

myCallBack(param1, param2)

and then passes the return value as the second parameter to $.get().

Right

The problem with the above example is that myCallBack(param1, param2) is evaluated before being passed as a function. Javascript and by extension jQuery expects a function pointer in cases like these. I.E. setTimeout function.

In the below usage, an anonymous function is created (just a block of statements) and is registered as the callback function. Note the use of ‘function(){‘. The anonymous function does exactly one thing: calls myCallBack, with the values of param1 and param2 in the outer scope.

$.get('myhtmlpage.html', function(){
  myCallBack(param1, param2);
  });

param1 and param2 are evaluated as a callback when the ‘$.get’ is done getting the page.