<select name="county"> <optgroup label="England"> <option>Bedfordshire</option> <option>Berkshire</option> <option>Bristol</option> <option>Buckinghamshire</option> <option>Cambridgeshire</option> <option>Cheshire</option> <option>City of London</option> <option>Cornwall</option> <option>Cumbria</option> <option>Derbyshire</option> <option>Devon</option> <option>Dorset</option> <option>Durham</option> <option>East Riding of Yorkshire</option> <option>East Sussex</option> <option>Essex</option> <option>Gloucestershire</option> <option>Greater London</option> <option>Greater Manchester</option> <option>Hampshire</option> <option>Herefordshire</option> <option>Hertfordshire</option> <option>Isle of Wight</option> <option>Kent</option> <option>Lancashire</option> <option>Leicestershire</option> <option>Lincolnshire</option> <option>Merseyside</option> <option>Norfolk</option> <option>North Yorkshire</option> <option>Northamptonshire</option> <option>Northumberland</option> <option>Nottinghamshire</option> <option>Oxfordshire</option> <option>Rutland</option> <option>Shropshire</option> <option>Somerset</option> <option>South Yorkshire</option> <option>Staffordshire</option> <option>Suffolk</option> <option>Surrey</option> <option>Tyne and Wear</option> <option>Warwickshire</option> <option>West Midlands</option> <option>West Sussex</option> <option>West Yorkshire</option> <option>Wiltshire</option> <option>Worcestershire</option> </optgroup> <optgroup label="Wales"> <option>Anglesey</option> <option>Brecknockshire</option> <option>Caernarfonshire</option> <option>Carmarthenshire</option> <option>Cardiganshire</option> <option>Denbighshire</option> <option>Flintshire</option> <option>Glamorgan</option> <option>Merioneth</option> <option>Monmouthshire</option> <option>Montgomeryshire</option> <option>Pembrokeshire</option> <option>Radnorshire</option> </optgroup> <optgroup label="Scotland"> <option>Aberdeenshire</option> <option>Angus</option> <option>Argyllshire</option> <option>Ayrshire</option> <option>Banffshire</option> <option>Berwickshire</option> <option>Buteshire</option> <option>Cromartyshire</option> <option>Caithness</option> <option>Clackmannanshire</option> <option>Dumfriesshire</option> <option>Dunbartonshire</option> <option>East Lothian</option> <option>Fife</option> <option>Inverness-shire</option> <option>Kincardineshire</option> <option>Kinross</option> <option>Kirkcudbrightshire</option> <option>Lanarkshire</option> <option>Midlothian</option> <option>Morayshire</option> <option>Nairnshire</option> <option>Orkney</option> <option>Peeblesshire</option> <option>Perthshire</option> <option>Renfrewshire</option> <option>Ross-shire</option> <option>Roxburghshire</option> <option>Selkirkshire</option> <option>Shetland</option> <option>Stirlingshire</option> <option>Sutherland</option> <option>West Lothian</option> <option>Wigtownshire</option> </optgroup> <optgroup label="Northern Ireland"> <option>Antrim</option> <option>Armagh</option> <option>Down</option> <option>Fermanagh</option> <option>Londonderry</option> <option>Tyrone</option> </optgroup> </select>
Tag Archive for html
HTML UK Counties Select Box
contact form
<form id="contact"> <fieldset> <legend> Get in touch now! </legend> <p> <label for="firstname">Name:</label> <input name="firstname" id="firstname"type="text"></input> </p> <p> <label for="email">Email:</label> <input type="text" name="email" id="email"></input> </p> <p> <label for="telephone">Telephone: (Optional)</label> <input type="text" name="telephone" id="telephone"></input> </p> </fieldset> <fieldset id="message_area"> <label for="message">Your message:</label> <textarea cols="32" rows="10" name="message" id="message"></textarea> </fieldset> <input class="submit" type="submit" value="Send us your message"/> </form>
New York Times Scrape to RSS
#!/usr/bin/perl -w
use strict;
use LWP::Simple;
use HTML::TreeBuilder;
use LWP::Parallel::UserAgent;
use WWW::Mechanize;
use XML::TreeBuilder;
use Getopt::Long;
use HTTP::Cookies;
use Encode;
my $username;
my $password;
my $feedurl;
GetOptions( "user=s" => $username,
"pass=s" => $password,
"url=s" => $feedurl
);
print STDERR "Getting login page...
";
my $cookiejar = HTTP::Cookies->new();
my $mech = WWW::Mechanize->new();
$mech->agent_alias('Linux Mozilla');
$mech->cookie_jar($cookiejar);
$mech->get("http://www.nytimes.com/auth/login");
my $loginresponse = $mech->submit_form(
form_name => 'login',
fields => {
USERID => $username,
PASSWORD => $password
}
);
unless ($loginresponse->is_success()) {
die("Error logging in!
");
}
print STDERR "Logged in successfully!
";
my $pua = LWP::Parallel::UserAgent->new();
$pua->cookie_jar($cookiejar);
$pua->redirect(1);
print STDERR "Getting XML...
";
my $xml = get($feedurl);
my $feed = XML::TreeBuilder->new();
$feed->parse($xml);
my %entries;
print STDERR "Grabbing links...
";
foreach my $item ($feed->look_down("_tag", "item")) {
my $link = $item->look_down("_tag", "link")->as_text();
$link =~ s/?.*//;
my $request = HTTP::Request->new();
print STDERR "Registering $link...
";
$request->uri($link,);
$request->method("GET");
$pua->register($request);
$entries{$link} = $item;
}
print STDERR "Downloading HTML...
";
my $html = $pua->wait();
foreach my $entry (values(%$html)) {
my $response = $entry->response();
my $url = $response->base()->as_string();
$url =~ s/?.*//;
print STDERR "Processing $url...
";
my $item = $entries{$url};
my $articlehtml = HTML::TreeBuilder->new_from_content(
decode_utf8($response->content())
);
if (my $redirelem = $articlehtml->look_down("_tag", "meta", "http-equiv", "refresh")) {
print STDERR "Interstitial ad detected, skipping...
";
my $newurl = $redirelem->attr_get_i("content");
($newurl) = ($newurl =~ m/url=(.*?)/);
$newurl = "http://www.nytimes.com" . $newurl;
print STDERR "Redirect URL is $newurl...
";
}
# Let's clean this up for Liferea, shall we?
my $messyelement;
foreach ($articlehtml->look_down("_tag", "div", "class", "enlargeThis")) {
$_->delete();
}
if ($messyelement = $articlehtml->look_down("_tag", "div", "class", "nextArticleLink")) {
$messyelement->delete();
}
my $description = $entries{$url}->look_down("_tag", "description");
$description->delete_content();
foreach ($articlehtml->look_down("_tag", "div", "class", "image")) {
$description->push_content($_->as_HTML());
}
if ($messyelement = $articlehtml->look_down("_tag", "div", "id", "articleInline")) {
$messyelement->delete();
}
my %pages;
my @pages;
my $pageua = LWP::Parallel::UserAgent->new();
$pageua->cookie_jar($cookiejar);
if (my $pageelem = $articlehtml->look_down("_tag", "div", "id", "pageLinks")) {
print STDERR "Multiple pages detected...
";
foreach ($pageelem->look_down("_tag", "a", "title", qr/^Page/)) {
my $pageurl = "http://www.nytimes.com" . $_->attr_get_i("href");
print STDERR "Registering $pageurl...
";
push(@pages, $pageurl);
my $pagerequest = HTTP::Request->new();
$pagerequest->uri($pageurl);
$pagerequest->method('GET');
$pageua->register($pagerequest);
}
print STDERR "Downloading pages...
";
$pageelem->delete();
}
foreach ($articlehtml->look_down("_tag", "div", "id", "articlebody")) {
$description->push_content($_->as_HTML());
}
my $htmlpages = $pageua->wait();
if ($htmlpages) {
print STDERR "Sorting pages...
";
foreach (values(%$htmlpages)) {
my $pageresponse = $_->response();
my $responseurl = $pageresponse->base()->as_string();
$pages{$responseurl} = $pageresponse;
}
foreach (@pages) {
print STDERR "Processing $_...
";
my $pagehtml = HTML::TreeBuilder->new_from_content(
decode_utf8($pages{$_}->content())
);
# Let's clean this up for Liferea, shall we?
if ($messyelement = $pagehtml->look_down("_tag", "div", "class", "enlargeThis")) {
$messyelement->delete();
}
if ($messyelement = $pagehtml->look_down("_tag", "div", "class", "nextArticleLink")) {
$messyelement->delete();
}
foreach ($pagehtml->look_down("_tag", "div", "class", "image")) {
$description->push_content($_->as_HTML());
}
if ($messyelement = $pagehtml->look_down("_tag", "div", "id", "articleInline")) {
$messyelement->delete();
}
if ($messyelement = $pagehtml->look_down("_tag", "div", "id", "pageLinks")) {
$messyelement->delete();
}
foreach ($pagehtml->look_down("_tag", "div", "id", "articlebody")) {
my $content = $_->as_HTML();
$content =~ s/(Page d+ of d+)//g;
$description->push_content($content);
}
}
}
}
print $feed->as_XML();
HTML Encoding
function escapeToHTML(str)
{
str = str.replace(/&/g, "&");
str = str.replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
return str;
}
function unescapeFromHTML(str)
{
str = str.replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
str = str.replace(/&/g, "&");
return str;
}
//escapes the string for use within a script tag or inline event handler (e.g., an onclick attribute)
//See <a href="http://code.google.com/p/doctype/wiki/ArticleXSSInJavaScript" >http://code.google.com/p/doctype/wiki/ArticleXSSInJavaScript</a>
function escapeToScript(str)
{
str = str.replace(//g, "\");
//prevent "escape from the quote" attacks by escaping quotes and line feed characters
str = str.replace(/u0009/ig, "t").replace(/u000A/ig, "n").replace(/u000D/ig, "r").replace(/u0085/ig, "u0085");
str = str.replace(/u2028/ig, "u2028").replace(/u2029/ig, "u2029");
str = str.replace(/'/g, "u0027").replace(/"/g, "u0022");
//prevent string from closing the tag
str = str.replace(/</g, "u003C").replace(/>/g, "u003E");
//these are escaped just in case ("defense-in-depth")
str = str.replace(/&/g, "u0026").replace(/=/g, "u003D");
return str;
}
//fixes un-escaped amphersands
function fixAmphersands(txt)
{
if(!txt) return "";
var newText = txt;
do
{
txt = newText;
//order matters here!
newText = newText.replace(/&#x(((([a-f0-9]|[^a-f0-9;])*)[^a-f0-9;](([a-f0-9]|[^a-f0-9;])*))*)(;|$)/ig, "&#x$1$7");
newText = newText.replace(/&#([0-9]|[^x0-9;]|$)(((([0-9]|[^0-9;])*)[^0-9;](([0-9]|[^0-9;])*))*)(;|$)/ig, "&#$1$2$8");
newText = newText.replace(/&([a-z0-9]|[^a-z0-9#;]|$)(((([a-z0-9]|[^a-z0-9;])*)[^a-z0-9;](([a-z0-9]|[^a-z0-9;])*))*)(;|$)/ig, "&$1$2$8");
}while(txt != newText)
//make sure entity names are valid
//see <a href="http://www.w3.org/TR/html401/sgml/entities.html" >http://www.w3.org/TR/html401/sgml/entities.html</a>
var validEntityNames = new RegExp("^("+
//markup-significant and internationalization characters
"quot|amp|lt|gt|OElig|oelig|Scaron|scaron|Yuml|circ|tilde|ensp|emsp|thinsp|zwnj|zwj|lrm|"+
"rlm|ndash|mdash|lsquo|rsquo|sbquo|ldquo|rdquo|bdquo|dagger|Dagger|permil|lsaquo|rsaquo|euro|"+
//ISO 8859-1 characters
"nbsp|iexcl|cent|pound|curren|yen|brvbar|sect|uml|copy|ordf|laquo|not|shy|reg|macr|deg|"+
"plusmn|sup2|sup3|acute|micro|para|middot|cedil|sup1|ordm|raquo|frac14|frac12|frac34|iquest|"+
"Agrave|Aacute|Acirc|Atilde|Auml|Aring|AElig|Ccedil|Egrave|Eacute|Ecirc|Euml|Igrave|Iacute|"+
"Icirc|Iuml|ETH|Ntilde|Ograve|Oacute|Ocirc|Otilde|Ouml|times|Oslash|Ugrave|Uacute|Ucirc|Uuml|"+
"Yacute|THORN|szlig|agrave|aacute|acirc|atilde|auml|aring|aelig|ccedil|egrave|eacute|ecirc|euml|"+
"igrave|iacute|icirc|iuml|eth|ntilde|ograve|oacute|ocirc|otilde|ouml|divide|oslash|ugrave|"+
"uacute|ucirc|uuml|yacute|thorn|yuml|"+
//symbols, mathematical symbols, and Greek letters
"fnof|Alpha|Beta|Gamma|Delta|Epsilon|Zeta|Eta|Theta|Iota|Kappa|Lambda|Mu|Nu|Xi|Omicron|Pi|"+
"Rho|Sigma|Tau|Upsilon|Phi|Chi|Psi|Omega|alpha|beta|gamma|delta|epsilon|zeta|eta|theta|iota|"+
"kappa|lambda|mu|nu|xi|omicron|pi|rho|sigmaf|sigma|tau|upsilon|phi|chi|psi|omega|thetasym|"+
"upsih|piv|bull|hellip|prime|Prime|oline|frasl|weierp|image|real|trade|alefsym|larr|uarr|rarr|"+
"darr|harr|crarr|lArr|uArr|rArr|dArr|hArr|forall|part|exist|empty|nabla|isin|notin|ni|prod|"+
"sum|minus|lowast|radic|prop|infin|ang|and|or|cap|cup|int|there4|sim|cong|asymp|ne|equiv|"+
"le|ge|sub|sup|nsub|sube|supe|oplus|otimes|perp|sdot|lceil|rceil|lfloor|rfloor|lang|rang|"+
"loz|spades|clubs|hearts|diams)$");
var mtch = txt.match(/&[a-z0-9]+;/ig);
var rxp;
for(var i=0; mtch && i<mtch.length; i++)
{
if(!validEntityNames.test(mtch[i].slice(1,mtch[i].length-1)))
{
//escape the amphersand
rxp = new RegExp(mtch[i], "g");
txt = txt.replace(rxp, "&"+mtch[i].slice(1));
}
}
return txt;
}
//Sometimes, setting an element attribute (e.g., title) with javascript automatically escapes all amphersands in the
// string, apparently to be "helpful". It also does this when creating a text node with document.createTextNode.
//This function gets around this by setting innerHTML on a temporary element and returning the text node's value.
function literalText(str)
{
var tmp = document.createElement("div");
tmp.innerHTML = str;
return (tmp.firstChild ? tmp.firstChild.nodeValue : "");
}
Lorem Ipsum Filler Text
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed sed enim. Suspendisse eleifend tellus vitae tortor. Aliquam at nisl non velit malesuada facilisis. Nunc adipiscing lacinia nibh. Sed tincidunt tellus in lectus. Nunc mattis aliquam odio. Quisque scelerisque felis at purus. Phasellus vel nunc a eros tristique faucibus. In luctus eros vulputate sapien. Praesent auctor. Aliquam scelerisque erat in metus rutrum euismod. Nulla ut enim. Curabitur sit amet metus non eros molestie vulputate. Morbi dui velit, tempor et, rutrum sed, elementum quis, purus. Quisque a pede ac erat hendrerit venenatis. Nulla nibh urna, consectetuer eget, luctus non, accumsan eget, orci. In quis pede. Ut tincidunt, risus non adipiscing venenatis, libero massa mattis velit, a mattis justo velit mollis felis. Nulla neque. Suspendisse ut magna. Nam felis nibh, consectetuer in, aliquet ac, venenatis quis, justo. Duis in nulla ac ante imperdiet feugiat. Nullam pede. Curabitur commodo leo ut lectus. Duis nonummy, risus quis vehicula convallis, ipsum lorem ultrices orci, a imperdiet nisi justo eget magna. Etiam tristique ultricies purus. Etiam non mauris. Sed sodales. In hac habitasse platea dictumst. Duis in nisl. Vestibulum at lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas lacinia. Cras condimentum, turpis at pulvinar mollis, velit turpis vestibulum purus, vel aliquet mi lorem non mauris. Vivamus rhoncus facilisis diam. Vestibulum condimentum nulla ut orci. Vivamus ultricies, nibh ut faucibus pulvinar, urna lorem hendrerit nulla, ac vehicula pede ante eget magna. Suspendisse gravida commodo tortor. Donec justo. Donec at lacus non odio volutpat porttitor. In hac habitasse platea dictumst. Phasellus pretium nulla. Suspendisse ut diam. Integer convallis, quam at vulputate pellentesque, diam dolor cursus leo, non tristique tellus massa at sapien. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce suscipit leo a nulla. Maecenas pellentesque sapien eget arcu. Donec mattis, nisl vestibulum condimentum sodales, quam urna venenatis nibh, a venenatis dolor orci eget enim. Donec condimentum, nulla eu consectetuer rhoncus, nisi purus dictum eros, eget tincidunt orci metus et purus. Proin venenatis ante et nibh. Vivamus fermentum. Nulla facilisi. Maecenas vitae lorem eget nisi blandit consequat. Nam ac nisi. Pellentesque rutrum lorem at ipsum feugiat tincidunt. Ut quis erat. Nam augue. Donec interdum orci nec quam. Pellentesque tortor urna, consequat elementum, consequat fringilla, rhoncus quis, eros. Aliquam quam. Sed vel ligula. Proin consectetuer facilisis justo. Vivamus vel lorem a ipsum venenatis ullamcorper. In magna diam, egestas ac, scelerisque ut, convallis eget, mauris. Praesent sapien eros, congue in, euismod et, pellentesque at, sem. Nullam semper eleifend ligula. Morbi ligula. Nam sit amet velit. Sed eget dui. Maecenas et felis. Sed augue ipsum, tincidunt viverra, semper vel, dapibus non, est. Morbi in augue sed turpis vehicula pretium. Nulla vitae lorem. Donec sit amet sapien sed risus dictum mollis. Duis vel enim ut ligula laoreet semper. Aenean tempor velit at felis. Integer eu nisl a ligula tempor aliquet.
CSS Drop Shadow
****************
***** CSS ******
****************
.dropShadow {
position:relative;
z-index:1;
}
/*border boxes; inside-->outside*/
.dropShadow .drop1, .dropShadow .drop2, .dropShadow .drop3,
.dropShadow .drop4, .dropShadow .drop5 {
position:absolute;
right:0;
bottom:0;
width:100%;
height:100%;
}
.dropShadow .drop1 { opacity:0.5; }
.dropShadow .drop2 { opacity:0.4; }
.dropShadow .drop3 { opacity:0.3; }
.dropShadow .drop4 { opacity:0.2; }
.dropShadow .drop5 { opacity:0.1; }
.dropShadow.dropBR .drop1, .dropShadow.dropBR .drop2, .dropShadow.dropBR .drop3,
.dropShadow.dropBR .drop4, .dropShadow.dropBR .drop5 {
top:0; left:0; /*shadow positioned bottom-right*/
}
.dropShadow.dropBL .drop1, .dropShadow.dropBL .drop2, .dropShadow.dropBL .drop3,
.dropShadow.dropBL .drop4, .dropShadow.dropBL .drop5 {
top:0; left:-16px; /*shadow positioned bottom-left*/
}
.dropShadow.dropTR .drop1, .dropShadow.dropTR .drop2, .dropShadow.dropTR .drop3,
.dropShadow.dropTR .drop4, .dropShadow.dropTR .drop5 {
top:-16px; left:0; /*shadow positioned top-right*/
}
.dropShadow.dropTL .drop1, .dropShadow.dropTL .drop2, .dropShadow.dropTL .drop3,
.dropShadow.dropTL .drop4, .dropShadow.dropTL .drop5 {
top:-16px; left:-16px; /*shadow positioned top-left*/
}
/*top & bottom borders*/
.dropShadow .drop1 div, .dropShadow .drop2 div, .dropShadow .drop3 div,
.dropShadow .drop4 div, .dropShadow .drop5 div {
position:absolute;
top:8px; right:0; bottom:0; left:8px;
border-style:solid;
border-color:#999999;
}
.dropShadow .drop1 div { margin:7px -1px -1px 7px; border-width:1px 0 1px 0; background-color:#999999; }
.dropShadow .drop2 div { margin:6px -2px -2px 6px; border-width:1px 0 1px 0; }
.dropShadow .drop3 div { margin:4px -4px -4px 4px; border-width:2px 0 2px 0; }
.dropShadow .drop4 div { margin:2px -6px -6px 2px; border-width:2px 0 2px 0; }
.dropShadow .drop5 div { margin:0 -8px -8px 0; border-width:2px 0 2px 0; }
/*left & right borders*/
.dropShadow .drop1 div div, .dropShadow .drop2 div div, .dropShadow .drop3 div div,
.dropShadow .drop4 div div, .dropShadow .drop5 div div {
position:absolute;
top:0; right:0; bottom:0; left:0;
margin:0;
}
.dropShadow .drop1 div div { border-width:0 1px 0 1px; }
.dropShadow .drop2 div div { border-width:0 1px 0 1px; }
.dropShadow .drop3 div div { border-width:0 2px 0 2px; }
.dropShadow .drop4 div div { border-width:0 2px 0 2px; }
.dropShadow .drop5 div div { border-width:0 2px 0 2px; }
/*content being shadowed*/
.dropShadow .dropContent {
position:relative;
z-index:1;
background-color:white;
}
****************
***** HTML *****
****************
<div class="dropShadow dropBR" style="float:left; position:absolute;">
<div class="drop1"><div><div></div></div></div>
<div class="drop2"><div><div></div></div></div>
<div class="drop3"><div><div></div></div></div>
<div class="drop4"><div><div></div></div></div>
<div class="drop5"><div><div></div></div></div>
<div class="dropContent" style="border:1px solid black; padding:2px;">
<img src="birdhouse4.gif">
</div>
</div>
div with id and class
<div id="${1:${2:enumerate}}" class="${3:some_name}">
${0:$TM_SELECTED_TEXT}
</div> <!-- end ${1} -->
inset div
<div id="${1:${2:enumerate}}">
${0:$TM_SELECTED_TEXT}
</div> <!-- end ${1} -->
insert slick div
<div id="${1:${2:enumerate}}">
${0:$TM_SELECTED_TEXT}
</div> <!-- end ${1} -->