/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Drop down link navigationsboks - brugerven~
Fra : Rune Jensen


Dato : 16-06-09 18:42

Jeg har et kommentasystem her:

http://webdesigngruppen.dk/diskussion.asp

Det er selvfølgelig meningen, at man skal kunne vælge side nummer også,
og så skal man automatisk gå til den side, men...

Det skal virke for både mus og tastatur, hvilket åbenbart er lidt et
problem ingen rigtigt har tænkt på. For alle de scripts, jeg har kunnet
finde, er kun rigtigt virksommme med mus.

Det er også nemt nok at lægge et script ind, som automatisk går til den
rigtige side ved valg med mus, men man må ikke automatisk sendes afsted
ved valg med tastatur (det er et gammelkendt tilgængelighedsproblem).
Her skal man først vælge og så først sendes til side ved valg med f.esk.
ENTER-tasten.

Men hvordan gøres dette? Der skal jo testes for både onclick og
onkeydown, samt værdien på tasten?

Altså, vælg med mus, og valgte side, den overføres man til, men ved
tastatur, skal man bruuge pil op/ned, og først sendes afsted ved valg
med anden tast (f.esk. ENTER)

Nogen som kan lede mig i rigtig retning?


MVH
Rune Jensen

 
 
Birger Sørensen (16-06-2009)
Kommentar
Fra : Birger Sørensen


Dato : 16-06-09 20:35

Rune Jensen kom med følgende:
> Jeg har et kommentasystem her:
>
> http://webdesigngruppen.dk/diskussion.asp
>
> Det er selvfølgelig meningen, at man skal kunne vælge side nummer også, og så
> skal man automatisk gå til den side, men...
>
> Det skal virke for både mus og tastatur, hvilket åbenbart er lidt et problem
> ingen rigtigt har tænkt på. For alle de scripts, jeg har kunnet finde, er kun
> rigtigt virksommme med mus.
>
> Det er også nemt nok at lægge et script ind, som automatisk går til den
> rigtige side ved valg med mus, men man må ikke automatisk sendes afsted ved
> valg med tastatur (det er et gammelkendt tilgængelighedsproblem). Her skal
> man først vælge og så først sendes til side ved valg med f.esk. ENTER-tasten.
>
> Men hvordan gøres dette? Der skal jo testes for både onclick og onkeydown,
> samt værdien på tasten?
>
> Altså, vælg med mus, og valgte side, den overføres man til, men ved tastatur,
> skal man bruuge pil op/ned, og først sendes afsted ved valg med anden tast
> (f.esk. ENTER)
>
> Nogen som kan lede mig i rigtig retning?
>
>
> MVH
> Rune Jensen

Det kommer vist an på OS.
[Alt] vil normalt aktivere menuer i windoze, hvorefter man kan vælge i
menuerne.
Accesskeys er en mulighed - har tidligere leget, men haft svært ved at
finde taster, browserne ikke allerede bruger til noget andet i
forvejen. Det skal jo på en eller anden måde gerne virke med en key fra
teksten på menuen...

http://www.w3.org/TR/html401/interact/forms.html#access-keys

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Rune Jensen (16-06-2009)
Kommentar
Fra : Rune Jensen


Dato : 16-06-09 20:47

Birger Sørensen skrev:

> Det kommer vist an på OS.
> [Alt] vil normalt aktivere menuer i windoze, hvorefter man kan vælge i
> menuerne.
> Accesskeys er en mulighed - har tidligere leget, men haft svært ved at
> finde taster, browserne ikke allerede bruger til noget andet i forvejen.
> Det skal jo på en eller anden måde gerne virke med en key fra teksten på
> menuen...
>
> http://www.w3.org/TR/html401/interact/forms.html#access-keys

For nu at tage keyboard-problemet først:

Som det er nu, kan man godt vælge siden i firefox med up/ned.

Så skal der bare en eventhandler på, som går til den valgte side, når
trykkes ENTER, og det vil jeg udføre via script.

