Minified JavaScript example - moving a block

sample code at jsfiddle:
http://jsfiddle.net/tjansen/tqsCg/

tags: #javascript #editor #framework
http://minifiedjs.com




html
------

<body>
    Click on the buttons to move the square:<br/>
    <button id="moveButton">Move</button> 
    <button id="resetButton">Reset</button> 
    
    <div id="container">
        <div id="block"><textarea cols="5" rows="5">hello </textarea></div>
        <div id="rblock"><textarea cols="5" rows="5">hello </textarea></div>
    </div>
</body>



javascript
-------------

var MINI = require('minified'); 
var $ = MINI.$, $$ = MINI.$$, EE = MINI.EE;

$(function() {
    $('#moveButton').on('click', function() {
        $('#block').animate({$left: 50 + 'px', $top: 0 + 'px'}, 500);
        $('#rblock').set({$background: 'grey'} );
        $('#rblock textarea').set({$color: 'grey'} );
        $('#rblock textarea').set({$background: 'lightgrey'} );
    });

    $('#resetButton').on('click', function() {
        $('#block').animate({$left: '0px', $top: '0px'}, 500 );
        $('#rblock').set({$background: 'blue'} );
        $('#rblock textarea').set({$color: 'red'} );
        $('#rblock textarea').set({$background: 'white'} );
    });
});

css
-----

body { font-family: sans-serif; }
#container { position: relative; width: 180px; height: 180px; border: 1px solid black; margin-top: 1em;}
#block { float: left; position:absolute; background-color: green;  margin-left: 1%; width: 80px; height: 100px; }
body { font-family: sans-serif; }
#rblock { float: right; background-color: blue; margin-right: 1%; width: 80px; height: 100px;}
#rblock textarea {color: red;}

From JR's : articles
159 words - 1631 chars
created on Jul 15, 2013 at 12:42:39 am
updated on Jul 15, 2013 at 02:07:01 pm
import date 2013-08-12 21:51:00 - #
source - versions