 |
|
| |
|
|
|
| Jquery dragable div
|
| |
|
|
Jamal Ahmad |
|
|
0 Comments |
|
Tags:
jquery div, jquery dragable div, jquery |
| |
|
Few days back, one of my friend post one comment on my blog post and he was asking about JQuery dragable div having images as well as some text contents inside the div and he was trying to move. I promised him to find the solution and post it in my blog. You make elements draggable by assigning them to the class "dragableElement". 
You make elements draggable by assigning them to the class "dragableElement". Examples: <img src="images/image1.jpg" style="float:left" class="dragableElement"> <div id="keyText" class="dragableElement">You can drag this box as well as the images on this page</div> These are some examples take from the demo: Remember position and z-index in cookie You can configure the script to remember the position of the dragable elements in a cookie. This is done by adding lines like this. <script type="text/javascript">
var rememberPositionedInCookie = true;
var rememberPosition_cookieName = 'demo';
</script> right above the place where you include dragable-content.j. Demo: Jquery Dragable Div Down |
|
|
|
|
|
|
| |
| Jquery background image animation
|
| |
|
|
Jamal Ahmad |
|
|
1 Comments |
|
Tags:
jquery animations, jquery |
| |
|
Jquery background image animation is a simple plugin for jQuery which allows you animate background images. The plugin is basically an alternative to the animated GIF but with several benefits. At first, it's always better to use an animated GIF as this format is supported by all browsers without any JavaScript code or additional markup, but the "dark side" of it is that an animated GIF allows only 256 colors and you cannot control animation in any way.
The jAni loads a long vertical image and changes its background position with the speed you setup, giving you more control of the animation. Features: - Light-weight script
- Easy to integrate
- Fully customizable via CSS
- Works with all modern browsers
How To Use: 1.) Download jAni script. The package already contains jQuery framework.
2.) Add the following code to your <head>…</head> tag to connect the jQuery framework and jAni plugin. (Make sure paths to files are correct.) <script type="text/javascri |
|
|
|
|
|
|
| |
| JQuery Sprite Animations
|
| |
|
|
Jamal Ahmad |
|
|
0 Comments |
|
Tags:
jquery,jquery animations,jquery sprite animations |
| |
|
Spritely is a simple plugin with only two key methods, sprite() and pan() both of which simply animate the background-image css property of an element. The difference between the two is that a 'sprite' image contains two or more 'frames' of animation, whereas a 'pan' image contains a continuous image which pans left or right and then repeats. 
Typically, in either case, you would use a png file (with or without transparency) for this. You might wish to use a transparent gif for Internet Explorer 6, though it probably won't look as good. Your html elements must already be the correct size you want the sprite to appear, but the background image will typically be larger than the html element, and the spritely methods reposition the background image within the html element. Quick Start If you're impatient to try out Spritely and want to see some self-contained working examples, you can download some sample code as a zip file. Animation an image with the Sprite() Method Here's a quick example to get you started... The following method animates one of the bird 'sprites' flying around this page. The 'sprite' is |
|
|
|
|
|
|
| |
| Jquery Multi Level Accordion
|
| |
|
|
Jamal Ahmad |
|
|
2 Comments |
|
Tags:
jquery accordion, multi-level accordion |
| |
|
Jquery Multi Level Accordion script is powerful and lightweight at only 1.2kb. It now includes multi-level support, the option to allow multiple panels to expand concurrently, and a hide/show all toggle. I have reverted the markup to a div based structure to eliminate any validation issues with the definition tables in the previous version. Check back for more posts and scripts soon. 
To initialize an accordion use the following code: 1 var accordion=new TINY.accordion.slider('accordion'); 2 accordion.init('accordion','h3',0,0,'selected'); You must create a new accordion object before initialization. The parameter taken by accordion.slider is the variable name used for the object. The object.init function takes 5 parameters: the id of the accordion "ul", the header element tag, whether the panels should be expandable independently (optional), the index of the initially expanded section (optional) and the class for the active header (optional). This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available. Paid support is also available, contact me for details. Update 6/16/2009 The script has been upda |
|
|
|
|
|
|
| |
| Jquery Sliding Top Menu
|
| |
|
|
Jamal Ahmad |
|
|
0 Comments |
|
Tags:
jquery sliding menu, jquery menus, menus |
| |
|
Sliding Menus are very effective in areas where we have limited space .This is a sliding top menu built with jQuery which can be fired through the open & close buttons or with any tag with the related class name. 
Step 1 – HTML: <div id="sliderWrap">
<div id="openCloseIdentifier"></div>
<div id="slider">
<div id="sliderContent">
Isn't this nice?
</div>
<div id="openCloseWrap">
<a href="#" class="topMenuAction" id="topMenuImage">
<img src="open.png" alt="open" />
</a>
</div>
</div>
</div> Step 2 – CSS <style type="text/css">
body {
margin: 0;
font-size:16px;
color: #000000;
font-family:Arial, He |
|
|
|
|
|
|
| |
|
| |
|
|
|
|
|
|
| |
|
| |
|
| |
|
| |
|
| |
Community |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
JQuery Posts |
| |
|
| |
|
| |
|
| |
|
| |
Poll |
| |
|
| |
|
| |
|
| |
Categories |
| |
|
| |
|
| |
|
| |
|
| |
Articles |
| |
|
| |
|
| |
|
|
|
|
![[ Stumble Upon ]](assets/images/stubmleupon_bookmarking_icon.gif){kind=icon}
![[ Facebook ]](assets/images/facebook_bookmarking_icon.gif){kind=icon}
![[ del.icio.us ]](assets/images/delicious_bookmarking_icon.gif){kind=icon}
![[ furl ]](assets/images/furl_bookmarking_icon.gif){kind=icon}
![[Sphinn]](assets/images/sphinn_bookmarking_icon.gif){kind=icon}
![[ Digg ]](assets/images/digg_bookmarking_icon.gif){kind=icon}
![[ Twitter ]](assets/images/twitter_bookmarking_icon.gif){kind=icon}
![[ Technorati ]](assets/images/technorati_bookmarking_icon.gif){kind=icon}
![[ Reddit ]](assets/images/reddit_bookmarking_icon.gif){kind=icon}
![[ Subscribe To RSS Feeds ]](assets/images/rss_feeds.gif){kind=small}
