Halløj...

Jeg sparer lidt på pointene, da jeg kan mærke jeg får god brug for at stille spørgsmål herinde, og der er sikkert også et simpelt svar - jeg håber det er ok.

I videoen: "Brug Javascript/jQuery til at lave en "Opret Bruger"-formular med lækker slide-effekt", laver vi en funktion: "toggleLogin(), der skal udføre vores slide-effekt på vores <div>

I videoen foreslås det, at man opretter to funktioner, for at kunne slide tilbage til udgangspunktet, hvor funktion nummer 2 faktisk er magen til den første, med undtagelse af omvendt rikkefølge på slide()-kaldene.

Som den flittige studerende (hehe) jeg er, bed jeg mærke i "DRY"-konceptet der blev nævnt i en tidligere video, og det er jo lidt det vi gør her - altså gentager (næsten) samme kode flere gange...

Derfor tænkte jeg, at det måtte kunne lade sig gøre at nøjes med én funktion, toggleLogin, og så igennem den håndtere hvad der skal ske, når den køres.

Mit forsøg var derfor: 

function toggleLogin() {
        if ($("userCreatePanel").is('visible') === false) {
          $("#userLoginPanel").slideUp();
          $("#userCreatePanel").slideDown();
        } else {
          $("#userCreatePanel").slideUp();
          $("#userLoginPanel").slideDown();
        }
      }

Det virker bare ikke....

Første del virker sådan set fint nok, men når jeg efterfølgende trykker på min "Allerede medlem - log ind" knap, der også kalder toggleLogin(), så sker der ingenting.

Min teori er, at "visible" variablen ikke opdaterer i browseren, selvom den skjulte <div> er blevet synlig efter første kald af toggleLogin(), men kan det passe - og er der eventuelt et workaround?

Hmm... Jeg fandt en løsning, der også var lidt pænere:

function toggleLogin() {
        if ($("#userCreatePanel").is(':hidden')) {
          $("#userLoginPanel").slideUp();
          $("#userCreatePanel").slideDown();
        } else {
          $("#userCreatePanel").slideUp();
          $("#userLoginPanel").slideDown();
        }
      }

Jeg er dog stadig ikke rigtig klar over, hvorfor min første kode ikke virkede, så der er fortsat 5 point til den der kan forklare det :-)

Hej @rasmusmax-petersen 

Dejligt at høre at du holder ved og prøver ting selv også, for der lære man især en del. Jeg har taget friheden at lave et lille eksempel ud fra din kode af på JSFiddle. (Der kan man køre jQuery kode.) Eksemplet kan findes her: https://jsfiddle.net/dhhdev/deybcryz/ (Mange veje føre til Rom )

Men nu til dit spørgsmål. Visible vs. Hidden. Der er en betydelig forskel på de to:

hide/show: Sætter display: none; i browseren, så det vil sige, så vidt browseren ved, så er det helt væk.

visible: Lidt det samme som hide, (hidden) - men dog med den forskel at det bare vil gøre det "transparent" i browseren. Det eksistere stadigvæk i DOM (Document Object Model) og bruger resourcer/plads i baggrunden.

Vi går ikke meget ind i det i videoen du henvisser til, siden at den serie er om PHP. Så derfor springer vi lidt "let og elefant" over jQuery og design delen. Jeg håber på at det gav dig lidt ekstra information.

P.S: I vores arkiv kan du finde lidt uddateret materiale omrkring jQuery specifikt, du finder vores gamle arkiv lige her: https://v5.dk/arkivet/

Redigeret af @dhh  d. 22.10.2016 kl. 23:02

 #2  Men eftersom min kode i #1 virker, så må slideUp() sætte display: none, når objektet er væk, og display: visible når objektet er der - korrekt?

Ligeledes troede jeg at visible: true og visible: false blev flagget, når et objekt ikke fylder nogle pixels på en skærm - det er hvad jeg synes jeg kunne læse mig frem til på Stackoverflow.

Derfor forstår jeg ikke hvad det er der går galt i min første kode, da jeg jo spørger på om visible = false (og det virker), men else delen virker bare ikke.

JSFiddle virker som et rigtigt smart værktøj - den har jeg bookmarked :-)

 #3  Jeg undskylder lige hurtigt for at springe noget vigtigt over.
slideUp/slideDown sætter display; og sætter den derefter tilbage til standarden for det "objekt" du benytter. (DIV i dit tilfælde.)

visible er noget anderledes, det sætter opacity/transparent til 0 og derefter til 100% igen. Med andre ord, det er ikke væk, bare transparent og derfor fejler din kode. (For det eksistere, og er hvad din kode faktisk tjekker. Ikke om det er synligt eller ej for os mennesker.)

Jeg er helt enig at "wording/ordlyden" kunne være meget bedre i jQuery, men det sådan de har valgt at gøre det.

Redigeret af @dhh  d. 22.10.2016 kl. 20:00

Jeg havde forresten glemt at opdatere min kode på JSFiddle, så her har du den endelige version af min test kode. Som virker helt som det skal: https://jsfiddle.net/dhhdev/deybcryz/ 

Redigeret af @dhh  d. 22.10.2016 kl. 23:01