CodeWare

CSS

how to make a scroll using a DIV

by Bruno Rebelo on Feb.02, 2009, under CSS

just add this to your CSS:

.Scroll350
{
	height: 350px; 
 
	overflow: auto;
	scrollbar-arrow-color: blue; 
	scrollbar-face-color: #e7e7e7; 
	scrollbar-3dlight-color: #a0a0a0; 
	scrollbar-darkshadow-color: #888888
	width: 700px;
	background-color: #DCDCDC;
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr= '#DCDCDC' , EndColorStr= 'white' );
	border: #84A3C1 1px solid;
	padding: 0;
	vertical-align: top;
}

in this example we are using a Gradient background for DIV.

2 Comments more...

Modal Popup

by Bruno Rebelo on Jan.20, 2009, under CSS, Javascript, OutSystems

?View Code JAVASCRIPT
 
 
function sm(obl, wd, ht)
{
var h='hidden';
var b='block';
var p='px';
var obol=$('ol'); 
var obbxd = $('mbd');
 
obbxd.innerHTML = $(obl).innerHTML;
obol.style.height=pageHeight()+p;
obol.style.width=pageWidth()+p;
obol.style.top=posTop()+p;
obol.style.left=posLeft()+p;
obol.style.display=b;
var tp=posTop()+((pageHeight()-ht)/2)-12;
var lt=posLeft()+((pageWidth()-wd)/2)-12;
var obbx=$('mbox');
obbx.style.top=(tp<0?0:tp)+p;
obbx.style.left=(lt<0?0:lt)+p;
obbx.style.width=wd+p;
obbx.style.height=ht+p;inf(h);
obbx.style.display=b;
return false;
}
 
function hm(){
var v='visible';
var n='none';
$('ol').style.display=n;
$('mbox').style.display=n;
inf(v);
document.onkeypress=''
}
 
function initmb(){
var ab='absolute';
var n='none';
var obody=document.getElementsByTagName('body')[0];
var frag=document.createDocumentFragment();
var obol=document.createElement('div');
obol.setAttribute('id','ol');
obol.style.display=n;
obol.style.position=ab;obol.style.top=0;
obol.style.left=0;
obol.style.zIndex=998;
obol.style.width='100%';
frag.appendChild(obol);
var obbx=document.createElement('div');
obbx.setAttribute('id','mbox');
obbx.style.display=n;
obbx.style.position=ab;
obbx.style.zIndex=999;
var obl=document.createElement('span');
obbx.appendChild(obl);
var obbxd=document.createElement('div');
obbxd.setAttribute('id','mbd');
obl.appendChild(obbxd);
frag.insertBefore(obbx,obol.nextSibling);
obody.insertBefore(frag,obody.firstChild);
window.onscroll = scrollFix; 
window.onresize = sizeFix;
}
window.onload = initmb

css necessária :

/*Style de inicio para o panel wait*/
#mbox{
 background-color:#eee; 
 padding:8px; 
 border:2px outset #666;
}
#mbm{
 font-family:sans-serif;
 font-weight:bold;
 float:right;
 padding-bottom:5px;
}
#ol{
 background-image: url(img/overlay.png);
}
.dialog {
 display:none;
}
* html 
#ol{
 background-image:none; 
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/overlay.png", sizingMethod="scale");
}
/*Style de fim para o panel wait*/

é necessário uma imagem com efeito de transparencia.
A imagem usada no exemplo encontra-se disponivel aqui

Como usar ?

Basta criar uma div que tenha como class css dialog e colocar a infomação que pretende abrir em popup dentro da div.
para invocar a div :

botaoXPTO.Attributes["onclick"] = "sm('box',200,50);return false;";
Leave a Comment :, , more...

Procurando algum código?

Utilize o formulário para procurar:

Não encontrou o que queria? Deixe um comentário num CODE ou contacte-nos para encontrar-mos solução!

Visit our friends!

A few highly recommended friends...