Skip to content

Instantly share code, notes, and snippets.

@jdevalk

jdevalk/snippet-test.html

Created March 20, 2014 21:32
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 jdevalk/9674351 to your computer and use it in GitHub Desktop.
Save jdevalk/9674351 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
snippet-test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript">
function showGTitle() {
var gText1 = document.getElementById('gtext1pete').value;
var gBold1 = document.getElementById('gbold1pete').value;
var gWords1 = gBold1.split(' ');
for(var gI1=0; gI1<gWords1.length; gI1++) {
g1Word1 = gWords1[gI1];
var gReg1 = new RegExp("("+g1Word1+")", "ig");
var gReg2 = "<b>$1<\/b>";
var gText1 = gText1.replace(gReg1, gReg2);
}
document.getElementById("gtitle1pete").innerHTML = gText1;
var e = document.getElementById('gtitle1pete');
if (0 > e.clientWidth - e.scrollWidth) {
alert("Overflow");
}
}
</script>
<style type="text/css">
.gtitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #1e0fbe;
white-space: nowrap;
text-overflow: ellipsis;
width: 512px;
display: block;
overflow: hidden;
}
.gurl {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #006621;
width: 510px;
margin-top: -4px;
}
.gdesc {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #545454;
width: 510px;
margin-top: -2px;
line-height: 18px;
}
</style>
<title></title>
</head>
<body>
<div>
<strong>Enter Your Full Title Text:</strong><br>
<input type="text" id="gtext1pete" style="width: 520px">
</div>
<div>
<strong>Enter Search Phrase (<em>optional</em>):</strong><br>
<input type="text" id="gbold1pete" style="width: 260px">
</div>
<div>
<input class="button" name="submit" type="submit" value="Cutts Me, Google!" style="font-size: 16px" onclick="showGTitle(); return false;">
</div>
<div style="width: 538px; margin: 24px 0 12px 0; padding: 12px; border: solid 2px #75d8ff; background-color: #ffffff">
<div class="gtitle" id="gtitle1pete">
I'm really happy for you, and <strong>Imma let you finish</strong>, but Beyonce has one of the best
</div>
<div class="gurl">
www.example.com/example
</div>
<div class="gdesc">
This is your page description. The font and size of the description has not changed in the latest redesign. Descriptions get cut off after roughly 160 characters <strong>...</strong>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment