Præsentationsportfolio for Thomas Riis > Blog > JavaScript

Kiggede på Asp.net MVC

Så har jeg fået lavet en test applikation i Asp.net MVC framework – det har været meget sjovt og lærerigt at kode en MVC løsning i et andet sprog end PHP som jo er det sprog jeg har mest erfaring i.

Jeg er imponeret over dette framework. Jeg synes at Microsoft har gjort et godt arbejde. I tiden fremover vil jeg kode noget mere C#. Inden jeg kastede mig over Asp.net MVC. Havde jeg gennemgået en del tutorials så jeg havde ret godt styr på C# syntaksen igen – men det er ikke den store forskel på de forskellige sprog. Dog er der en masse klasser i  .net frameworket som jeg naturligvis ikke kender – det kræver jo man koder C# til hverdag. Der koder jeg jo PHP.

Havde lidt bøvl med MSSQL kunne ikke finde ud af hvordan ASP.Net linkede til databasen for det var noget Microsoft havde klaret for en. Det er jeg ikke vant til i PHP så det bryder jeg mig ikke om – føler jeg mister kontrol ; ) Men det er jo kun et spørgsmål om tilvending.

Hyggede lidt med jQuery

Fredag eftermiddag kodede jeg lidt jQuery. Ville lave en cool måde at lave en navigation med rullende indhold.

  1. Lavede hurtigt noget markup der kunne bruges til at lave tre “content areas” der kunne skubbes rund i en div “container” som jeg gav en fast størrelse og satte overflow til hidden.
  2. Oprettede også en “sidebar” div hvor jeg kunne have links i.
  3. Så tænkte jeg at jeg ville starte ud med at lave løsningen som ren html udgave og så linke til indhold vha “#content-area”.
  4. Dette virkede faktisk bedre end jeg havde troet – når man klikkede på et link rullede indholdet ned til det rigtig område. Og det tidligere synlige del forsvandt. He he det gjorde linksne så også.
  5. Løste link issuet ved at anvende position: fixed.
  6. Det er så den løsning brugeren vil se hvis javascript er slået fra.
  7. Nu kunne jeg så kode løsningen i jQuery.
  8. Det var ret simpelt at lave animationen – da jeg først fandt ud af forskellen på at avende jquery metoden offset() og position().
  9. Jeg begyndte med at anvende offset() men det virkede ikke efter hensigten. Men fik hurtigt ændret til at benytte position() som giver div elementernes position realativt i forhold til den element de ligger i.
  10. Så løsning var i hus.

Tjek min løsning ud (bemærk ren prototype ikke noget fancy grafik) :
htmlversion

javascriptversion

Du kan jo snuppe kode – men jeg vil være glad hvis du spørg pænt ; )

Alternativt webdesign

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.

Rettelse af Breadcrumb

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()