Det må da være muligt at lave?

Man kan måske godt lægge en acceskey ind, men det løser ikke ovenstående
med at der skal gås til valgte side ved ENTER.


MVH
Rune Jensen

Birger Sørensen (16-06-2009)
Kommentar
Fra : Birger Sørensen


Dato : 16-06-09 21:17

Rune Jensen udtrykte præcist:
> Man kan måske godt lægge en acceskey ind, men det løser ikke ovenstående med
> at der skal gås til valgte side ved ENTER.
>
>
> MVH
> Rune Jensen

Godt så.
Det troede jeg du havde check på B-)

onkeydown (eller onkeyup) på links = "Key_Check( this, event);"

function Key_Check( lnk, e) {
   kCode = window.event ? window.event.keyCode : e.keyCode;
   if ( kCode == 13) {
      if ( lnk) { lnk.click(); }
      }
   else {
// Her kunne man mappe piletaster til TAB eller shift-TAB for
navigering...
      }
   }

Har ikke testet. Der er noget med at this ikke aller er this, eller en
anden this..

Men det er da et bud

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Rune Jensen (16-06-2009)
Kommentar
Fra : Rune Jensen


Dato : 16-06-09 21:44

Birger Sørensen skrev:

> Godt så.
> Det troede jeg du havde check på B-)

Eh. Én ting er at have tjek på "i det moment, man lærer det", en anden
er at huske, hvad man har lært.. senere.. ;)

> onkeydown (eller onkeyup) på links = "Key_Check( this, event);"
>
> function Key_Check( lnk, e) {
> kCode = window.event ? window.event.keyCode : e.keyCode;

Det spørgsmålstegn - hvad gør det (noget at gøre med this?)? Og kolonet?

Jeg prøver at oversætte;

kCode henter en event fra windowet
(spørgsmålstegn)
henter den derefter chr-værdien her?
(kolon)
chrkoden for eventen keyup/down. Hmm..


<SNIP>
> Har ikke testet. Der er noget med at this ikke aller er this, eller en
> anden this..

Jeg afprøver alligevel. Skal jo bare have noget at starte med. Men
_hvis_ jeg får det til at virke, så kan det godt laves 100% accessible
med lidt snilde (noget længere ud i fremtiden dog, involverer, at man
kan ændre i HTMLen dynamisk udfra en class).

Men... det er _ikke_ noget, jeg har kunnet finde andre steder (mærkeligt
nok?)

Takker for svaret ;)


MVH
Rune Jensen

Birger Sørensen (16-06-2009)
Kommentar
Fra : Birger Sørensen


Dato : 16-06-09 22:04

Rune Jensen har bragt dette til os:
> Birger Sørensen skrev:
>
>> Godt så.
>> Det troede jeg du havde check på B-)
>
> Eh. Én ting er at have tjek på "i det moment, man lærer det", en anden er at
> huske, hvad man har lært.. senere.. ;)
>
>> onkeydown (eller onkeyup) på links = "Key_Check( this, event);"
>>
>> function Key_Check( lnk, e) {
>> kCode = window.event ? window.event.keyCode : e.keyCode;
>
> Det spørgsmålstegn - hvad gør det (noget at gøre med this?)? Og kolonet?
>
> Jeg prøver at oversætte;
>
> kCode henter en event fra windowet
> (spørgsmålstegn)
> henter den derefter chr-værdien her?
> (kolon)
> chrkoden for eventen keyup/down. Hmm..
>
>
> <SNIP>
>> Har ikke testet. Der er noget med at this ikke aller er this, eller en
>> anden this..
>
> Jeg afprøver alligevel. Skal jo bare have noget at starte med. Men _hvis_ jeg
> får det til at virke, så kan det godt laves 100% accessible med lidt snilde
> (noget længere ud i fremtiden dog, involverer, at man kan ændre i HTMLen
> dynamisk udfra en class).
>
> Men... det er _ikke_ noget, jeg har kunnet finde andre steder (mærkeligt
> nok?)
>
> Takker for svaret ;)
>
>
> MVH
> Rune Jensen

