Jump to content

  2. →
  3. →

Photo

Layers

Started By knoxville , 01/12/2003, 09:53

  • Faça o login para participar
15 replies to this topic

#1 knoxville

knoxville

    Backdoor Man

  • Usuários
  • 951 posts
  • Sexo:Masculino
  • Localidade:Itajaí - SC

Posted 01/12/2003, 09:53

ae galera... alguem sabe me explikar como fazer uma layer funcionar como uma janela popup mas sem abri-la? abre na mesma página, por cima de tudo... como no exemplo deste site. Eu já fiz a imagem e tudo, só falta aprender isso e PRINCIPALMENTE como fechá-la ao clicar com o botão! MUITO OBRIGADO (y) vlw! :D

vô por a img q eu fiz aí em baixo, pra vcs entenderem melhor!

Attached Files


Edição feita por: knoxville, 01/12/2003, 09:54.

sonnekönig. \o/

www.mamados.com.br
Sol Beltrame

#2 SlimShady

SlimShady

    OBS: Reflita

  • Usuários
  • 233 posts
  • Sexo:Não informado
  • Interesses:Edição de imagens, layouts e sites...

Posted 01/12/2003, 11:03

eu ja vi issu...mas issu eu axu q eh o msm esquema da publicidade flutuante... q usa o seguinte codigo:

< div style ="positionn:absolute;
left:200px;
top:100px;
width:150px;
heigth:150px;
backgorund-color:#FFFFFF;
border:thin solid black;">
<h1 alignn="center">Teste aqui, blablabla conteudo</h1>
</div>

ai o comando de fechar vc usa javascript...eu tenho uns scripts prontos aki depois posto aki pra vc :D


flwz, slim... :yes:
Caio Mora ( (e)studios AQUA )
www.estudios-aqua.com

#3 SlimShady

SlimShady

    OBS: Reflita

  • Usuários
  • 233 posts
  • Sexo:Não informado
  • Interesses:Edição de imagens, layouts e sites...

Posted 01/12/2003, 11:28

vou colocar o codigo de um arquivo q vc deve criar, deve ser chamado de codigo1.js :
var bouncelimit=32
var direction="up"

function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}

function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}

function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}

function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}

function truebody(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}


window.onload=initbox

depois salve no msm diretorio q sua pagina, abra a pagina e coloque entre <head>e</head>:
<script
language="JavaScript1.2"
src="codigo1.js">
</script>
o pop up q vc ira colocar deve ser incluido em uma tag DIV com o ID igual a "dropin", use o atributo style pra modificar a aparencia da caixa, um exemplo de uma transparente e sem bordas:
<div id="dropin"
style="position:absolute;
visibility:hidden; left:200px;
top:100px; width:360px; heigth: 150px">
Coloque o conteúdo aqui
</div>
dentro do pop up vc vai criar um botaum pra fechar, ele deve chamar a função dismissbox() , pode ser chamado por botão ou link, link fica assim:
<a href="#"
onclick="dismissbox();return false" >
</a>

espero q tenha entendido e q consiga B)


flwz, slim... :yes:
Caio Mora ( (e)studios AQUA )
www.estudios-aqua.com

#4 advanced

advanced

    ...

  • Usuários
  • 603 posts
  • Sexo:Masculino
  • Localidade:Brasil
  • Interesses:Muitos

Posted 02/12/2003, 05:21

Acho que isso se enquadra melhor com JavaScript...
flw's

#5 hogler

hogler

    Novato no fórum

  • Usuários
  • 12 posts
  • Sexo:Não informado

Posted 03/12/2003, 12:01

Você precisa criar uma layer, para que ela fique sobre os outros objetos, existe uma propriedade do style chamada position, se você colocar "position:absolute;" seu objeto fica sobre os demais na tela, dai pra controlas a posição é só usar as propriedades "top" e "left". Pra mostrar/econder a layer você controla as propriedades "visible". Olha só um exemplo:
<script>
function Mostra(){
document.all.div1.style.visibility = "";
}
function Esconde(){
document.all.div1.style.visibility = "hidden";
}
</script>
<DIV id="div1" style="position:absolute; top:10; left:100">Texto dentro da layer</DIV>
<BR>
<INPUT type="button" onClick="Mostra()" value="Mostra">
<INPUT type="button" onClick="Esconde()" value="Esconde">

