Byte av check för vilken kategori som är aktiv med jQuery + Wordpress

Tråden skapades och har fått 6 svar. Det senaste inlägget skrevs .
1

Ledsen ifall rubriken inte beskriver väl nog, jag gör en site som filtrerar inlägg per kategori. Klickar man på ett inlägg så kommer man till singlepage men då mister man info om vilken kategori man är på. Infon finns i content-taggen:

<article id="content" data-current="kategorinamnet"> 

</article>

I korthet: jag vill kunna säga åt jquery att "om diven #content syns, använd den som check för vilken kategori som är aktiv".
Jag har en div som heter container undertill som sätter current på "alles" eftersom sidan laddas om när diven öppnas (ny post, singlepage).

Detta vill jag kolla genom if ($('#content').is(":visible")) men det verkar inte fungera.

function checkActive(){
        $('#filters a').each(function(){
            $(this).css({
                color: '#333333'
            
            });
                var title = $(this).attr('data-filter');
                title = '.'+title;
                if(title=='.*'){
                    title = '*';                
                }
            var currentCat = $container.attr('data-current');
			
if ($('#content').is(":visible")){ //ifall diven med inlägget är synligt
				 console.log('the element is visible');
				var currentCat=$content.attr('data-current'); //så gäller content-divens data-filter
			}else if($('#content').is(":hidden")){
				console.log('the element is now hidden');
	//Här spelar det ingen roll att jag har stängt elementet det står fortfarande som visible i consolen. 
			}
			
            if(title==currentCat){//kollar containern med gridet
                $(this).css({color: '#00ff00'});
			  }
        });
        }
    });

Utöver det skulle jag gärna se att scriptet även filtrerar om så det inte är alla om syns utan bara det som tillhör kategorin... om det skulle vara möjligt inom ramen för det här scriptet vet jag inte än.

Hela scriptet jag använt finns här:
Design Lunatic – A Continuation of the Isotope Tutorial: Highlight the currently active link

All hjälp tas emot med öppna armar då jag har kört fast ordentligt här..

//Klara

Förstår jag rätt: Först är content visible, sedan "stänger du", men content är fortfarande visible?
Vad innebär då att stänga? Triggas en animation kanske det inte hunnit bli osynligt när koden körs.
Vad jQuery betraktar som "invisible" är inte helt självklart, har du läst api:t, jag citerar lite relevanta grejer från dokumentationen nedan.
Mitt råd är att skriva om koden så att "stäng" koden sätter (eller togglar) en css-klass du hittar på själv (kanske "closed"), och att du testar på den klassen istället om visible spökar för dig. Då är du inte beroende av att förstå exakt vad jQuery betraktar som visible.
Lycka till,
Henrik

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout. During animations that hide an element, the element is considered to be visible until the end of the animation.

  • Medlem
  • Stockholm
  • 2013-01-10 09:17

Yep det brukar bli rätt mycket stabilare och kunna lösa div problem att köra egna css-classer för sina lägen än att förlita sig på jQuerys hide() & show() etc..

Ett bra förslag om man vill ha javascript-hjälp är att istället för att fråga luddiga frågor, visa sin kod i "fungerande" miljö. Ett bra sätt är Js fiddle..

Create a new Fiddle - jsFiddle

ps. jag och console.log() är nu bästa vänner

Tack så mycket för era svar, jag har lyckats få det att fungera! Använde mig av complete!

function slidingDown(){
	var $content = $('#content');
	height = $content.height() + 'px';
	$content.slideDown({
		height:height,
		duration:1500,
		complete:function(){
		var currentCat=$content.attr('data-current');//sätter att det är content som regleras från menyn
		console.log(currentCat, "slidingDow");
		}
		});
}
  • Medlem
  • Stockholm
  • 2013-01-13 11:43

Yep, glöm inta att ta bort det innan du släpper siten skarp dock för det orsakar javascriptfel i t.ex. IE. Man kan komma runt det men enklast är nog att ta bort eller kommentera bort raderna med console.log när man debuggat klart.

Åhå? Det visste jag inte! Det ligger nu på att-göra-listan! Tack!

1
Bevaka tråden