CSS - Cheat sheet

ajax() 메소드는 비동기 요청을 수행.

http://api.jquery.com/jQuery.ajax/
http://www.w3schools.com/jquery/ajax_ajax.asp

jQuery.ajax( url [, settings ] )Returns: jqXHR

  $.ajax({
     url:"demo_test.txt",
     success:function(result){
       $("#div1").html(result);
   }});

getJSON() 메소드는 AJAX HTTP Get 요청을 사용하여 JSON 데이터를 가져온다.

http://api.jquery.com/jQuery.getJSON/
http://www.w3schools.com/jquery/ajax_getjson.asp

jQuery.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )Returns: jqXHR

$.getJSON('http://yoururl?callback=?', function(data){alert(data)});

var jqxhr = $.getJSON( "example.json", function() {console.log( "success" );})
             .done(function() { console.log( "second success" ); })
             .fail(function() { console.log( "error" ); })
             .always(function() { console.log( "complete" );
             });
             // perform other work here ...
             // Set another completion function for the request abovejqxhr.complete(function() { console.log( "second complete" ); });

jqxhr.complete(function() { console.log( "second complete" ); });

getScript() 메소드는  AJAX HTTP GET 요청을 이용하여 javascript를 실행한다.

http://api.jquery.com/jQuery.getScript/

jQuery.getScript( url [, success(script, textStatus, jqXHR) ] )Returns: jqXHR

$.getScript("demo_ajax_script.js");

$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {  
                     console.log(data); //data returned  
                     console.log(textStatus); //success  
                     console.log(jqxhr.status); //200  
                     console.log('Load was performed.');});

$.getScript("ajax/test.js").done(function(script, textStatus) { 
                                    console.log( textStatus );})
                           .fail(function(jqxhr, settings, exception) { 
                                    $( "div.log" ).text( "Triggered ajaxError handler." );
                           });

https://mural.ly/

Google Docs for visual people

The easiest way for creative teams to think, imagine and discuss their ideas.

.

pintrest 같은. 그리드. Grid

SuperScrollorama

SuperScrollorama is a popular jQuery plugin for creating supercool scrolling and animation, powered by TweenMax and the Greensock Tweening Engine. This is a powerful tool, and with great power comes great responsibility. Use wisely. A little subtlety can go a long way.

Scrolldeck

Scrolldeck is a jQuery plugin for making scrolling presentation decks.

Shapeshift

Shapeshift is an amazing jQuery plugin which creates a column based grid system that allows drag and drop even between multiple containers.

jQuery Nested

jQuery Nested plugin is for a gap free, multi column grid layout experience.

Freetile

Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.

Gridster

Gridster is a jQuery plugin that allows building intuitive drag-able layouts from elements spanning multiple columns.

Masonry

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

Stellar

With Stellar, parallax has never been so easier. Precisely align elements and backgrounds. Add some simple data attributes to your markup, run $.stellar() – that’s all you need to get started.

PageSlide

PageSlide is a jQuery plugin, by Scott Robbin, which slides a webpage over to reveal an additional interaction pane.

jQuery Full Content

This is a nice jQuery plugin for presentation style layout. It will dynamically position a container within the width and height of the browser window, and will smoothly scroll between each container.

Twitter Bootstrap

Boostrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It has almost everything you need to develop responsive sites and apps like 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and many more.

Skeleton

Skeleton is a simple boilerplate for HTML5 websites and mobile-friendly development. If you are you looking to create a responsive website quickly, you should look into this open source project.

Foundation

Foundation by Zurb is the most advanced responsive front-end framework in the world. With this HTML5 framework, you can start building website for small devices first. Then, as devices get larger and larger, layer in more complexity. The flexiable grid can adapt to any size screen, from phones to TVs.

HTML5 KickStart

HTML KickStart is a ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you a lot of hours on your next web project.

SproutCore

SproutCore is an open-source front-end framework for building blazingly fast HTML5 apps. Semantic templates allow you to write HTML and CSS that update automatically when your models change-like magic. This framework will change the way you think about building applications and surprise you with how little code you have to write.

Montage

Montage is an HTML5 framework for building modern Web Apps. It helps you build scalable and maintainable HTML5 applications optimized for today’s and tomorrow’s range of connected devices.

HTML5 Boilerplate

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

Zebra

Zebra is an HTML5 open source framework that brings fresh view and possibilities to develop WEB based Rich UI applications. The approach sits on top of HTML5 Canvas element what makes possible to render any imaginable UI.

CreateJS

CreateJS is a suite of modular libraries and tools which work together to enable rich interactive content on open web technologies via HTML5. These libraries are designed to work completely independently, or mixed and matched to suit your needs.

Less Framework

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Groundwork

GroundworkCSS is an open-source, responsive front-end framework packed with HTML5, CSS and Javascript components that enables rapid prototyping and responsive design.

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.