Linien med ? ... er det samme som

if ( window.event) {
kCode = window.event.keyCode;
}
else {
kCode = e.keyCode;
}

bare lidt simplere skrevet
Det har et fornemt navn, men kommer ikke når man kalder, så jeg kan
ikke huske det.
der returneres en værdi - hvis det der står før ? er sandt, returneres
det der står mellem ? og : hvis det er falsk returners det der står
efter :
Kan bruges til mange ting, men der kan kun være een expression i hver
sektion.

events behandles forskelligt i forskellige browsere. Det her burde
virke i de fleste. (IE har et specielt object i window til den -
window.event - mens de fleste andre, sender den med som parameter, hvis
man beder om det.)

kCode er keyCode'en for den tastede knap.
Man skal kunne få den til at reagere på space f.eks. her ved at tilføje
den rigtige keyCode.
if (( kCode == 13) || ( kCode == 32)) { ...}
hvis du vil have keyCodes, kan du i else blot laven en alert af den.
Jeg kan ikke huske dem - de følger nogenlunde ASCII hvis jeg husker
rigtigt.
Er for øvrigt ikke sikker på, at man kan fange piletaster her. Man skal
vistnok bruge onkeypress for det...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Rune Jensen (16-06-2009)
Kommentar
Fra : Rune Jensen


Dato : 16-06-09 22:36

Birger Sørensen skrev:

> der returneres en værdi - hvis det der står før ? er sandt, returneres
> det der står mellem ? og : hvis det er falsk returners det der står efter :
> Kan bruges til mange ting, men der kan kun være een expression i hver
> sektion.

Meget vigtigt og godt at vide, men jeg må finde en måde at huske det på,
for det er da ikke så logisk ;)

> events behandles forskelligt i forskellige browsere. Det her burde virke
> i de fleste. (IE har et specielt object i window til den - window.event
> - mens de fleste andre, sender den med som parameter, hvis man beder om
> det.)

Man kan måske bruge try

> kCode er keyCode'en for den tastede knap.
> Man skal kunne få den til at reagere på space f.eks. her ved at tilføje
> den rigtige keyCode.
> if (( kCode == 13) || ( kCode == 32)) { ...}

Jeg må finde det senere, for scriptet skal selvfølgelig udbygges.

Nu har jeg:
function Key_Check( lnk, e) {

kCode = window.event ? window.event.keyCode : e.keyCode;
if ( kCode == 13) {
/* if ( lnk) { lnk.click(); } */
   go_page( lnk.value)
}
else {
// Her kunne man mappe piletaster til TAB eller shift-TAB for
navigering...
}
}

function go_page (page){
   page_number = page -1
   document.location.href =
"http://webdesigngruppen.dk/diskussion.asp?pagenumber=" + page_number +
"#comment-div"
}

Og det virker, men...

(1) Jeg har hard-coded URLen, og det er jo ikke smart, hvis den skal
være generisk. Jeg forsøgte med:

document.location.href = this.location.href

for at fange URLen på aktuel side, men virker ikke. Og så skal jeg også
kun have det før querystring.

(2) En anden ting er, om det er skide optimalt.

Det ville jo være smart, om samme script kunne bruges til både keyevent
og mouseevent. Jeg kan se, du har lagt mulighed for endnu en funktion.
måske du også har tænkt det.

Anyways, dit script virker i hvert fald - så du havde ret ;)

At ikke andre har tænkt denne tanke, har måske noget at gøre med, det
ikke er fuldt accessible "as is" (uden en submit), meeen, det bør nu
være muligt at skifte en <ul> med links ud med en <select> dynamisk, og
så har man en fuld funktionsdygtig dropdown og unobtrusive linkbox -
uden submit (man kan selvfølgelig også bare smide en submit ind, og så
fjerne den med javascriptet eller med CSS).

Men tid at gå i seng. Godnat ;)



