Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
CoffeeScript + jQuery tutorials

CoffeeQuery

CoffeeScript + jQuery tutorials

  • Various jQuery tutorials ported to CS
  • CoffeeScript basics
  • Cool colours, not the least of features :)

Usage

  • Download / clone / fork it
  • Open any .html file in your browser, click around
  • Play with the code
  • Find step-by-step explanations at http://coffeequery.blogspot.com if you want them

License

MIT Copyright 2012 Evgeniy Tsvigun

Author

Evgeniy Tsvigun utgarda@gmail.com

class Frog
constructor: ([color, left, top], leaf) ->
@obj = $j """<div style='background: #{color};
left: #{left}px;
top:#{top}px;
border: 1px solid white;
height: 38px; width: 38px; position: absolute;'></div>
"""
@obj.appendTo leaf
$aniArgs =
u: [{top: '-=40', height: 78},{height: 38}]
d: [{height: 78},{top: '+=40', height: 38}]
l: [{left: '-=40', width: 78}, {width: 38}]
r: [{width: 78}, {left: '+=40', width: 38}]
jump: (dir, s) ->
@obj
.animate($aniArgs[dir][0])
.animate($aniArgs[dir][1]) for i in [1..s]
this
right: (n) -> this.jump 'r', n
left: (n) -> this.jump 'l', n
up: (n) -> this.jump 'u', n
down: (n) -> this.jump 'd', n
frogs = ( new Frog( params, '#leaf' ) for params in [
['#FF621D', 0, 0]
['#B1D02C', 0, 160]
['#D5FA6F', 160, 160]
['#89C128', 160, 0]
['#B42002', 80, 80]
])
$j('#ani3_long_jumps').click ->
frogs[0].down(4).right(4).up(4).left(4)
frogs[1].right(4).up(4).left(4).down(4)
frogs[2].up(4).left(4).down(4).right(4)
frogs[3].left(4).down(4).right(4).up(4)
move: (path) ->
@obj
.animate($aniArgs[dir][0])
.animate($aniArgs[dir][1]) for dir in path
this
frogs[i].move(path) for path, i in [
'ddddrrrull'
'rrrulluuur'
'lulluuurrd'
'lldrddlluu'
'dluuurrddd']
#Array comprehension, here it goes!
bars = ($j "#ani3_bar#{n}" for n in [0..4])
# Could be done with CSS id selectors, which is
# kinda fast, but has to be 'jQueryfied' for our needs,
# i.e. every HTMLDivElement turned to a jQuery object:
bars = ( $j(e) for e in $j('[id*=ani3_bar]') )
$j('#ani3_select').click ->
b.css('border-color', 'red') for b in bars
# Put it in a line
up = (bar) ->
bar.animate(top:'-=40', height:78).animate height:38
# Or use indentation instead of parenthesis
down = (bar) ->
bar.animate
height: 78
.animate
top: '+=40'
height: 38
# Keep the syntax clean
right = (bar) ->
bar.animate(width:78).animate left: '+=40', width:38
# Or put all the brackets possible
# (but that's not what CS is about ;)
left = (bar) ->
bar.animate({left:'-=40',width:78}).animate({width:38})
# All for definitions are valid and usable:
$j('#ani3_jump_around').click ->
left down right right up up left left down right bars2[4]
<!DOCTYPE html>
<html>
<head>
<title>jQuery + CoffeeScript tutorial: animation stacking</title>
<script src='http://coffeescript.org/extras/coffee-script.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<style>
div.tree-frog {border: 1px solid white; height: 38px; width: 38px; position: absolute}
</style>
</head>
<body>
<div style='position: relative; width: 510px; height: 80px; background: #458008'>
<div id='ani2_worm_bar' class = 'tree-frog' style='background: #FF621D; left: 20px; top:20px'></div>
</div>
<input class='button' id='ani2_go' type='button' value='Go'>
<input class='button' id='ani2_reset1' type='button' value='Reset'>
<br/>
<div style='position: relative; width: 510px; height: 80px; background: #458008'>
<div id='ani2_worm_bar2' class = 'tree-frog' style='background: #FF621D; left: 20px; top:20px'></div>
</div>
<input class='button' id='ani2_gogo' type='button' value='Go Go'>
<input class='button' id='ani2_reset2' type='button' value='Reset'>
<br/>
<div style='position: relative; width: 510px; height: 80px; background: #458008'>
<div id='ani2_worm_bar3' class='tree-frog' style='background: #FF621D; left: 20px; top:20px'></div>
</div>
<input class='button' id='ani2_gogo_cat' type='button' value='Go Go Caterpillar!'>
<input class='button' id='ani2_reset3' type='button' value='Reset'>
<br/>
<script type='text/coffeescript'>
$j = jQuery
$j('#ani2_go').click ->
$j('#ani2_worm_bar').animate(width:78).animate(left:'+=40',width:38)
$j('#ani2_gogo').click ->
$j('#ani2_worm_bar2')
.animate(width:78).animate( left:'+=40', width:38)
.animate(width:78).animate( left:'+=40', width:38)
go = (bar) ->
bar.animate(width:78).animate(left:'+=40',width:38)
$j('#ani2_gogo_cat').click ->
go go go go go go go go go go go $j('#ani2_worm_bar3')
reset = (bar) ->
bar.stop(true, true).animate( left: 20, width:38 )
$j('#ani2_reset1').click -> reset $j('#ani2_worm_bar')
$j('#ani2_reset2').click -> reset $j('#ani2_worm_bar2')
$j('#ani2_reset3').click -> reset $j('#ani2_worm_bar3')
</script>
</body>
</html>
<html>
<head>
<script src='http://coffeescript.org/extras/coffee-script.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script type="text/coffeescript">
$j = jQuery
window.fbAsyncInit = ->
FB.init
appId: '340097046032196' #put your own appId here
status: true
cookie: true
xfbml: true
oauth: true
$j ->
id = 'facebook-jssdk'
return if $j(id).length > 0
sdk = $j.getScript "http://connect.facebook.net/en_US/all.js"
sdk.id = id
sdk.async = true
</script>
<div class="fb-login-button">Login with Facebook</div>
</body>
</html>
class Frog
constructor: (@obj) ->
up: ->
@obj.animate(top:'-=40',height:78).animate height:38
down: ->
@obj.animate(height:78).animate top:'+=40',height:38
right: ->
@obj.animate(width:78).animate left:'+=40', width:38
left: ->
@obj.animate(left:'-=40', width:78).animate width:38
<html>
<head>
<style>
div.green-leaf div {border: 1px solid white; height: 38px; width: 38px; position: absolute}
</style>
</head>
<body>
<div class='green-leaf' style='background: #458008; position: relative; width: 200px; height: 200px' >
<div id='ani3_bar0' style='background: #FF621D; left: 0; top:0'></div>
<div id='ani3_bar1' style='background: #B1D02C; left: 0; top:160px'></div>
<div id='ani3_bar2' style='background: #D5FA6F; left: 160px; top:160px'></div>
<div id='ani3_bar3' style='background: #89C128; left: 160px; top:0'></div>
<div id='ani3_bar4' style='background: #B42002; left: 80px; top:80px'></div>
</div>
<input class='button' id='ani3_select' type='button' value='Select divs'>
</body>
</html>
$j = jQuery
window.fbAsyncInit = ->
FB.init
appId: '340097046032196' #put your own appId here
status: true
cookie: true
xfbml: true
oauth: true
$j ->
id = 'facebook-jssdk'
return if $j(id).length > 0
#Remember to add <div id="fb-root"></div> to your page first!
sdk = $j.getScript "http://connect.facebook.net/en_US/all.js"
sdk.id = id
sdk.async = true
colors = [ '#CCDDBB', '#99CC66', '#88AA66', '#AADDCC'
'#66AAAA', '#559999', '#FFFFDD', '#FF9922'
'#DD8822', '#AACCDD', '#5599CC', '#4477AA' ]
nextSquareHtml = (color) -> """
<div style="background: #{color}; border: 1px solid grey;
height: 30px; width: 30px; margin: 5px; float: left"></div>"""
grow = (square) ->
square.animate(height: 60, 200).animate height: 30
for c in colors
$j(nextSquareHtml c)
.appendTo( $j '#keyboard' )
.click -> grow $j(this)
squares = ( $j(nextSquareHtml c) for c in colors )
for s,i in squares
s.appendTo( $j '#keyboard' ) #assembling the keyboard
.click ->
grow $j(this), 7
#attach the next one, make it circular
.data('next', squares[ (i+1) % squares.length ])
grow = (square, i) ->
if i>0 and not square.is ':animated'
square.animate height: 60, 200,
-> grow square.data('next'), i-1
.animate height: 30
<html>
<head>
<script src='http://coffeescript.org/extras/coffee-script.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
</head>
<body>
<div id="keyboard" style="width: 510px; height: 80px;">
</div>
<script type="text/coffeescript">
$j = jQuery
colors = [ '#CCDDBB', '#99CC66', '#88AA66', '#AADDCC'
'#66AAAA', '#559999', '#FFFFDD', '#FF9922'
'#DD8822', '#AACCDD', '#5599CC', '#4477AA' ]
nextSquareHtml = (color) ->
"""
<div style="background: #{color};
border: 1px solid grey;
height: 30px;
width: 30px;
margin: 5px;
float: left"></div>
"""
grow = (square, i) ->
if i>0 and not square.is ':animated'
square.animate height: 60, 200,
-> grow square.data().next, i-1
.animate height: 30
squares = ( $j(nextSquareHtml c) for c in colors )
for s,i in squares
s.appendTo( $j '#keyboard' )
.click ->
grow $(this), 7
.data('next', squares[ (i+1) % squares.length ])
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery + CoffeeScript tutorial: animation stacking
</title>
<script
src='http://coffeescript.org/extras/coffee-script.js'>
</script>
<script
src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/
jquery.min.js'>
</script>
</head>
<body>
<div id='green-leaf'
style='background: #458008;
position: relative;
width: 200px;
height: 200px' ></div>
<script type="text/coffeescript">
$j = jQuery
class Frog
constructor: ([color, left, top], leaf) ->
@obj = $j """<div style='background: #{color};
left: #{left}px;
top:#{top}px;
border: 1px solid white;
height: 38px; width: 38px; position: absolute;'></div>"""
@obj.appendTo leaf
$aniArgs =
u: [{top: '-=40', height: 78},{height: 38}]
d: [{height: 78},{top: '+=40', height: 38}]
l: [{left: '-=40', width: 78}, {width: 38}]
r: [{width: 78}, {left: '+=40', width: 38}]
move: (path) ->
@obj
.animate($aniArgs[dir][0])
.animate($aniArgs[dir][1]) for dir in path
this
leaf = $j '#green-leaf'
#Array comprehension, here it goes!
frogs = ( new Frog( params, leaf ) for params in [
['#FF621D', 0, 0]
['#B1D02C', 0, 160]
['#D5FA6F', 160, 160]
['#89C128', 160, 0]
['#B42002', 80, 80]
])
$j ->
frogs[i].move(path) for path, i in [
'ddddrrrull'
'rrrulluuur'
'lulluuurrd'
'lldrddlluu'
'dluuurrddd']
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery + CoffeeScript tutorial: animation stacking</title>
<script src='http://coffeescript.org/extras/coffee-script.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
</head>
<body>
<style>
div.green-leaf div {border: 1px solid white; height: 38px; width: 38px; position: absolute}
</style>
<div class='green-leaf' style='background: #458008; position: relative; width: 200px; height: 200px' >
<div id='ani3_bar0' style='background: #FF621D; left: 0; top:0'></div>
<div id='ani3_bar1' style='background: #B1D02C; left: 0; top:160px'></div>
<div id='ani3_bar2' style='background: #D5FA6F; left: 160px; top:160px'></div>
<div id='ani3_bar3' style='background: #89C128; left: 160px; top:0'></div>
<div id='ani3_bar4' style='background: #B42002; left: 80px; top:80px'></div>
</div>
<input class='button' id='ani3_select' type='button' value='Select divs'>
<input class='button' id='ani3_reset1' type='button' value='Reset'>
<div class='green-leaf' style='background: #458008; position: relative; width: 200px; height: 200px' >
<div id='ani3_bar5' style='background: #FF621D; left: 0; top:0'></div>
<div id='ani3_bar6' style='background: #B1D02C; left: 0; top:160px'></div>
<div id='ani3_bar7' style='background: #D5FA6F; left: 160px; top:160px'></div>
<div id='ani3_bar8' style='background: #89C128; left: 160px; top:0'></div>
<div id='ani3_bar9' style='background: #B42002; left: 80px; top:80px'></div>
</div>
<input class='button' id='ani3_jump_around' type='button' value='Jump around'>
<input class='button' id='ani3_reset2' type='button' value='Reset'>
<div id="leaf" class='green-leaf' style='background: #458008; position: relative; width: 200px; height: 200px' >
</div>
<input class='button' id='ani3_long_jumps' type='button' value='4 jumps in a row'>
<div id="leaf2" class='green-leaf' style='background: #458008; position: relative; width: 200px; height: 200px' >
</div>
<input class='button' id='ani3_round_dance' type='button' value='Round dance!'>
<input class='button' id='ani3_reset3' type='button' value='Reset'>
<script type="text/coffeescript">
$j = jQuery
#Array comprehension, here it goes!
bars = ($j "#ani3_bar#{n}" for n in [0..4])
bars2 = ($j "#ani3_bar#{n}" for n in [5..9])
# Could be done with CSS id selectors, which is
# kinda fast, but has to be 'jQueryfied' for our needs,
# i.e. every HTMLDivElement turned to a jQuery object:
bars = ( $j(e) for e in $j('[id*=ani3_bar]') )
$j('#ani3_select').click ->
b.css('border-color', 'red') for b in bars
$j('#ani3_reset1').click ->
b.css('border-color', 'white') for b in bars
up = (bar) -> bar.animate(top: '-=40',height: 78).animate height: 38
down = (bar) ->
bar.animate
height: 78
.animate
top: '+=40'
height: 38
right = (bar) -> bar.animate(width: 78).animate left: '+=40', width: 38
left = (bar) -> bar.animate(left: '-=40', width: 78).animate width: 38
$j('#ani3_jump_around').click ->
left down right right up up left left down right bars2[4]
$j('#ani3_reset2').click ->
bars2[4].stop(true, true).animate( left: 80, top:80, width:38, height:38 )
class Frog
constructor: ([color, left, top], leaf) ->
@obj = $j """<div style='background: #{color};
left: #{left}px;
top:#{top}px;
border: 1px solid white;
height: 38px; width: 38px; position: absolute;'></div>"""
@obj.appendTo leaf
$aniArgs =
u: [{top: '-=40', height: 78},{height: 38}]
d: [{height: 78},{top: '+=40', height: 38}]
l: [{left: '-=40', width: 78}, {width: 38}]
r: [{width: 78}, {left: '+=40', width: 38}]
jump: (dir, s) ->
@obj
.animate($aniArgs[dir][0])
.animate($aniArgs[dir][1]) for i in [1..s]
this
right: (n) -> this.jump 'r', n
left: (n) -> this.jump 'l', n
up: (n) -> this.jump 'u', n
down: (n) -> this.jump 'd', n
move: (path) ->
@obj
.animate($aniArgs[dir][0])
.animate($aniArgs[dir][1]) for dir in path
this
frogsData = [
['#FF621D', 0, 0]
['#B1D02C', 0, 160]
['#D5FA6F', 160, 160]
['#89C128', 160, 0]
['#B42002', 80, 80] ]
addFrogs = (leaf) ->
( new Frog( params, leaf ) for params in frogsData )
removeFrogs = (frogs) ->
f.obj.remove() for f in frogs
frogs = addFrogs '#leaf'
$j('#ani3_long_jumps').click ->
frogs[0].down(4).right(4).up(4).left(4)
frogs[1].right(4).up(4).left(4).down(4)
frogs[2].up(4).left(4).down(4).right(4)
frogs[3].left(4).down(4).right(4).up(4)
frogs2 = addFrogs '#leaf2'
$j('#ani3_round_dance').click ->
frogs2[i].move(path) for path, i in [
'ddddrrrull'
'rrrulluuur'
'lulluuurrd'
'lldrddlluu'
'dluuurrddd']
$j('#ani3_reset3').click ->
removeFrogs frogs2
frogs2 = addFrogs '#leaf2'
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src='http://coffeescript.org/extras/coffee-script.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
</head>
<body>
<div style="width: 510px; height: 80px">
<div id="ani1_bar1" style="background: #29AAE1; border: 1px solid white; height: 80px; width: 350px; float: left;"></div>
<div id="ani1_bar2" style="background: #333; border: 1px solid white; height: 80px; width: 150px; float: right;"></div>
</div>
<p>
<input class="button" id="ani1_clickme" type="button" value="Click Me!">
<input class="button" id="ani1_restore" type="button" value="Restore">
<script type="text/coffeescript">
#Using $j instead of just $ to be more specific
$j = jQuery
#Storing page elements to local variables
clickme = $j '#ani1_clickme'
restore = $j '#ani1_restore'
bar1 = $j '#ani1_bar1'
bar2 = $j '#ani1_bar2'
#Cool shortcut, instead of "$j(document).ready(function() { "
$j ->
clickme.click ->
bar1.animate {width:150}, 2000
bar2.animate {width:350}, 4000
restore.click ->
bar1.animate {width:350}, 4000
bar2.animate {width:150}, 2000
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment