Denne tråd er over 6 måneder gammel
Er du sikker på, at du har noget relevant at tilføje?
CSS design - :focus selector - "div" forblive synl...Af Semi Supporter Chri.s | 04-04-2016 20:27 | 1596 visninger | 11 svar, hop til senesteHej folkens
Jeg har et lille problem med et "dropdown søgefelt", som jeg har lavet i css vha. ":focus" selectoren - mit problem består dog bare i, at jeg gerne vil have at søgefeltet bliver ved med at være åbent, selvom man klikker ind i søgefeltet (input feltet) og bevæger musen væk igen.
Jeg har forsøgt en del forskellige ting, men kan delme ikke få det til at virke..
Her er et eksempel på det: https://jsfiddle.net[...]
Delen som jeg har forsøgt at bruge til at få <div>'en til at forblive åben (eller i fokus) er bl.a. følgende:
#search-dropdown input:focus #search-dropdown-content{
display:block;
background:#ccc;
}
Er der eventuelt nogle som kan være behjælpelige eller har en ide til at løse det? Jeg så helst at det blev løst i css, men andre alternativer er også velkomne! :)
--
#1 tak for det - det ser faktisk godt ud, det eneste "problem" er dog, at hvis man lukker "søgeboksen" igen, så kan man ikke få den frem igen.
Er der en mulighed for at nulstille dette?
Det skal også bemærkes at jeg er kommet frem til, at det nok ikke kan lade sig gøre i css, da der ikke eksisterer en "parent" selector i css - desværre! :)
--
Sidst redigeret 05-04-2016 07:52 Jeg har muligvis lavet en løsning, men jeg kunne meget godt tænke mig at høre fra nogle som har bedre forstand på JavaScript/jquery end jeg har, om det er rigtigt kodet / sikkert at bruge:
https://jsfiddle.net[...]
Det er lavet med udgangspunkt i #1's svar, jeg har bare lavet ".on()" om til .focusin / .focusout - jeg ved dog ikke om det gør nogen forskel?
Men af hvad jeg lige kan regne ud, så burde dette være brugbar uanset om folk har JavaScript slået til eller ej, da søgemenuen er tilgængelig via css, for dem som ikke har? :)
--
Sidst redigeret 05-04-2016 09:24 Hovsa, jeg har faktisk også én anden metode som lader til at virke (kunne desværre ikke nå at rette tidligere indlæg), hvor der tilføjes en css klasse og derefter fjernes igen - hvilken metode er bedst?
link her:
https://jsfiddle.net[...]
Jeg er lidt i tvivl om, om det er nogen herinde som har lavet eksemplet? Det oprindelige lå på https://jsfiddle.net[...] , men her manglede der bare lige at blive tilføjet en "display:block" i css til .selected klassen.
--
Det ser fint ud. ?Rent konkret er der ét problem. Du har et event bundet til document, selv når du ikke har brug for det. Det kan du erstatte med et .one() kald.
Som du selv foreslår, er det generelt god skik at holde CSS styling ude af js, og i stedet bruge js til dynamisk at tilføje/fjerne klasser. Derved bliver det stadig dit stylesheet der er ansvarlig for den faktiske styling af elementerne.
Et andet paradigme (omend mere omdiskuteret), er at lave generiske js "helpers" af forskellig art, så du kan trigger dynamisk funktionalitet gennem klassenavne. Som eksempel har jeg lavet et eksempel her:
https://jsfiddle.net[...]
Jeg kunne ikke lige overskue dit stylesheet osv, så det virker ikke pt, men kig engang på elementerne klassenavne i din element inspector, samt på beskederne der bliver skrevet ud i konsollen. Her har jeg lavet en generel hjælper-funktion, du kan trigger ved at tilføje en "onclick-class" på et element, samt to parametre der specificeres gennem data-target="#search-dropdown" og data-class-name="selected". På den måde kan du genbruge funktionen senere direkte fra dit HTML dokument.
--
http://www.jkg.dk[...] #6 Fint trick at bruge input focus til at "holde state" :-) Eneste problem er at input felter mister fokus på mousedown, og først får det tilbage på mouseup, så du har en lidt træls blinkeeffekt, hvis du klikker på inputfeltets parent div.
--
http://www.jkg.dk[...] #5 og #6 mange tak for hjælpen!
Umiddelbart tror jeg at løsningen jeg nævnte i #4 er den mest optimale for mit vedkommende på nuværende tidspunkt, også da jeg helst ikke vil have at dropdown-boksen bliver permanent åben hvis man laver en mouseover (#6) :)
Men rigtigt lækkert at få nogle alternativer og forklaringer på hvad det er mest optimalt at bruge (#5)
Mht. til onClick så er det egentligt lidt komisk at du nævner dem, da jeg allerede har et par onClick funktioner i en anden forbindelse på hjemmesiden, men jeg har simpelthen bare ikke tænkt over den løsning... :) Dog er jeg ikke bekendt med .data delen af JavaScript/jquery, så det kræver vist lige lidt læsning før jeg kaster mig ud i denne løsning
--
Ift. data-attributter er det ret simpelt. Du kunne bruge en hvilken som helst attribute, og læse den med .attr(). Data-attributter er blot en best practice - dog har de den fordel, at browseren ved at hvis en attribut starter med data- , kan den totalt ignorere den, når den "tegner" DOMen.
http://html5doctor.com[...]
--
http://www.jkg.dk[...] #9 aha, se det er jo interessant! :)
jeg må lige få læst op på hvordan jeg bruger det, når jeg får tid
--
#10: Det er nemt. <?? data-mitnavn="value"> i html, og $(...).data('mitnavn') til at læse dem.
--
http://www.jkg.dk[...]
--
Sidst redigeret 05-04-2016 13:06
Grundet øget spam aktivitet fra gæstebrugere, er det desværre ikke længere muligt, at oprette svar som gæst.
Hvis du ønsker at deltage i debatten, skal du oprette en brugerprofil.
Opret bruger | Login
|
Du skal være logget ind for at tilmelde dig nyhedsbrev.
Hvilken udbyder har du til internet? 236 personer har stemt - Mit energiselskab (Ewii f.eks) 11%
|