MVH
Rune Jensen

Stig Johansen (17-06-2009)
Kommentar
Fra : Stig Johansen


Dato : 17-06-09 02:13

"Rune Jensen" <runeofdenmark@gmail.com> wrote in message
news:4a381037$0$25198$456a7185@news.cirque.dk...
> kCode = window.event ? window.event.keyCode : e.keyCode;

Jeg fandt noget 'genbrug' vedr keyboard events.
i visse browsere hedder den .which, og ikke .keyCode.

> (1) Jeg har hard-coded URLen, og det er jo ikke smart, hvis den skal
> være generisk. Jeg forsøgte med:

Hvis du kigger på testeksemplet:
http://w-o-p-r.dk/test/rune.diskussion/diskussion.asp
Kan du se hvordan du kan fange, og manipulere URL'en.

(Jeg har lagt en del alerts ind, så du kan følge 'slaget'.

> Det ville jo være smart, om samme script kunne bruges til både keyevent
> og mouseevent.

Jeg ved ikke hvad du mener med mouse event i forhold til en select, men i
eksemplet har jeg lagt en onchange event ind også.
Den skifter ved ændret valg.
Måske overflødiggør den onkey eventen, men det må du lege med.

--
Med venlig hilsen/Best regards
Stig Johansen




Rune Jensen (17-06-2009)
Kommentar
Fra : Rune Jensen


Dato : 17-06-09 21:52

Stig Johansen skrev:
> "Rune Jensen" <runeofdenmark@gmail.com> wrote in message
> news:4a381037$0$25198$456a7185@news.cirque.dk...
>> kCode = window.event ? window.event.keyCode : e.keyCode;
>
> Jeg fandt noget 'genbrug' vedr keyboard events.
> i visse browsere hedder den .which, og ikke .keyCode.

Det lyder som noget, jeg skal have leget med.

>> (1) Jeg har hard-coded URLen, og det er jo ikke smart, hvis den skal
>> være generisk. Jeg forsøgte med:
>
> Hvis du kigger på testeksemplet:
> http://w-o-p-r.dk/test/rune.diskussion/diskussion.asp
> Kan du se hvordan du kan fange, og manipulere URL'en.
>
> (Jeg har lagt en del alerts ind, så du kan følge 'slaget'.

Det er ret smart tænkt, ja. For så kan man samtidig følge koden og lære
lidt dér.

>> Det ville jo være smart, om samme script kunne bruges til både keyevent
>> og mouseevent.
>
> Jeg ved ikke hvad du mener med mouse event i forhold til en select, men i
> eksemplet har jeg lagt en onchange event ind også.

Jeg var ikke helt vågen i går, åbenbart. Meningen er bare, man skal
kunne foretage et valg med både mus og tastatur. Jeg har nok tænkt på
noget med onmouseup og onkeyup el. lign. for at få fat i begge. Onchange
må jeg lige kigge på, kan være den kan give samme resultat, lyder som om
man ikke er afhængig af inputenhed.

> Den skifter ved ændret valg.
> Måske overflødiggør den onkey eventen, men det må du lege med.

Jeg tror godt, jeg kan kombinere dit og Birgers scripts, og generelt, så
synes jeg denher gruppe er ret god, med fine ind-til-benet svar ;)

Der kommer nok til at gå noget af week-enden med det, kan jeg se.
Desværre skal jeg nemlig tidligt i seng i dag, og længe på arbejde i
morgen, så.. Men glæder mig til at se på det.

...så kan det være, jeg vender tilbage med flere spørgsmål ;)


Tak for svaret, Stig


MVH
Rune Jensen

Stig Johansen (18-06-2009)
Kommentar
Fra : Stig Johansen


Dato : 18-06-09 04:30

Rune Jensen wrote:

> Stig Johansen skrev:
>> Jeg fandt noget 'genbrug' vedr keyboard events.
>> i visse browsere hedder den .which, og ikke .keyCode.
>
> Det lyder som noget, jeg skal have leget med.

