Simple jQuery Snowfall Effect

Simple jQuery Snowfall effect is the code snippet which allows user to add snowfall effect to their website. This snowfall library simple consist of JQUERY, CSS and HTML. We can simply just download this library and use it.

Steps to Download and Run Snowfall Effect Library:

  • Download this library.
  • Run Index.html in any browser and you can see the effect.

Now If, anybody wants to integrate this snowfall effect in their website, follow this steps:

  • Firstly Add JQuery to your website. if already added avoid this step.
    ( if using in wordpress no need to follow this step )

    
    <script src="JQUERY-URL-PATH" type="text/javascript"></script>
    
    
  • Then From the library add required script and css to the website.

    
    <script type="text/javascript" src="assets/script.js" ></script>
    <link rel="stylesheet" type="text/css" href="assets/style.css">
    
    
  • Now just Call Snowfall function and Enjoy the Effect 🙂

    
    jQuery(document).ready(function(){
        snowfall_effect();
    });
    
    

You can download the Library from link below:

Custom popup with css and jQuery

To show popup we every time used jQuery( popup ) like : BJQS, FANCY BOX etc. we always include that in our websites and used it but what if don’t want to include that file and make our own custom popup.

It’s really simple you just need to follow three Steps:-

  1. Include this html in our websites any where in footer, header or body
    <div id="custom-div-display" class="custom-content-css">
         <div id="contetn-with-css">
              <a href="#" id="hide-the-content">close</a>
              <h4>custom popup</h4>
              <p>here you can show you custom content</p>
         </div>
    </div>
    
  2. Copy this code and past as it in you j Query file( it will show popup on each time you refresh you screen )
    jQuery(document).ready(function($){
    
     jQuery("#custom-div-display").show();
    
     jQuery(document).keyup(function(e) {
           if (e.keyCode == 27) jQuery("#custom-div-display").hide();
     });
    
     jQuery("#hide-the-content").click(function(){
          jQuery("#custom-div-display").hide();
     }); 
    
    });
  3. Copy this css in to you style.css file:
    .custom-content-css {
     z-index: 999;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     display: none;
     position: fixed;
     background-color: rgba(0, 0, 0, 0.85);
     color: #aaaaaa;
     opacity: 30;
     filter: alpha(opacity = 50);
     }
     
    #contetn-with-css {
     width: 50%;
     height: 50%;
     position: absolute;
     color: #000000;
     background-color: #ffffff;
     /* To align popup window at the center of screen*/
     top: 40%;
     left: 50%;
     margin-top: -100px;
     margin-left: -220px;
     border-radius: 3px;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     padding: 80px;
     }

    And now every thing is done just go an refresh you websites it will show popup every time you reload you website.

Custom styled checkboxes

Bored of the good old checkbox design?
Time for styling checkbox elements, giving custom design to checkboxes.

custom-styled-checkboxes
First of all, here’s the demo link

What are we doing?

Basically i want to replace this with this

So here’s one way(hack) to do it. Hide the default checkbox, instead use background images for the associated label. Use different images for checked/unchecked state of the checbox. We are not removing the checkboxes completely, those are there, just hidden by css with display:none. So clicking on the associated label does cause checking/unchecking of the checkbox, so its still available in forms post data, no issues there.

The HTML

standard checkbox html with labels, nothing fancy here

<ul class="customChList lstn">
	<li><input type="checkbox" value="1" id="chk1"/><label for="chk1">One - lorem psum </label></li>
	<li><input type="checkbox" value="2" id="chk2"/><label for="chk2">Two - lorem psum </label></li>
	<li><input type="checkbox" value="3" id="chk3"/><label for="chk3">Three - lorem psum </label></li>
	<li><input type="checkbox" value="4" id="chk4"/><label for="chk4">Four - lorem psum </label></li>
	<li><input type="checkbox" value="5" id="chk5"/><label for="chk5">Five - lorem psum </label></li>
</ul>

I’ve wrapped those checkboxes in ul li just for the purpose of applying one single css rule to all of them. You can use any way you want.

The CSS

Here’s the trick:
We’ll hide the checkboxes, toggle the background image of associated label with css and js. I’ve used this image . 3 states – normal, hover, checked.

.customChList li input[type='checkbox']{
	display:none;
}
.customChList li label{
	font-size: 18px;
	padding-left:35px;
	background: url(images/custom-checkbox.png) no-repeat;
}

.customChList li label:hover{
	background-position: 0px -32px;
}

.customChList li label.checked{
	background-position: 0px -64px;
}

A little javascript

Now when user clicks with the intention to check/uncheck the checkbox, we show it visually by adding/removing a css class of ‘checked’. So a simple change event:

$(document).ready(function(){
	$(".customChList input[type='checkbox']").change(function(){
		if($(this).is(":checked")){
			$(this).next("label").removeClass('hover').addClass('checked');
		}
		else{
			$(this).next("label").removeClass('checked');
		}
	});
});

We can use css3 adjacent selector in place of the above javascript.

So instead of the above javascript, the following css will also work:

.customChList li input[type='checkbox']:checked ~ label{
	background-position: 0px -64px;
}

This essentially does the same thing. But, as usual, it won’t work in IE, so lets just go with javascript.

