Bootstrap

Have you ever wondered how easy it is to design and develop a website?
You would like to make your websites look cool and consistent throughout all browsers.
Here is the Frontend Framework which would make it all for you within few steps and a minimal knowledge of css and javascript.

Jiggle effect using CSS

Have you ever wondered how does the icons in your iPhone jiggle?
If yes here you can find out how. There have been many tricks to let it happen but the most easy one is using CSS,
ya you got me correct pure CSS. Below code snippet helps you display some awesome css effects.

Demo on jsfiddle

Click on the icon to start/stop jiggling !!!

Sometimes you might want your icon to start or stop jiggling on an event.
General case might be on clicking it, or on hovering or onload or many more...
So below script helps you to add/remove jiggle class on click event which would solve out your issue.
In case you want it on some other event just change the event type and you all set to go.

Script

1. $(function() {
2.   $('.click-to-jiggle').click(function(e) {
3.    $(this).toggleClass('jiggle');
4.    return false;
5.   });
6. });

So for jiggling you might need some icon images right.
This icons would be got using img tag and we will toggle a class for each img tag to jiggle it.

HTML

1. <img class="click-to-jiggle jiggle" src="blogger.png">
2. <img class="click-to-jiggle jiggle" src="facebook.png">
3. <img class="click-to-jiggle jiggle" src="linkedin.png">
4. <img class="click-to-jiggle jiggle" src="youtube.png">
5. <img class="click-to-jiggle jiggle" src="twitter.png">

Here comes the most crucial part... The CSS, so there are some css styles attributes which are supported by some browser
and which might help you complete you task easily without much stress. Let's see

CSS

1. .jiggle {
2.   -webkit-animation: jiggle 0.2s infinite;
3.   -moz-animation-duration: 0.2s;
4.   -moz-animation-name: jiggle;
5.   -moz-animation-iteration-count: infinite;
6.   -webkit-transform: rotate(-3deg);
7.   -moz-transform: rotate(-3deg);
8. }
9. @-moz-keyframes jiggle {
10.   0% {
11.   -moz-transform: rotate(-1deg);
12.   }
13.   50% {
14.   -moz-transform: rotate(1deg);
15.   }
16.  }
17.  
18. @-webkit-keyframes jiggle {
19.   0% {
20.   -webkit-transform: rotate(-1deg);
21.   }
22.   50% {
23.   -webkit-transform: rotate(1deg);
24.   }
25. }

Circular Images using pure CSS

Below code snippet helps you change the image into circular one.
i.e. - Now-a-days most of websites shows the images or profile avatars in Circular format, you might be wondering how can this be done.
It's very simple and can be done just using pure css.

Here's how you can do it !!!

Demo on jsfiddle

HTML

1. <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTgKBFpU1FHBwHrXk21RGsT8uMM05nEYrijpXWX2qGKdLciMiRmsUDIJsQZ5ibSp7QQJnA-6mPezV47SXyPKN4Vjt6qPceb1QsCGGGYSsk_vPmg-3aBPV1_daVU9dV3Qh3SYuW2m7jqA/s320/15.jpg">

CSS

1. img {
2.   border-radius: 178px;
3. }

Finding the Checkbox Status (Checked/Unchecked)

Below code snippet helps you find the status of your checkbox.
i.e. - Many times you need to find out whether your checkbox is CHECKED or UNCHECKED.

Here's how you can find it !!!

Demo on jsfddle

Script

1. var checkedStatus = function () {
2.   var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
3.   if (atLeastOneIsChecked)
4.    $('.status-value').text("Checked");
5.   else
6.    $('.status-value').text("UnChecked");
7. };
9. checkedStatus();
11. $("input[type=checkbox]").on("click", checkedStatus);

HTML

1. <div class="status">
2.   <input type="checkbox" name="chk[]" value="Demo Box" />
3.   <div class="status-value"></div>
4. </div>

CSS

1. .status {
2.   color: #3c763d;
3.   background-color: #dff0d8;
4.   border-color: #d6e9c6;
5.   width: 130px;
6.   padding: 15px;
7.   margin-top: 20px;
8.   border: 1px solid transparent;
9.   border-radius: 4px;
10. }
11. input {
12.   float: left;
13.   margin-right: 10px;
14. }

Alert Message in Div (Fades in and Fades Out)

Below code snippet helps you populate Alert messages in a Div which has a delay. This message will fade in and fade out after clicking on the button.

Demo on jsfiddle

Successful Alert !!!

Failure Alert !!!

Warning Alert !!!

Script

1. $( "#success-btn" ).click(function() {
2.   $( "div.success" ).fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
3. });
4.  
5. $( "#failure-btn" ).click(function() {
6.   $( "div.failure" ).fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
7. });
8.  
9. $( "#warning-btn" ).click(function() {
10.   $( "div.warning" ).fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
11. });

HTML

1. <p>
2.   <button id="success-btn">Success</button>
3.   <button id="failure-btn">Failure</button>
4.   <button id="warning-btn">Warning</button>
5. </p>
6.  
7. <div class="alert-box success">Successful Alert !!!</div>
8. <div class="alert-box failure">Failure Alert !!!</div>
9. <div class="alert-box warning">Warning Alert !!!</div>

CSS

1. .alert-box {
2.   padding: 15px;
3.   margin-bottom: 20px;
4.   border: 1px solid transparent;
5.   border-radius: 4px;
6. }
7. .success {
8.   color: #3c763d;
9.   background-color: #dff0d8;
10.   border-color: #d6e9c6;
11.   display: none;
12. }
13. .failure {
14.   color: #a94442;
15.   background-color: #f2dede;
16.   border-color: #ebccd1;
17.   display: none;
18. }
19. .warning {
20.   color: #8a6d3b;
21.   background-color: #fcf8e3;
22.   border-color: #faebcc;
23.   display: none;
24. }