Jquery shake effect - part 2

Hurrey 100th post , and again on Jquery :)


Jquery shake effect is very popular & more searchable topic now a days.

Long back i had written a post on jquery shake effect. this is my part 2 post where here I'm going to explain what all method and what option you may find in JRumble plugin
 
You must have seen that vibrant, rotate, shake and many other elements of effects. using css and other scripting language you can create more eye catch able effects.

JRumble is new plugin which has more elements on effects. it also a good plugin with hover and direction effect.

Below are few objects

  $('imgName').jrumble();
  // you may stop the elements like this way
  $('imgName').trigger('stopRumble');

You many even customize this options with below attributes:

Rotation : set the range , default is 1

Speed : set  frequency or speed between the two movements

X : set horizontal pixels

Y : set vertical pixels

and there are many other elements. 

The below code shows the example along with basic functionality.

$(document).ready(function() {
    $('ImageName').jrumble({
        y:4,
        x:3,
        rotation: 10,
    speed:500,
    opacity:100
    });

    $('ImageName').hover(function() {
        $(this).trigger('startRumble');
    }, function() {
        $(this).trigger('stopRumble');
    });
});​

See the below example :

JQuery Plugins and Demos for Developers.

hello ,i have again come up with some collection of jquery plugins with Demos , hope u like it.

1. jGoogle
jGoogle will wrap google AJAX search APIs in a single jQuery plugin to extract usable data.
on the first version they have included GImageSearch option
- View demo
- View Source


2. Virtual jQuery Keyboard
jquery Virtual Keyboard is one of the good feature for preventing keystrokes , it will very dangerous when you enter some bank account and password like information , virtual keyboard will play very imp role here, you can't get the stoke on your log ,
-View Demo

3. Scrolling with Load Effects.
when we have lots of content then its not looking good when we are showing them in one and too long panel, instead of that we can show loading effects the it also look beautiful and cool
- View demo

4. Tablesorter 2.0
When we showing the records on table then sorting is one of the basic option , to show the records like date wise , increasing decrease order and so on like this feature you can add here
- View demo

5. jQuery Right-click Plugin
This plugin enable you to detect the event when user get click right button of mouse . so as per the click you can do your operation like disable the right click and so on or adding any information to drop down when clicking right click
-View demo

6. Jquery: Progress Bar
Progress bar is one of the cool feature that use can use anywhere where you are data get retrieve from database and if it will take too much time to load that page , in this case you can show loading like Effects so user can understand that page is being lead
- view Demo


7. jQuery Feed Menus
Feed is used for bookmarking and all other purpose , you can show multiple feed under one category , so you can use your space and its also look nice
- view Demo

8. gShuffle
The plugin animation is triggered every time the Shuffle button is clicked. Each time, the code will choose two squares to switch positions with one another.
- view Demo

9 -Mark It Up
MarkItUp, you can convert text areas into powerful HTML, BBCode or Wiki editor.

----
hope you like it ,
will add more on it, if you found anything could be related with this plz add on comments

Hide Show Div

hi this is cool and simple javascript stuffs which HIDE and Show Details
using Div


<script language="javascript">
function toggle() {
var ele = document.getElementById("togText");
var text = document.getElementById("ShowText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Click Me";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide It";
}
}
</script>

Click Here to View Details
<a id="ShowText" href="javascript:toggle();">
Click Me </a>
<div id="togText" style="display: none">
< h1 > Hi, Kiran hows you? Hope u like this Cool stuff. < /h1 >
</div>



hope you like it ,

CountDown Timer

Hi , here is cool triks of CountDown timer, mostly its useful in website while validating time like online exam, date time , game countdown , and so many

Below is the code needed to display count down in HTML page using javascript.

You define container for the count down (either <span> or <div> tag) and the initial value, and the code updates the time automaticlly in the format HH:MM:SS

You can also control the style of the container using standard CSS, as demonstrated in the below and attached code.

To activate the count down in one of your existing pages you
have to follow two steps:

1. include the attached CountDown.js file with:


<script type="text/javascript" src="CountDown.js"> <script>


2. have such javascript in the section:



<script type="text/javascript">
window.onload=WindowLoad;
function WindowLoad(event) {
ActivateCountDown("CountDownPanel", 100);
}
</script>


where "CountDownPanel" is the ID of the container
(i.e. you should have <span> or <div> with this ID) and 100 is the time in seconds to be counted.

here is CountDown.js file -------------------------------

var _countDowncontainer=0;
var _currentSeconds=0;

function ActivateCountDown(strContainerID, initialValue) {
_countDowncontainer = document.getElementById(strContainerID);

if (!_countDowncontainer) {
alert("count down error: container does not exist: "+strContainerID+
"\nmake sure html element with this ID exists");
return;
}

SetCountdownText(initialValue);
window.setTimeout("CountDownTick()", 1000);
}

function CountDownTick() {
if (_currentSeconds <= 0) {
alert("your time has expired!");
return;
}

SetCountdownText(_currentSeconds-1);
window.setTimeout("CountDownTick()", 1000);
}

function SetCountdownText(seconds) {
//store:
_currentSeconds = seconds;

//get minutes:
var minutes=parseInt(seconds/60);

//shrink:
seconds = (seconds%60);

//get hours:
var hours=parseInt(minutes/60);

//shrink:
minutes = (minutes%60);

//build text:
var strText = AddZero(hours) + ":" + AddZero(minutes) + ":" + AddZero(seconds);

//apply:
_countDowncontainer.innerHTML = strText;
}

function AddZero(num) {
return ((num >= 0)&&(num < 10))?"0"+num:num+"";
}



Javascript Calendar.

Calendar

is a one of Gread fucntion while retriveing date from user end , there are lot many use of calendar ex- date of Brith , Order date , Shipping Date and lot many..

in this case selecting proepr date is very imp , in term's of DD/MM/YYYY, some where using YYYY/MM/DD or MM/DD/YYYY , so in this case its its not undustable for the End user to Write Proper date in Text Box , but if you use Drop down in term of (DD/MM/YY or MM/DD/YY ) then its useful for the user ,

here i found some great Javascript code to do same ,

1.Ajax enabled DatePicker v4 :

2. VLA Calendar version 2

3.Customizable calendar component

4.jQuery:time/datePicker


5. Fancy moo tools date picker

6. Clean Calendar

7. Date picker Widget

8. Yet another JQuery Calendar

9.Simple one

hope this collection likes you.