Skip to content

Instantly share code, notes, and snippets.

@mayfer

mayfer/01_jquery.html

Created October 6, 2015 18:02
Show Gist options
  • Save mayfer/088219335a6e4c0eb880 to your computer and use it in GitHub Desktop.
Save mayfer/088219335a6e4c0eb880 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
01_jquery.html
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
body, html { padding: 0; margin: 0; }
.dot { width: 20px; height: 20px; border-radius: 50%; position: absolute; }
</style>
<script>
function randomColor() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgb(" + r + ", " + g + ", " + b + ")";
}
var tick = 0;
function handleClick(e) {
tick += 0.1;
console.log("Cliked!", e.pageX, e.pageY);
var scale = Math.sin(tick) + 1;
// create new div with class dot
var dot = $("<div>")
.addClass('dot')
.css({
backgroundColor: randomColor(),
top: e.pageY,
left: e.pageX,
transform: "scale(" + scale + ")",
})
.appendTo("body")
.fadeOut(10000);
}
$(document).on('mousemove', handleClick);
</script>
</head>
<body>
</body>
</html>
Raw
02_form.html
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
body, html { padding: 0; margin: 0; background: #23334B; color: #ddd; font-family: monospace; font-size: 14px; line-height: 25px; }
.main { width: 600px; margin: 100px auto; }
input {
background: rgba(255, 255, 255, 0.5);
padding: 10px;
border: none;
font-family: monospace;
font-size: 14px;
border-bottom: 1px solid #fff;
outline: none;
color: #fff;
text-shadow: 0 0 5px #024;
}
input[type="submit"] {
background: #000;
color: #fff;
cursor: pointer;
}
input[type="submit"]:hover {
background: #555;
}
.error {
background: #FFB100;
color: #341F09;
padding: 5px 20px;
opacity: 0;
margin-bottom: 5px;
}
::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.8); }
</style>
<script>
function error(text) {
$('.error').animate({
opacity: 1,
}, 200).text(text);
}
$(document).ready(function() {
$('form').on('submit', function(e) {
e.preventDefault();
if($("#want").prop("checked")) {
var username = $("#username").val();
if(username == "") {
error("you must have a name lol");
} else {
var matches = username.match(/^[\w]+$/)
if(matches == null) {
error("ur name sux");
}
}
} else {
error("you must really want to sign up to sign up");
}
});
});
</script>
</head>
<body>
<div class="main">
<div class="error">
a
</div>
<form>
<input type="text" id="username" name="username" placeholder="Username" />
<br />
<input type="password" name="password" placeholder="Password" />
<br />
<br />
<label>
<input type="checkbox" name="want" id="want" />
I want to sign up
</label>
<br />
<br />
<input type="submit" value="Sign up" />
</form>
</div>
</body>
</html>
Raw
03_bubble.html
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
body, html { padding: 0; margin: 0; background: #23334B; color: #ddd; font-family: monospace; font-size: 14px; line-height: 25px; }
.main { width: 600px; margin: 100px auto; }
.box { padding: 30px; min-height: 30px; }
.box:hover { outline: 3px solid #fff; }
.outer {
background: #f00;
}
.middle {
background: #0f0;
}
.inner {
background: #00f;
}
</style>
<script>
$(document).ready(function() {
$(document).on("click", function(e) {
console.log("aand this one is the document");
});
$(".box").on("click", function(e) {
console.log($(this).attr('class'));
});
$('.middle').on('click', function(e) {
e.stopPropagation();
});
});
</script>
</head>
<body>
<div class="main">
<div class="box outer">
<div class="box middle">
<div class="box inner">
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment