Browser specific hack

Chrome Hack only

@media screen and (-webkit-min-device-pixel-ratio:0) { .ar #form-wrapper { width: 330px; } }

Firefox Hack only

@-moz-document url-prefix() { .submit_btn { padding-bottom: 5px; } }

IE8 Hack

@media screen { .item { background: #000; } }

IE9 Hack

:root #nav li.last-page-item a { padding-right:8px\9; }

coloe:red\9; hack works on IE9

CSS3 Background-size

CSS3

html{ background-image: url(http://coastsidefishingclub.com/site/wp-content/themes/csf/images/bg-img.jpg); background-repeat:no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

keypress uppercase jquery

Jquery

$("#ctag").bind('keyup', function (e) { if (e.which >= 97 && e.which <= 122) { var newKey = e.which - 32; e.keyCode = newKey; e.charCode = newKey; } $("#ctag").val(($("#ctag").val()).toUpperCase()); });

jQuery add class based on page URL

Jquery

$(function(){ function stripTrailingSlash(str) { if(str.substr(-1) == '/') { return str.substr(0, str.length - 1); } return str; } var url = window.location.pathname; var activePage = stripTrailingSlash(url); $('#left-nav ul li a').each(function(){ var currentPage = stripTrailingSlash($(this).attr('href')); if (activePage == currentPage) { $(this).addClass('active'); } }); });

Target only Safari and Chrome with CSS

CSS

@media screen and (-webkit-min-device-pixel-ratio:0) {

#title {
color: red !important;
}
}

set margin for span tag

CSS

display:inline-block

span is an inline element, not a block element, and they don't respect margin. You can use padding or make the span display:inline-block; and then use margins.

Jquery load with fadeout effect

HTML

• Sample 1
• Sample 2
• Sample 3

Jquery

$(document).ready(function(){
  $('li a').click(function(){
   var url = $(this).attr("href");
    $('#container').fadeOut('slow', function(){
    $('#container').load(url, function(){
    $('#container').fadeIn('slow');
   });
  });
});
});