Her får du hjelp til å lage hjemmeside med video. Alle verktøy og programmer vi bruker til å lage webside er gratis.
Gjemme og vise tekst når link blir klikket
- Logg på eller opprett en konto for å skrive kommentarer
tir, 02.03.10 - 23:33
er det jQuery man benytter når man skal gjemme tekst?
Greia er at jeg har forskjellige kategorier. Og jeg vil helst slippe å ha en evig lang side samt at jeg vil slippe å ha flere sider da det kun er en kjapp beskrivende tekst/punktliste til hver kategori.
Skjønner hva jeg tenker på?
EDIT: fikk det til med javascript og css.display...
ons, 03.03.10 - 00:07
#2
Benyttet meg av
Benyttet meg av denne:
function unhide(list_category_hiddenElement) {
var item = document.getElementById(list_category_hiddenElement);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}Når jeg har mange kategorier, hvordan på lettest mulig måte kan jeg benytte meg av funksjonen?
ons, 03.03.10 - 00:15
#3
Først: Skal hovedelementene
Først: Skal hovedelementene dine også være linker til spesielle sider? Altså, når man trykker på linken så skal man komme til en ny side, samt. at kategoriene skal utvides? Eller skal klikk på moderelementene kun utvide listen nedenfor?
Den beste måten å gjøre dette på er å nøste elementer slik i HTML:
<ul>
<li>
<a href="foo" title="bar" id="exp-1" class="exp">hovedelement 1</a>
<ul class="nested-cat">
<li>
<a href="foo" title="bar">underelement 1</a>
</li>
<li>
<a href="foo" title="bar">underelement 2</a>
</li>
</ul>
</li>
<li>
<a href="foo" title="bar" id="exp-2" class="class="exp">hovedelement 2</a>
<ul class="nested-cat">
<li>
<a href="foo" title="bar">underelement 1</a>
</li>
<li>
<a href="foo" title="bar">underelement 2</a>
</li>
</ul>
</li>
</ul>Har du laget kategoriene dine på den måten? I såfall er det mye enklere å kode dette i jQuery.
ons, 03.03.10 - 00:23
#4
Oppbyggning av kategorier i HTML
Oppbyggingen er slik:
<ul>
<li><a href="javascript:unhide('hiddenContent_cat1');">kategori 1</a></li>
<div id="hiddenContent_cat1">Kjapp beskrivelse</div>
<li><a href="javascript:unhide('hiddenContent_cat2');">kategori 2</a></li>
<div id="hiddenContent_cat2">Kjapp beskrivelse</div>
<li><a href="javascript:unhide('hiddenContent_cat3');">kategori 3</a></li>
<div id="hiddenContent_cat3">Kjapp beskrivelse</div>
...
</ul>
ons, 03.03.10 - 00:34
#5
Best praksis med JavaScript og listemarkup
Ikke bruk JavaScript blandet med HTML på den måten, det er ikke en clean måte å gjøre det på (du dør ikke av å gjøre det, men best praksis er å inkludere JavaScript i head etter andre ressurser som stylesheets osv. Grunnen er at nettleseren stopper å laste inn andre ressurser inntil den har lastet inn JavaScript-dokumentene, dermed blir sidene tregere).
Følg praksisen jeg har vist ovenfor. Du kan gi dem hva slags navn du vil, men det viktigste er at
- Linkene som skal vise nye kategorier har en felles class
- De uornende listene som skal skjules har en felles class
Det er fordi vi bruker jQuery til å skjule alle listeelementene som skal skjules når dokumentet er lastet inn (dermed vil ikke de listene være skjult for brukere som ikke har JavaScript). Videre skal vi utføre noen oppgaver (vise/skjule) elementer når man trykker på en av linkene som har den nevnte classen.
ons, 03.03.10 - 00:56
#6
skal se nærmere på det i
skal se nærmere på det i morgen tidlig... nå er det natta for min del...
ons, 03.03.10 - 00:58
#7
Utvide kategorier med jQuery
Pingle, hehe :) Skal hjelpe deg å sette opp jQuery så det fungerer bedre - da er det lettere å utvide antallet kategorier senere også.
ons, 03.03.10 - 11:44
#8
en god natt med søvn er bra;)
en god natt med søvn er bra;) hehee...
hvor går jeg i gang? så skal jeg se hvor langt jeg kommer på egen hånd her...
ons, 03.03.10 - 12:26
#9
Åpne og lukke lister i jQuery.
Sove kan man gjøre når man er død, (vet det, barnslig å si, men nå er jeg overtrøtt så da er det lov).
Ok, pointere: Sett opp listeelementene som anvist ovenfor, bruk jQuery til å skjule alle undermenyene når dokumentet er lastet. Videre må du avgjøre hvorvidt undermenyen skal åpnes eller lukkes når link klikkes, og hvilken liste som hører til den klikkede linken. :) For smooth effekt kan du bruke slideUp() og slideDown().
Ja, skjønner hva du tenker på. F.eks. slik;
Widgets A
A widget 1
A widget 2
A widget 3
Widget B
B widget 1
...
Så når man trykker på A eller B så kommer underelementene til syne. Man kan bruke JavaScript (evt, jQuery) for dette, ja.
Sjekk metoden click i jQuery, med den kan du velge hva som skal skje gitt at en person klikker på en link (og du kan bestemme hva som skal skje, f.eks. ved hjelp av ID attributten på linken, class attributten eller href-attributten.
Hjelper folk å lage hjemmeside