Jquery textbox accept only alpha characters

HTML

Jquery

$('#alphaonly').bind('keypress', function (event) { var regex = new RegExp("^[a-zA-Z]+$"); var key = String.fromCharCode(!event.charCode ? event.which : event.charCode); if (!regex.test(key)) { event.preventDefault(); return false; } });

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');
   });
  });
});
});

onkeypress should not allow alpha charecter

function functionAmount(e) { if (window.event) { code = event.keyCode; if ((code >= 48 && code <= 57) || code == 46) { } else { event.returnValue = false; } } else { code = e.which; if ((code >= 48 && code <= 57) || code == 8 || code == 0 || code == 46) { if (code >= 48 && code <= 57) { } } else { e.preventDefault(); } } }

Hover box with arrow - after before

Html code

div id='rectangel' /div

CSS code

#rectangel{ height:40px; width:100px; background:red; } #rectangel:hover{background:blue;} #rectangel:hover:after{border-top-color: blue;} #rectangel:after{ content: ""; height:0; position: absolute; width: 0; margin-top:40px; margin-left:40px; border: 10px solid transparent; border-top-color: red; }

css3 rounded corner navigation bar

HTML ----------

• HOME
• SERVICES
• GALLERY
• THE WAY WE WORK
• CONTACT

CSS ------- ul#list-nav { min-width: 1100px; margin:20px; } ul#list-nav li { /*border:1px solid #e9b428;*/ float:left; overflow:hidden; } li.first{ border-top-left-radius:5px; border-bottom-left-radius:5px; } li.last{ border-top-right-radius:5px; border-bottom-right-radius:5px; } ul#list-nav li a { text-decoration:none; padding:15px 0; width:200px; background-color:#ccc; color:black; float:left; text-align:center; background:-moz-linear-gradient(top, #fbdc8b 0%, #e9b428 100% ); background:-webkit-linear-gradient(top, #fbdc8b 0%, #e9b428 100% ); } ul#list-nav li a:hover { background:-moz-linear-gradient(top, #4d5d8a 0%, #404e78 100%); color:white; } ----------

Detecting when textarea scroll has reached the bottom to enable button

HTML Code: -------------
body{ font:normal 13px/18px Arial, Helvetica, sans-serif; margin:0; padding:10px; } #terms { border: solid 1px; height: 350px; width: 340px; overflow: auto; margin-bottom: 1em; } ​

Please read these terms and conditions now. You must scroll to the bottom before continuing.

1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

2. Lorem ipsum Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

4. Lorem ipsum Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Jquery Code: -------------
$(document).ready(function(){ $('#terms').scroll(function () { if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) { $('#register').removeAttr('disabled'); } }); });