webForumDet fria alternativet

Hjälp med hash när jag klickar på en div

JavaScript

40 svar · 4 211 visningar · startad av bikic · sida 2 av 3

Frågan, av bikic

Hej alla! Jag har idag en portfolio där jag visar mina senaste arbeten. Dessa ligger i en grid och presenteras 4 per rad. När jag för över musen på dessa så sker lite coola effekter, och klickar jag på arbetet får jag en mer detaljerad vy på arbetet som fadas fram. Vad jag vill är att när jag klickar fram en div för få en mer detaljerad vy så vill jag kunna få en hash tag på detta arbete - man s

Läs frågan i sin helhet →
Medlem sedan juni 2006261 inlägg
#21

Hej igen!

Har fått in window.location.hash nu och det verkar fungera bra med animationen.

Men jag har en utmaning till. Jag vill att varje gång man stänger ett objekt så ska hela funktionen strypas för att sedan kunna öppnas på exakt samma sätt.

Som det är nu så sparar den vissa saker som jag en gång öppnat.

Sen har jag problem med min cyclefunktion som inte riktigt vill fungera.

har du tid att kolla på min kod och säga om du hittar några fel eller förslag på förbättringar.

Tacksam för svar!

Medlem sedan juni 20019 519 inlägg
#22

Du har en hel del problem, klicka bara Jansson & Lundén så kommer karusellen byggas ut och ut för varje gång du gör en toggle på den, har påpekat detta i dina andra trådar,

sätt hashen först efter animeringen är klar (om du upplevde att lagget kom först efter det)

Medlem sedan aug. 20039 340 inlägg
#23

För mig laddar innähållet för alltid när jag klickar på någon länk. Dessutom funkar inte existerande hashar när sidan laddas om, eller i förlängningen om man länkar till en URL med hash-tag. (Och vad är då meningen med att alls använda hashar istället för bara en JS-variabel?)

Medlem sedan juni 20019 519 inlägg
#24

Dessutom funkar inte existerande hashar när sidan laddas om

det är ju det han vill ha hjälp med ;)

Lägg in:

if (window.location.hash) {
	$(window.location.hash).trigger("click");
}

efter:

$(".explore-item-close")
	.click(portfolio.close);

Kolla även jquery BBQ för att få liten idé hur man skulle kunna jobba med hash.

Medlem sedan juni 2006261 inlägg
#25

Tack!

Voigt: vad menar du med en hel del problem?

Hade ni svar på min cyclefunktion som inte riktigt vill fungera.

Medlem sedan juni 20019 519 inlägg
#26

bikic skrev:

Tack!

Voigt: vad menar du med en hel del problem?

Hade ni svar på min cyclefunktion som inte riktigt vill fungera.

Tryck på det så ser du att karusellen bli riktigt knäpp, detta har jag informerat i dina andra trådar. Vad menar du med cycle funktion?

Medlem sedan juni 2006261 inlägg
#27

Karusellen är min cyclefunktion ;)

Jag har sett mina tidigare trådar men förstår inte riktigt, behöver därför lite mer hjälp.

Medlem sedan juni 20019 519 inlägg
#28

Bind inte karusellen mer än en gång, om inte du nollar karusellen när du stänger din "box"

Har gett dig flera råd i dina inlägg den enklaste:

Bind den direkt när sidan är laddad och inte varje gång du trycker på boxarna.

Medlem sedan juni 2006261 inlägg
#29

Ok!

Men hur får jag reda på itemID då? Och hur kan jag veta att just den karusellen funkar med det jag klickar på.

Är med på bindningen men jag vet inte vart och hur jag ska få in kopplingen.

Medlem sedan juni 20019 519 inlägg
#30

hämta ut alla .explore-item-slides och kör en each på den för att binda plugin:et och hämta ut next och prev inne i varje .explore-item-slides.

setTimeout(function() {
			setGrid;
		}, 300);

är absolut överflödig för du kallar inte på en metod på setGrid, det har du redan gjort, du få endast ut en jquery referens på alla $("#grid-content");

jQuery("#header").hide().css("visibility", "visible").fadeIn(500);
jQuery("#content").hide().css("visibility", "visible").fadeIn(500);

Tycker det se konstigt ut att ibland kör du $ och ibland kör du jQuery när du kallar på jquery metoden, lite konstigt. Sen kan du prestanda höja den (visst nu är det bara IDn) men du har ju redan letat upp #header och #content redan en gång

$("#header").css("visibility", "hidden");
$("#content").css("visibility", "hidden");

var setGrid = $("#grid-content").vgrid({
	easeing: "easeOutQuint",
	time: 400,
	delay: 20,
	fadeIn: {
		time: 500,
		delay: 250
	}
});

setTimeout(function() {
	jQuery("#header").hide().css("visibility", "visible").fadeIn(500);
	jQuery("#content").hide().css("visibility", "visible").fadeIn(500);
}, 500);

setTimeout(function() {
	setGrid;
}, 300);

Kan vara:

var header = $("#header").css("visibility", "hidden"),
	content = $("#content").css("visibility", "hidden");

setTimeout(function() {
	header.add(content).hide().css("visibility", "visible").fadeIn(500);
}, 500);

