IMPORTANT!

Snipt is going open source. We've toyed with this idea for quite a while, and have finally decided it's the right way to move forward.

A few things:
  • The entire Snipt source code will be released on GitHub under the 3-clause BSD License on Friday, September 10th.
  • While we'd like to think we're perfect, we realize we're only human. By open sourcing the software that runs this website, certain bugs or security flaws may be discovered that could compromise the privacy of your snipts.
  • Only the Lion Burger team will be able to push commits to the Snipt.net site. Contributors should send a pull request to add new features or submit patches.
  • By using this site, you agree not to be too angry or take any legal action against Lion Burger should this whole thing go up in flames some day.
  • Follow us on Twitter for updates.
I agree, close this message
Sign up to create your own snipts, or login.

Latest 100 public snipts » html The latest public html snipts.

showing 1-20 of 177 snipts for html
  • ∞ php in html via .htaccess 
    AddType application/x-httpd-php .php .htm .html

    copy | embed

    0 comments - tagged in  posted by dobersby on Sep 02, 2010 at 5:09 a.m. EDT
  • ∞ fs 
    <html>
<body>test
</body>
</html>

    copy | embed

    0 comments - tagged in  posted by kungkk on Aug 31, 2010 at 9:08 p.m. EDT
  • ∞ HTML Strict Doctype 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    copy | embed

    0 comments - tagged in  posted by davidev on Aug 31, 2010 at 11:04 a.m. EDT
  • ∞ HTML Transitional Doctype 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    copy | embed

    0 comments - tagged in  posted by davidev on Aug 31, 2010 at 11:00 a.m. EDT
  • ∞ html5 template 
    <!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="utf-8" /> 
		<title>untitled</title> 
	</head> 
	<body> 
		
 
	</body> 
</html>

    copy | embed

    0 comments - tagged in  posted by diskostu on Aug 31, 2010 at 8:44 a.m. EDT
  • ∞ better tip calculator demo 
    <!-- This is a demo for Firefox. There is no error trapping. Forgive me.-->
<html>
<head>
	<title>Tip Calculator</title>
	<script type="text/javascript">
		function addit() {
			var bill = document.getElementById('bill');
			var tip_pct = document.getElementById('pct');
			var tip = bill.value * ( tip_pct.value / 100 );
			// bill.value is actually a string and has to be made into an integer
			var bill_number = bill.value * 1;
			// now we need a total
			var total = bill_number + tip;
			// Pie charts show proportion, so let's make them for bill and tip as proportion of the total cost (in dollars) after multiplying and rounding to give Google what it needs.
			var prop_bill = Math.round((bill_number/total)*100);
			// Since I rounded, I should just do a difference for tip proportion. If I did Math.round again, there is a good likelihood of getting 101 or 99 instead of the 100 wee need for a pie chart.
			var prop_tip = 100 - prop_bill;
            // I changed the labels to have the propotion values as dollars.
			document.getElementById('payoff').innerHTML='<img src="http://chart.apis.google.com/chart?chs=500x200&chd=t:' + prop_bill + ',' + prop_tip + '&cht=p&chl=' + prop_bill + '% spent on the food|' + prop_tip + '% spent on the tip" />';
			// Charts can be tricky to read, so let me dump this out as a sentence
			document.getElementById('explainer').innerHTML='You are spending a total of <span class="dollars">$' + total + '</span>. Of that, <span class="dollars">$' + bill.value + '</span> is for food and <span class="dollars">$' + tip + '</span> is for the tip.';
		};
	</script>
	<style>
	    span.dollars{color:#0021a5;}
	</style>
</head>
<body>
	How much is the bill? <input type="text" id="bill"> <br />
	How large is the tip? <input type="text" id="pct"> <br />
	<input type="submit" onClick='addit()'>
    <hr/>
    <!-- I'll make these empty but the elements still exist so I an get them -->
    <p id="explainer"></p>
    <div id="payoff"></div>
</body>

    copy | embed

    0 comments - tagged in  posted by gotoplanb on Aug 26, 2010 at 12:21 p.m. EDT
  • ∞ Demo for journprog frontend session 
    <html>
<head>
	<title>Tip Calculator</title>
	<script type="text/javascript">
		function addit() {
			var bill = document.getElementById('bill');
			var tip_pct = document.getElementById('pct');
			var tip = bill.value * ( tip_pct.value / 100 );
			// alert("The tip amount is: " + tip);
			document.getElementById('payoff').innerHTML='<img src="http://chart.apis.google.com/chart?chs=500x200&chd=t:' + bill.value + ',' + tip + '&cht=p&chl=Food|Tip" />';
		};
	</script>
</head>
<body>
	
	Bill: <input type="text" id="bill"> <br />
	Tip Pct: <input type="text" id="pct"> <br />
	<input type="submit" onClick='addit()'>
    <hr/>
    <div id="payoff">
        I need to make the percents valid.
    </div>
</body>

    copy | embed

    0 comments - tagged in  posted by gotoplanb on Aug 26, 2010 at 12:24 a.m. EDT
  • ∞ HTML periodic table 
    http://joshduck.com/periodic-table.html

    copy | embed

    0 comments - tagged in  posted by ninque on Aug 25, 2010 at 5:38 p.m. EDT
  • ∞ Very Simple 3 Column CSS Layout 
    <!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>
<title>Super Simple CSS / XHTML Three Boxes Side By Side</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<style type="text/css">
/* CSS Document */
#leftcol { 
	position:relative;
	top:-10px;
	left:-10px;
	float:left;
	width:220px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:200px; /* actual value */
	margin:0 0 -10px 0;
	padding:10px;
	background:#ECB9E8;
	z-index:100;
	}
