JavaScript

Load remote content into DIV element using jQuery
Posted by Fahad Ibnay Heylaal on Sep 10th 2008, 11:56

If you are building rich web applications, then you will obviously require some ajax to give your users a smooth browsing experience. And jQuery makes it easier for you to do that without any trouble.

In my previous articles, I have shown you how to toggle a div element and also changing its content. Now I will show you how to load content from an external file into a div element.

loadContent() function
Though most of the jQuery code is placed inside head tag, I prefer that you create an additional javascript function for managing inline anchor links quickly.

  1.  
  2. function loadContent(elementSelector, sourceUrl) {
  3.   $(""+elementSelector+"").load("http://yoursite.com/"+sourceURL+"");
  4. }

This is the main jQuery code for loading remote content inside an element

  1. $("#content").load("http://yoursite.com/source.php");

Usage

  1. <a href="javascript:loadContent('#content', 'source_page.php');">Link 1</a>
  2. <div id="content">content will be loaded here</div>
read more...
Toggle DIV element using jquery
Posted by Fahad Ibnay Heylaal on Sep 10th 2008, 10:29

What is Toggling?
Basically a show/hide feature for your webpage elements. For example, you may have a login box in your webpage, and you want your visitors to click on a button for showing or hiding the element.

This tutorial will show you how to implement a simple toggle effect in your webpage using jQuery.

As always, we will require some HTML content first

  1. <a id="clickMe">Toggle my text</a>
  2. <br />
  3. <div id="textBox">This text will be toggled</div>

jQuery code
This is the code that makes the 'textBox' element toggle

  1. $("#textBox").toggle();
read more...
Change DIV content using jQuery
Posted by Fahad Ibnay Heylaal on Sep 10th 2008, 10:01

This is a quick tutorial for understanding the basics of jQuery.

Create a new HTML file with this code:

  1. <html>
  2.   <head>
  3.     <title>jQuery test page</title>
  4.     <script type="text/javascript" src="jquery.js"></script>
  5.     <script type="text/javascript">
  6.     // javascript here (jQuery)
  7.     </script>
  8.   </head>
  9.   <body>
  10.     <--- HTML content here -->
  11.   </body>
  12. </html>

Right now, the page will just load the jQuery library.

Lets get some HTML content first

  1. <a id="changeText">Change my text</a>
  2. <br />
  3. <div id="textBox">
  4.   This text will be changed to something else
  5. </div>
read more...
Change or set HTML tag attribute using jQuery
Posted by Fahad Ibnay Heylaal on Sep 10th 2008, 09:43

It is sometimes necessary to change the attributes of a particular HTML tag of your webpage using javascript, especially when you are coding rich web applications. Let it be the class of an element, or the href attribute of an anchor tag.

In this tutorial, I am going to show you how to do it utilizing jQuery javascript library quickly.

HTML code (inside BODY tag)
First, we will place a sample image and a link in our webpage.

  1. <a id="clickMe" href="#">Change the image below</a>
  2. <br />
  3. <img id="myimage" src="current_image_file.jpg" />

Now we want the src attribute to change from current_image_file.jpg to new_image_file.jpg (a click event will be required).

read more...
Switch CSS stylesheets using jQuery
Posted by Fahad Ibnay Heylaal on Sep 10th 2008, 09:06

CSS Stylesheet Switcher - what does it mean?
A stylesheet switcher allows your visitors to choose from a number of stylesheets they would like to view your website with. For example, you may have three pre-made stylesheets (say red, blue and green) and you want your visitors to choose and apply any one of them in your webpage without redirecting them to a new page or refreshing the page.

This tutorial will show you how to create such a client side css stylesheet switcher using jQuery javascript library.

read more...