Emner Tagged ‘JavaScript’

Har i et stykke tid gået og barslet med en idé – brugeren skal kunne vælge mellem flere forskellige webdesign. Jeg synes at brugeren gerne må få en oplevelse af en „personlig” side som hun/han selv kan ændre designet af. Jeg synes rent personligt at det er fantastisk at man ved at skifte ”stylesheet ” og dermed ændre designet radikalt.

Målet for projektet er:
Give brugeren muligheden for at kunne ”customize” sitet ved at vælge mellem flere forud definerede design. Dog vil jeg begrænse mig til kun at lave et ekstra layout i denne opdatering og fokusere mest på at få selve koden til at virke. Det alternative design vil kun ændre header billede og farver. Men det er min mening at forberede løsningen til at man kan lave ”helt” andre webdesign.

Teknologier:

  • Javascript (cookies, onload event og DOM manipulation)
  • (x)html (form — dropdown menu)
  • CSS (ekstra ”stylesheet ”som tilføjer ændringer af designet)

Flowcharts for applikationen:
Flowchart over onload eventen

Flowchart over onchange eventen

Workflow
Jeg fik hurtigt implementeret løsningen.

Skrev hurtigt de to funktioner.

For at give brugeren mulighed for at vælge mellem designs oprettede jeg en dropdown menu (select) og gav den en id så det var muligt at finde den via javascript.

Samtidig satte jeg onchange til setStyleCookie(). På den måde vil setStyleCookie() blive kaldt hver gang brugeren vælger en værdi.

Umiddelbart gik det nemt og smerte frit. Men desværre virkede løsningen ikke som forventet. Nogle dage efter fandt jeg ud af applikationen ikke kunne håndtere hvis brugeren ikke havde været på siden før. Det viste sig at jeg havde lavet min if struktur lidt for hård. Derfor løste jeg op for den så jeg bare checkede på Cookie(’mode’). Det tog noget tid at få det til at virke efter hensigten.

Men nu er løsningen klar så den kan nemt udvides og fin justeres.

Beskrivelse af issue
Issuet går ud på at når brugeren går ind under indlæg — vises kategorien som de er listet under som „parent”. Jeg vil hellere have at man kan se siden man kommer fra.

Idé
Jeg vil fortage en nem løsning af issuet i Javascript og anvende „document.referrer”.

Løsning / workflow

  • Fandt ud af at der fandtes et javascript til sitet som jeg kunne skrive koden i.
  • Gik ind i header.php for at  indstille „BreadcrumbNavXT”, til at skjule kategorien når et ’single’ indlæg er loaded.
  • Samtidig tilføjer jeg et ekstra span element med id’en „postnavn”.
  • Herefter manipulerede jeg document.referrer vedhjælp af split(’/’);
  • Og så finder jeg næst sidste emne i result arrayen fra split() altså navnet på tidligere side er nu fundet.
  • Dette navn sættes ind som et link som får referrer som href og samme navn som titel.
  • For at få fat i „postname” id’en benyttede jeg den velkendte Jquery eller Mootools funktion$(’postname’); som svarer til getElementById()