Codeblock.js — A better code learning environment

Codeblock.js makes it possible to embed editable, runnable JavaScript code blocks. Your visitors will have an easier time learning if they can experiment directly with the code.

http://www.catswhocode.com/blog/useful-jquery-code-snippets

Smooth scrolling to #anchor

On your site footer, it is very useful to provide a quick way for your visitors to scroll back to the top of the page. Here is a simple way to smooth scroll to a #anchor of your choice.

// HTML:
// <h1 id="anchor">Lorem Ipsum</h1>
// <p><a href="#anchor" class="topLink">Back to Top</a></p>


$(document).ready(function() {

	$("a.topLink").click(function() {
		$("html, body").animate({
			scrollTop: $($(this).attr("href")).offset().top + "px"
		}, {
			duration: 500,
			easing: "swing"
		});
		return false;
	});

});

Source: http://snipplr.com/view/26739/jquery–smooth-scroll-to-anchor/

Image resizing using jQuery

Although you should resize your images on server side (using PHP and GD for example) it can be useful to be able to resize images using jQuery. Here’s a handy code snippet to do it.

$(window).bind("load", function() {
	// IMAGE RESIZE
	$('#product_cat_list img').each(function() {
		var maxWidth = 120;
		var maxHeight = 120;
		var ratio = 0;
		var width = $(this).width();
		var height = $(this).height();
	
		if(width > maxWidth){
			ratio = maxWidth / width;
			$(this).css("width", maxWidth);
			$(this).css("height", height * ratio);
			height = height * ratio;
		}
		var width = $(this).width();
		var height = $(this).height();
		if(height > maxHeight){
			ratio = maxHeight / height;
			$(this).css("height", maxHeight);
			$(this).css("width", width * ratio);
			width = width * ratio;
		}
	});
	//$("#contentpage img").show();
	// IMAGE RESIZE
});

Source: http://snipplr.com/view/62552/mage-resize/

Load content on scroll automatically

Some websites such as Twitter loads content on scroll. Which means that all content is dynamically loaded on a single page as long as you scroll down.

Here’s how you can replicate this effect on your website:

var loading = false;
$(window).scroll(function(){
	if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
		if(loading == false){
			loading = true;
			$('#loadingbar').css("display","block");
			$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
				$('body').append(loaded);
				$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
				$('#loadingbar').css("display","none");
				loading = false;
			});
		}
	}
});

$(document).ready(function() {
	$('#loaded_max').val(50);
});

Source: http://fatfolderdesign.com/173/content-load-on-scroll-with-jquery

Test Password Strength

When building forms, it’s a very good practice to provide verifications on the front-end first so the visitor do not have to submit the form endlessly to correct problems. This code snippet is using regular expressions to test if a password is strong enough. Of course, don’t forget to validate your forms on the server side as well!

$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('More Characters');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Strong!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Medium!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Weak!');
     }
     return true;
});

Source: http://css-tricks.com/snippets/jquery/password-strength/

Equalize heights of div elements

Equalizing heights of div elements is not possible (or very hacky) to do in pure CSS, so jQuery is here to help. The code below will automatically adjust the heights of div elements according to the higher one.

var maxHeight = 0;

$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);

Source: http://css-tricks.com/snippets/jquery/equalize-heights-of-divs/

Simple and efficient png fix for IE6

In 2013, IE6 is finally almost gone and people are using newer browsers. But still, in some situations you have to care about this horrible browser and provide a IE6-compliant website. As IE6 can’t deal with png transparency, here’s a super simple jQuery hack to force png rendering.

Just add a .pngfix class to anything you want fixed or put in some other jQuery selector.

$('.pngfix').each( function() {
   $(this).attr('writing-mode', 'tb-rl');
   $(this).css('background-image', 'none');
   $(this).css( 'filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/image.png",sizingMethod="scale")');
});

Source: http://itknowledgeexchange.techtarget.com/itanswers/

Parsing json with jQuery