Espero ter ajudado.

Alexandre Hogler - [ LeX ]

#6 knoxville

knoxville

    Backdoor Man

  • Usuários
  • 951 posts
  • Sexo:Masculino
  • Localidade:Itajaí - SC

Posted 03/12/2003, 12:39

Você precisa criar uma layer, para que ela fique sobre os outros objetos, existe uma propriedade do style chamada position, se você colocar "position:absolute;" seu objeto fica sobre os demais na tela, dai pra controlas a posição é só usar as propriedades "top" e "left". Pra mostrar/econder a layer você controla as propriedades "visible". Olha só um exemplo:
<script>
function Mostra(){
document.all.div1.style.visibility = "";
}
function Esconde(){
document.all.div1.style.visibility = "hidden";
}
</script>
<DIV id="div1" style="position:absolute; top:10; left:100">Texto dentro da layer</DIV>
<BR>
<INPUT type="button" onClick="Mostra()" value="Mostra">
<INPUT type="button" onClick="Esconde()" value="Esconde">

Espero ter ajudado.

Alexandre Hogler - [ LeX ]

hmmmmm... axo q intendi! :D brigadão! (y)
sonnekönig. \o/

www.mamados.com.br
Sol Beltrame

#7 knoxville

knoxville

    Backdoor Man

  • Usuários
  • 951 posts
  • Sexo:Masculino
  • Localidade:Itajaí - SC

Posted 04/12/2003, 08:09

aee! :) fui tentar fazer hoje e consegui...
agora só tenho uma dúvida... pra colocar na tag A... como faço? <a href="java script:Esconde()"> ??? vlw! (y)

Edição feita por: knoxville, 04/12/2003, 08:16.

sonnekönig. \o/

www.mamados.com.br
Sol Beltrame

#8 Dinho Z.

Dinho Z.

    Rock'n'Roll !!! Yeah !!!

  • Usuários
  • 755 posts
  • Sexo:Não informado
  • Localidade:Santo André - SP

Posted 04/12/2003, 08:14

Você faz assim, que nem o hogler postou...

Você precisa criar uma layer, para que ela fique sobre os outros objetos, existe uma propriedade do style chamada position, se você colocar "position:absolute;" seu objeto fica sobre os demais na tela, dai pra controlas a posição é só usar as propriedades "top" e "left". Pra mostrar/econder a layer você controla as propriedades "visible". Olha só um exemplo:
<script>
function Mostra(){
  document.all.div1.style.visibility = "";
}
function Esconde(){
  document.all.div1.style.visibility = "hidden";
}
</script>
<DIV id="div1" style="position:absolute; top:10; left:100">Texto dentro da layer</DIV>
<BR>
<INPUT type="button" onClick="Mostra()" value="Mostra">
<INPUT type="button" onClick="Esconde()" value="Esconde">

Espero ter ajudado.

Alexandre Hogler - [ LeX ]


Edição feita por: Dinho Z., 04/12/2003, 08:14.

Dinho

Ajude a proibir os "jabás" nas rádios brasileiras.
Mas, afinal, o que é o "jabá"?!? acesse Rock Brasil
Acesse Fórum SOS Designers
Coluna de JavaScript/CSS do Upmasters

#9 hogler

hogler

    Novato no fórum

  • Usuários
  • 12 posts
  • Sexo:Não informado

Posted 04/12/2003, 09:16

knoxville

Eh isso aih...pra executar o JavaScript pelo link vc faz

<a href="java script:Esconde()">Esconde</a>

Só uma dica, a layer com "position absolute", vai ficar sobre todos os objetos menos as "SELECT", intaum tome cuidado pra não colocar essa sua layer sobre uma "SELECT" e naum ficar como no site do ScriptBrasil :D

