nfg_Day11

Day 11
<< main | course director notes

code <!doctype html>
 * 6. Processing.js review**

 width:960px; height:540px; border:1px solid black; position:relative; margin:auto; }
 * 1) container{

width:640px; height:480px; position:absolute; left:160px; top:30px; border:1px solid red; } 
 * 1) player{



code

code <!doctype html>
 * 5. jQuery scale transitions**

 body{ background:black; }

#container{ width:960px; height:540px; position:relative; margin:auto; border:1px solid black; background:#aaaaaa; }

#scrollbar{ width:600px; height:60px; position:absolute; left:180px; top:440px; background:gray; overflow:hidden; border:1px solid black; }

#scrollbar_inside{ width:960px; height:60px; position:absolute; left:0px; top:0px; /*border:1px dashed red;*/ }

.button{ width:50px; height:50px; position:absolute; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; border:2px solid black; }

#button1{ left:10px; top:470px; background:red; }

#button1:hover{ background:yellow; border:2px solid orange; }

#button2{ left:900px; top:470px; background:green; }

#button2:hover{ background:yellow; border:2px solid blue; }

.thumb{ width:60px; height:60px; position:absolute; }

#thumb1{ background:red; left:0px; top:0px; }

#thumb2{ background:green; left:100px; top:0px; }

#thumb3{ background:red; left:200px; top:0px; }

.target{ width:400px; height:400px; position:absolute; left:280px; top:20px; }

#targetbg{ background:url("http://www.highresolutiontextures.com/wp-content/uploads/2010/07/wood-fence-texture-03.jpg"); }

#target1{ background:purple; }           #target2{ background:url('http://www.8notes.com/images/artists/elvis-presley.jpg'); }           #target3{ background:orange; }          var button1, button2; var thumb1, thumb2, thumb3; var target1, target2, target3; var scrollbar_inside; var fadeSpeed = 250; //250ms, or 1/4 second var scrollSpeed = 250; var posX=0; var scrollAmount=100;

function setup{ button1 = $("#button1"); button2 = $("#button2");

thumb1 = $("#thumb1"); thumb2 = $("#thumb2"); thumb3 = $("#thumb3");

target1 = $("#target1"); target2 = $("#target2"); target3 = $("#target3");

scrollbar_inside = $("#scrollbar_inside");

//you can also drag the scrollbar with this /*scrollbar_inside.draggable({ axis: 'x' });*/

button1.click(button1Handler); button2.click(button2Handler);

thumb1.click(thumb1Handler); thumb2.click(thumb2Handler); thumb3.click(thumb3Handler);

hideTargets; }

function button1Handler{ posX -= scrollAmount // you can limit scrolling with a conditional /*           if(posX<0){ posX=0; }           */            scrollbar_inside.animate({left:posX},scrollSpeed); }

function button2Handler{ posX += scrollAmount scrollbar_inside.animate({left:posX},scrollSpeed); }

function thumb1Handler{ fadeOutTargets; target1.show("scale", {}, fadeSpeed); }

function thumb2Handler{ fadeOutTargets; target2.show("scale", {}, fadeSpeed); thumb           }

function thumb3Handler{ fadeOutTargets; target3.show("scale", {}, fadeSpeed); }

function hideTargets{ target1.hide; target2.hide; target3.hide; }

function fadeOutTargets{ target1.fadeOut(fadeSpeed); target2.fadeOut(fadeSpeed); target3.fadeOut(fadeSpeed); }

$(setup);

asdfasdfasdlfkjhal asdfasdfasdlfkjhal 

 code

code <!doctype html>
 * 4. jQuery slide transitions**

 body{ background:black; }

#container{ width:960px; height:540px; position:relative; margin:auto; border:1px solid black; background:#aaaaaa; }

#scrollbar{ width:600px; height:60px; position:absolute; left:180px; top:440px; background:gray; overflow:hidden; border:1px solid black; }

#scrollbar_inside{ width:960px; height:60px; position:absolute; left:0px; top:0px; /*border:1px dashed red;*/ }

.button{ width:50px; height:50px; position:absolute; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; border:2px solid black; }

#button1{ left:10px; top:470px; background:red; }

#button1:hover{ background:yellow; border:2px solid orange; }

#button2{ left:900px; top:470px; background:green; }

#button2:hover{ background:yellow; border:2px solid blue; }

.thumb{ width:60px; height:60px; position:absolute; }

#thumb1{ background:red; left:0px; top:0px; }

#thumb2{ background:green; left:100px; top:0px; }

#thumb3{ background:red; left:200px; top:0px; }

.target{ width:400px; height:400px; position:absolute; left:280px; top:20px; }

#targetbg{ background:url("http://www.highresolutiontextures.com/wp-content/uploads/2010/07/wood-fence-texture-03.jpg"); }

#target1{ background:purple; }           #target2{ background:url('http://www.8notes.com/images/artists/elvis-presley.jpg'); }           #target3{ background:orange; }          var button1, button2; var thumb1, thumb2, thumb3; var target1, target2, target3; var scrollbar_inside; var fadeSpeed = 250; //250ms, or 1/4 second var scrollSpeed = 250; var posX=0; var scrollAmount=100;

function setup{ button1 = $("#button1"); button2 = $("#button2");

thumb1 = $("#thumb1"); thumb2 = $("#thumb2"); thumb3 = $("#thumb3");

target1 = $("#target1"); target2 = $("#target2"); target3 = $("#target3");

scrollbar_inside = $("#scrollbar_inside");

//you can also drag the scrollbar with this /*scrollbar_inside.draggable({ axis: 'x' });*/

button1.click(button1Handler); button2.click(button2Handler);

thumb1.click(thumb1Handler); thumb2.click(thumb2Handler); thumb3.click(thumb3Handler);

hideTargets; }

function button1Handler{ posX -= scrollAmount // you can limit scrolling with a conditional /*           if(posX<0){ posX=0; }           */            scrollbar_inside.animate({left:posX},scrollSpeed); }

function button2Handler{ posX += scrollAmount scrollbar_inside.animate({left:posX},scrollSpeed); }

function thumb1Handler{ fadeOutTargets; target1.show("slide", {}, fadeSpeed); }

function thumb2Handler{ fadeOutTargets; target2.show("slide", {}, fadeSpeed); }

function thumb3Handler{ fadeOutTargets; target3.show("slide", {}, fadeSpeed); }

function hideTargets{ target1.hide; target2.hide; target3.hide; }

function fadeOutTargets{ target1.hide("slide", {}, fadeSpeed); target2.hide("slide", {}, fadeSpeed); target3.hide("slide", {}, fadeSpeed); }

$(setup);

asdfasdfasdlfkjhal asdfasdfasdlfkjhal 

 code

code <!doctype html>
 * 3. jQuery scrollbar**

 #background { background:url("http://upload.wikimedia.org/wikipedia/commons/thumb/1/13/DuskyDolphin.jpg/220px-DuskyDolphin.jpg"); background-size:100% 100%; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 0; }

#container{ width:960px; height:540px; position:relative; margin:auto; border:1px solid black; }

#scrollbar{ width:600px; height:60px; position:absolute; left:180px; top:440px; background:gray; overflow:hidden; border:1px solid black; }

#scrollbar_inside{ width:960px; height:60px; position:absolute; left:0px; top:0px; /*border:1px dashed red;*/ }

.button{ width:50px; height:50px; position:absolute; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; border:2px solid black; }

#button1{ left:10px; top:470px; background:red; }

#button1:hover{ background:yellow; border:2px solid orange; }

#button2{ left:900px; top:470px; background:green; }

#button2:hover{ background:yellow; border:2px solid blue; }

.thumb{ width:60px; height:60px; position:absolute; }

#thumb1{ background:red; left:0px; top:0px; }

#thumb2{ background:green; left:100px; top:0px; }

#thumb3{ background:red; left:200px; top:0px; }

.target{ width:400px; height:400px; position:absolute; left:280px; top:20px; }

#target1{ background:purple; }           #target2{ background:url('http://www.8notes.com/images/artists/elvis-presley.jpg'); }           #target3{ background:orange; }       <script type="text/javascript" src="http://fox-gieg.com/js/jquery.min.js"> <script type="text/javascript" src="http://fox-gieg.com/js/jquery-ui.min.js"> <script type="text/javascript"> var button1, button2; var thumb1, thumb2, thumb3; var target1, target2, target3; var scrollbar_inside; var fadeSpeed = 250; //250ms, or 1/4 second var scrollSpeed = 250; var posX=0; var scrollAmount=100;

function setup{ button1 = $("#button1"); button2 = $("#button2");

thumb1 = $("#thumb1"); thumb2 = $("#thumb2"); thumb3 = $("#thumb3");

target1 = $("#target1"); target2 = $("#target2"); target3 = $("#target3");

scrollbar_inside = $("#scrollbar_inside");

//you can also drag the scrollbar with this /*scrollbar_inside.draggable({ axis: 'x' });*/

button1.click(button1Handler); button2.click(button2Handler);

thumb1.click(thumb1Handler); thumb2.click(thumb2Handler); thumb3.click(thumb3Handler);

hideTargets; }

function button1Handler{ posX -= scrollAmount // you can limit scrolling with a conditional /*           if(posX<0){ posX=0; }           */            scrollbar_inside.animate({left:posX},scrollSpeed); }

function button2Handler{ posX += scrollAmount scrollbar_inside.animate({left:posX},scrollSpeed); }

function thumb1Handler{ fadeOutTargets; target1.fadeIn(fadeSpeed); }

function thumb2Handler{ fadeOutTargets; target2.fadeIn(fadeSpeed); }

function thumb3Handler{ fadeOutTargets; target3.fadeIn(fadeSpeed); }

function hideTargets{ target1.hide; target2.hide; target3.hide; }

function fadeOutTargets{ target1.fadeOut(fadeSpeed); target2.fadeOut(fadeSpeed); target3.fadeOut(fadeSpeed); }

$(setup);

asdfasdfasdlfkjhal asdfasdfasdlfkjhal <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/13/DuskyDolphin.jpg/220px-DuskyDolphin.jpg">

<div id="scrollbar_inside">

code

code <!doctype html>
 * 2. jQuery buttons, stage two**

<style type="text/css"> #container{ width:960px; height:540px; position:relative; margin:auto; border:1px solid black; }

.button{ width:50px; height:50px; position:absolute; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; border:2px solid black; }

#button1{ left:10px; top:10px; background:red; }

#button1:hover{ background:yellow; border:2px solid orange; }

#button2{ left:10px; top:70px; background:green; }

#button2:hover{ background:yellow; border:2px solid blue; }

#button3{ left:10px; top:130px; background:blue; }

#button3:hover{ background:yellow; border:2px solid purple; }

.target{ width:400px; height:400px; position:absolute; left:280px; top:70px; }

#target1{ background:purple; }           #target2{ background:url('http://www.8notes.com/images/artists/elvis-presley.jpg'); }           #target3{ background:orange; }       <script type="text/javascript" src="http://fox-gieg.com/js/jquery.min.js"> <script type="text/javascript" src="http://fox-gieg.com/js/jquery-ui.min.js"> <script type="text/javascript"> var button1,button2,button3; var target1,target2,target3; var fadeSpeed = 250; //250ms, or 1/4 second

function setup{ button1 = $("#button1"); button2 = $("#button2"); button3 = $("#button3"); target1 = $("#target1"); target2 = $("#target2"); target3 = $("#target3");

button1.click(button1Handler); button2.click(button2Handler); button3.click(button3Handler);

hideTargets; }

function button1Handler{ fadeOutTargets; target1.fadeIn(fadeSpeed); }

function button2Handler{ fadeOutTargets; target2.fadeIn(fadeSpeed); }

function button3Handler{ fadeOutTargets; target3.fadeIn(fadeSpeed); }

function hideTargets{ target1.hide; target2.hide; target3.hide; }

function fadeOutTargets{ target1.fadeOut(fadeSpeed); target2.fadeOut(fadeSpeed); target3.fadeOut(fadeSpeed); }

$(setup);

asdfasdfasdlfkjhal asdfasdfasdlfkjhal <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/13/DuskyDolphin.jpg/220px-DuskyDolphin.jpg"> code

code <!doctype html>
 * 1. jQuery buttons, stage one**

<style type="text/css"> width:960px; height:540px; position:relative; margin:auto; border:1px solid black; }
 * 1) container{

.button{ width:50px; height:50px; position:absolute; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; }

left:10px; top:10px; background:red; }
 * 1) button1{

background:yellow; }
 * 1) button1:hover{

left:10px; top:70px; background:green; }
 * 1) button2{

background:yellow; }
 * 1) button2:hover{

left:10px; top:130px; background:blue; }
 * 1) button3{

background:yellow; }
 * 1) button3:hover{

width:400px; height:400px; position:absolute; background:purple; left:300px; top:20px; } <script type="text/javascript" src="http://fox-gieg.com/js/jquery.min.js"> <script type="text/javascript" src="http://fox-gieg.com/js/jquery-ui.min.js"> <script type="text/javascript"> function setup{ $("#button1").click(button1Handler); $("#button2").click(button2Handler); $("#button3").click(button3Handler); }
 * 1) target{

function button1Handler{ $("#target").fadeOut("fast"); }

function button2Handler{ $("#target").fadeIn("fast"); }

function button3Handler{ $("#target").fadeOut("fast"); }

$(setup);

code