layout 100% height e falso alert com Jquery

16/11 2 Por cezaarr em CSS, Jquery / Javascript

Bom so novo por aqui , trabalho com criacao de sistemas pra web , utilizo php =], mas tambem entendo de css e js , nesse post vo mostra um “alert falso” e tambem um layout com 100% de height.. vamo la \o

quem quize da uma olhada antes eu coloquei em um servidor de hospedagem free =]
e so clica na palavra “alert” que a funcao e executada

demo

primero temos que baixar as bibliotecas pro alert
segue os links

jquery
plugin do drag

depois de baixar vamos “includear” elas na pagina

<script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”js/jqDnR.js”></script>

e tambem os estilos

<link rel=”stylesheet” href=”css/reset.css” type=”text/css” />
<link rel=”stylesheet” href=”css/geral.css” type=”text/css” />

ficando assim…

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>

<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″>
<meta name=”author” content=”">

<title>layout 100% height e alert falso =D</title>

<script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”js/jqDnR.js”></script>

<link rel=”stylesheet” href=”css/reset.css” type=”text/css” />
<link rel=”stylesheet” href=”css/geral.css” type=”text/css” />

</head>

<body>

<div id=”all”>
<div>banner</div>
<div><a onclick=”alerta(‘msg de erro ou alerta’,”,’22%’,’33%’); return false;” href=”executar-alerta”>alert</a></div>
<div>rodape =D</div>
</div>

</body>
</html>

agora o layout , vamo estrutura esse bixo =D

aplicando os estilo

html,body{
font-size   : 11px;
font-family : Tahoma;
height      : 100%; /* o height 100% e necesario tanto aqui como tambem na div abaixo */
}
#all{
position   : relative;
width      : 600px; /* largura do layout usei 600 por ser um exemplo ne */
margin     : 0 auto;
height     : 100% !important; /* aqui */
height     : 100%; /* aqui */
min-height : 100%; /* e tambem aqui */
background : #CCC;
}
/*banner*/
#all .ban{
width      : 100%;
height     : 30px;
background : #EDEDED;
text-align : center;
}
/*o conteudo do site =] */
#all .conteudo{
padding : 10px;
}
/*rodape*/
#all .rodp{
position   : absolute;
bottom     : 0;
width      : 100%;
height     : 30px;
text-align : center;
background : #EDEDED;
}

essa e a estrutura pra um site 100% de height

ate onde eu sei pega do ie(internet explore) 6 pracima ,por mais que eu nao use ie 6 … eu sei que pega =D

agora vem o alert

como o alert e criado agente precisa do layout dele , eu fiz umas imagens ta ali em baxo pra download, fico meio feio , mas cada um altera como gostar ne =]

primero vamo coloca ele na pagina junto com a div “block” que vo explica mais abaixo

<div id=”block”></div>
<div id=”alert”>
<span id=”span”>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed tempor congue erat id egestas. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac
</span>
<div id=”div”>
<!–<input id=”btnalert” type=”button” value=”ok”>–!>
</div>
</div>

lembrando o conjunto de div’s do alert precisa ficar fora da div #all para o alert ser “dragziado” para todos os cantos =]

e tambem precisamos que quando o alert aparece, a tela toda seja bloqueada evitando que o usuario clique em links pois o objetivo do alert e mostrar uma msg e “bloquiar todas as funcoes” entao colocamos a div block fora da div #all tambem

e agora o estilo dela =]

#block{
position   : absolute;
top        : 0;
left       : 0;
width      : 100%;
height     : 100%;
height     : 100% !important;
min-height : 100%;
background : url(../imagens/transp.gif);
display    : none;
z-index    : 1000;
}

/*agora o estilo do alert*/

#alert{
position   : absolute;
width      : 362px;
height     : 131px;
background : url(../imagens/bgalert.png);
z-index    : 1001;
top        : 30%; /*posicao vertical inicial do alert*/
left       : 40%; /*posicao horizontal  inicial do alert*/
cursor     : move;
display    : none;

}
#alert span#span{
position : absolute;
right    : 14px;
width    : 264px;
height   : 69px;
}
#alert div#div{
position : absolute;
bottom   : 20px;
right    : 16px;
}
#alert input[type='button']{
right      : 18px;
text-align : center;
width      : 60px;
height     : 20px;
background : url(../imagens/bgbotao.jpg) repeat-x;
border     : solid 1px #CCC;
padding    : 1px 6px 5px;
*padding   : 3px 6px 2px;
cursor     : pointer;
}
#alert input[type='button']:hover{
background : url(../imagens/bgbotao_h.jpg) repeat-x;
}

