Skip to content

Instantly share code, notes, and snippets.

@debloper

debloper/snapChrome.html

Created August 9, 2011 15:31
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save debloper/1134367 to your computer and use it in GitHub Desktop.
Save debloper/1134367 to your computer and use it in GitHub Desktop.
Download ZIP
Here's a li'l bit of HTML, CSS & JS - it hangs chrome irrecoverably; can you work out WHY? ;) B)
Raw
snapChrome.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TRex - Let's Back Tweets Up</title>
<style>
body { background: #eee; }
form {
width: 640px; margin: auto; padding: 24px; display: table;
background: #f8f8f8; border: 1px ridge #ccc; border-radius: 5px;
color: #369; font: 20px/32px Verdana, Geneva, sans-serif;
}
label {
width: 550px; margin: 12px; padding: 8px 32px;
float: left; display: table-cell; vertical-align: middle;
border: 1px solid #eee; border-radius: 5px;
text-shadow: 0 0 2px #ccc;
}
label:hover, label.hasValue:hover {
color: #fff; cursor: pointer;
box-shadow: 5px 5px 20px #ccc;
background: #69c; border: 1px solid #69c;
background: linear-gradient(top, #ace, #69c);
background: -o-linear-gradient(top, #ace, #69c);
background: -ms-linear-gradient(top, #ace, #69c);
background: -moz-linear-gradient(top, #ace, #69c);
background: -webkit-linear-gradient(top, #ace, #69c);
}
label.hasValue {
color: #fff; text-shadow: 0 0 2px #999, 0 0 5px #eee;
box-shadow: 0 0 5px #999;
background: #0c6; border: 1px solid #0c6;
background: linear-gradient(top, #aec, #0c6);
background: -o-linear-gradient(top, #aec, #0c6);
background: -ms-linear-gradient(top, #aec, #0c6);
background: -moz-linear-gradient(top, #aec, #0c6);
background: -webkit-linear-gradient(top, #aec, #0c6);
}
input {
float: right;
color: #666; font: 20px/24px Verdana, Geneva, sans-serif;
}
input[type="checkbox"] { display: none; }
input[type="submit"] { color: #333; margin: 12px; padding: 8px 24px; }
</style>
<script>
function updateClass(element) {
if (element.getAttribute("type") == "checkbox" &&
element.parentNode.className.toString() == "hasValue") {
element.parentNode.className -= "hasValue";
} else if (element.value != "") {
element.parentNode.className = "hasValue";
} else { element.parentNode.className -= "hasValue"; }
}
function renderElement(element, actions) {
for ( i=0; i<actions.length; i++ ) {
element.setAttribute(actions[i], "updateClass(this);");
}
}
function appendListeners() {
var inputs = document.getElementsByTagName("input");
var count = inputs.length;
for ( i=0; i<count; i++ ) {
eventList = ["onChange","onKeyUp","onBlur"];
renderElement(inputs.item(i), eventList);
}
}
</script>
</head>
<body onLoad="appendListeners();">
<form id="inputForm" method="get" target="_blank" action="https://api.twitter.com/1/statuses/user_timeline.json">
<label>Twitter Handle<input type="text" id="screen_name" name="screen_name" /></label>
<label>Tweets Per Page of Timeline<input type="number" name="count" max="200" step="1" size="4" /></label>
<label>Page Number of the Timeline<input type="number" name="page" max="3200" step="1" size="4" /></label>
<label style="width: 230px;">Include Retweets<input type="checkbox" name="include_rts" value="1" /></label>
<label style="width: 230px;">Include Tweet Entities<input type="checkbox" name="include_entities" value="1" /></label>
<label style="width: 230px;">Exclude Replies<input type="checkbox" name="exclude_replies" value="1" /></label>
<label style="width: 230px;">Discard User Info<input type="checkbox" name="trim_user" value="1" /></label>
<label>Contributor Details for Shared Twitter Accounts<input type="checkbox" name="contributor_details" value="1" /></label>
<input type="submit" value="Fetch Tweets" />
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment