+- Forum Pplware (http://forum.pplware.com)
+-- Fórum: Mais Tech (/forumdisplay.php?fid=11)
+--- Fórum: Programação e Web (/forumdisplay.php?fid=16)
+--- Tópico: JavaScript / Jquery duvida (/showthread.php?tid=7906)
Páginas: 1 2
JavaScript / Jquery duvida - mpmont - 30-11-2010 11:07
Bom dia,
estou a fazer uma função que basicamente me adiciona ou remove classes a uma div e a uma lista... para com isto conseguir mudar a estrutura de um layout à medida que o utilizador clica num item da lista.
A coisa já funciona mas eu não sou lá grande coisa em jquery então a função está um pouco extensa e tem um bug que gostava que me ajudassem a resolver.
segue a função:
Código PHP:
$("li.layout1").toggle(function(){
$(this).addClass("block1");
$("li.layout2").removeClass("block2");
$("li.layout3").removeClass("block3");
$("div.project").fadeOut("slow", function() {
$(this).fadeIn("slow").removeClass("txt-img-grid");
$(this).fadeIn("slow").removeClass("txt-grid");
$(this).fadeIn("slow").addClass("img-grid");
});
}, function () {
$(this).removeClass("block");
$("ul.display").fadeOut("slow", function() {
$(this).fadeIn("slow").removeClass("thumb_view1");
});
});
$("li.layout2").toggle(function(){
$(this).addClass("block2");
$("li.layout1").removeClass("block1");
$("li.layout3").removeClass("block3");
$("div.project").fadeOut("slow", function() {
$(this).fadeIn("slow").removeClass("img-grid");
$(this).fadeIn("slow").removeClass("txt-grid");
$(this).fadeIn("slow").addClass("txt-img-grid");
});
}, function () {
$(this).removeClass("block");
$("ul.display").fadeOut("slow", function() {
$(this).fadeIn("slow").removeClass("thumb_view2");
});
});
$("li.layout3").toggle(function(){
$(this).addClass("block3");
$("li.layout1").removeClass("block1");
$("li.layout2").removeClass("block2");
$("div.project").fadeOut("slow", function() {
$(this).fadeIn("slow").removeClass("txt-img-grid");
$(this).fadeIn("slow").removeClass("img-grid");
$(this).fadeIn("slow").addClass("txt-grid");
});
}, function () {
$(this).removeClass("block");
$("ul.display").fadeOut("slow", function() {
$(this).fadeIn("slow").removeClass("thumb_view3");
});
});
o que acontece é que quando clico num item da lista pela primeira vez tudo acontece como esperado, a class muda, no entanto se mudar para outra vista e dps voltar a clicar na primeira preciso de dois clicks para a coisa funcionar...
alguma sugestão?
RE: JavaScript / Jquery duvida - ark15 - 30-11-2010 11:47
Assim é complicado chegar lá, não podes disponibilizar mais código?!
RE: JavaScript / Jquery duvida - mpmont - 30-11-2010 11:57
basicamente isto faz mudar em dois locais html:
Código PHP:
<ul class="layout-btn">
<li class="layout1 block1"><a href=""></a></li>
<li class="layout2"><a href=""></a></li>
<li class="layout3"><a href=""></a></li>
</ul>
aqui muda apaga o block1 e cria um block2 no layout2...
Código PHP:
<div class="project img-grid">
e ao mesmo tempo tenho uma div onde vai ser modificada a class img-grid para txt-img-grid ou txt-grid consoante a escolha... a coisa funciona a primeira vez que uso mas dps quando tenho que mudar para uma class que ja usei antes ele precisa de dois clicks :/
RE: JavaScript / Jquery duvida - Bruno Bernardino - 30-11-2010 13:09
Bem, antes de mais, parece-me que o toggle() não é a função mais indicada para utilizar aí.
http://api.jquery.com/toggle/
Deverias utilizar algo como o click() e definir/interpretar lá se é para esconder ou mostrar. Em princípio isso resolverá o teu bug, em que esperas que algumas coisas estejam escondidas ou visíveis mas durante o código escondes/mostras, sem callbacks.
RE: JavaScript / Jquery duvida - mpmont - 30-11-2010 13:40
Perfeito Bruno! funcionou... =) Thanks
RE: JavaScript / Jquery duvida - mpmont - 02-12-2010 19:27
tenho outra duvida, agora numa outra coisa que estou a tentar fazer...
então é assim,
o que quero fazer é muito simples em teoria, quero fazer fadeout --> fadeIn quando ha mudança de pagina. A parte do fadein é facil e já fiz, basicamente sempre que é carregada uma pagina eu coloco display: none na pagina com jquery e na mesma função faço fadeIn e fica bem. agora o que eu n sei fazer é o fadeOut.
Não estou a ver como é que eu faço a detecção de que foi clicado um href que vai para uma pagina externa para depois fazer o fadeOut..
E ainda tenho mais um problema que é não podem ser todos os href's porque tenho galerias e alguns não enviam para outra pagina.
Ou seja teria que ser com um ID em todos os links externos e dps esse ID é que servia para on click fadeOut e dps ir...
alguma ideia em como fazer isto?
ps: ainda estou a dar os primeiro passos em jquery... =)
RE: JavaScript / Jquery duvida - Bruno Bernardino - 02-12-2010 19:52
podes fazer isso com classes ou rel's, que é o mais indicado, por exemplo:
Código:
<a href="#" rel="external">Link externo</a> | <a href="#">Link interno</a>Depois terias um JS do tipo:
Código:
$('a[rel="external"]').click(function() { alert('este link vai para fora, fazer aqui o fadeOut'); })Outra nota, se queres esconder algo, podes utilizar o hide() do jQuery, que basicamente coloca o display: none, mas sempre utilizas a framework na totalidade.
RE: JavaScript / Jquery duvida - mpmont - 02-12-2010 20:54
ok, amanhã testo isso e digo como correu, a ideia do rel parece-me excelente =) thanks
RE: JavaScript / Jquery duvida - mpmont - 03-12-2010 11:21
Não está a funcionar, não era suposto ser só assim?
Código PHP:
$('a[rel="external"]').click(function() {
$('div.wrapper').fadeOut('slow')});
RE: JavaScript / Jquery duvida - Bruno Bernardino - 03-12-2010 16:45
Sim, mas qual é o teu código HTML?