Ciclo para mostrar div's

[Paulo1471]

Boas !!

Como sou principiante nisto de javascript , gostava de uma ajudar a passar o seguinte codigo para algo como um ciclo !!

$(document).ready(function() {
 $("a#s").click(function() {
  $("div#sucesso").slideDown();
  $("div#info").hide();
 });
 $("a#i").click(function() {
  $("div#info").slideDown();
  $("div#sucesso").hide();
 });
  });

O que faço é: para uma hiperligaçao(a) com determinado id , a div correspondente aparece !! e de seguida as outras desaparecem !!

Mas tipo, nao queria repetir isto, $("div#info").hide(), para 6 div's diferentes em cada caso de mostrar.

Alguma maneira de fazer isto de uma só vez !!

Espero que me tenha feito entender !!

Obrigado

[HappyHippyHippo]

não se usa ciclos ... usasse da funcionalidade de selectors/listas do javascript/jquery

no entanto como os id's deverão ser únicos, um dix#info só existe um, e não 6. para este tipo de casos usasse uma classe

exemplo para div's com uma classe "showable"

// para todos os elementos com a classe executa a função de esconder
// quando executas um selector ( $() ) é sempre retornado uma lista
// é a essa lista de elementos que é aplicada as ações
$('.showable').hide();

Edited July 17, 2012 at 06:20 AM by HappyHippyHippo

[Paulo1471]

Obrigado !! Vou tentar 'estudar' e perceber melhor isto do jquery/javascript !!

Já agora, e usando o codigo simples que apresentei com duas div's , estou a tentar fazer algumas coisas, para aprender !!

Tipo isto , defininir posição, ou seja obter a posição de um componente, para apresentar o segundo nessa posição ou mais à direita,ou mais baixo, por exemplo:

E vi isto:

//Get
var pos = $("#sucesso");
var offset = pos.offset();
//set
$("#info").offset({ top: offset.top, left: offset.left});

Mas aparece no canto superior esquerdo da pagina, não no mesmo sitio.

PS : sem trocar o componente !!

Ideias ? Obrigado.

Edited July 17, 2012 at 09:26 PM by Paulo1471

[HappyHippyHippo]

testa primeiro para ver onde realmente se situa o div "#sucesso", isto porque como não conheço o teu código será difícil perceber onde pode estar o problema.

faz algo do genero (só escrevi parte do HTML, assim como será necessário fazer com que os div's tenham tamanho)

<div id="sucesso">
</div>
<div id="info">
</div>

// executar o javascript somente após o load completo da página
$(document).ready(function () {
 // registar uma função para quando clicares dentro do div sucesso
 $('#sucesso').click(function () {
   // obter a posição do elemento clicado em relação ao documento
   var offset = $(this).offset();
   // apresentar o offset no segundo div
   $('#info').html('left: ' + offset.left + ', top: ' + offset.top);
 });
});

verifica se o offset do div '#sucesso' é realmente diferente do (0,0)

[Paulo1471]

testa primeiro para ver onde realmente se situa o div "#sucesso", isto porque como não conheço o teu código será difícil perceber onde pode estar o problema.

faz algo do genero (só escrevi parte do HTML, assim como será necessário fazer com que os div's tenham tamanho)

<div id="sucesso">
</div>
<div id="info">
</div>

// executar o javascript somente após o load completo da página
$(document).ready(function () {
 // registar uma função para quando clicares dentro do div sucesso
 $('#sucesso').click(function () {
// obter a posição do elemento clicado em relação ao documento
var offset = $(this).offset();
// apresentar o offset no segundo div
$('#info').html('left: ' + offset.left + ', top: ' + offset.top);
 });
});

verifica se o offset do div '#sucesso' é realmente diferente do (0,0)

Ora, o offset é diferente de (0,0).

Fiz isto:

$("a#i").click(function() {

  var elem = document.getElementById("sucesso");
  var offset = elem.offset();
  var elem2 = document.getElementById("info");
  elem2.style.left = offset.left+"px";
  elem2.style.top = offset.top+"px";

   $("div#sucesso").hide();
    $("div#info").slideDown();
 });

Obter os valores de top e left da div sucesso, definir na div info esses valores e mostrar !

Mas nao mostra !!

Será de nao definir previamente no css esses valores ? Já tentei e nada !! Vou continuar a pesquisar !!

Thanks !!

[HappyHippyHippo]

Ora, o offset é diferente de (0,0).

ok, está então confirmado que estás a ler corretamente o offset do elemento '#sucesso"

agora necessitas de fazer que o elemento "#info" vá para essa posição

(nota : não percebo porque mas prontos, tu é que sabes)

// executar o javascript somente após o load completo da página
$(document).ready(function () {
 // registar uma função para quando clicares dentro do div sucesso
 $('#sucesso').click(function () {
       // obter a posição do elemento clicado em relação ao documento
       var offset = $(this).offset();

       // primeiro tens de dizer que a posicao do elemento '#info'
       // é absoluta e não relativa ao 'pai', como é por defeito
       $('#info').css('position', 'absolute');

       // agora é só mover o elemento para a posição que pretendes
       $('#info').css('left', offset.left);
       $('#info').css('top', offset.top);
 });
});

agora esta é a maneira como eu faria:

<div>
 <div id="sucesso">
 </div>
 <div id="info">
 </div>
</div>

#sucesso { display: block; /* este div fica visível no início */ }
#info { display: none; /* este div fica escondido no início */ }

// executar o javascript somente após o load completo da página
$(document).ready(function () {
 // registar uma função para quando clicares dentro do div sucesso
 $('#sucesso').click(function () {
   // esconder o elemento '#sucesso'
   $(this).hide();
   // tornar o '#info' visível que como está dentro do mesmo 'div'
   // irá parecer que houve uma troca dos div's
   $('#info').show();
 });
});

Edited July 18, 2012 at 02:10 PM by HappyHippyHippo

[Paulo1471]

Funcionou, com as minhas adaptações !! Faltava definir a posição como absoluta !!

Obrigado !!