Text* Snippets: mediagirl

Cross-browser solution for adding hover border to linked images

// 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 */
}

to css images cross-browser hover by mediagirl on Sep 14, 2007

icons partially transparent

// 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;
}

by mediagirl on May 26, 2007

PHP variable and echo

// description of your code here

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

by mediagirl on Apr 05, 2007

Force Browser scrollbar

// This will force a browser scroll bar which will stop page job between tall & short pages

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

by mediagirl on Mar 23, 2007

Show div on link rollover

// 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')">SHOW1a> 
SHOW2</a>
<a href="#" onmouseover="visVisible('id3')" onmouseout="visHidden('id3')">SHOW3a>






ID1</div><br>
<div id="id2" style="visibility: hidden;">ID2div>

ID3</div>
body>
</html>

by mediagirl on Mar 21, 2007

Show/Hide JS

// 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')">SHOW1a> 
SHOW2</a>
<a href="#" onclick="visVisible('id3')">SHOW3a>



HIDE1</a> 
<a href="#" onclick="visHidden('id2')">HIDE2a>
HIDE3</a> 
<br>
<br>
<div id="id1">ID1div>

ID2</div><br>
<div id="id3">ID3div>
</body>
html>

by mediagirl on Mar 21, 2007

Grayscale Images

// 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)'">

by mediagirl on Mar 21, 2007

100 Percent Div Height in Most Browsers

// 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*/

by mediagirl on Mar 16, 2007

Get rid of white flash when iframe loads

// 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';"

to flash iframe white by mediagirl on Jan 09, 2007

mediagirl's Tags

Never been to TextSnippets before?

About this user

Cross-browser solution for adding hover border to linked images

icons partially transparent

PHP variable and echo

Force Browser scrollbar

Show div on link rollover

Show/Hide JS

Grayscale Images

100 Percent Div Height in Most Browsers

Get rid of white flash when iframe loads