Valew...

#10 knoxville

knoxville

    Backdoor Man

  • Usuários
  • 951 posts
  • Sexo:Masculino
  • Localidade:Itajaí - SC

Posted 04/12/2003, 14:36

sim, eu vi mesmo como fikow feio hogler, valeu! :D (y) tá funcionando, veja AQUI.
mas surgiu outro probleminha... c vc abrir o site poderá ver! perceba que lá em cima tem um banner... sobre franchising, escola st. james, etc, nao!??! pois bem... quando clicka na imagem para fechar, o banner PARA... o gif nao "roda" mais! :( o que eu posso fazer pra ele continuar normalmente?
sonnekönig. \o/

www.mamados.com.br
Sol Beltrame

#11 Dinho Z.

Dinho Z.

    Rock'n'Roll !!! Yeah !!!

  • Usuários
  • 755 posts
  • Sexo:Não informado
  • Localidade:Santo André - SP

Posted 05/12/2003, 11:49

Eu já vi isto acontecer... Isto não é problema de código... Eu acho que é erro do navegador...
Dinho

Ajude a proibir os "jabás" nas rádios brasileiras.
Mas, afinal, o que é o "jabá"?!? acesse Rock Brasil
Acesse Fórum SOS Designers
Coluna de JavaScript/CSS do Upmasters

#12 hogler

hogler

    Novato no fórum

  • Usuários
  • 12 posts
  • Sexo:Não informado

Posted 05/12/2003, 14:24

Pode ser que seja o navegador mesmo como o Dinho falou...mais só pra deixar a conciência mais leve ..heheh... existe outra propriedade que tbm apaga ou mostra as layers, tenta usar essa no teu JavaScript, quem sabe seja isso...sei lah... lah vai:

Para mostrar
document.all.nomeDaSuaLayer.style.display = "";

Para apagar
document.all.nomeDaSuaLayer.style.display = "none";

Troca o seu JS por isso aih e ve nu q vai dar...

Valeu...

#13 mharky

mharky

    Turista

  • Usuários
  • 34 posts
  • Sexo:Masculino

Posted 26/08/2004, 17:16

Me ajudo bastante

Falow

Edição feita por: mharky, 26/08/2004, 17:26.

#14 Humberto - S.O.S.

Humberto - S.O.S.

    ...

  • Banidos
  • PipPipPipPipPip
  • 463 posts
  • Sexo:Masculino
  • Localidade:São Bernardo do Campo - SP

Posted 02/09/2004, 19:01

Kra, vi quanto vc procura e nada! Pega ai vai.

Código .JS

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>


Esse código abaixo deve estar na sua pagina HTML

<div id="popup" style="position:absolute; left:92px; top:34px; width:208px; height:142px; z-index:1" onClick="MM_showHideLayers('popup','','hide')"><img src="http://forum.wmonlin...83272.gif"><br>
  FECHAR
</div>


Coloquei até sua img da caveira q é animada, pra vc ver q animação não para!
Quer ver um exemplo? esta em anexo!

Espero q ajudo em algo!
T+

Attached Files


Edição feita por: Humberto - S.O.S., 02/09/2004, 19:04.

...

#15 RonsisM

RonsisM

    Super Veterano

  • Usuários
  • 15724 posts
  • Sexo:Masculino
  • Localidade:Plovdiv

Posted 22/10/2017, 00:07

Prices Cialis Walmart Amoxicillin Cause Indegestion Acheter Cialis En Espagne viagra online pharmacy Amoxil And Aspirin Fedex Levaquin Levotab Legally Medicine
Kamagra Generico whoesale levitra pills Propecia Generic Cheap Accutane Online No Prescription
Voltar para Javascript / DOM / AJAX / ECMAScript


0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → Javascript / DOM / AJAX / ECMAScript
  4. Privacy Policy
  5. Regras ·
IPB Skin By Virteq