Public
snipts » html 
showing 1-20 of 132 snipts for html
-
∞ Button to launch X-ray popup
<a href="#" style="background-color: rgba(23,110,107,.3); color: #000; text-decoration: none;" onClick="myRef = window.open('http://poynterextra.org/xray/roy_AppForThat','xraywindow','left=20,top=20,width=900,height=500,toolbar=0,scrollbars=1');myRef.focus()">See the X-ray reading by Roy Peter Clark</a>
-
∞ html include
<script src="/js/jquery.min.js" type="text/javascript"></script> <script src="/js/ajaxupload.js" type="text/javascript"></script>
-
∞ for Dave
Modify your travel.html to have this: <img class="right" src="images/bostonoverview.jpg" width="300" height="400" alt="a pictue i took of Boston from the highest building" /> Add this to style.css: img.right { float: right; margin: 0 0 10px 10px; } -
∞ Starter Doc
<!doctype html> <html> <head> <title>New</title> <link rel="stylesheet" href="css.css" type="text/css" media="all" /> </head> <body> <div id="page-wrap"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> </script> </body> </html>
-
∞ Stupid HTML
<tr> <td valign="top"> </td> <td> </td> <td> </td> <td> </td> </tr>
-
∞ Cargador de pagina
<head> <script type="text/javascript"> <!-- function ocultarcargador() { c = document.getElementById('cargador'); c.className="esconder"; } --> </script> </head> <style> #cargador { position:absolute; top:0px; left:0px; width:100%; height:100%; padding:5px; background-color:white; } .esconder {display:none;} </style> <body onload="ocultarcargador();"> <div id="cargador"> Cargando... </div> <!--Aquí empieza el resto de tu contenido... --> </body>
-
∞ Issue with vertical-align. temporarily using propietary browser elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> #wrapper { display:inline; vertical-align:middle; width:100%; height:100%; } #container { margin:auto; height:465px; width:960px; -moz-box-shadow:0 1px 10px #777; -moz-border-radius:10px; } </style> </head> <body> <div id="wrapper"> <div id="container"> </div> </div> </body> </html>
-
∞ jQuery HTML template
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Lektion 7</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ }); </script> </head> <body> <h1 id="ueberschrift"></h1> </body> </html>
-
∞ basic 960-based wireframe
<div id="wrapper" class="container_12"> <div id="header" class="grid_12"></div> <!-- END #header --> <div id="nav" class="grid_12"></div> <!-- END #nav --> <div id="main"> <div class="grid_3"></div> <div class="grid_3"></div> <div class="grid_3"></div> <div class="grid_3"></div> <div class="clear"</div> </div> <!-- END #main <div id="footer" class="grid_12"></div> <div class="clear"</div> </div> <!-- END #wrapper -->
-
∞ messy definition lists
This is messy: <dl> <dt>Title</dt> <dd>Data</dd> <dt>Title</dt> <dd>Data</dd> <dt>Title</dt> <dd>Data</dd> </dl> This makes more sense to my brain: <dl> <di> <dt>Title</dt> <dd>Data</dd> </di> <di> <dt>Title</dt> <dd>Data</dd> </di> <di> <dt>Title</dt> <dd>Data</dd> </di> </dl>
-
∞ Google Analytics Tracking Script for Sub-Domains
<script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-XXXXX-XX"); pageTracker._setDomainName(".DOMAIN.com"); pageTracker._trackPageview(); } catch(err) { } </script>
-
∞ Encode a string with accents, euro and spanish, catalan and french symbols from ascii to html
<?php function a2h($string) { $vocals = array("à","è","ì","ò","ù","À","È","Ì","Ò","Ù","á","é","í","ó","ú","Á","É","Í","Ó","Ú","ä","ë","ï","ö","ü","Ä","Ë","Ï","Ö","Ü","â","ê","î","ô","û","Â","Ê","Î","Ô","Û"); $vocalshtml = array("à","è","ì","ò","ù","À","È","Ì","Ò","Ù","á","é","í","ó","ú","Á","É","Í","Ó","Ú","ä","ë","ï","ö","ü","Ä","Ë","Ï","Ö","Ü","â","ê","î","ô","û","Â","Ê","Î","Ô","Û"); $simbols = array("'",'"',"?€","ç","Ç","ñ","Ñ"); $simbolshtml = array("'",""","€","ç","Ç","ñ","Ñ"); $string = str_replace($vocals,$vocalshtml,$string); $string = str_replace($simbols,$simbolshtml,$string); return $string; } ?>
-
∞ Sed script to extract links from a HTML page
#! /bin/sed -nf # Join lines if we have tags that span multiple lines :join /<[^>]*$/ { N; s/[ *]\n[ *]/ /; b join; } # Do some selection to speed the thing up /<[ ]*\([aA]\|[iI][mM][gG]\)/!b # Remove extra spaces before/after the tag name, change img/area to a s/<[ ]*\([aA]\|[iI][mM][gG]|[aA][rR][eE][aA]\)[ ]\+/<a /g # To simplify the regexps that follow, change href/alt to lowercase # and replace whitespace before them with a single space s/<a\([^>]*\)[ ][hH][rR][eE][fF]=/<a\1 href=/g s/<a\([^>]*\)[ ][aA][lL][tT]=/<a\1 alt=/g # To simplify the regexps that follow, quote the arguments to href and alt s/href=\([^" >]\+\)/href="\1"/g s/alt=\([^" >]\+\)/alt="\1"/g # Move the alt tag after href, remove attributes between them s/\( alt="[^"]*"\)[^>]*\( href="[^"]*"\)/\2\1/g # Remove attributes between <a and href s/<a[^>]* href="/<a href="/g # Change href="xxx" ... alt="yyy" to href="xxx|yyy" s/\(<a href="[^"]*\)"[^>]* alt="\([^"]*"\)/\1|\2/g t loop # Print an URL, remove it, and loop :loop h s/.*<a href="\([^"]*\)".*$/\1/p g s/\(.*\)<a href="\([^"]*\)".*$/\1/ t loop
-
∞ Optimize Meta Tags
//http://webnet77.com/webstuff/optimize.html Title The title of the web page is perhaps the most important of all meta tags <title>Laugh until you cry</title> Keywords <meta name="keywords" content="free, webmaster, resources, articles, tools, tutorials, reviews, graphics, scripts, download, CIW, freeware"> Description <meta name="description" content="If you want to laugh till you cry, Click here. This stuff is really funny!"> The page description should be less than 100 words Author The name of the person who authored the page <meta name="author" content="Emory Rowland"> Email The contact person's e-mail address. Don't put this in unless you want SPAM! <link rev="made" href="nospam@mydomain.com"> Copyright The copyright year and the name <meta name="copyright" content="2002 by Laughter"> Revisit How often to tell the spiders to come back <meta name="revisit-after" content="14 days"> Refresh This field must contain a URL that refers the page to another link in a specified number of seconds <meta http-equiv="refresh" content="120; url=http://www.killer-laughter.com"> Expires The date when the content expires <meta http-equiv="expires" content="Wed, 39 Jan 2004 26:29:02 GMT"> Distribution Global – Used for major entry points Local – Used for local entry points <meta name="distribution" content="global"> Robot Web spiders can be restricted using the following Robot meta tags. Recommend you do not use these but your a robots.txt file instead.: All – Robots may traverse and index the page No Index – Robots may traverse but not index the page No Follow – Robots may index the page but not follow it None – Robots may neither index nor traverse the page <meta name="robots" content="nofollow"> Rating General 14 Years Mature Restricted <meta name="rating" content="14 years"> Character set The most common character set is ISO-8859-1 The following is a rough list of the languages contained in the ISO 8859 series ISO-8859-1 – Western Europe and Americas: Afrikaans, Basque, Catalan, Danish, Dutch, English, Faeroese, Finnish, French, Galician, German, Icelandic, Irish, Italian, Norwegian, Portuguese, Spanish and Swedish ISO-8859-2 – Latin-written Slavic and Central European languages ISO-8859-3 – Esperanto, Galician, Maltese, and Turkish ISO-8859-4 – Scandinavia/Baltic ISO-8859-5 – Cyrillic ISO-8859-6 – Arabic ISO-8859-7 – Modern Greek ISO-8859-8 – Hebrew ISO-8859-9 – Western Europe and Americas: Afrikaans, Basque, Catalan, Danish, Dutch, English, Faeroese, Finnish, French, Galician, German, Turkish, Irish, Italian, Norwegian, Portuguese, Spanish and Swedish UTF-8 - Unicode <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> Language Choose a language or add another under Other in Front Page (or whatever you use) <meta http-equiv="content-language" content="en-us"> Page caching Browsers cache pages by default Select the No-Cache option to stop caching of your page <meta http-equiv="pragma" content="no-cache"> Generator The name of the program used to create your web page <meta name="generator" content="Home brew 1.0.0"> Window Target Useful for preventing page framing <meta http-equiv="window-target" content="_top"> Abstract A brief summary of the description meta tag, under 100 words <meta name="abstract" content="Viewpoints, Tools, and Content for Webmasters"> Comments Comments are not actually meta tags Some search engines have used them instead of meta tags You may also want to add a comment as a self note. <!--bla bla bal Remember to buy bread-->
-
∞ FancyBox simple complete
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>FancyBox</title> <link rel="stylesheet" type="text/css" href="http://summerjournalism.com/js/jquery.fancybox/jquery.fancybox.css" media="screen" /> <script type="text/javascript" src="http://summerjournalism.com/js/jquery.fancybox/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://summerjournalism.com/js/jquery.fancybox/jquery.easing.1.3.js"></script> <script type="text/javascript" src="http://summerjournalism.com/js/jquery.fancybox/jquery.fancybox-1.2.1.pack.js"></script> <script type="text/javascript"> $(document).ready(function() { $("a.modal").fancybox(); }); </script> </head> <body> <p>Copy the FancyBox download folder to /js/ to make your paths look just like here but with your domain.</p> <a class="modal" title="Khan!!!!!!" href="http://farm4.static.flickr.com/3499/3978441001_d441c9e746.jpg"><img src="http://farm4.static.flickr.com/3499/3978441001_d441c9e746_m.jpg" /></a> <p>You also can have plain text <a class="modal" title="Khan!!!!!!" href="http://farm4.static.flickr.com/3499/3978441001_d441c9e746.jpg">launch anything in a modal</a>.</p> </body> </html>
-
∞ Remove IE image toolbar
<meta http-equiv="imagetoolbar" content="no" />
-
∞ HTML5 Basic
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> </head> <body> <body> </html>
-
∞ Interesting approach to IE specific style sheets.
<html> <body> <!--[if IE 6]> <div class="ie6"> <![endif]--> <!--[if IE 7]> <div class="ie7"> <![endif]--> <!--[if IE 8]> <div class="ie8"> <![endif]--> Content. <!--[if IE]> </div> <![endif]--> </body> </html>
-
∞ Simple show/hide for articles
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>show and hide demo</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3.2"); google.setOnLoadCallback(function() { $(".article-body").hide(); $(".article span").click(function(){ $(this).next("div").slideToggle("slow"); if ($(this).text() == "(more)") { $(this).text("(less)"); } else { $(this).text("(more)"); } }); }); </script> </head> <body> <div class="article"> <p class="article-excerpt">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <span>(more)</span> <div class="article-body"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <!-- CLOSE .article-body --> </div> <!-- CLOSE .article --> </body> </html>
-
∞ Page redirect in PHP, HTML and JavaScript
# Page redirect in PHP header("Location: http://www.google.com/"); # Page redirect in HTML (wait for 5 seconds) <meta http-equiv="Refresh" content="5; url=http://www.google.com/"> # Page redirect in JavaScript (wait for 5 seconds) function redirect() { location.href = "http://www.google.com/"; } setTimeout("redirect()", 5000);
HTML, XHTML, and CSS