#rightcol {
	position:relative;
	top:-10px;
	right:-10px;
	float:right;
	width:220px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:200px; /* actual value */
	margin:0 0 -10px 0;
	padding:10px;
	background:#D7C4FA;
	z-index:99;
	}
#centercol {
	position:relative;
	padding:0 240px;
	}
</style>

</head>

<body>
<div style="text-align:center;">
<div style="width:600px;">
			<div id="leftcol"><!-- begin leftcol -->
				<p>This is the left column</p>
			</div><!-- end leftcol -->
				
			<div id="rightcol"><!-- begin rightcol -->
				<p>This is the right column</p>
			</div><!-- end righttcol -->
			
			<div id="centercol"><!-- begin centercol -->
				<p>This is the center column </p>
			</div><!-- end centercol -->
</div>
</div>
			
</body>
</html>

    copy | embed

    0 comments - tagged in  posted by deric on Aug 18, 2010 at 1:48 p.m. EDT
  • ∞ jquery 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    copy | embed

    0 comments - tagged in  posted by htaleb on Aug 15, 2010 at 10:50 a.m. EDT
  • ∞ Cross Browser CSS Gradients with Sass 
    @mixin gradient($first, $second) {
  background: $second;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$first', endColorstr='$second');
  background: -webkit-gradient(linear, left top, left bottom, from($first), to($second));
  background: -moz-linear-gradient(top,  $first,  $second);
}

.gradient {
  @include gradient(black, white);
}

    copy | embed

    0 comments - tagged in  posted by viatropos on Aug 11, 2010 at 6:00 p.m. EDT
  • ∞ Cross Browser CSS Rotation with and without Sass 
    # First, you have to add this to Sass:

# http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
# http://www.seancolombo.com/2010/07/28/how-to-make-and-use-a-custom-sass-function/
# http://sass-lang.com/docs/yardoc/Sass/Script/Literal.html
# math_sass.rb
require 'sass'

module Sass::Script::Functions
  def sin(angle)
    Sass::Script::Parser.parse(Math.sin(angle.value).to_s, 0, 0)
  end
  def cos(angle)
    Sass::Script::Parser.parse(Math.cos(angle.value).to_s, 0, 0)
  end
end

# Include that with sass by running this (where 'stylesheets' is the directory containing your stylesheets):

sass --watch stylesheets:stylesheets -r math_sass.rb

Then you can use the sine and cosine functions no problem.

// css
.rotate {
   -moz-transform: rotate(-30deg);
     -o-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
           filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.154, M12=-0.988, M21=0.988, M22=0.154);
       -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.154, M12=-0.988, M21=0.988, M22=0.154)";
             zoom: 1;
}

// sass
@mixin rotate($degrees) {
   -moz-transform: rotate($degrees);  
     -o-transform: rotate($degrees);  
-webkit-transform: rotate($degrees);
           filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)});
       -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
             zoom: 1;
}

