Præsentationsportfolio for Thomas Riis > Blog > jQuery

Hyggede lidt med jQuery

Fredag eftermiddag kodede jeg lidt jQuery. Ville lave en cool måde at lave en navigation med rullende indhold.

  1. Lavede hurtigt noget markup der kunne bruges til at lave tre „content areas” der kunne skubbes rund i en div „container” som jeg gav en fast størrelse og satte overflow til hidden.
  2. Oprettede også en „sidebar” div hvor jeg kunne have links i.
  3. Så tænkte jeg at jeg ville starte ud med at lave løsningen som ren html udgave og så linke til indhold vha „#content-area”.
  4. Dette virkede faktisk bedre end jeg havde troet — når man klikkede på et link rullede indholdet ned til det rigtig område. Og det tidligere synlige del forsvandt. He he det gjorde linksne så også.
  5. Løste link issuet ved at anvende position: fixed.
  6. Det er så den løsning brugeren vil se hvis javascript er slået fra.
  7. Nu kunne jeg så kode løsningen i jQuery.
  8. Det var ret simpelt at lave animationen — da jeg først fandt ud af forskellen på at avende jquery metoden offset() og position().
  9. Jeg begyndte med at anvende offset() men det virkede ikke efter hensigten. Men fik hurtigt ændret til at benytte position() som giver div elementernes position realativt i forhold til den element de ligger i.
  10. Så løsning var i hus.

Tjek min løsning ud (bemærk ren prototype ikke noget fancy grafik) :
htmlversion

javascriptversion

Du kan jo snuppe kode — men jeg vil være glad hvis du spørg pænt ; )