pronto , agora se voce for olha na pagina ele vai ta la bunitinho =D,
como ainda nao fizemos a funcao dele , ele ta estatico e fixo , agora vem a funcao =]

abre um novo arquivo js (geral.js)
adiciona ela no head abaixo das bibliotecas ficando assim

<script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”js/jqDnR.js”></script>
<script type=”text/javascript” src=”js/geral.js”></script>

e vamo la

linha por linha

function alerta(msg,local,xpos,ypos){

if(msg != 'close'){
// se o parametro 'msg' for diferente de close(usado para fexar o alert) entra no bloco if
$(&quot;#block&quot;).show();//a div que bloqueia aparece
$(&quot;#alert&quot;).fadeIn(600);//agora o alert aparece
$(&quot;#span&quot;).css('top',ypos).css('left',xpos).html(msg);// joga a msg do alert na posicao

definida no xpos e ypos e pega a msg que foi chamada na funcao
if(local != ''){//se o local nao estiver em branco ao clicar no botao ele direciona pra

pagina definida em &quot;local&quot;
$('#div').html(&quot;&amp;lt;input id=\&quot;btnalert\&quot; type=\&quot;button\&quot;

onclick=\&quot;location.href='&quot;+local+&quot;'\&quot; value=\&quot;ok\&quot;&amp;gt;&quot;);
}
else{// se tive em branco ao clicar ele fexa o alert e &quot;desbloqueia&quot; o conteudo escondendo

a div block
$('#div').html(&quot;&amp;lt;input id=\&quot;btnalert\&quot; type=\&quot;button\&quot; onclick=\&quot;alerta('close','','','');

return false;\&quot; value=\&quot;ok\&quot;&amp;gt;&quot;);
}
}
else{//quando a msg for igual a &quot;close&quot; ele esconde tudo =D
$(&quot;#block&quot;).hide();
$(&quot;#alert&quot;).fadeOut(600);
}

}

se voce testa agora o alert ja esta aparecendo com as posicoes e a msg que foi posta onde chama a funcao

porem o alert ainda nao esta “dregziavel”
pra pode arrasta ele e so por essa linha dentro da funcao

$(&quot;#alert&quot;).jqDrag();
//ficando assim .....
function alerta(msg,local,xpos,ypos){

if(msg != 'close'){
$(&quot;#alert&quot;).jqDrag(); // drag do alert
// se o parametro 'msg' for diferente de close(usado para fexar o alert) entra no bloco if
$(&quot;#block&quot;).sho [...]

a posicao da msg no alert eu coloquei dinamica tambem, pois as vezes as msgs de erro ocupam mais de 1 linha ai

cada um posiciona onde fica melhor mas se for erro de 1 linha pode sempre dexa 22% e 33% , o primero

corresponde a posicionamento horizontal (posx) e o segundo a posicao vertical (posy)

bom ta ai , modifiquem a vontade , principalmente as imagens ne =] .

e os erros de port , nem liguem =D, se fico algo mal explicado ou nao intenderam #$%%^@ nenhuma , manda um e-mail que eu tento ajuda =] vlw ate cezarlol@hotmail.com

download

ta hospedado no rapidshare =]

Autor:

cezaarr

Patrocinador:	Anderson Maki
	Anderson Makiyama é formando em sistemas para a internet pela faculdade Anhanguera, dedica seu tempo criando soluções para a internet e escrevendo sobre o assunto. Possui alguns blogs onde frequentemente disponibiliza dicas sobre os temas: wordpress, programação PHP, dinheiro na internet, otimização de sites (SEO), etc.

2 Responses to layout 100% height e falso alert com Jquery

Página 1 de 11

2 Responses to layout 100% height e falso alert com Jquery

Deixe um Comentário Cancelar resposta

Categorias