Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

first try but I want to save this lest i go back. #2

Open
wants to merge 15 commits into
base: gh-pages
Choose a base branch
from
Open

first try but I want to save this lest i go back. #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
c108896
first try but I want to save this lest i go back.
Ameliawb Sep 22, 2014
64f6289
ok throwing it all away
Ameliawb Sep 22, 2014
d99a5f9
trying to learn jquery
Ameliawb Sep 24, 2014
8a6f845
hum...not working...
Ameliawb Sep 24, 2014
11f8647
hum2
Ameliawb Sep 24, 2014
0dfb9a3
not working :(
Ameliawb Sep 25, 2014
129aea9
still won't work what am i doing wrong/
Ameliawb Sep 25, 2014
3c9f8df
okhum
Ameliawb Sep 25, 2014
052979a
omg I'm so deep, i got it to partly work
Ameliawb Sep 25, 2014
43677d0
Ok shaping up, its silly but I like it.
Ameliawb Sep 25, 2014
8e1c1e8
ok I think this is good.
Ameliawb Sep 25, 2014
19ba3aa
gonna change it want to save this...
Ameliawb Sep 25, 2014
6f3099f
Final Homework ITS DONE!
Ameliawb Sep 25, 2014
5d693dd
ok changed opacity and made reset work properly
Ameliawb Sep 25, 2014
dbbc045
tiny tweaks
Ameliawb Sep 25, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions iconomation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
body {
background-image: url("paper.jpg");
}
box {
position: relative;}
#green {
background: #d6ef39;
height: 165px;
width: 165px;
margin: 10px;
position: relative;
}
#blue {
background: #00a5c6;
height: 165px;
width: 165px;
margin: 10px;
position: relative;
}
#red {
background: #ce007b;
height: 165px;
width: 165px;
margin: 10px;
position: relative;
}
63 changes: 63 additions & 0 deletions iconomation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
$(document).ready(function() {
$(".button").click(function() {
$("#green").animate({
height: "300px"
});
$("#blue").animate({
height: "400px"
});
$("#red").animate({
height: "500px"
});
});
$(".button2").click(function() {
$(".box").animate({
height: '50px',
width: '300px'
});
});

$(".button3").click(function() {
$("#green").animate({
width: "500px"
});
$("#blue").animate({
width: "600px"
});
$("#red").animate({
width: "700px"
});
});
$(".button4").click(function() {
$(".box").animate({
height: '300px',
width: '50px'
});
});
$(".button6").click(function() {
$('.box').removeAttr('style');
});
$(".button5").click(function() {
$(".box").css({ opacity: 0.8 });
var h = $(window).height();
var w = $(window).width();
$('.box').each(function() {
var originalOffset = $(this).position(),
$this = $(this),
tLeft = w - Math.floor(Math.random() * 900),
tTop = h - Math.floor(Math.random() * 900);

$(this).animate({
"left": tLeft,
"top": tTop
}, 3000, function() {
$this.animate({
"left": originalOffset.left,
"top": originalOffset.top+50
}, 5000);
});
});
});
});


51 changes: 24 additions & 27 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>So-and-so's Iconomation Assignment</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="http://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<style>
body {
text-align: center;
}
.playspace {
width: 600px;
height: 400px;
margin: auto;
position: relative;
border: 3px solid green;
}
i {
position: absolute;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="scripts/jquery-ui.min.js"></script>
</head>

<head>

<body>
<h1>Play Chicken!</h1>
<div class="playspace"></div>
<p><em>refresh to see it again</em></p>
<script src="scripts/iconomation.js"></script>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src= "iconomation.js"></script>
<title>Amelia's Iconomation Assignment</title>

<link rel="stylesheet" type="text/css" href="iconomation.css">

<button class="button">Tall</button>
<button class="button2">Short</button>
<button class="button3">Wide</button>
<button class="button4">Narrow</button>
<button class="button5">Animate!</button>
<button class="button6">reset</button>
<div class="box" id="green">
</div>
<div class="box" id="blue">
</div>
<div class="box" id="red">

</div>
</body>
</head>
</html>
Binary file added paper.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 11 additions & 31 deletions scripts/iconomation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,11 @@
// add icons
$('.playspace').append('<i class="em em-rooster"></i>');
$('.playspace').append('<i class="fa fa-futbol-o"></i>');


// set the initial positions

$('.em-rooster').css({
top: 200,
left: 300
});

$('.fa-futbol-o').css({
top: 210,
left: 100
});


// play!

$('.em-rooster').animate({
left: 50
}, 1000);

// after 660ms...
setTimeout(function() {
// ...move the ball
$('.fa-futbol-o').animate({
left: 0
}, 800, 'easeOutQuart');
}, 660);
$(document).ready(function() {
$(".button").click(function() {
$(".box").animate({
height: "400px"
});
});
$(".button2").click(function() {
$(".box").animate({
height: "50px"
});
});