.rotate {
  @include rotate(-30deg);
}

    copy | embed

    0 comments - tagged in  posted by viatropos on Aug 11, 2010 at 5:58 p.m. EDT
  • ∞ Cross Browser CSS Box Shadow with Sass 
    @mixin shadow($color: #333333) {
  -moz-box-shadow: 0px 1px 2px $color;
  -webkit-box-shadow: 0px 1px 2px $color;
  box-shadow: 0px 1px 2px $color;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='$color')";
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='$color');
}

.shadow {
  @include shadow(#111111);
}

    copy | embed

    0 comments - tagged in  posted by viatropos on Aug 11, 2010 at 5:16 p.m. EDT
  • ∞ Cross Browser CSS Opacity (with and without Sass) 
    // css
.opacity {
  opacity: .80;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=$value)";
  -khtml-opacity: .80;
  -moz-opacity: .80;
}

// sass
@mixin opacity($value) {
  opacity: #{"." + $value};
  filter: alpha(opacity=$value);
  -ms-filter: "alpha(opacity=$value)";
  -khtml-opacity: #{"." + $value};
  -moz-opacity: #{"." + $value};
}

.opacity {
  @include opacity(80);
}

    copy | embed

    0 comments - tagged in  posted by viatropos on Aug 11, 2010 at 5:12 p.m. EDT
  • ∞ Value Labeled Input Box 
    <input type="text" value="Search" onfocus="this.value=(this.value=='Search')?'':this.value"  onblur="this.value=(this.value=='')?'Search':this.value" />

    copy | embed

    0 comments - tagged in  posted by brandon_rowe on Aug 05, 2010 at 1:21 p.m. EDT
  • ∞ Doctype 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

    copy | embed

    0 comments - tagged in  posted by nhin on Jul 31, 2010 at 3:45 a.m. EDT
  • ∞ tildes en HTML 
    Á -> &Aacute;
É -> &Eacute;
Í -> &Iacute;
Ó -> &Oacute;
Ú -> &Uacute;

á -> &aacute;
é -> &eacute;
í -> &iacute;
ó -> &oacute;
ú -> &uacute;


ñ -> &ntilde;
Ñ -> &Ntilde;

    copy | embed

    0 comments - tagged in  posted by ecwpa on Jul 13, 2010 at 2:36 p.m. EDT
  • ∞ mobile friendly 
    <meta content='True' name='HandheldFriendly' /> 
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />

    copy | embed

    0 comments - tagged in  posted by GordianZ on Jul 10, 2010 at 5:42 a.m. EDT
  • ∞ Distribute left over space from a container 
    var $imgsArraySize = 0;
var $totalImgs = 0;
$.each( $("#footer .clients-list img"), function(){
	$imgsArraySize += $(this).width();
	$totalImgs++;
});
				
if ( $totalImgs == 0 ) { $totalImgs++; } else { $totalImgs--; }
				
// Container width - unfilled space - 10px margin / 2 sides (for each image)
var $marginWidth = Math.floor( ( ( $("#footer").width() - $imgsArraySize ) / $totalImgs ) / 2 );
				
$("#footer .clients-list li").css( {'margin-left': $marginWidth, 'margin-right': $marginWidth} );
$("#footer .clients-list li:first").css( {'margin-left': '0'} );
$("#footer .clients-list li:last").css( {'margin-right': '0'} );

    copy | embed

    0 comments - tagged in  posted by ZilverDragOn on Jul 09, 2010 at 4:50 a.m. EDT
  • ∞ Perl to get html form input values 
    #!/usr/bin/perl
my @values;
foreach my $file (@ARGV) {
open(FILE, $file) || die "can't open file";
while( defined($line = <FILE>)) {
	chomp $line;
	if ($line =~ m/<input/) {
		$line =~ m/name=["'](\w*)["']/;
		push @values, $1;
	}
	elsif ($line =~ m/<select/) {
		$line =~ m/name=["'](\w*)["']/;
		push @values, $1;
	}
	elsif ($line =~ m/<textarea/) {
		$line =~ m/name=["'](\w*)["']/;
		push @values, $1;
	}
	
}
my $elems = join ", ", @values;
	print "$elems\n";
# foreach my $elem (@values){
# 	print "$elem\n";
# 	}
}

    copy | embed

    0 comments - tagged in  posted by bradrice on Jul 08, 2010 at 2:25 p.m. EDT
Sign up to create your own snipts, or login.