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!)

About this user

9 total

On This Page:

  1. 1 Cross-browser solution for adding hover border to linked images
  2. 2 icons partially transparent
  3. 3 PHP variable and echo
  4. 4 Force Browser scrollbar
  5. 5 Show div on link rollover
  1. 6 Show/Hide JS
  2. 7 Grayscale Images
  3. 8 100 Percent Div Height in Most Browsers
  4. 9 Get rid of white flash when iframe loads

Cross-browser solution for adding hover border to linked images

to css images cross-browser hover by mediagirl on Sep 14, 2007
// The class is assigned to the href.

.borderit img {
	border: 1px dashed #776e09;
	padding: 2px;
}
.borderit:hover img {
	border: 1px solid #fff71c;
	padding: 2px;
}
.borderit:hover {
	color: red; /* irrelevant definition to overcome IE bug */
}

icons partially transparent

by mediagirl on May 26, 2007
// If you wanted to make the icons partially transparent all the time but on mouse over make them 0% transparent, you can do so like so:

CSS: 
#sidebar img.icon{
  filter:alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}
 
#sidebar img.icon:hover{
  filter:alpha(opacity=100);
  -moz-opacity:1.0;
  opacity:1.0;
}

PHP variable and echo

by mediagirl on Apr 05, 2007
// description of your code here

<?php $seg1 = '#####'; ?>
<?php echo($seg1); ?>

Force Browser scrollbar

by mediagirl on Mar 23, 2007
// This will force a browser scroll bar which will stop page job between tall & short pages

html { height: 100%; margin-bottom: 1px; }

Show div on link rollover

by mediagirl on Mar 21, 2007
// Show div on link rollover

<html>
<head>
<script>
function layerSetup(id,visibility){
if(document.getElementById){
this.obj = document.getElementById(id).style;
this.obj.visibility = visibility;
return this.obj;}
else if(document.all){
this.obj = document.all[id].style;
this.obj.visibility = visibility;
return this.obj;}
else if(document.layers){
this.obj = document.layers[id];
this.obj.visibility = visibility;
return this.obj;}
}
function visVisible(param){
new layerSetup(param,'visible');
}

function visHidden(param){
new layerSetup(param,'hidden');
}
</script>
</head>

<body>
<a href="#" onmouseover="visVisible('id1')" onmouseout="visHidden('id1')">SHOW1</a> 
<a href="#" onmouseover="visVisible('id2')" onmouseout="visHidden('id2')">SHOW2</a>
<a href="#" onmouseover="visVisible('id3')" onmouseout="visHidden('id3')">SHOW3</a><br>

<br>
<br>
<div id="id1" style="visibility: hidden;">ID1</div><br>
<div id="id2" style="visibility: hidden;">ID2</div><br>
<div id="id3" style="visibility: hidden;">ID3</div>
</body>
</html>

Show/Hide JS

by mediagirl on Mar 21, 2007
// Will show/hide on click

<html>
<head>
<script>
function layerSetup(id,visibility){
if(document.getElementById){
this.obj = document.getElementById(id).style;
this.obj.visibility = visibility;
return this.obj;}
else if(document.all){
this.obj = document.all[id].style;
this.obj.visibility = visibility;
return this.obj;}
else if(document.layers){
this.obj = document.layers[id];
this.obj.visibility = visibility;
return this.obj;}
}
function visVisible(param){
new layerSetup(param,'visible');
}

function visHidden(param){
new layerSetup(param,'hidden');
}
</script>
</head>

<body>
<a href="#" onclick="visVisible('id1')">SHOW1</a> 
<a href="#" onclick="visVisible('id2')">SHOW2</a>
<a href="#" onclick="visVisible('id3')">SHOW3</a><br>
<br>
<a href="#" onclick="visHidden('id1')">HIDE1</a> 
<a href="#" onclick="visHidden('id2')">HIDE2</a>
<a href="#" onclick="visHidden('id3')">HIDE3</a> 
<br>
<br>
<div id="id1">ID1</div><br>
<div id="id2">ID2</div><br>
<div id="id3">ID3</div>
</body>
</html>

Grayscale Images

by mediagirl on Mar 21, 2007
// Grayscale to color on rollover


<img src="yourimagehere" style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)" onmouseover="this.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)'" onmouseout="this.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)'">

100 Percent Div Height in Most Browsers

by mediagirl on Mar 16, 2007
// This will set a div to 100% browser height. Change #outer to your wrapping div name.

Source: http://www.sitepoint.com/forums/showpost.php?p=1243541&postcount=8

/* commented backslash hack \*/ 
html, body{height:100%;} 
/* end hack */
html,body {margin:0;padding:0}

#outer{min-height:100%;height:auto;background:#ffffcc}
* html #outer{height:100%;}/* ie6 and under*/

Get rid of white flash when iframe loads

to flash iframe white by mediagirl on Jan 09, 2007
// Adding this to the iframe code will stop the white flash that occurs when an iframe loads.

style="visibility:hidden;" onload="this.style.visibility = 'visible';"
9 total

On This Page:

  1. 1 Cross-browser solution for adding hover border to linked images
  2. 2 icons partially transparent
  3. 3 PHP variable and echo
  4. 4 Force Browser scrollbar
  5. 5 Show div on link rollover
  1. 6 Show/Hide JS
  2. 7 Grayscale Images
  3. 8 100 Percent Div Height in Most Browsers
  4. 9 Get rid of white flash when iframe loads