Hvis du kigger i javascriptet i den link jeg sendte, kan du se hvordan det
bruges.

Der ligger også funktionaliteten til at finde det element hvor keydown
kommer fra.

Det er muligt den .which kun havde noget med min Konqueror at gøre, husker
det ikke præcist.

--
Med venlig hilsen
Stig Johansen

Jakob Bohm (17-06-2009)
Kommentar
Fra : Jakob Bohm


Dato : 17-06-09 01:11

Birger Sørensen wrote:
> Rune Jensen udtrykte præcist:
>> Man kan måske godt lægge en acceskey ind, men det løser ikke
>> ovenstående med at der skal gås til valgte side ved ENTER.
>>
>>
>> MVH
>> Rune Jensen
>

Øh, jeg troede denne tråd var om navigation med <form><select>...
som det ses på mange sider, og hvordan man koder det så det virker både
med mus (åben drop down, click på link-navn) og tastatur (manipuler
drop-down med tastatur, men naviger først når brugeren trykker ENTER).

Et problem der ikke er nævnt er hvordan man får det til at virke når
browseren kører med så høj sikkerhed at JavaScript er slået fra. Dette
er f.eks. default i I.E. på en server (kaldet "Internet Explorer
Enhanced Security Configuration"), og i Firefox med den sikkerhedsplugin
der meget passende hedder "NoScript". De fleste browsere kan
selvfølgelig indstilles manuelt til ikke at køre JavaScript, men
ovenstående er eksempler hvor det er almindeligt.


P.S.

? : -operatoren hedder også if-then-else operatoren (huskeregel: ?
betyder spørgsmål, if er et spørgsmål). I det gamle sprog Algol skrev
man simpelthen if then else inde i udtrykket, men det var åbenbart for
enkelt til nyere sprog som C, perl og JavaScript.

Birger Sørensen (17-06-2009)
Kommentar
Fra : Birger Sørensen


Dato : 17-06-09 02:07

Den 17-06-2009, skrev Jakob Bohm:
8X
> Øh, jeg troede denne tråd var om navigation med <form><select>...
8X
> ? : -operatoren hedder også if-then-else operatoren
8X

Der er vist ingen der har nævnt noget om hverken <form> eller
<select>..
Jeg opfattede at Rune ville have sine helt almindelie anchors til også
at virke med tastaturet.
Men det kan da godt være det er mig, der har overset noget...

Hvis man beder om en funktionalitet, specifikt udført med scipt, ved
man nok godt, at det ikke virker, hvis script er slået fra. Det er vist
et bevidst valg.

?: operatoren kalder Mozilla så for Conditional Operator. Hvilket måske
nok er smartere end noget andet, der findes i forvejen, og betyder
noget andet.
I modsætning til if-then-else, er ?: en operator - dvs. den returnerer
en værdi. Og som nævnt, kan der kun være een expression i hvert afsnit.


Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Rune Jensen (17-06-2009)
Kommentar
Fra : Rune Jensen


Dato : 17-06-09 21:37

Birger Sørensen skrev:
> Den 17-06-2009, skrev Jakob Bohm:
> 8X
>> Øh, jeg troede denne tråd var om navigation med <form><select>...
> 8X
>> ? : -operatoren hedder også if-then-else operatoren
> 8X
>
> Der er vist ingen der har nævnt noget om hverken <form> eller <select>..
> Jeg opfattede at Rune ville have sine helt almindelie anchors til også
> at virke med tastaturet.

Som jeg skrev til Jacob, skulle jeg nok have nævnt hvor problemet var -
ellers er det lidt svært at vide, hvor jeg vil hen ;)

Anyways, så kan det godt blive resultatet senere, at jeg vil forsøge at
udvide, så det fungerer udfra relle links i en <ul>.

> Men det kan da godt være det er mig, der har overset noget...

Næh. Jeg skal bare formulere mig bedre ;)

Men alt andet lige, så virkede scriptet jo...

