Tag Archive for div

snippets | May 7, 2012
No comments

Image-less Dropshadow

#north {position: absolute;width: 200px;left: 100px;top: 100px;height: 5px;}

#east {width: 5px;position: absolute;height: 200px;top: 100px;left: 100px}

#south {position: absolute;width: 200px;height: 5px;left: 100px;top: 302px;}

#west {width: 5px;position: absolute;height: 200px;top: 100px;left: 305px}

.ds_ch {height: 1px;line-height: 1px;width: 100%;background: black;display: block;overflow: hidden;}

#east .ds_ch, #west .ds_ch {width: 1px;height: 100%;float: left;clear: none;display: inline;}

.o1 {opacity: .5;filter: alpha(opacity=50);}

.o2 {opacity: .4;filter: alpha(opacity=40);}

.o3 {opacity: .3;filter: alpha(opacity=30);}

.o4 {opacity: .20;filter: alpha(opacity=20);}

.o5 {opacity: .10;filter: alpha(opacity=10);}

/* For connecing the shadow in 2 corners */

.mv1 {margin-top: 0px;padding-bottom: 7px;}

.mv2 {margin-top: 1px;padding-bottom: 5px;}

.mv3 {margin-top: 2px;padding-bottom: 3px;}

.mv4 {margin-top: 3px;padding-bottom: 1px;}

.mv5 {margin-top: 4px;padding-bottom: 0px;}

.m1 {margin-left: 1px;padding-right: 8px;}

.m2 {margin-left: 2px;padding-right: 6px;}

.m3 {margin-left: 3px;padding-right: 4px;}

.m4 {margin-left: 4px;padding-right: 2px;}

.m5 {margin-left: 5px;padding-right: 0px;}

/*
ds = dropshadow

ch = child
pa = parent

o = opacity
m = margin
mv = margin vertical

*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="#" />
<meta name="Description" content="#" />
<meta name="Copyright" content="#" />
<meta name="Robots" content="#" />
<meta name="Generator" content="#" />
<meta name="Keywords" content="#" />
<link rel="stylesheet" href="shadows.css" type="text/css"  media="screen"/>
</head>
<body>
<div id="north">
<div class="ds_ch o1 m1">
</div>
<div class="ds_ch o2 m2">
</div>
<div class="ds_ch o3 m3">
</div>
<div class="ds_ch o4 m4">
</div>
<div class="ds_ch o5 m5">
</div>
</div>
<div id="east">
<div class="ds_ch o5 mv5">
</div>
<div class="ds_ch o4 mv4">
</div>
<div class="ds_ch o3 mv3">
</div>
<div class="ds_ch o2 mv2">
</div>
<div class="ds_ch o1 mv1">
</div>
</div>
<div id="south">
<div class="ds_ch o5 m5">
</div>
<div class="ds_ch o4 m4">
</div>
<div class="ds_ch o3 m3">
</div>
<div class="ds_ch o2 m2">
</div>
<div class="ds_ch o1 m1">
</div>
</div>
<div id="west">
<div class="ds_ch o1 mv1">
</div>
<div class="ds_ch o2 mv2">
</div>
<div class="ds_ch o3 mv3">
</div>
<div class="ds_ch o4 mv4">
</div>
<div class="ds_ch o5 mv5">
</div>
</div>
</body>
</html>

source

Category: Uncategorized | Tags: , , , , , , , , , , , , , , , , ,
snippets | April 23, 2012
No comments

Custom Mootools Scroll

<script type="text/javascript">

window.addEvent('domready', function() {

if ( ($('container_Scroll_content').getSize().size.y) > ($('container_Scroll').getSize().size.y) ) {

myScrollFx = new Fx.Scroll('container_Scroll', {
wait: false
});
mySlide = new Slider($('areaScroll'), $('knobScroll'), {
steps: $('container_Scroll_content').getSize().size.y-($('container_Scroll').getSize().size.y),
mode: 'vertical',
onChange: function(step){
$('container_Scroll').scrollTo(0,step);
}
}).set(0);

}
else {
$('areaScroll').setStyle('visibility','hidden');
}

});

document.addEvent('mousewheel', function(e) {
e = new Event(e).stop();
var step = mySlide.step - e.wheel * 10;
mySlide.set(step);
});

</script>

<div id="container_Scroll">
<div class="text10pxWhite" id="container_Scroll_content">
THE END
</div>
</div>
<div id="areaScroll">
<div id="knobScroll"></div>
</div>

#knobScroll{
height: 25px;
width: 15px;
background-image:url(_images/slide.gif);
background-repeat:no-repeat;
cursor: pointer;
}
#areaScroll {
/*background-image:url(../_images/bg_slider.gif);
background-repeat:repeat-y;*/
background-color:#4b4a43;
height: 340px;
width: 15px;
float:right;
}

