Parallax image scroll

Parallax image scroll effect with simple jquery code

Its very easy with jquery to make a image scroll with parallax. Copy the below jquery code to get parallax image scroll effect.


jQuery(document).ready(function(){

    // Cache the Window object
    $window = jQuery(window);
                
   // $('div[data-type="background"]').each(function(){
     var $bgobj = jQuery(".element_class"); // assigning the object
                    
      jQuery(window).scroll(function() {
                    
        // Scroll the background at var speed
        // the yPos is a negative value because we're scrolling it UP!                              
        var yPos = -($window.scrollTop() / $bgobj.data('speed')) + 200; 
        
        // Put together our final background position
        var coords = '50% '+ yPos + 'px';

        // Move the background
        $bgobj.css({ backgroundPosition: coords });
        
      }); // window scroll Ends

 // });    

}); 

bootstrap slider sliding images on mouseover

Bootstrap slider sliding images on mouseover

Twitter bootstrap is a great resources for a front end developers. It includes all most necessary plugins to make an website interactive. At the same time if we talk about the bootstrap carousel, its one of the finest plugin to create a slider either for a content sliding or images sliding. The function for carousel work on click, so what if we want to make it work on mouseover. In this post I will show you how the bootstrap slider sliding images on mouseover.


$('#myCarousel').carousel({interval:false}); /*  initialized the carousel but don't start it  */
var myInterval=false;
$('.carousel-control').mouseover(function() {
    var ctrl = $(this);
    var interval=10;

    myInterval = setInterval(function(){
         ctrl.trigger("click");
    },interval);
});

$('.carousel-control').mouseout(function(){
    clearInterval(myInterval);
    myInterval = false;
});

Browser detection with wordpress function

<?php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
  global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

  if($is_lynx) $classes[] = 'lynx';
  elseif($is_gecko) $classes[] = 'gecko';
  elseif($is_opera) $classes[] = 'opera';
  elseif($is_NS4) $classes[] = 'ns4';
  elseif($is_safari) $classes[] = 'safari';
  elseif($is_chrome) $classes[] = 'chrome';
  elseif($is_IE) $classes[] = 'ie';
  else $classes[] = 'unknown';

  if($is_iphone) $classes[] = 'iphone';
  return $classes;
}
?>

Add class to specific post

Add class to specific post if its not home

Ever wonder if you want to add a specific class for specific post in the body element.

Below code will help you to add a class if its not a home page.


add_filter( 'body_class', 'my_neat_body_class');
function my_neat_body_class( $classes ) {
     if (! is_home())
          $classes[] = 'not-home';
     return $classes;
}

Php snippets

>body >?php body_class(); ?<

if condition to detect localhost and server

if condition to detect localhost and server

Copy the below php code of if condition to detect localhost and server.

 <?php 
if($_SERVER['HTTP_HOST'] =='localhost:8080') {
define('DB_NAME', 'localdatabasename');
define('DB_USER', 'root');//mostly root
define('DB_PASSWORD', '');
} else {
define('DB_NAME', 'server database name');
define('DB_USER', 'server database user');
define('DB_PASSWORD', 'dbpassword');

}
?>