Wednesday, October 9, 2013

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

Thursday, October 3, 2013

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

Wednesday, September 25, 2013

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

Wednesday, September 4, 2013

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

Monday, August 26, 2013

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

Wednesday, August 21, 2013

Target only Safari and Chrome with CSS

CSS

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

#title {
color: red !important;
}
}

Friday, August 16, 2013

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

Jquery

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

Thursday, March 14, 2013

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

Thursday, February 21, 2013

css3 rounded corner navigation bar

HTML ---------- 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; } ----------

Monday, January 7, 2013

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

Javascript find highest and lowest from the given inputs

function highAndLow(numbers){ // numbers = "4 5 29 54 4 0 -214 542 -64 1 -3 6 -6"   let numbersInArr = numbers.split(' '...