Parsing json data with jQuery is not complicated at all. Here is an efficient example on how to parse json data and append it to your web page.

function parseJson(){
	//Start by calling the json object, I will be using a 
        //file from my own site for the tutorial 
	//Then we declare a callback function to process the data
	$.getJSON('hcj.json',getPosts);
 
	//The process function, I am going to get the title, 
        //url and excerpt for 5 latest posts
	function getPosts(data){
 
		//Start a for loop with a limit of 5 
		for(var i = 0; i < 5; i++){
			//Build a template string of 
                        //the post title, url and excerpt
			var strPost = '<h2>' 
				      + data.posts[i].title
				      + '</h2>'
				      + '<p>'
				      + data.posts[i].excerpt
				      + '</p>'
				      + '<a href="'
				      + data.posts[i].url
				      + '" title="Read '
				      + data.posts[i].title
				      + '">Read ></a>';
 
			//Append the body with the string
			$('body').append(strPost);
 
		}
	}
 
}
 
//Fire off the function in your document ready
$(document).ready(function(){
	parseJson();				   
});

Source: http://hankchizljaw.co.uk/tutorials/parse-json-with-jquery-snippet/06/05/2012/

Alternating Row Colors

On big lists or tables, alternating row colors can drastically improve readability. Here’s how to alternate row colors on a list of elements using some jQuery. You can use any HTML element you like, td, tr, li, etc…

//jquery
  $('div:odd').css("background-color", "#F4F4F8");
  $('div:even').css("background-color", "#EFF1F1");


//html example
<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>
<div>Row 4</div>

Facebook like image preloader

Ever noticed how fast images load when paging through a Facebook photo album? This is because Facebook is preloading each of these images into your browser’s cache before you even view them. Here’s how you can achieve a similar behavior on your website using some jQuery magic.

var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
window.setTimeout(function(){
var img = $("<img>").attr("src", nextimage).load(function(){
//all done
});
}, 100);
});

Source: http://www.nealgrosskopf.com/tech/thread.php?pid=77

Make entire div clickable

Here’s an easy way to make the parent div of a link clickable. Let’s say you have this html code:

<div class="myBox">
     blah blah blah.
    <a href="http://google.com">link</a>
</div>

The following lines of jQuery will make the entire div clickable:

$(".myBox").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
});

Source: http://css-tricks.com/snippets/jquery/make-entire-div-clickable/

PreloadJS is a library to make working with asset preloading easier. It provides a consistent API for loading different file types, automatic detection of XHR (XMLHttpRequest) availability with a fallback to tag-base loading, composite progress events, and a plugin model to assist with preloading in other libraries such as SoundJS.

https://github.com/CreateJS/PreloadJS

Support and Resources

• Find examples and more information at the PreloadJS web site
• Read the documentation
• You can also ask questions and interact with other users at our Community site.
• Have a look at the included examples and API documentation for more in-depth information.

Built by gskinner.com, and is released for free under the MIT license, which means you can use it for almost any purpose (including commercial projects). We appreciate credit where possible, but it is not a requirement.

25 New Script Libraries and Plugins on GitHub

http://mashable.com/2013/06/09/github-script-libraries/?utm_campaign=Feed%3A+Mashable+%28Mashable%29&utm_cid=Mash-Product-RSS-Pheedo-All-Partial&utm_medium=feed&utm_source=feedburner

1. Unveil.js

Unveil.js is a lightweight version of LazyLoad, with support for serving high-resolution images to devices with Retina display. The LazyLoad plugin has some neat options, such as custom effects, but if you don't use any of those you can reduce the file size considerably, leaving just the essential code. This is exactly what Unveil.js is.

2 Chardin.js

Chardin.js (named after the French painter Jean-Baptiste-Siméon Chardin) lets you add simple overlay instructions on existing elements, on any of your apps, using JavaScript. It was inspired by the recent Gmail new composer tour, and is a simple solution that works well and looks incredible.

3. Superhero.js