That’s it in here. Hope you find it useful


making a star rating input


Ok so its not something new. We’ve seen those 5 stars for rating on numerous website. I’ll show how you can create the star rating system with CSS. Mostly we come across 1star to 5star type rating. I’ve added the fractional ratings as well. So we have a 0star – 0.5star – 1star – 1.5star — 5star type rating. Check the demo here.

Lets see how its done:

The HTML

First since we want user to be able to ‘click’ on the star image to provide his input, we’ll need anchor tags, 10 of them : 0.5, 1. 1.5 and so on. Now to apply some common css on those anchor tags we’ll wrap all the links inside a <p> and <span> tag. So, the HTML required is:

<p class="stars">
<span>
	<a class="star-05" href="#">0.5</a>
	<a class="star-10" href="#">1</a>
	<a class="star-15" href="#">1.5</a>
	<a class="star-20" href="#">2</a>
	<a class="star-25" href="#">2.5</a>
	<a class="star-30" href="#">3</a>
	<a class="star-35" href="#">3.5</a>
	<a class="star-40" href="#">4</a>
	<a class="star-45" href="#">4.5</a>
	<a class="star-50" href="#">5</a>
</span>
</p>

 

THE CSS

Overview: the height, of the links are fixed. All the links are absolutely positioned, starting from the same point and lie one below the other. But their width varies. So the first one has highest z-index and is 10px wide, next would be 20 px wide and z-index a bit lower and so on.. All the links are transparent and have no background in normal/inactive state. The inactive star image acts as the background for <span> and as we hover over the links, active star image is set as the background of the link.

Without further ado, here’s the CSS

/*==========================*/
/*css for half star feature*/
p.stars {
  overflow: hidden;
  zoom: 1;
}
p.stars span {
  width: 500px;
  height: 100px;
  position: relative;
  float: left;
  
}
p.stars span a {
  float: left;
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 0;
  padding-top: 100px;
  overflow: hidden;
}
p.stars span{background: url(images/star-inactive.png);}

p.stars span a.star-05,
p.stars span a.star-15,
p.stars span a.star-25,
p.stars span a.star-35,
p.stars span a.star-45
{
	width:50px;
}

p.stars span a.star-05{z-index:30; width:50px;}
p.stars span a.star-10{z-index:29; width:100px;}
p.stars span a.star-15{z-index:28; width:150px;}
p.stars span a.star-20{z-index:27; width:200px;}
p.stars span a.star-25{z-index:26; width:250px;}
p.stars span a.star-30{z-index:25; width:300px;}
p.stars span a.star-35{z-index:24; width:350px;}
p.stars span a.star-40{z-index:23; width:400px;}
p.stars span a.star-45{z-index:22; width:450px;}
p.stars span a.star-50{z-index:21; width:500px;}

p.stars span a.star-05:hover, p.stars span a.star-05.active, p.stars span a.star-05:focus,
p.stars span a.star-15:hover, p.stars span a.star-15.active, p.stars span a.star-15:focus,
p.stars span a.star-25:hover, p.stars span a.star-25.active, p.stars span a.star-25:focus,
p.stars span a.star-35:hover, p.stars span a.star-35.active, p.stars span a.star-35:focus,
p.stars span a.star-45:hover, p.stars span a.star-45.active, p.stars span a.star-45:focus
{
	background:url(images/half-star.png) repeat-x center right;
}

p.stars span a.star-10:hover, p.stars span a.star-10.active, p.stars span a.star-10:focus,
p.stars span a.star-20:hover, p.stars span a.star-20.active, p.stars span a.star-20:focus,
p.stars span a.star-30:hover, p.stars span a.star-30.active, p.stars span a.star-30:focus,
p.stars span a.star-40:hover, p.stars span a.star-40.active, p.stars span a.star-40:focus,
p.stars span a.star-50:hover, p.stars span a.star-50.active, p.stars span a.star-50:focus
{
	background:url(images/star-active.png) repeat-x center right;
}

I’ve taken each image as 100px wide (for demonstration purpose), Scale everthing proportionately if you are decreasing the size of the star images.
On the demo page, I’ve also used a bit of javascript to record the value that user selected and to assign a class ‘active’ to the link clicked.

That’s it in here.


resizable background image

Many a times you want to prevent background image resizing on browser zoom in zoom out or keeping background image constant even if user zooms in / zooms out.

Many a times its required that the background image should take up full width height of the page and should not get cropped or repeated if the window size is less/decreased or more/increased respectively.

Using css background porperty one can’t possibly achieve that. So here’s a workaround. We take the big background image as an <img> element rather than setting it as the background of <body> or something.

<body>
<img src="wdw_bg.png" id="background"/>
<div class="centerContent">
<div class="inPadd opaque">
.. your content here...
</div>
</div>
</body>

and the CSS

#background{
	position:fixed; top:0px; left:0px;
	z-index:-100;
	width:100%;
	height:100%;
}

Setting height and width to 100% makes the image take up entire space. Negative z-index send it behind everything else, making it look like background. Position fixed prevents any empty background space if page content increases and scrollbars appear.
Check the demo (link provided at the end of article).
– the background image resizes according to browser size when you increase or decrease the borwser window’s size.
– the background image remains in original size even if you zoom in or zoom out