Hide Div E Move

SofiaMarques · Outubro 31, 2007

Olaaa (:

Estou a fazer um site e queria por umas divs a aparecerem quando clicamos em certos links. Eu consegui mas ela aparece-me sempre no inicio ... :/ não sei se me fiz entender. a div aparece sempre que se abre a pagina e depois só quando clicamos em "fechar" é que ela se esconde. E eu não queria que ela aparecesse, mas sim, aparecesse só quando eu clico no link.

E depois queria que ela podesse ser movida pra onde o utilizador quissese. Procurei codigos na net, mas não consegui :/

O codigo do show/hide é este:

<script language = "JavaScript">

var coiso

function epah(coiso){

if (eval(coiso).style.display=='none'){
eval(coiso).style.display='block'
}
else{
eval(coiso).style.display='none'
}
}

</script>

Se me puderem ajudar, agradecia (:

fercosmig · Novembro 1, 2007

posta todo o código ae, inclusive o CSS

SofiaMarques · Novembro 1, 2007

este é o código da pagina todo (: :

<html>
<head>
<title>....:  Nacard  :....</title>
<script language = "JavaScript">


var coiso

function epah(coiso){

if (eval(coiso).style.display=='none'){
eval(coiso).style.display='block'
}
else{
eval(coiso).style.display='none'
}
}

</script>
</head>



<body>
<p align="center">
<a href = "java script:epah('noticias')"><img border="0" src="nanci.gif" width="82" height="82"></a>
<a href = "java script:epah('nacard')"><img border="0" src="alex.gif" width="85" height="85"></a>
<!-- Ultimas Noticias //-->
<div id="noticias" style="width: 244; height: 56">
<table border="0" width="249" bgcolor="#FF33CC" cellspacing="0" cellpadding="5" style="position: absolute; border-collapse: collapse; left: 523; top: 460" bordercolor="#111111">
<tr>
<td width="239">
  <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
  <tr>
  <td id="titleBar" style="cursor:move" width="100%">
  <ilayer width="100%" onSelectStart="return false">
  <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
  <font face="Arial" color="#FFFFFF">Ultimas Noticias</font></layer>
  </ilayer>
  </td>
  <td style="cursor:hand" valign="top">
  <p align="right"><font size="2" face="Tahoma">
  <font style="text-decoration: none" color="#ffffff">
  <a href= "java script:epah('noticias')"><font  style="text-decoration:none">
  f</font><font style="text-decoration: none">echar</font></a><font style="text-decoration: none">
  </font></font></font>
  </td>
  </tr>
  <tr>
  <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">

<font face="Tahoma">Noticias...</font> </td>
  </tr>
  </table> 
</td>
</tr>
</table>
</div>
<!-- Fim //-->
<!-- Nacard //-->
<div id="nacard" style="width: 251; height: 56">
<table border="0" width="249" bgcolor="#CCFF66" cellspacing="0" cellpadding="5" style="position: absolute; border-collapse: collapse; left: 262; top: 233" bordercolor="#111111">
<tr>
<td width="239">
  <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
  <tr>
  <td id="titleBar" style="cursor:move" width="100%">
  <ilayer width="100%" onSelectStart="return false">
  <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
  Nacard</layer>
  </ilayer>
  </td>
  <td style="cursor:hand" valign="top">
  <p align="right"><font size="2" face="Tahoma">
  <font style="text-decoration: none" color="#ffffff">
  <a href= "java script:epah('nacard')"><font  style="text-decoration:none">
  fechar</font></a> </font></font>
  </td>
  </tr>
  <tr>
  <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">

<font face="Tahoma">Nacard - o grupo</font></td>
  </tr>
  </table> 
</td>
</tr>
</table>
</div>
<!-- Fim//-->
</body>
</html>

KaKarotto · Novembro 3, 2007

Oi Sofia, desculpa mas eu hj não estou com muito saco rsrsrs, então não vou mexer no seu código, mas darei a minha versão para a solução do seu problema tudo bem?

Seguinte, vou passar os códigos, mas preste atenção no final do meu post, que eu explicarei tudo.

Código mover.js

//
//*// Mover Components na tela
//
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
  if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
    return false;
  }
}

function selectmouse(e)
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";
  while (fobj.tagName != topelement && fobj.className != "movame")
  {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }

  if (fobj.className=="movame")
  {
    isdrag = true;
    dobj = fobj;
    tx = parseInt(dobj.style.left+0);
    ty = parseInt(dobj.style.top+0);
    x = nn6 ? e.clientX : event.clientX;
    y = nn6 ? e.clientY : event.clientY;
    document.onmousemove=movemouse;
    return false;
  }

}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

Código Show/Hide.js

function showHide(div){
var aux, bd

aux=document.getElementById(div)
bd="<a href='#' onclick=\"showHide('"+div+"')\">x</a>Texto incluso!!!!"

if(aux.style.display!="block"){
aux.style.display="block"
aux.innerHTML=bd
}

else{
aux.innerHTML=""
aux.style.display="none"
}

}

Css

.movame{
cursor:move;
}

#divEscondido{
position:absolute; top:0; left:0;
width:150px; height:150px;
border:1px solid green;
background-color:#f3f3f3;
text-align:center;
font:12pt tahoma;
display:none
}

Html :

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

<body>

<a href="#" onclick="showHide('divEscondido')">Aparecer</a>


<div id="divEscondido" class="movame">
</div>


</body>
</html>

No primeiro código não tem muito o que ver, é um código simples que um amigo me passou da net para mover elementos na tela.

Já o segundo código eu fiz, ele faz com que o div que você deseja apareça, eu criei uma variável chamada bd para armazenar o que vai dentro do div, não sei o que quer colocar, se é uma imagem se é texto etc... você pode usar um array, pode usar ajax ou qualquer outro método para armazenar dentro da variavel bd, o conteúdo que quer.

O Css está definindo como o div aparenta, o div PRECISA estar definido como uma classe do tipo "movame" para que o primeiro script consiga fazer ele se mexer na tela.

O Html é auto-explicativo, veja que os códigos em javascript funcionam com qualquer div, bastando você apenas especificar o id do que quer alterar.

É isso ae. Beleza? Era isso mesmo que queria ?

Volta pra dizer se funcionou, e pra dizer se era isso que queria mesmo tá ??!?!

Kelabrassssss

Entrar

Hide Div E Move

Pergunta

SofiaMarques

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

fercosmig

Link para o comentário

Compartilhar em outros sites

SofiaMarques

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades