jQuery - köra script på undersida med hjälp av länk

Hej!

Jag vill kunna kunna länka till en sida med hjälp av hashtags (t.ex portfolio.html#project1) och på så sätt animera/öppna rätt objekt på sidan.

Mitt script fungerar endast när man är inne på "portfolio.html" redan, men när jag försöker gå in via en länk externt (http://minsida.se/portfolio.html#project4 t.ex) så fungerar det inte. Då öppnas den sista divven alltid. Spelar ingen roll vilket nummer jag kör.

Koden jag använder mig av:

$(document).ready(function(){
        if(window.location.hash){
                var hash = window.location.hash;
                var content = $(hash).html();{ 
			
        $('#thumbs a').find('span').stop(true, true).animate({'top': '90px'}, 300)
        $('#thumbs a').find('img').stop(true, true).animate({}, 300);
        $('#thumbs a').find('span').stop(true, true).animate({'top': '124px'}, 300)
        $('#content .project').stop(true, true).fadeOut(500);
        $($('#thumbs a').attr('href')).stop(true, true).css('left', 0).fadeIn(500);

        $('#content').animate({'min-height' : '450px', 'display' : 'inline', 'position' : 'relative', 'paddingTop' : '-2px' , 'paddingBottom' : '130px'}, 500); 

        $('#thumbs').animate({'marginTop' : '30px'}, 500);
        $('html,body').animate({scrollTop:0}, 500);

Väldigt tacksam för hjälp!

Hm, för att jag vill att du lär dig själv hur man löser problemet:

1. Kommentera bort alla rader som du anser inte är viktiga (ditt mål: rätt sak ska visas. Strunta i andra roliga animeringar, scrollningar etc.)
2. Skriv en kommentar för varje rad som förklarar vad du vill uppnå med raden, och vad raden, enligt dig, gör
3. Titta igenom dina kommentarer noggrant, stämmer allting?
4. Använd en debugger, i firefox finns firebug (så vitt jag vet), i google chrome finns en inbyggd, likaså i internet explorer, och sätt breakpoints. Med hjälp av dem kan du undersöka exakt vad som finns i dina variabler.

kan börja med att fixa din if fråga, du öppnar den men sen stänger du den aldrig utan öppna ett objekt och stänger inte den heller.

Vill inte vara sån, men du tror inte att jag har testat allt det där redan? Jag har hållit på i 2 dagar nu, men kommer ingen vart. Och yepp, jag är nybörjare.

Det är inge fel på animeringarna, de fungerar. Som jag sa, scriptet fungerar när jag är inne på sidan redan, men när det gäller att kunna länka till ett objekt, så tar den alltid och animerar den sista divven i html filen.

Jag kommer verkligen ingen vart. Antar att det har & göra med "$('#thumbs a')", hur ska den veta vilket id jag vill öppna? Men längre än så kommer jag inte.

Voigtann1: Dom måste ha missats när jag kopierade koden. Dom finns där. :stud

Tack för svaren!

Kan du lägga upp någon typ av HTML kod med.

jquery koden är rätt så klumpigt skriven, du söker igenom DOM:en om och om igen vilket är långt ifrån optimalt.

Absolut.

Så här ser divvarna som ska anropas ut:

<div class="project" id="project15">
                    <ul class="carousel">
                        <li><img src="/projets/rush2.jpg" alt="" /></li>
                        <li><img src="/projets/rush3.jpg" alt="" /></li>
                        <li><img src="/projets/rush4.jpg" alt="" /></li>
                    </ul>
                    <div class="infos clearfix">
                        <div class="titre">
                                         <a class="close">CLOSE</a>
                            <h2>Lorem ipsum</h2>
                            <small>Lorem ipsum</small>
                        <p>Lorem ipsum</p>
                        </div>
                    </div>
                </div>

#thumbs är divven som omger alla bilder, klickar man på en av dom ska rätt ruta (#project15 t.ex) öppnas/animeras. Det fungerar. Men det är när jag går in via hashtagen som länk, det inte fungerar.

När jag är inne på sidan och klickar runt på objekt, då anpassas länken i adressfältet till rätt hashtag. (http://minsida.se/portfolio.html#project15 t.ex)

Hoppas det räcker för er att få en bild av vad jag försöker göra. Tack för hjälpen!

Nej, jag tror inte att du har testat allt det där redan. Men om du nu gjort det, klistra då in koden som den ser ut efter att du kommenterat den som jag föreslog. När du gjort det så är det mycket enklare att se vad som inte fungerar som du tänkt dig.

(Eftersom att koden inte fungerar så kan jag bara gissa vad du tänkt att koden ska göra, vilket leder till att det är väldigt svårt för mig, eller någon annan, att säga vad som är fel eftersom att vi inte vet hur det är tänkt att fungera.)

Men om jag ska drista mig till en gissning:

//Fadear ut alla div-taggar med classen "project"
$('#content .project').stop(true, true).fadeOut(500);

//Tar första länken som ligger i taggen med id #thumbs, letar sedan rätt på det element med det id:t och visar det. Den länk som ligger först kommer med andra ord att välja, varje gång, vilket element som ska visas
$($('#thumbs a').attr('href')).stop(true, true).css('left', 0).fadeIn(500);

Var använder du variabeln hash någonstans? Och variabeln content?

onkelborg:
Du har rätt i din gissning. Så långt är jag med. Men du tappar mig vid variablarna. Jag använder dom inte, och antar att det är där som problemet ligger.

Hur ska mitt script veta vilken div det är som ska öppnas beroende på vilken hashtaglänk man använder? Det är med hjälp av variablarna? Hur skulle det kunna se ut då?

Återigen, ber om ursäkt för att jag är så novis på detta. Jag tar till mig allt ni gurus skriver och lär mig. :)

Tack

Ingen som vet?

MVH

Mitt tips är nog att börja om, har extremt svårt att förstå genom att läsa din kod vad du försöker göra (förstå vad du vill göra). Men jag hade nog backat allt och börjat från början igen. Och komma med html + javascript som fungera "so far" så man bara kan kopiera och se ditt problem, är inte jätte sugen på att bygga upp en hel sida med en massa dummy data som inte kanske ens är det du behöver.

Enkel princip:

1. Dölj allt
2. Plocka ut rätt tagg med id ifrån window.location.hash
3. Visa den

Skippa animeringar, gör det enkelt. Använd show() och hide()

Du vill minimera problemet till dess kärna, dela upp det i småbitar. Visst, animationerna fungerar säkert jättebra, men de kanske döljer det helt uppenbara felet för dig? I grund och botten är ditt problem: fel div visas. Ta bort allt annat skräp (det är skräp i sammanhanget - jättesnygga animeringar är jättetrevligt, men om de visar fel saker så är det ju ändå bara skräp i slutändan..)

Du behöver inte nödvändigtvis ändra på din befintliga sida, gör en ny sida med bara det viktigaste, sedan löser du det problemet du har på just den sidan. När det sedan fungerar så kan du se till att använda den lösningen på den riktiga sidan, och då kan du ha alla dina animationer.

Väldigt viktigt när det gäller programmering (och felsökning i allmänhet): Undersök varje sak för sig, och när man vet att det fungerar som det ska, i ett sammanhang. Jag har gått i den fällan många, många gånger (och gör det fortfarande lite då och då..) När jag suttit och nästan dunkat huvudet i bordet efter flera timmars slit hittar jag felet; ett litet, litet tankefel i en liten, liten, men ack så viktig komponent. Då brukar jag bli ganska sur på mig själv bara för att jag inte felsökte delarna var för sig _först_..

Själv bryr jag mig inte nämnvärt om du är nybörjare eller inte, metoden gäller alla, alltid.

Därför: plocka bort alla animationer, börja nysta i problemet. Kontrollera vilka indata du får, och vilka utdata det ger. Testa att manuellt sätta egna indata på olika ställen, vad ger det för resultat?

Att ta ett stort system och försöka hitta felet är lite som att ge någon en svart låda, sedan ställa frågan: "Varför fungerar den inte?" Även om man öppnar den svarta lådan så är grejjerna ändå ihopsatta innuti den, det finns inga ritningar (på varken detaljnivå eller blocknivå) och det går inte att se med blotta ögat vad som händer på vägen mellan ingångarna och utgångarna. För att ha en rimlig chans att hitta fel av annan art än väldigt, väldigt simpla så behöver man plocka isär grejjerna.. :)

Om vi nu återgår till din kod: Jag ser två vägar:

a) Du rensar i din kod bort allt som inte är relevant för problemet (förslagsvis med hjälp av kommenterar, då går det enkelt att lägga till dem igen), sedan kommenterar du vad du förväntar dig att de olika raderna gör, sen tittar du igenom alltihopa och funderar på om det i teorin skulle kunna fungera. Efter det frågar du oss om hjälp, och bifogar då koden inkl. kommentarer

eller

b) Skriv om det ifrån början, men ta det i etapper. Flashigt grunk som animationer kan man enkelt lägga till sist..

Båda vägarna är nyttiga, du lär dig olika, men väldigt bra, saker som du kommer ha stor nytta av.

Om du väljer att skriva om det ifrån början så ska du få lite snabb vägledning: Sätt upp delmål!

Förslag:

1. Var hittar jag information som kan hjälpa mig att hitta den div-tagg som ska visas?

2. Verifiera att din lösning på punkt 1) verkligen fungerar innan du fortsätter med punkt 3)!

3. Använd jQuery (om du nu vill använda jQuery, men jag utgår ifrån det) för att hitta rätt div-tagg

4. Verifiera din lösning för punkt 3), t.ex. genom att sätta bakgrundsfärgen till något spektakulärt på den valda div-taggen

