Sometimes, we have to show some extra message in our post which are important and linked with the post and cannot put that in the webpage like some important announcement and breaking news etc. In these cases, it can better option to use a Floating Message Box which will appear in front of the webpage . Today, I am going to discuss the code which will create a floating message box using jquery . You can use this code everywhere you want . Read More
In this article, I will be explaining about parent and child elements and how to use jQuery to them efficiently.
VIEW DEMO
Basically, parent element means any HTML element with other elements inside it. Like in the following HTML code, we have the div ‘parent’. We suppose it to be parent element. There are other elements inside it like ul, li, and span. So, ul, li and span are children of the div ‘parent’. There is also nested ul and li, hence containing parent child combination. Read More
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,
