1 2 3 4 5 6 7 8 9 10 11 12 | jQuery(document).keydown(function (e) { var evt=(e)?e:(window.event)?window.event:null; if(evt){ var key=(evt.charCode)?evt.charCode:((evt.keyCode)?evt.keyCode:((evt.which)?evt.which:0)); // the key specific code comes here: console.log(key); } }); |
1 2 3 4 5 | <div class="outer"> <div class="inner"> <div class="element">Centered</div> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 | .outer {
display: table;
height: 155px;
overflow: hidden;
width: 980px;
}
.outer .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
}
|
1 2 3 | .outer { position: relative; }
.outer .inner { position: absolute; top: 50%; }
.outer .inner .element { position: relative; top: -50%; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | function onWebFontLoaded(font, callback) { // create a test element for each font jQuery("body").append("<div id=\'font_test\' style=\'position: absolute;left:-1000000px; top: -1000000px;font-size:300px;font-family:Arial;font-style:normal;font-weight:normal;letter-spacing:0px;\'>giItT1WQy@!-/#</div>"); var width = jQuery("#font_test").width(); jQuery("#font_test").css("font-family", font+", Arial"); var timeWaited = 0; var intervalTime = 200; var maxWaitingTime = 10000; // 10 sec var interval; function checkFont() { timeWaited += intervalTime; if(jQuery("#font_test").length > 0 && jQuery("#font_test").width() != width) { callback(); jQuery("#font_test").remove(); return true; } else if( timeWaited > maxWaitingTime) { clearInterval(interval); if( typeof console != "undefined") console.log("font ("+font+") not loaded."); } return false; } if(!checkFont()) { interval = setInterval(checkFont, intervalTime); } }; jQuery(document).ready(function() { onWebFontLoaded('AGENCYR', function() { // remove the no-font-... class from the body tag jQuery(".no-font-AGENCYR").removeClass("no-font-AGENCYR"); }); }); |
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-topleft: ${VAR}px;
-webkit-border-top-left-radius: ${VAR}px;
-khtml-border-top-left-radius: ${VAR}px;
border-top-left-radius: ${VAR}px;${cursor}
-moz-border-radius-topright: ${VAR}px;
-webkit-border-top-right-radius: ${VAR}px;
-khtml-border-top-right-radius: ${VAR}px;
border-top-right-radius: ${VAR}px;${cursor}
var text = 'text text text: text2: text3::'; var colon_length = text.split(":").length - 1;
var text = 'text text text: text2: text3::'; var colon_length = text.match(/:/g).length;
String.prototype.count=function(s1) { return (this.length - this.replace(new RegExp(s1,"g"), '').length) / s1.length; }
// use like this test = "this, as you see, is a sentence, containing many ','s"; numberOfCommas = test.count(','); //4 // or numberOfSblank = test.count('s '); //2
<a href="javascript:void(null)" onclick="alert('onclick event triggered')" id="test_element">Trigger OnClick</a>
jQuery("#test_element").attr("onclick")
<a href="javascript:void(null)" id="test_element">Trigger OnClick</a>
jQuery("#test_element").click(function() { alert("jQuery click event triggered"); })
function cloneCopyEvent( src, dest ) { if ( dest.nodeType !== 1 || !jQuery.hasData( src ) ) { return; } var type, i, l, oldData = jQuery._data( src ), curData = jQuery._data( dest, oldData ), events = oldData.events; if ( events ) { delete curData.handle; curData.events = {}; for ( type in events ) { for ( i = 0, l = events[ type ].length; i < l; i++ ) { jQuery.event.add( dest, type, events[ type ][ i ] ); } } } // make the cloned public data object a copy from the original if ( curData.data ) { curData.data = jQuery.extend( {}, curData.data ); } }
oldData = jQuery._data( src ), curData = jQuery._data( dest, oldData ), events = oldData.events;
(jQuery._data( jQuery("#test_element")[0] )).events.click[0].handler
setInterval(function () { var items = jQuery( jQuery(options.items, this).get().reverse()); items.each(function () { // if visible, than hide if (jQuery(this).is(":visible")) { jQuery(this).fadeOut(); return false; } }); // if nothing more to hide, show all if( jQuery(":visible", items).length <= 1 ) items.fadeIn(); }, options.timeout);
var nowDate = new Date(2011, 12, 14).getTime(); var startDate = new Date(2011, 12, 13).getTime(); var endDate = new Date(2012, 1, 5).getTime(); if (startDate <= nowDate && nowDate <= endDate) { alert('It\'s in range!'); }
var obj = function() { /* Private variables */ var v1 = 0; var v2 = 0; /* Public variables */ this.state = false; /* Public functions */ this.update = function() { if(this.state) do_stuff(); console.log(this.state); // undefined!!! } };
var obj = function() { /* Reference to self */ var _self = this; /* Private variables */ var v1 = 0; var v2 = 0; /* Public variables */ _self.state = false; /* Public functions */ _self.update = function() { if(_self.state) do_stuff(); console.log(_self.state); // false this.somethingElse = true; } };
var img = new Image();
var img = new Image(); // of course, don't forget to replace this url ;) img.src = 'http://www.testsite.com/images/myimage.jpg';
jQuery('#myDiv').html(img);
img.onload = function() { alert('image loaded'); }
var img = new Image(); img.onload = function() { alert('image loaded'); } img.src = 'http://www.mysite.com/images/an_image.jpg';
var img = new Image(); img.onerror = function() { alert('failed to load image :( '); } img.src = 'http://www.fakelink.com/images/non_existing_image.png';
<canvas id="myCanvas" width="400" height="300"></canvas>
var canvas = $("#myCanvas"); /* For browser compatibility issues, put error handling code here. I won't.. */ var ctx = canvas[0].getContext('2d'); var img = new Image(); img.src = 'http://static.yoursite.com/images/something.png'; ctx.drawImage(img, 0, 0);
var point = function() { this.x = 4; this.y = 6; } // var v0; Note: I commented it out with purpose to make it undefined. var v1; var v2 = null; var v3 = false; var v4 = 'some text'; var v5 = 68; var v6 = {}; var v7 = new point(); var v8 = new Array(); var v9 = function() {};
typeof v0; // undefined typeof v1; // undefined typeof v2; // object typeof v3; // boolean typeof v4; // string typeof v5; // number typeof v6; // object typeof v7; // object typeof v8; // object typeof v9; // function
if(typeof v0 === undefined) { alert('not executed! hah!'); }
if(typeof v0 === 'undefined') { alert('executed! hah!'); }
var v1; if(v1 == null) { // it will run alert('yep'); } if(v1 === null) { // it won't run alert('nope'); }
var v10 = 1000 / 0; // Infinity var v11 = 1000 / 'book'; // NaN typeof v10; // number typeof v11; // number
console.log( 0.1 + 0.2 ); // 0.30000000000000004 // but: console.log( (0.1*10 + 0.2*10) / 10 ); // 0.3 console.log( parseInt("123", 10) ); // 123 console.log( parseInt("010", 10) ); // 10 // The parseInt() and parseFloat() functions parse a string until // they reach a character that isn't valid for the specified number // format, then return the number parsed up to that point. console.log( parseInt("test: 123", 10) ); // NaN console.log( parseInt("test: 010", 10) ); // NaN console.log( parseInt(1.23, 10) ); // 1 console.log( parseInt(1.99, 10) ); // 1 console.log( parseInt(-5.1) ); // -5 console.log( Math.floor(-5.1) ); // -6 (!!) console.log( parseFloat("1.67") ); // 1.67 (Number) console.log( parseInt("456test: 010", 10) ); // 456 // converting without parseInt() or parseFloat() console.log( "456 test: 010" * 1 ); // NaN console.log( 1 * "456 test: 010" ); // NaN console.log( 1 * " 456 " ); // 456 (space characters are allowed) console.log( 1 * " .456 " ); // 0.456 console.log( 1 * " . 456 " ); // NaN console.log( 1 + "2" + 3 + 4 ); // 1234 console.log( 1 - "2" + 3 + 4 ); // 6 (-1 + 3 + 4) console.log( 1 * "2" + 3 + 4 ); // 9 (2 + 3 + 4) console.log( 1 / "2" + 3 + 4 ); // 7.5 (0.5 + 3 + 4) console.log( 5 % "3" ); // 2 console.log( 5 % " 3 " ); // 2 console.log( 5 % " 3a " ); // NaN console.log( parseInt("010") ); // 8 (!!) console.log( parseFloat("010") ); // 10 (!!) console.log( parseFloat("010.123") ); // 10.123 console.log( parseInt("11",2) ); // 3 (binary to integer) console.log( parseFloat("11") ); // 11 // converting with unary operator console.log( +"11" ); // 11 console.log( typeof +"11" ); // number console.log( +"11a" ); // NaN console.log( -"11" ); // -11 console.log( typeof -"11" ); // number // other number types console.log( parseInt("hello", 10) ); // NaN console.log( typeof parseInt("hello", 10) ); // Number (!!) console.log( parseInt("hello", 10) * 1 + 5 ); // NaN (NaN is toxic..) console.log( isNaN(parseInt("hello", 10)) ); // true console.log( isNaN(10) ); // false console.log(1/0); // Infinity console.log(-1/0); // -Infinity
jQuery("h2:contains('Some Value')")
jQuery("#menu a") // disable links. We need only Javascript behavior .attr("href", "javascript:void(null)") // what shall happen if the link is clicked .click(function () { // get the text of the menu item var text = jQuery(this).text(); // get the DOM object of the target title (The h2 element wich contains the exact same text of the menu item) var target = jQuery('h2').filter(function() { return jQuery(this).text() === text; }); // get the position of the target element var pos = target.offset(); // if the position is found... if (typeof pos.top != 'undefined') { // scroll the page there jQuery.scrollTo((pos.top-10) + "px", 700); } });
a {
target-name: new;
target-new: tab;
}
<a href="http://thinkrement.blogger.com" onclick="window.open(this.href); return false;">Read Thinkrement!</a>
<a href="http://thinkrement.blogger.com" rel="popup">Read Thinkrement!</a>
window.onload = function() { var links = document.getElementsByTagName('a'); for (var i=0;i < links.length;i++) { if (links[i].rel == 'popup') { links[i].onclick = function() { window.open(this.href); return false; }; } } };
$('a[rel="popup"]').click(function() { window.open(jQuery(this).attr("href")); return false; });
window.onload = function() { var links = document.getElementsByTagName('a'); for (var i=0;i < links.length;i++) { if (links[i].rel == 'popup') { links[i].target="_blank"; } } };
$('a[rel="popup"]').attr("target", "_blank");
<div id="index_bg_1"> </div> <div id="index_bg_2"> </div> <div id="index_bg_3"> </div> <div id="index_bg_4"> </div>
#index_bg_1, #index_bg_2, #index_bg_3, #index_bg_4 { background-image: url("../images/index-bg-1.png"); background-repeat: no-repeat; background-position: 0px 0px; width: 1680px; height: 1050px; position: absolute; left: 0px; top: 0px; } #index_bg_2 { background-image: url("../images/index-bg-2.png"); background-position: 0px 0px; } #index_bg_3 { background-image: url("../images/index-bg-3.png"); background-position: 0px 0px; } #index_bg_4 { background-image: url("../images/index-bg-4.png"); background-position: 0px 0px; }
jQuery(document).ready(function() { // initiate all background-image animation for( var i = 1; i<5; i++) { animateBackgroundImage("#index_bg_"+i); } }); function animateBackgroundImage(selector) { // new target x coodinate var pos_x = Math.rand(-1200, 1600); // current x coordinate var bg_x = ((jQuery(selector).css("background-position")).replace("px 0px", ""))*1; // animation time var anim_time = Math.abs(pos_x-bg_x)/24*1000; // to do this, you need the backgroundPosition plugin for jQuery jQuery(selector).animate({ backgroundPosition: "("+pos_x+"px 0px)" // to keep it simple, let's animate only the x value }, anim_time, "linear" ); // after the animation is done, create another setTimeout("animateBackgroundImage('"+selector+"')", anim_time); } // this is just a helper function to create php like random number generator Math.rand = function (min, max) { return(Math.round(Math.random() * (max-min)) + min); }
<canvas width="1680" height="1050" id="index_canvas"></canvas>
// animation object var indexAnim = { images: [], // here are the image objects positions: [], // the actual positions of the images destPositions: [] // the target coordinates of the image } jQuery(document).ready(function() { // init for( var i = 1; i<=4; i++) { // create a new image to place on canvas var im = new Image(); im.src = 'images/index-bg-'+i+'.png'; indexAnim.images[i-1] = im; // place it randomly on canvas indexAnim.positions[i-1] = Array(Math.rand(-500, 500), Math.rand(-500, 500)); // set it's destination positions indexAnim.destPositions[i-1] = Array(Math.rand(-500, 500), Math.rand( -500, 500)); } // just for a better performance var length = indexAnim.images.length; var canvas = document.getElementById('index_canvas').getContext('2d'); // let the animation begin (... WHA-HA-HAAA) setInterval(function () { // clear the image canvas.clearRect(0,0,1680,1050); // let's redraw all the images for( var i = 0; i<length; i++ ) { // if a new target position is needed (either x or y) if( Math.abs(indexAnim.positions[i][0] - indexAnim.destPositions[i][0]) < i+1 || Math.abs(indexAnim.positions[i][1] - indexAnim.destPositions[i][1]) < i+1 ) { indexAnim.destPositions[i] = Array(Math.rand(0, 1050), Math.rand( -500, 500)); } // set the new position of the image. It's only 1 pixel closer to the destination coordinate (Just like in life...) indexAnim.positions[i][0] = indexAnim.positions[i][0] + (indexAnim.positions[i][0] < indexAnim.destPositions[i][0] ? 1: -1); indexAnim.positions[i][1] = indexAnim.positions[i][1] + (indexAnim.positions[i][1] < indexAnim.destPositions[i][1] ? 1: -1); // draw image on canvas canvas.drawImage(indexAnim.images[i], indexAnim.positions[i][0],indexAnim.positions[i][1]); } }, 41); // 41ms = 1000/24. 24 Frames are needed at least to create a smooth flow.. }); Math.rand = function (min, max) { return(Math.round(Math.random() * (max-min)) + min); }
$('#name');
var name = $('#name'); name.val("Johnson"); name.addClass("inputField"); name.parent().append('<p>Some text here</p>');
/* Registration form */ var regForm = { 'name' : $('#name'), 'email' : $('#email'), 'address' : $('#address'), 'phone' : $('#phone') }; var contactForm = { 'name' : $('#name'), 'email' : $('#email'), 'subject' : $('#subject'), 'message' : $('#message') }; // ... some other code here if(regForm.name.val() == "") { // do something } // ... some other code here if(contactForm.name.val() == "") { // do something }
// let's create a simple array var testArr = new Array(1, 2, 3); // print it out to the console for( var i in testArr ) { console.log(i+": "+testArr[i]); } // output: // 1 // 2 // 3 // extend the array object Array.prototype.myMethod = function (arr) { // Do something here.. } // loop the array again for( var i in testArr ) { console.log(i+": "+testArr[i]); } // output: // 1 // 2 // 3 // myMethod: function (arr) { }
for( var i in arr) { if( !arr.hasOwnProperty( i ) ) continue; // stuff to do.. }
jQuery.each(testArr, function (key, value) { console.log(key+": "+value); });