5. Om du måste dölja en massa div-taggar så gör du det nu, samt visar rätt div-tagg.

6. Verifiera!

7. Nu kan du börja snegla lite på animationer, men glöm inte att verifiera så du ser vilken animation som det bara blir knas av.. :)

Lycka till, och välkommen åter :)

Wow! Vilket underbart svar!
Otroligt givande, ska helt klart ha detta i åtanke varje gång jag stöter på problem. Man lär sig något varje dag, även det som borde vara det allra mest självklara. :)

Nu har jag gjort som du sa, bantat ned koden rejält.

// körs varje gång sidan laddas
$(document).ready(function(){
	// kollar ifall det är en hash i länken
        if(window.location.hash){
				// hash variabeln = hash i länken
                var hash = window.location.hash;
				// content variabeln = allt innehåll på aktuella hashsidan (?)
                var content = $(hash).html();{ 
 	
	// fadear in divven som skall visas t.ex #project1  (?)			
        $($('#thumbs a').attr('href')).stop(true, true).css('left', 0).fadeIn(500);

	// stänger allt			
  } } });

Och jag ser ju direkt nu, klart och tydligt, trots den nybörjare man är, att det där skulle ju aldrig fungera. Divven som ska visas vet ju inte vad det är för div med hjälp av länken jag vill visa.

