Jump to content

Ciclo para mostrar div's


Paulo1471
 Share

Recommended Posts

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

__________________

Paulo Oliveira

Link to comment
Share on other sites

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 by HappyHippyHippo
IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

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 by Paulo1471

__________________

Paulo Oliveira

Link to comment
Share on other sites

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)

IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

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 !!

__________________

Paulo Oliveira

Link to comment
Share on other sites

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 by HappyHippyHippo
IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.