> Hvis man beder om en funktionalitet, specifikt udført med scipt, ved man
> nok godt, at det ikke virker, hvis script er slået fra. Det er vist et
> bevidst valg.

I første omgang ja. Fordi udgangspunktet var en javascript styret
select-jump-box, som man tit ser, men hvor man ikke kan vælge andet end
første link med tastaturet, fordi allerede dér er der lavet et valg
automatisk (ret stort tilgængelighedsproblem). Og det var det, jeg i
første omgang ville rette op på. Scriptet skal selvfølgelig udbygges,
hvis det skal være fuldt brugervenligt, men alene, at det er
tilgængeligt med keyboard er et fremskridt fra de generelle "jump-boxes".

> ?: operatoren kalder Mozilla så for Conditional Operator. Hvilket måske
> nok er smartere end noget andet, der findes i forvejen, og betyder noget
> andet.
> I modsætning til if-then-else, er ?: en operator - dvs. den returnerer
> en værdi. Og som nævnt, kan der kun være een expression i hvert afsnit.

Jeg ser det brugt ret tit ind i mellem, og som sagt, så er det én af de
ting, jeg vil forsøge at lære mig. Det lyder som en short-hand udgave,
som man ser i mange andre sprog (og andre udførelser) også.

Jeg må jo bare kopiere jeres forklaringer til min kode notes-bog (lidt
at læse op på i week-enden).


Tak for svarene Birger ;)


MVH
Rune Jensen

Rune Jensen (17-06-2009)
Kommentar
Fra : Rune Jensen


Dato : 17-06-09 21:25

Jakob Bohm skrev:

> Øh, jeg troede denne tråd var om navigation med <form><select>...
> som det ses på mange sider, og hvordan man koder det så det virker både
> med mus (åben drop down, click på link-navn) og tastatur (manipuler
> drop-down med tastatur, men naviger først når brugeren trykker ENTER).

Min fejl... eftersom jeg faktisk slet ikke nævner select, så er det jo
svært at vide hvad jeg vil. Men jo, det er select-boxen, det gjaldt (i
første omgang). Sjovt nok alligevel virkede Birgers script ganske fint.
Så det må være et eksempel på dårlig kommunikation (fra mig), som
alligevel gav resultat.

Et tillægssvar til dette, som også gælder det næste (ses nedenfor) -

> Et problem der ikke er nævnt er hvordan man får det til at virke når
> browseren kører med så høj sikkerhed at JavaScript er slået fra.

- og her kunne det faktisk være en bedre idé at starte ud med en liste
af links i en <ul>, som man så ændrer dynamisk til en select box.
Fidusen er at lave det uden Submit-knap, så det er en select-and-go med
musen, men stadig tilgængeligt med keyboard - også uden CSS og
javascript. Det er dog lidt længere ud i fremtiden, da jeg jo også selv
skal kunne følge med ;)

Yderligere tillægssvar: Det kan være svært i visse browsere at "fange"
bestemte elementer med TAB-tasten. Også fordi "fokus" ikke altid er
aktiveret (den der stiplede grå outline-box), så man kan se, hvilket
element man er på. I den forstand kunne en accesskey være en mulighed.
Eller skal man sætte TAB-index, og det er jeg ikke meget for, da det
binder elementerne i et bestemt flow (hvis man nu senere vil lave om på
designet og rækkefælge).

> ? : -operatoren hedder også if-then-else operatoren (huskeregel: ?
> betyder spørgsmål, if er et spørgsmål). I det gamle sprog Algol skrev
> man simpelthen if then else inde i udtrykket, men det var åbenbart for
> enkelt til nyere sprog som C, perl og JavaScript.

Jeg er meget glad for jeres forklaringer, for jeg gør selvfølgelig også
det her for at lære. Så jeg må lave nogle enkle forsøg med ? og :

...så jeg kan se (og få føling af) hvordan det fungerer.

Takker for svaret.


MVH
Rune Jensen

Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste