Skip to content

Instantly share code, notes, and snippets.

@sax1johno

sax1johno/YXpBqe.markdown

Created May 27, 2015 17:07
Show Gist options
  • Save sax1johno/e4d90dde23b8534d57f3 to your computer and use it in GitHub Desktop.
Save sax1johno/e4d90dde23b8534d57f3 to your computer and use it in GitHub Desktop.
Download ZIP
YXpBqe
Raw
index.html
<html>
<head>
</head>
<body>
<h1 id="title">Test here</h1>
<ul>
<li class="listItem">Item 1</li>
<li class="listItem">Item 2</li>
<li class="listItem">Item 3</li>
</ul>
<span>The current time is </span>
<span class="timer"></span>
<div id="progressbar"></div>
<br />
<button id="run">run</button>
<form action="/">
<input type="text" />
<input type="text" />
<input type="hidden" value="5" name="id" />
<input type="submit" />
</form>
</body>
</html>
Raw
script.js
var green = false;
$(document).ready(function() {
$("#title").text("Hello, John");
$( "#progressbar" ).progressbar({
value: 37
});
$("#run").click(function(e) {
// $("#title").fadeToggle();
$("#title").toggleClass("green", green);
$("#title").toggleClass("red", !green);
green = !green;
});
/* setTimeout(function() {
$("#title").css("color", "green");
}, 5000);
*/
setInterval(function() {
$(".timer").text(new Date());
}, 500);
});
Raw
style.css
#title {
font-size: 1.25em;
font-weight: bold;
color: red;
text-decoration: underline;
}
#title.green {
color: green;
transition: color 200ms;
}
#title.red {
color: red;
transition: color 200ms, transform 1s;
-webkit-transition: color 200ms, transform 1s;
}
#title:hover {
width: 200px;
height: 1.25em;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
Raw
YXpBqe.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment