Never been to CodeSnippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world (or not, you can keep them private!)

55 total

On This Page:

  1. 1 CSS Global Reset w/ strong, em
  2. 2 CSS Clear
  3. 3 Adding input:focus functionality to IE using prototype.js
  4. 4 Simple javascript image slideshow
  5. 5 flash
  1. 6 CSS global clear in SASS
  2. 7 Floating 2 column layout
  3. 8 css :: external vs embedded css
  4. 9 CSS objet to manipulate classes
  5. 10 Vertical Middle DIV

CSS Global Reset w/ strong, em

to css by nickhammond on Nov 14, 2008 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    background: transparent;
}

:focus {
    outline: 0;
}

body {
	
}

ol, ul {list-style: none;}

caption, th, td {
  text-align: left;
  font-weight: normal;
}

blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}

strong{font-weight: bold;}
em{font-style: italic;}
.clear{clear: both;}

#content:after{
  content: ".";
  height: 0;
  display: block;
  clear: both;
  visibility: hidden;
}

.left, #left{
	float: left;
	display: inline;
}

.right, #right{
	float: right;
	display: inline;
}

CSS Clear

to css by nickhammond on Nov 14, 2008 
#something:after{
 content: ".";
  height: 0;
  display: block;
  clear: both;
  visibility: hidden;
}

Adding input:focus functionality to IE using prototype.js

to css javascript onfocus prototype.js by benjay on Nov 11, 2008 
  Event.observe(window, 'load', function() {
    var fields = $$("input");
    for (var i = 0; i < fields.length; i++) {
      fields[i].onfocus = function() {this.className += ' focused';}
      fields[i].onblur = function() {this.className = this.className.replace('focused', '');}
    }
  });


in the css file:

input:focus,   /* works in FF without javascript */
input.focused  /* used by js */
   { background-color: #f7cd72; }

Simple javascript image slideshow

to css html js slideshow by nickhammond on Nov 06, 2008
HTML
<div id="slide-show">
     <ul id="slide-images">
     	<li><img src="images/one.jpg" alt="One" title="One" /></li>
     	<li><img src="images/two.jpg" alt="Two" title="Two" /></li>
     	<li><img src="images/three.jpg" alt="Three" title="Three" /></li>
     </ul>
</div>


CSS
#slide-images{
	position:relative;
	display:block;
	margin:0px;
	padding:0px;
	width:290px; /* Adjust to width-height of your images */
	height:142px;
	overflow:hidden;
}

#slide-images li{
	position:absolute;
	display:block;
	list-style-type:none;
	margin:0px;
	padding:0px;
	background-color:#FFFFFF;
}

#slide-images li img{
	display:block;
	background-color:#FFFFFF;
}


JS
var delay = 1000;
var start_frame = 0;

function init() {
	var lis = $('slide-images').getElementsByTagName('li');
	
	for( i=0; i < lis.length; i++){
		if(i!=0){
			lis[i].style.display = 'none';
		}
	}
	end_frame = lis.length -1;
	
	start_slideshow(start_frame, end_frame, delay, lis);
	
	
}



function start_slideshow(start_frame, end_frame, delay, lis) {
	setTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay);
}


function fadeInOut(frame, start_frame, end_frame, delay, lis) {
	return (function() {
		lis = $('slide-images').getElementsByTagName('li');
		Effect.Fade(lis[frame]);
		if (frame == end_frame) { frame = start_frame; } else { frame++; }
		lisAppear = lis[frame];
		setTimeout("Effect.Appear(lisAppear);", 0);
		setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 1850);
	})
	
}


Event.observe(window, 'load', init, false);


You also need the following javascript files... prototype.js, scriptaculous.js, effects.js

Just load the js above in your head and it'll start slidin'

Credits: Andrew Sellick - http://www.andrewsellick.com/30/simple-javascript-slide-show-using-scriptaculous

flash

to css by sonic921 on Oct 31, 2008 
/* ---- FLASH ---- */
.flash { border-bottom:1px solid #FFF; font-weight:700; font-size:0.9em; margin:0 0 5px; padding:4px 30px }
.flash.error, .flash.app_error, .flash.login_error { background:#F3D0D0 url("/libs/admin/shell/flash-error.png") no-repeat 5px 3px; border-color:#A2070A; color:#A2070A }
.flash.app_success, .flash.login_success { background:#E2F6CE url("/libs/admin/shell/flash-success.png") no-repeat 5px 3px; border-color:#080; color:#080 }
.flash.app_warning { background:#F7F8C9 url("/libs/admin/shell/flash-warning.png") no-repeat 5px 3px; border-color:#F37E0B; color:#F37E0B }
.flash.app_notice { background:#EAF1FE url("/libs/admin/shell/flash-notice.png") no-repeat 5px 3px; border-color:#27AAFD; color:#27AAFD }
.flash a { margin:0 0 0 20px; text-decoration:none }

CSS global clear in SASS

to css merb sass by nickhammond on Oct 24, 2008 


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, 
dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, 
sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td
  :margin 0
  :padding 0
  :border 0
  :outline 0
  :font-weight inherit
  :font-style inherit
  :font-size 100%
  :font-family inherit
  :vertical-align baseline
  :background transparent

Floating 2 column layout

to css html by nickhammond on Oct 20, 2008
Basic CSS with global clear
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, 
dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, 
sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    background: transparent;
}

:focus {
    outline: 0;
}

div#wrapper{
	width:800px;
	margin:0px auto;
}

div#header{

}

div#left{
	float:left;
	width:380px;
}

div#right{
	float:right;
	width:380px;
}

div#footer{

}

.clear{
	clear:both;
}


HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<%= stylesheet_link_tag "application" %>
<link href="application.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
	<div id="header">
	
	</div>
	<div id="left">
	
	</div>
	<div id="right">
	
	</div>
	<div class="clear"></div>
	<div id="footer">
	
	</div>
</div>
</body>
</html>

css :: external vs embedded css

to css by vindigo on Sep 26, 2008 1 Comments
external vs embedded css

// external css
<link rel="stylesheet" href="xmlCom.css" type="text/css">

// embedded css
<style type="text/css"> 
   // code goes here
</style>

CSS objet to manipulate classes

to css javascript web by raziel on Sep 15, 2008
Provides 3 functions to manipulate CSS in a element
css.hasClassName(elem, className);
css.addClassName (elem, className);
css.removeClassName (elem, className);

var css = function() {
	var private_var;
	function private_method() {
		// do stuff here
	}
	return {
		hasClassName : function(elem, className) {
			return (elem.className.indexOf(className) != -1);
		},
		addClassName : function(elem, className) {
			this.removeClassName(elem, className);
			elem.className = (elem.className + " " + className).trim();
		},
		removeClassName : function(elem, className) {
			elem.className = elem.className.replace(className, "").trim();
		}
	};
}();

Vertical Middle DIV

to css by Dino on Jul 10, 2008
// description of your code here
Vertical Middle DIV.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Example 7: Vertical alignment of content with JavaScript &amp; CSS</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
        <!--
			body {
				margin: 0;
				padding: 0;
				font: 12px/1.5 verdana, arial, helvetica, sans-serif;
				text-align: center; /* Takes care of horizontal alignment in Internet Explorer */
				background-image: url(grid.gif);
			}
			#content {
				position: relative; /* Needed for Safari */
				margin: auto; /* Takes care of horizontal alignment in standards compliant browsers */
				text-align: left;
				width: 200px;
				height: 200px;
				background-color: #fc0;
			}
			h1, p {
				margin: 0;
				padding: 1em;
			}
			h1 {
				font-size: 12px;
				line-height: 1.5em;
			}
        -->
        </style>
		<script type="text/javascript">
		<!--
		function getWindowHeight() {
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') {
				windowHeight = window.innerHeight;
			}
			else {
				if (document.documentElement && document.documentElement.clientHeight) {
					windowHeight = document.documentElement.clientHeight;
				}
				else {
					if (document.body && document.body.clientHeight) {
						windowHeight = document.body.clientHeight;
					}
				}
			}
			return windowHeight;
		}
		function setContent() {
			if (document.getElementById) {
				var windowHeight = getWindowHeight();
				if (windowHeight > 0) {
					var contentElement = document.getElementById('content');
					var contentHeight = contentElement.offsetHeight;
					if (windowHeight - contentHeight > 0) {
						contentElement.style.position = 'relative';
						contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
					}
					else {
						contentElement.style.position = 'static';
					}
				}
			}
		}
		window.onload = function() {
			setContent();
		}
		window.onresize = function() {
			setContent();
		}
		//-->
		</script>
	</head>
	<body>
		<div id="content">
			<h1>Content</h1>
			<p>This content should be centered in your browser window. CSS is used for horizontal alignment, while scripting is used for vertical alignment.</p>
		</div>
	</body>
</html>
55 total

On This Page:

  1. 1 CSS Global Reset w/ strong, em
  2. 2 CSS Clear
  3. 3 Adding input:focus functionality to IE using prototype.js
  4. 4 Simple javascript image slideshow
  5. 5 flash
  1. 6 CSS global clear in SASS
  2. 7 Floating 2 column layout
  3. 8 css :: external vs embedded css
  4. 9 CSS objet to manipulate classes
  5. 10 Vertical Middle DIV