Skip to content

Instantly share code, notes, and snippets.

@jbu

jbu/ex1.html

Created August 22, 2012 07:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jbu/3423465 to your computer and use it in GitHub Desktop.
Save jbu/3423465 to your computer and use it in GitHub Desktop.
Download ZIP
jquery example for class
Raw
ex1.html
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>jQuery Fun.</title>
<style>
.colourBox {
display: inline;
height: 50px;
border-color: black;
border-style: solid ;
margin: 5px;
padding: 8px;
}
.colourTarget {
width: 100px;
height: 50px;
border-color: black;
border-style: solid ;
margin: 5px;
padding: 8px;
}
</style>
<script>
$(document).ready(function(){
// link up functions to move the ball
// when clicked.
$("#ball").toggle(function() {
$(this).animate({ top: 200 }, 1000);
},function() {
$(this).animate({ top: 0 }, 500);
});
// link up handlers to button. Show or hide
// the ball
$("#myButton").click(function(){
if ($('#ball').css('display') == 'none') {
$('#ball').show("slow");
} else {
$('#ball').hide("slow");
}
});
$(".colourBox").hover(function(){
var $c = $(this).css('background-color');
console.log('here '+$c);
$('.colourTarget').css('background-color', $c);
}, function(){});
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-theme="a" data-role="header" data-position="fixed">
<h3>
jQuery Playground
</h3>
</div>
<div data-role="content" style="padding: 15px">
<div style="height: 300px">
<img id="ball" style="width: 100px; height: 100px; position: relative;"
src="http://3.bp.blogspot.com/-Pn8Zka9VL_s/Td9YkLdXlsI/AAAAAAAACrc/Z1Bq9qvWskk/s1600/Soccer+Ball+wallpaper3.jpeg"/>
</div>
<button id="myButton">
Toggle ball
</button>
<br/>
<div class="colourBox" style="background-color: red">0</div>
<div class="colourBox" style="background-color: green">1</div>
<div class="colourBox" style="background-color: blue">2</div>
<div class="colourBox" style="background-color: yellow">3</div>
<br/><p>
<div class="colourTarget">Target</div></p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment