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.

Javascript recursion example

Everyone loves(or should i say ‘gets intimidated by’?) Recursion. But it can be confusing to begin with. So here’s an example of recursion ( in javascript ) to show how recursion can be used to solve real problems in real projects ๐Ÿ˜‰ . The code below is an altered code from one of my projects. Although its in javascript, the basic principle is same and can be easily reproduced in any other language of your choice.

Hope it helps..

Floating sidebar for twentythirteen

The javascript code to make the sidebar float and stick to screen as you scroll down. This code is specific to twentythirteen wordpress theme and most probably won’t work with any other theme.

I didn’t like it when the sidebar area goes blank as i scroll down the page. The content in the main content area(towards left) is more than the content(widgets) in sidebar(towards right) so as one scrolls down the page, the sidebar area becomes empty.

The following javascript does the trick. As you scroll down the page and scroll past the bottom of sidebar, the sidebar sticks to the bottom right of the page. You keep going down and it stays there. And when you scroll up to a sufficient height, it again acquires its normal position. The script also prevents sidebar from overlapping with ‘header’ and ‘footer’ areas.

UPDATE:-
Any demo ? : yes, this very page(or any other page on this website) is a live demo of the script. Try scolling!! Its more apparent on longer pages like home page.
This script results in nice dirty trick on this website. On a fresh page reload, you don’t see ads in the sidebar becuase that widget at the end of the sidebar and becomes visible only when you scroll down. And once you scroll down, only those ads are visible, and you can’t get rid of them ๐Ÿ™‚ ๐Ÿ™‚ ..

This site no longer uses twentythirteen, so no demo. Its time for twentyfourteen!

Anyway so here’s the javascript, you can save it in any of the existing javascript of your theme or save it as a new file and enqueue the file properly:

That’s it here. I didn’t bother to check it in IE! so be warned ๐Ÿ™‚

Free script to automatically generate traffic through traffup

AttentionUpdate 6 June, 2013
Sorry folks! Traffup recently updated its surfing mechanism, so this script wont work anymore.

I’ve already asked google to remove this page from search listings. My apologies if you still came here via google, and are frustrated reading this notice.

This little bookmarklet script earns points for you on traffup.net which in turn sends traffic to your website!

For those of you who don’t know what traffup is, its a website (traffup.net) which provides traffic exchange, twitter follower exchange. You register on the website, you visit other websites and others visit your website, you follow others on twitter and others follow you.
You earn points by either visiting a website or by following someone on twitter. The more points you have, more visitors/followers you get.

In order to gain points, you need to manually visit websites. Ah! that’s boring and unproductive. So i have developed this little script which keeps on visiting websites for you and earning you points !!

See it in action in the video below

To be honest, as far as i know, hits like these, with 100% drop-offs of course, dont help much with your websites reputation, but it definitely helps boost your alexa ranking.

I’ll send the script(bookmarklet) to those who are interested. Just drop your email id in the comment or via the contact form. Will definitely send you the script.
Cheers!