Cross browser custom scroll bar

Cross browser custom scroll bar



Cross browser custom scroll bar with nicescroll jquery plugin including CSS css and custom jquery styles for Responsive and crossbroser custom scroller for the entire browser window

Get nicescroll form google code -
https://code.google.com/p/jquery-nicescroll/downloads/list



<script src="js/jquery.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
      $('html').niceScroll({
        autohidemode: 'false',     // Do not hide scrollbar when mouse out
        //cursorborderradius: '0px', // Scroll cursor radius
        background: '#E5E9E7',     // The scrollbar rail color
        cursorwidth: '10px',       // Scroll cursor width
        cursorcolor: '#FE6666',     // Scroll cursor color
        cursorborder:"0",
        boxzoom:true,
        autohidemode:false
      });
    });
  </script>
  <style type="text/css">
    #scroll-area {
      width: 200px;
      height: 200px;
    }
  </style>

Full reference

https://code.google.com/p/jquery-nicescroll/downloads/detail?name=jquery.nicescroll.v290.zip&can=2&q=

JQuery Simple Add remove class on mouse click

Simple CSS add remove classes with JQuery

<script>
$('#register').click(function() {
$('#boxcontt').addClass("slideOut");
$('#boxcontt').removeClass("slideDown");
$('#regform').addClass("slideDown");
$('#regform').removeClass("slideOut");
$('#forgetform').removeClass("slideDown");
});
</script>

Getting random background colors with JQuery

JQuery getting random background colors with CSS

<script>
                $(document).ready(function() {
                    window.setInterval(function() {
                        $(".tile5").each(function() {
                            $(this).css("background", get_random_color());
                        });
                    }, 3000);
                    window.setInterval(function() {
                        $(".tile12").each(function() {
                            $(this).css("background", get_random_color());
                        });
                    }, 4000);
                });

                function get_random_color() {
                    var letters = '0123456789ABCDEF'.split('');
                    var color = '#';
                    for (var i = 0; i < 6; i++) {
                        //  color += letters[Math.round(Math.random() * 15)];
                        color += letters[Math.round(Math.random() * 15)];
                    }
                    return color;
                }
</script>

Move Background Image on Hover mouse move

Move Background image X Y axis on mouse move or hove on a div or entire body and html page (Simple Parallax)

<script>
        $('html,body').mousemove(function(e){
    var amountMovedX = (e.pageX * -1 / 5);
    var amountMovedY = (e.pageY * -1 / 1000);
    $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
});
</script>

Simple scrollorama alternative

Simple scrollorama alternative with Jquery and CSS 3 Animations for Biginners and everyone with add and remove classes

<script type="text/javascript">
(function($) {
  $.fn.visible = function(partial) {
    
      var $t            = $(this),
          $w            = $(window),
          viewTop       = $w.scrollTop(),
          viewBottom    = viewTop + $w.height(),
          _top          = $t.offset().top,
          _bottom       = _top + $t.height(),
          compareTop    = partial === true ? _bottom : _top,
          compareBottom = partial === true ? _top : _bottom;
    
    return

((compareBottom <= viewBottom) && (compareTop >= viewTop));
  };
    
})(jQuery);
$(window).scroll(function(event) {
if($("#mobidien").css("display") == "none"){
  
  $(".grid_4").each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("fadeIn"); 
    } 
 else{
 el.removeClass("fadeIn"); 
 }
  });
  
  $(".rightx").each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("fadeIn"); 
    } 
 else{
 el.removeClass("fadeIn"); 
 }
  });  
}});
  </script>