Superhero.js isn't strictly a JavaScript library itself, but rather, a library of articles on how to create, test and maintain a large JavaScript code base. This is a continuously updated collection of the best articles, videos and presentations on the topic, which helps explain the syntax of JavaScript, how to organize projects, how to test your code and what's on the horizon.

4. Snap.js

Snap.jsis a library for creating beautiful mobile shelfs in JavaScript, which appear when clicking a button or dragging the entire view. It uses CSS3-powered animations with IE fallbacks, and features flick support, event hooks, drag support and an event-based API, so it's simple to hook into existing interfaces.

5. Least.js

Least.js creates beautiful, random and responsive HTML5 and CSS3 image galleries using LazyLoad. Installation is simple and straightforward; just download the script and insert the appropriate code before the </head> and after the <body> tags.

6. Verlet.js

Verlet.js is a simple Verlet physics engine written in JavaScript, with particles, distance constraints and angular constraints, all supported. It's based off an iterative technique called Verlet Integration, which simplifies force and motion calculations. With it, you can easily model intricate objects and dynamic behaviors.

7. Bespoke.js

Bespoke.js is a DIY micro-presentation framework that makes it simple to create animated deck-style slideshows. It's less than 1kb minified and gzipped, with no dependencies, and uses keyboard and touch events to add classes to your slides, while you provide the CSS transitions. There are five basic themes, and both production and development versions are available to download.

8. Lazy.js

Lazy.js is a utility library for JavaScript, similar to Underscore and Lo-Dash, but it uses "lazy evaluation," which can translate to superior performance in many cases, especially when dealing with large arrays and "chaining" multiple methods. With no external dependencies, you can get started straight away.

9. Chart.js

Chart.js is an object-oriented graphing system for designers and developers that uses JavaScript and HTML5 Canvas to create six different types of charts. Each chart can be animated and fully customized, with support on Retina displays and all modern browsers, and with polyfills to provide support for IE7/8. It's dependency free, lightweight (only 4.5kb when minified and gzipped) and offers a wealth of customization options.

10 . Pixi.js

Pixl.js is a super fast HTML5 2D rendering engine that uses webGL with canvas fallback, to provide a fast, lightweight library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of webGL. It features a super easy-to-use API, asset loaders, full mouse and multi-touch interaction, support for texture atlases and much more.

11 . SocialFeed.js

With SocialFeed.js, you can create a feed with your latest interactions on different social media, designed to be both modular and plugable. By default, no social site is added; each has be explicitly added, and is implemented as its own module. It's extremely customizable with an API, which exposes several functions and events.

12 . Intro.js

Intro.js provides a better way to create a new feature introduction and step-by-step user guide for your website and project. It's simple to set up: Just include the JavaScript and CSS files and "add data-step" and "data-intro" to your code. It's lightweight (only 2.5kb gzipped) and includes keyboard and mouse navigation, with cross-browser compatibility on all modern browsers, from IE8 and up.

13. Datamock.js

Datamock.js lets you easily add fake data to your mockups, with straightforward usage and a handy demo to see it work in action. Use data attributes to bind mocked data; it includes other value types, such as emails and names. With a bookmarklet task included in the build script, you can quickly generate a page with test sample data.

14. Imageloader.js

Imageloader.js is a jQuery plugin for pre-loading images, with simple implementation. However, it has minimal customization options outside the array of image URLs to load. The demo shows off its functionality.

15. SimplePagination.js

SimplePagination.js is a simple jQuery pagination plugin that includes three CSS themes and features Bootstrap support. It has options for configuring the page links, next and previous text, one-click events, style attributes and more. There is also an API for selecting pages, and support for Bootstrap was recently added.

16. Sco.js

A collection of jQuery plugins for the web, inspired by the Twitter Bootstrap components, Sco.js plugins can replace the Bootstrap equivalents. Several plugins are unique, and in cases where Sco.js replaces Bootstrap plugins, the underlying markup has been simplified and the reliance on IDs reduced.