#container_Scroll {
margin:0px;
width: 500px;
height: 340px;
overflow:hidden;
float:left;
}

#container_Scroll_content {
padding:0px;
margin:0px;
width: 500px;
}

source

Category: Uncategorized | Tags: , , ,
snippets | April 23, 2012
No comments

Div Slider

window.addEvent('domready', function() {

//inject div
var el = new Element('div', {
'id': 'coupon',
'class': 'closed',
'text': ' '
}).inject(document.body);

//settings
var state = 'closed';

//add the click toggle
el.addEvent('click', function() {

//change the state
state = (state == 'closed' ? 'open' : 'closed');
el.morph('.' + state);

});

});

<style type="text/css">
#coupon			{ top:0; right:100px; position:absolute; cursor:pointer; width:585px; background:url(http://davidwalsh.name/dw-content/slider-coupon.png) 0 bottom no-repeat; }
.closed			{ height:29px; }
.open				{ height:176px; }
</style>

source

Category: Uncategorized | Tags: , , , ,
snippets | April 22, 2012
No comments

Show/Hide divs

function showlayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="none"){
document.getElementById(layer).style.display="block";
} else {
document.getElementById(layer).style.display="none";
}
}

/* FEED ICONS */
.feed-yahoo{
background:url(http://lh5.ggpht.com/antonio.lupetti/
SGkbSeViXCI/AAAAAAAABq0/VKFk--P6rzg/s144/feed-yahoo.png) no-repeat;
}
.feed-newsgator{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZt949soI/AAAAAAAABqk/0K_xT635iWc/s144/feed-newsgator.png) no-repeat;
}
.feed-netvibes{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZsku-McI/AAAAAAAABqc/geaegB--2R0/s144/feed-netvibes.png) no-repeat;
}
.feed-bloglines{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZlVYv_1I/AAAAAAAABqM/HSGE2JRVGA8/s144/feed-bloglines.png) no-repeat;
}
.feed-xml{
background:url(http://lh4.ggpht.com/antonio.lupetti/
SGkZvPomXRI/AAAAAAAABqs/hXOtnqszlws/s144/feed-xml.png) no-repeat;
}
.feed-google{
background:url(http://lh4.ggpht.com/antonio.lupetti/
SGkZrkp8XCI/AAAAAAAABqU/Yp-Rb_1L98k/s144/feed-google.png) no-repeat;
}

/* -------------------------------- */
/* RSS MENU */
#rss-menu{
padding:10px;
padding-top:0px;
width:270px;
border:solid 1px #CCCCCC;
margin-top:10px;
font-size:11px;
position:absolute;
background:#FFFFFF;
margin-left: 446px; /* Change it with your custom distance from the left margin */
top: 82px; /* Change it with your custom distance from top */
z-index:2;
}

<div id="rss-menu">
<h2>Subscribe My Feeds</h2>
<ul>

<li class="feed-xml">
<a href="http://feeds.feedburner.com/Woork">Subscribe to RSS Feed</a&gt;
</li>

<li class="feed-yahoo">
<a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/Woork">Add to My Yahoo</a>
</li>

<li class="feed-newsgator">
<a href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http://feeds.feedburner.com/Woork">Subscribe in NewsGator</a>
</li>

<li class="feed-bloglines">
<a href="http://www.bloglines.com/sub/ <a href="http://feeds.feedburner.com/Woork">Subscribe" >http://feeds.feedburner.com/Woork">Subscribe</a> with Bloglines</a>
</li>