Men min kunskap sinar där, hur ska jag gå tillväga för att få divven att veta vilket id jag vill visa? Har jag förstått den kod jag har nu? (kommentarerna)

Tack!

				// content variabeln = allt innehåll på aktuella hashsidan (?)
                var content = $(hash).html();{

Vet inte vad du menar med hashsidan, men hash innehåller exempelvis #post123 dvs:

$("#post123").html() vilket ge dig HTML kod på elementet med ett ID på post123,

$('#thumbs a').attr('href')

Kommer ge dig länken på första a-elementet inne i #thumbs så förstå inte vad du vill göra med din kod.

Sen är din Javascript kod fortfarande felaktig, du öppnar ett objekt på raden:

var content = $(hash).html();[red]{[/red]

Vad är det du försöker göra där?

Hur ser HTML koden ut? på din post http://www.webforum.nu/showpost.php?p=1534120&postcount=6 säger absolut INGET om vad som du förväntar dig att man kan återskapa ditt problem. Ge mer HTML kod på hur allt är tänkt att fungera, för just nu gå det inte att göra något vettigt med dina koder för att ens börja förstå vad som skall hända.

Divven som ska visas vet ju inte vad det är för div med hjälp av länken jag vill visa.

Hur vet du vilken div som skall visas? Du måste ju berätta för koden vilket element som skall visas och det vet du själv, bara att säga åt koden.

Säg att jag har en div som heter project14, den vill jag ska öppnas om man går in på portfolio.html#project14.

Såhär ser koden ut just nu:

// körs varje gång sidan laddas
$(document).ready(function(){
	// kollar ifall det är en hash i länken
        if(window.location.hash){
				// hash variabeln = hash i länken
                var hash = window.location.hash;
 	
	// fadear in divven som skall visas t.ex #project1  (?)			
        $('#project').load(hash).stop(true, true).css('left', 0).fadeIn(500);

	// stänger allt			
   } });

$('#project').load(hash).stop(true, true).css('left', 0).fadeIn(500);

Jag vill att efter #project ska det aktuella numret (hashnumret) som finns i länken placeras. Jag vet inte om jag är rätt ute, tänker jag rätt? (uppenbarligen inte)

Hur ska jag göra?

Tacksam för svar

load är ett AJAX callback, är det det du är ute efter? sen räcker det inte bara att kolla hashen en gång du förväntas ju kunna navigera runt på sidan också hoppas jag utan att behöva ladda om sidan varje gång man få en ny hash.

Eftersom du inte ge någon HTML kod alls så få man gissa: http://jsbin.com/icoju4/ är det detta du är ute efter?

Nu känner jag att jag inte är riktigt säker på vad det egentligen är du vill göra, jag känner att den ursprungliga frågeställningen skiljer sig ifrån vad du skriver i inlägget här ovan.

Jag skulle föreslå att du skriver (väldigt detaljerat) exakt vad du vill göra, och skriv det på ett sådant sätt att vi inte behöver ha läst någonting som du skrivit i den här tråden - förutsett att vi inte vet någonting alls om dig.

Ex: När sidan laddas så ska den div-tagg som har samma id som hash-värdet i adressen fadeas in ifrån osynlig till synlig.

(Det var iaf. min tolkning av ursprungsfrågan, men nu är jag inte så säker längre.)

Några viktiga noteringar angående mitt exempel:

Observera att jag _inte_ skriver någonting om att allting annat ska döljas. Observera även att jag inte skriver någonting om att saker ska flytta på sig och byta plats. Observera att jag inte skriver någonting alls om vad som ska hända om jag trycker på en länk. Enbart det jag skrev, och bara det, är vad jag vill göra.

Försök skriva ihop en genomtänkt förklaring till vad du egentligen vill göra så ska vi se om vi kan hitta på något :)