17. StreamTable.js

StreamTable.js streams data for tables in the background, and updates and renders them using templating frameworks like Mustache.js and HandleBars.js. It provides fast rendering of the pages or tables, without the "loading data" delays, and with fast client-side filtering. It can also manage various JSON data formats.

18. fpsmeter.js

Fpsmeter.js is a simple JavaScript library to display the frames-per-second of an animation. It can measure the number of milliseconds between frames and the number of milliseconds it takes to render one frame. It supports theming, so it can be customized to suit new and existing interfaces, and can cope with multiple instances on a page.

19. Behave.js

Behave.js is a lightweight library for adding IDE style behaviors to plain text areas, making it much more enjoyable to write code in. It supports all modern browsers, with partial support for IE6/7. It has no dependencies and allows for custom code and behavior fencing, multi-line indentation and un-indentation.

20. Chartkick.js

Chartkick.js helps you create beautiful Javascript charts with minimal code. It supports Google Charts and Highcharts, and works with most browsers (including IE6). It works with Ruby, using the "chartkick" gem. Use it to create line charts, pie charts, column charts and multiple series.

21. Gif.js

Gif.js is a JavaScript GIF encoder that runs in your browser. It uses typed arrays and web workers to render each frame in the background. It works in browsers supporting Web Workers, File API and Type Arrays by generating the GIF images in the background, using Web Workers.

22. ColtJS

ColtJS is a simple framework that allows for easy deployment of a JavaScript Application using asynchronous module definition. Its only dependency is RequireJS, and it builds off simple principles of a centralized router, loading modules only when requested to produce an efficient, easy-to-manage application structure. You can use the ColtJS boilerplate for a quick start and view the documentation on the ColtJS website.

23. Anima.js

Anima.js makes it easy to animate over a hundred objects at a time, and each item has its mass and viscosity to emulate reallife objects. It helps improve upon some of the limitations of CSS animations, such as calculating percents for keyframes, giving you greater control over the flow of animations, along with the ability to use delays and durations normally.

24. Navi.js

Navi makes it easy to dynamically display content on your sites. Instead of cluttering up your site tree with extra files, you can easily write all your HTML code for multiple pages in one file. It uses the current hash to change content, leaving your visitor's back button functional, with built-in support for Ajax, Google Analytics, breadcrumbs, page titles, along with easy HTML and JavaScript markup.

25. Fartscroll.js

Would any recent GitHub script roundup be complete without Fartscroll.js? Created by The Onion, it can install on any webpage to produce gassy noises as you scroll up and down the browser window. Try the Google Chrome extension for a more immersive experience.

http://igor10k.github.io/ikSelect/

Stylize selects across all browsers with little effort.

Features

http://nick-jonas.github.io/windows/

Windows is a jQuery plugin for creating full-screen scrolling windows. It sets up the basic SASS for sequential full screen windows and a jQuery plugin for managing their positions while the user scrolls.

Cytoscape.js

Cytoscape.js (GitHub: cytoscape / cytoscape.js, License: LGPL, npm: cytoscape), developed at the Donnelly Centre at the University of Toronto by Max Franz, is a graph library that works with Node and browsers. This library is for working with “graphs” in the mathematical sense – interconnected sets of nodes connected by edges.

The API uses lots of sensible JavaScript idioms: it’s event-based, functions return objects so calls can be chained, JSON definitions of elements can be used, and nodes can be selected with selectors that are modelled on CSS selectors and jQuery’s API. That means you can query a graph with something like this: cy.elements('node:locked, edge:selected').

Styling graphs is also handled in a natural manner:

Graph style and data should be separate, and the library should provide core functionality with extensions adding functionality on top of the library.

Max and several contributs have been working on the project for two years now, so it’s quite mature at this point. The project comes with detailed documentation, a build script, and a test suite written with QUnit.

How to enable JavaScript in your browser

자바스크립트 사용 가능한 브라우저 인지 체크.

http://www.enable-javascript.com/