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,
Jquery; magic in web programming, have allowed us to use different features with the simple knowledge to use them. I was searching for basic code to refresh the specific DIV using jquery and found this article and like to share with my viewers.
There are very simple steps to achieve this:
Step 1:
Copy the following code and paste it in the head section of your webpage.
<script src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.0/jquery.min.js"></script> <script> var auto_refresh = setInterval( function() { $('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow"); }, 20000); </script>
Here , above the file “reload.php” will be reloaded in every 20000ms ie 20 second . You can change the file which you have to reload and you can also change the reload time as per your requirement.
and secondly , the #loaddiv is the name of DIV which is going to be refreshed.
Step 2:
and now you need to put the div in the body section of your page
<div id="loaddiv"> </div>
Step 3:
Now finally you need to write the code for the file “reload.php” which will extract the contends from the other page or it also may contain the code to read the data from the database depending upon requirement.
here i am going to read a small content from another site. you can copy , paste the code and save it as the filename “reload.php”. in the same folder that contains the source code.
echo"<img src='http://www.nepalstock.com/datanepse/realindex.php'/>";
Now your page is ready .
Click here to see the demo.
Jquery plugins allow us more features on tooltip. I read this article which i think is very useful when we need to have a tooptip which pop out and kept visible until we click on next tooltip. We need more controls on the tooltip or we can sticked the tooltip by clicking some keys on the keyboard. Here I have tried to put the pictures and texts on the tooltips or sticky tooltips. The sticky tooltips are very useful showing the information about places, country,animals or the description with the pictures etc.
Steps 1.
Copy and paste the following codes in the head section of your page.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="stickytooltip.js"></script> <link rel="stylesheet" type="text/css" href="stickytooltip.css" />
Steps 2.
Download the following two files and save it in the same folder which contains the source code.
Steps 3.
Now you need to write the code in the body section of your page . There are two parts of this section
first is to create the link for the images and text where you want to put the tooltip .
For example :
<p><a href="http://wprocker.com/" data-tooltip="sticky1">Wordpress rocker</a></p> <p><a color="#ffffff" data-tooltip="sticky2">Prison break</a></p> <p><img src="http://www.designgala.com/demos/stick/everestth.jpg" data-tooltip="sticky3" /></p>
and secondly you need to write the code for the contents of tooltips .For this you need to defined all the tooltip under a single DIV,with each DIV itself wrapped around a DIV with a unique ID attribute
For example:
<!--HTML for the tooltips--> <div id="mystickytooltip" class="stickytooltip"> <div style="padding:5px"> <div id="sticky1" class="atip" style="width:240px"> <img src="http://www.designgala.com/demos/stick/therock.jpg" /><br /> This the best site to get news and tutorials for wordpress ...it will rock you whenever ,whereever you are . </div> <div id="sticky2" class="atip" style="width:235px"> <img src="http://www.designgala.com/demos/stick/ho1.jpg" /><br />Prison break ,one of the most popular television serial and holy was one of the actor. </div> <div id="sticky3" class="atip" style="width:240px"> <img src="http://www.designgala.com/demos/stick/everest 1.jpg" /><br />Mount Everest is the highest peak in the world and its in <b><a href="http://www.newsmandu.com" target=" ">Nepal</a></b> . </div> </div> <div class="stickystatus"></div> </div>
Click here to see the Demo.
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