setTimeout(function() {
	$("#grid-content").vgrid({
		easeing: "easeOutQuint",
		time: 400,
		delay: 20,
		fadeIn: {
			time: 500,
			delay: 250
		}
	});
}, 300);

Du har ju redan ändrat slidern ser jag nu ju :)

Sen kan du flytta in showItem och closeItem och även if frågan inne i din anonyma metod (dom-readyn) om du inte vill att folk skall komma åt den publikt.

Medlem sedan juni 2006261 inlägg
#31

Hej igen!

Visst blev det bättre nu! Satt och trixade lite i slutet av förra veckan och tycker jag fick till det rätt bra. Jag fick dock inte laddat upp det senaste jag gjorde, ska se om jag kan få lagt upp det inom kort.

Hade gärna velat få karusellen att alltid ladda 2 sek innan, oavsett om man klickar upp den för första gången eller om man gör det efter det att man stängt ner den.

Hur menar du med att jag ska kunna flytta in showItem och clodeItem i min anonyma metod?

Medlem sedan juni 20019 519 inlägg
#32

bikic skrev:

Hej igen!

Hade gärna velat få karusellen att alltid ladda 2 sek innan, oavsett om man klickar upp den för första gången eller om man gör det efter det att man stängt ner den.

Läs dokumentationen för plugin:et och se om du kan göra en reset på något sätt, annars få du modifiera koden att den klarar av det.

Hur menar du med att jag ska kunna flytta in showItem och clodeItem i min anonyma metod?

Lägg metoderna inne i DOM-ready koden, det är bara där dom körs ändå. finns ingen anledning att lägga dom på window objektet och fylla upp den.

Medlem sedan juni 2006261 inlägg
#33

Hej igen!

I och med att jag laddar alla karuseller innan med each function så blir det svårt att sätta en setTimeout på karusellen när den väl ska läsas in. Jag ska testa med att gömma den det första jag gör för att sedan fada in den när slidern är klar. Ska se om det funkar.

Medlem sedan juni 20019 519 inlägg
#34

bikic skrev:

Hej igen!

I och med att jag laddar alla karuseller innan med each function så blir det svårt att sätta en setTimeout på karusellen när den väl ska läsas in. Jag ska testa med att gömma den det första jag gör för att sedan fada in den när slidern är klar. Ska se om det funkar.

Kommer ju inte hjälpa med en timeout, då du har loopat igenom dom innan du klickar på någon av dina bilder, så även om du väntar i 20 minuter så har ju bildspelen snurrat i bakgrunden i 20 minuter.

Medlem sedan juni 2006261 inlägg
#35

Det är sant! Men hur fan kan jag lösa det då? Är supernöjd med det jag har nu, det enda jag vill är att karusellen ska laddas in på nytt varje gång man öppnar ett objekt.

Har kollat pluginet för karusellen (cycle plugin) och det finns inget där som hjälper mig.

Medlem sedan juni 20019 519 inlägg
#36

bikic skrev:

Det är sant! Men hur fan kan jag lösa det då? Är supernöjd med det jag har nu, det enda jag vill är att karusellen ska laddas in på nytt varje gång man öppnar ett objekt.

Har kollat pluginet för karusellen (cycle plugin) och det finns inget där som hjälper mig.

Läs dokumentationen för plugin:et och se om du kan göra en reset på något sätt, annars få du modifiera koden att den klarar av det.

Om du kan köra en unload av plugin:et för din snurra så kan du göra det när du stänger den och köra en load/activate/ladda plugin:et när du öppnar den.

Medlem sedan juni 2006261 inlägg
#37

Hej igen!

Har kollat runt nu, bland andra forum och sökt en hel del på cyclepluginet och det verkar inte finnas något som unloadar det.

En tanke som slog mig var om man pausar karusellen så fort den laddats in, och sen resumar när man klickar på länken. Ska kolla mer på det.

I och med att jag kör med onClick > showItem så verkar det inte längre fungera med trigger('click') för att länka direkt till ett objekt via hash;

Har du tips på hur man skulle kunna göra det istället.

Medlem sedan juni 20019 519 inlägg
#38

En tanke som slog mig var om man pausar karusellen så fort den laddats in, och sen resumar när man klickar på länken. Ska kolla mer på det.

finns den möjligheten så är det samma princip som unload/ta bort plugin.

Har inget mer tips än det jag har skrivit: om inte plutoner har en unload/destroy/paus metod så kan du se möjligheter att bygg in det?

Medlem sedan juni 20019 519 inlägg
#39

Är det: http://jquery.malsup.com/cycle/options.html du kör? du har ju allt där ju!

'pause'   // pauses the slideshow, slideshow can be resumed with 'resume' command 
'resume'  // resumes a paused slideshow 
...
'stop'    // stops the slideshow 
'destroy' // stops the slideshow and unbinds all events
Medlem sedan juni 2006261 inlägg
#40

Hej!

Jag säger ju att det finns pause och resume, men när jag implementerar det så vill det inte fungera. Som sagt, ska kolla mer på det ikväll när jag får lite tid.

269 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
126 ms — deklarationer (db)
0 ms — hämta statistik (cache)
139 ms — hämta tråd, inlägg och bilagor (db)
127 ms — ändringar (db)