In this article, I will be showing you how to write or append content to DIV. When you write, all the text present before will be replaced by new content. When you append, new content will be added after the previous content already present there.
In this article, I will be showing you how to add or remove HTML attributes. HTML attributes like title, href, src, etc. For example:-
<img src="abc.jpg" class="test" alt="abc" />
Here: src, class, alt, title are attributes.
You can add attributes like above through jQuery. You can also remove the attributes with jQuery. Read More
In this article, I will be showing you how to add or change css styling. You will be able to add or remove class in HTML elements.
In this article, I will be showing you how to animate image and div.
By animation, I just mean basic animation. This is a basic tutorial. So, please don’t expect it to be so complex animation :). It will simply be increasing the width of the image and div with animate effect.
You can easily create stunning and very effective image slideshow with the jQuery Cycle Plugin. You don’t need to write long and difficult programming code. Just a few lines of code will be enough.
You need to have jQuery library and the jQuery Cycle plugin.
Download jQuery Library | Download jQuery Cycle Plugin
The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.
The Cycle Plugin provides many options for customizing your slideshow. The default option values can be overridden by passing an option object to the cycle method.
There are many effects that can be used with jQuery Cycle Plugin. You can find them all here. I have used some effects and created a demo.
Well, it’s terrifically easy to get the x-axis and y-axis value of any point with jQuery. I mean the mouse pointer position. We simply do it with event.pageX and event.pageY.
event.pageX gives the mouse position relative to the left edge of the document. And event.pageY gives the mouse position relative to the top edge of the document.
The following function fetches x and y axis on mousemove over the div content.
$(function(){ $("#content").mousemove(function(e){ $("#value").html("x-axis: "+e.pageX+"<br />y-axis: "+e.pageY); }); });
“Lightweight and flexible transformation of an unordered list into an expandable and collapsable tree.” This is what the jQuery Treeview plugin home defines. You can create different types of tree. See demos here. Here, I will be showing you the Sitemap demo that I created using the Treeview plugin.
<li class="expandable">Parent <ul> <li class="expandable">Child-A <ul> <li>Child-A-1</li> <li>Child-A-2</li> </ul> </li> <li class="expandable">Child-B <ul> <li class="expandable">Child-B-1</li> </ul><ul> <li>Child-B-1-1</li> <li>Child-B-1-2</li> </ul> </li> </ul> </li> <li>Child-C</li>
The motto of jQuery is “write less, do more” and it does exactly the same. Here is was jquery.com says about jQuery:
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.
Some of the excellent features of jQuery are:
- It’s fast.
- It’s concise.
- It’s free and open source.
- It’s cross-browser (support all the web browsers).
- Moreover, it’s easy to learn and work with.
Google, Dell, Digg, Technorati, Mozilla, Wordpress, Drupal and many more are using jQuery. So, why shouldn’t we?
Here are some links containing excellent tutorial to start up with jQuery.
1) http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
2) http://www.codeproject.com/KB/scripting/jquerylab.aspx
I like learning through examples. The above tutorial links do exactly the same. So, enjoy jQuery.
Cheers,
The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small “hover box” with information about the item being hovered over.
There are some few steps to be followed to use tooltip in webpage.
Step 1:
First of all you have to insert the given code into the head section of the html code.
<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<style type="text/css"> div.htmltooltip { position: absolute; /*leave this and next 3 values alone*/ z-index: 1000; left: -1000px; top: -1000px; background: green; border: 10px solid red; color: white; padding: 3px; width: 250px; /*width of tooltip*/ } </style>
<script type="text/javascript" src="htmltooltip.js"> /*********************************************** * Inline HTML Tooltip script- by JavaScript Kit (http://www.javascriptkit.com) * This notice must stay intact for usage * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more ***********************************************/ </script>
Step 2:
Download the following two files and save it in the same folder which contains the html code.
Step 3:
To add tooltip to any link on webpage, just give the link a rel=”htmltooltip” declaration, then define the tooltip DIV itself anywhere on the page with class=”htmltooltip”.
To see an example:
ADD the following codes into the body section of your html code.
<p align="left">"<a href="http://en.wikipedia.org/wiki/Global_warming" rel="htmltooltip">Global warming</a> is one of the most hot topic in the news and reviews. There are various <a href="http://en.wikipedia.org/wiki/Global_warming_conspiracy" rel="htmltooltip">Conspiracy theories</a> on global warming. The effect of global warming are clearly being seen in the country like <a href="http://en.wikipedia.org/wiki/Nepal" rel="htmltooltip">Nepal</a> where glaciers are constantly melting and size is constantly decreasing. The message is very clear that some day ,there will be no snow at all. </p> <!--Inline HTML Tooltips (DIV with class="htmltooltip"--> <!--Matched up with anchor links with rel="htmltooltip" and in the order they appear within page's source--> <div class="htmltooltip">Global warming is the increase in the average temperature of the Earth's near-surface air and oceans since the mid-20th century and its projected continuation.</div> <div class="htmltooltip">The Greenhouse Conspiracy , It is one of the earliest instances of the suggestion of a conspiracy to promote false claims supporting global warming.</div> <div class="htmltooltip">Nepal is officially the Federal Democratic Republic of Nepal, is a landlocked country in South Asia and the world's youngest republic.</div>
Click here to see example
Photo album is one of the easiest way to show the collection of pictures in the webpage. I was also searching simple one that can be easily customized. I was inspired by the article which is so simple and easy to use. It can be used in both automatic and manual method to show the pictures.
We can edit the simple CSS to change the appearance and size of the album.
In automatic mode, the picture changes according to the specified time. The picture also shows the description if we need and can be also hyper-linked. The time between the photo change can also be adjusted.
In manual mode, when we slide the mouse over the photo album a navigation menu appears in the bottom which contains the button for previous photo, pause/play and next photo. And rest features are same as automatic mode.
One demerit of this photo album is that we should first need to resize the photos same as that of the size of photo album. Because this photo album don’t automatically resize it. One should be careful about this.
Steps 1:
Add the following script to the head section of your page:
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<style type="text/css">
/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 10px solid black;
}
#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
}
</style>
<script type="text/javascript" src="simplegallery.js">
/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [240, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["http://www.designgala.com/demos/palbum/p1.JPG", "", "", "Always "],
["http://www.designgala.com/demos/palbum/p2.JPG", "", "", "Somewhere"],
["http://www.designgala.com/demos/palbum/p3.JPG", "", "", "Miss you "],
["http://www.designgala.com/demos/palbum/p4.JPG", "", "", "and love you always!"]
],
autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})
</script>The code above references two external .js files plus 4 images, which you need to download below (right click/ select “Save As”):
1. simplegallery.js (customize variable “simpleGallery_navpanel” at the top)
2. jquery.min.js
3.Save the following images in the same folder
Steps 2:
Then, add an empty DIV with a unique ID attribute where you wish a Gallery to appear on your page.
<div id="simplegallery1"></div>
The DIV’s ID value should match up with the value set in simpleGallery.wrapperid in the code of Step 1 above. When the page loads, the script will load the gallery into this DIV.
Our Simple Photo Album is ready now.
Click here to see the sample
