World's simplest background parallax effect

How to apply the World's simplest background parallax effect to you web site background image for the scroll function.

$(window).scroll(function() {
    var x = $(this).scrollTop();
    $('#slide5').css('background-position', '100% ' + parseInt(-x / 3.5) + 'px' + ', 0% ' + parseInt(-x / 5) + 'px');
});

Using Readmore JS correctly

<script src="js/readmore.min.js"></script>
<script>
  $('.manage2').readmore({
    maxHeight: 100
  });
 
  // Wait a tick before firing Readmore on the #info block to give Prettify time to finish painting.
  setTimeout(function() {
    $('.manage2').readmore({
      moreLink: '<a href="#" style="color:#4a89dc">Read More</a>',
lessLink: '<a href="#" class="managename" style="color:#4a89dc">Close</a>',
      maxHeight: 100,
      afterToggle: function(trigger, element, more) {
        if(! more) { // The "Close" link was clicked
          $('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } );
        }
      }
    });
  }, 100);
</script>
<!---Read more codeEND-->

CSS3 transform code on hover

#logo:hover{
-moz-transform: scale(1) rotate(4deg) translate(0px, 0px) skew(0deg, -4deg);
-webkit-transform: scale(1) rotate(4deg) translate(0px, 0px) skew(0deg, -4deg);
-o-transform: scale(1) rotate(4deg) translate(0px, 0px) skew(0deg, -4deg);
-ms-transform: scale(1) rotate(4deg) translate(0px, 0px) skew(0deg, -4deg);
transform: scale(1) rotate(4deg) translate(0px, 0px) skew(0deg, -4deg);
}

Stop repeating Jquery animation SlideDown or SlideUp

How to stop repeating of Jquery animation SlideDown or SlideUp animation when you have repeating div classesor id with the same name in single web page. This code will work only for the next div tag with the similar name

<script>
$(document).ready(function() {
    $('.but1').on('click', function() {
        $(this).siblings('.carea').slideToggle(300);
    }); });
</script>

facebox pop up image on load with a a link

Step 1

Load facebox

  <link href="src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
  <script src="src/jquery.js" type="text/javascript"></script>
  <script src="src/facebox.js" type="text/javascript"></script>
  <script type="text/javascript">
    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox({
        loadingImage : 'src/loading.gif',
        closeImage   : 'src/closelabel.png'
      })
    })
  </script>

Step 2

Writing th efunction tp pop up an image with a link on page load

<script language="javascript">
$(document).ready(function() {
    $.facebox.settings.opacity = 0.9;
    $('a[rel*=facebox]').facebox();
    $.facebox('<a href="http://abc.lk" target="blank"><img src="src/offer.jpg"></a>');

});
</script>

Hide div on Scroll Down

Hide div on Scrolling on web page with JQuery and shows back when scroll top of the page

        $(window).scroll(function () {
            if ($(this).scrollTop() > 200) {
                $('.bread').fadeOut();
            } else {
                $('.bread').fadeIn();
            }
        });

Add a class on click to a link

Add a class on click to a link and remove the class when clicking another link with JQuery

    <script>   
//to add class on active
    $("a").click(function(){
   $("a.active").removeClass("active");
   $(this).addClass("active");
    });
    </script>

360 Rotate on hover

Code on element

   -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    -ms-transition-property: -ms-transform;

Code on hover

-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);

Gray scale your images with CSS 3

How to gray scale your images with CSS 3, without using photoshop. You can use this code with CSS mouse over hover effect. or to grayscale the images direclty on your web page


.grayimg:hover
{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
 filter: gray; 
-webkit-filter: grayscale(100%); 
}

jquery animate div one after another

jquery animate div one after another

HTML code

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
 
  div.test {width: 100px; height: 100px; background-color: red; display: none;}
</style>
</head>
<body>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
</body>
</html>

JQuery

(function($){
  $.fn.showdelay = function(){
    var delay = 0;
    return this.each(function(){
      $(this).delay(delay).fadeIn(1800);
      delay += 200;
    });
  };
})(jQuery);

$(document).ready(function(){
  $('div').showdelay();
});