<li class="feed-netvibes">
<a href="http://www.netvibes.com/subscribe.php?url=http://feeds.feedburner.com/Woork">Add to Netvibes</a>
</li>

<li class="feed-google">
<a href="http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/Woork">Add to Google</a>
</li>

</ul
</div>

source

Category: Uncategorized | Tags: , , , ,
snippets | April 21, 2012
No comments

div over a flash object

OBJECT-Tag:
<param name="wmode" value="transparent">

EMBED-Tag:
wmode="transparent"

source

Category: Uncategorized | Tags: , , ,
snippets | April 1, 2012
No comments

Float in Float IE6 margin wrong inherted div width Bug

<body>
<div id="page">
<div id="content" style="background-color: yellow;">
<div id="group1573" class="cmsGroup" style="width: 50%; padding: 0%; background-color:red; display:block;">
<!-- Bugfix for IE6 related margin width -->
<div style="width: 100%">
<!-- E: Bugfix -->
<div id="cell2352" class="cmsCell" style="width: 99.6%; background-color:yellow;">
<p>Box 1</p>
</div>
<div id="cell3467" class="cmsCell" style="width: 22.58%; float: left; background-color: green; margin-right: 3.09%;">
<div>
<p>Box 2</p>
</div>
</div>
<div id="cell1574" class="cmsCell" style="width: 73.93%; background-color:#CC9966;">
<p>Box 3</p>
</div>
<!-- Bugfix for IE6 related margin width -->
</div>
<!-- E: Bugfix -->
</div>
</div>
</div>
</body>

source

Category: Uncategorized | Tags: , , , , , , , , , ,
snippets | March 9, 2012
No comments

Alternate row colors

'************************************************
'
' To use it put the code like this on your loop:
'
' <%counter = counter + 1%>
' <tr bgcolor="<%=Acolor(counter,"#a0a0a0","#e0e0e0")%>">
'    <td>Data</td>
' </tr>
'
' n        is the external counter
' col      is the first color in hex format
' col2     is the second color in hex format, you can leave it empty
'************************************************

function Acolor(n,col,col2)

num = 0
num = n mod 2

if col2 = "" then col2 = "#ffffff"

if num = 0 then
Acolor = col
else
Acolor = col2
end if

end function

source

Category: Uncategorized | Tags: , , , , ,
snippets | March 7, 2012
No comments

Center Div

<html>
<head>
<title>Center</title>

<style type="text/css">
body{background:red;}

div#centered {
background: white;
position: absolute;
width: 700px;
height: 300px;
left: 50%;
top: 50%;
margin-left: -350px;
margin-top: -150px;}
</style>

</head>

<body>
<div id="centered">This div is centered</div>
</body>
</html>

source

Category: Uncategorized | Tags: , ,
snippets | February 20, 2012
No comments

Vertical align div

<div id=”shim”/></div>
<div id=”wrapper”>
Content
</div>

html, body {
height: 100%;
margin: 0;
padding: 0;
}

* {
margin:0px auto;
padding:0;
}

div#shim {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -200px;
float: left;
}

div#wrapper {
width: 1000px;
height: 400px;
clear: both;
background:red;
position: relative;
top: -200px;
/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */

}

/* Hide from IE5mac *//*/
div#shim {
display: none;
}

html, body {
height: auto;
}
/* end hack */

/* ]]> */

source

Category: Uncategorized | Tags: , , ,
snippets | February 16, 2012
No comments

simple toggle html element

<style type="text/css">
.divHide{display:none;}
.divShow{display:block;}
</style>
<script type="text/javascript" language="javascript">
function showhide(obj) {
var el=document.getElementById(obj);
if (el.className == "divHide") {
el.className = "divShow";
} else {
el.className = "divHide";
}
}
</script>
...
<a onclick="showhide('calendar');" href="#calendar">click here</a>.</p><a name="calendar"></a>
<div id="calendar" class="divHide"></div>

source

Category: Uncategorized | Tags: , , ,
« Older Entries