51
Tags:
javascript
Skrevet af
Bruger #4575
@ 10.01.2005
Dropdown menuen
Inden vi går videre her, vil jeg lige gøre det klart, at jeg ikke på nogen måde vil forsøge at lave et flot layout af dropdown menuen, men kun et groft omrids, så i selv kan ændre layoutet samt funktionaliteten af menuen...
Først skal vi jo lige have lavet en div, som kan indeholde menuen, så vi ved hvor vi har den
HTML:
<div id="DropMenu">
</div>
CSS:
#DropMenu {
width: 150px;
}
Så laver vi CSS'et til selve knappen, som skal udløse dropdown menuen, når der bliver trykket på den. Jeg har vælgt at give den en rød baggrundsfarve med sort tekst + kant samt en smule padding:
#DropReleaser {
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #000000;
padding: 2px;
border: 1px solid #660000;
background-color: #CC0000;
}
Nu skal vi så også have lavet en klasse til alle linksne nede i dropdown menuen, både mens de er synlige og usynlige. Vi vælger af gøre dem mørkerøde med hvid tekst, samt en sort kant:
#DropMenu .link {
display: block;
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #FFFFFF;
padding: 1px;
border: 1px solid #000000;
border-top: 0px;
background-color: #660000;
cursor: pointer;
}
#DropMenu .Invisible {
display: none;
}
Det var så CSS'en, nu skal vi så lige have sat et par links, samt en udløser ind i vores menu, hvilket vi meget simpelt gør med et par span elementer inde i vores DropMenu element:
<div id="DropMenu">
<span id="DropReleaser">Dropdown</span>
<span class="Invisible">Link 1</span>
<span class="Invisible">Link 2</span>
<span class="Invisible">Link 3</span>
</div>
Nu har vi så fået opbygget vores element i HTML og CSS, så skal vi så videre med javascriptet, hvilket godt kan virke svært, men det er det egentligt ikke.
Først skal vi have lavet nogle events i vores elementer. Vi sætter body onclick="hideMenu();" og DropMenu onclick="hide=false; showMenu();" og endelig sætter vi linksne til onclick="navigate('URL');"
Det kommer til at se sådan ud:
<body onclick="hideMenu();">
<div id="DropMenu" onclick="hide=false; showMenu();">
<span id="DropReleaser">Dropdown</span>
<span class="Invisible" onclick="navigate('URL');">Link 1</span>
<span class="Invisible" onclick="navigate('URL');">Link 2</span>
<span class="Invisible" onclick="navigate('URL');">Link 3</span>
</div>
Nu skal vi så igang med javascriptet. Vi starter med at oprette en global variabel hide, som bliver sat til false, hvis der bliver trykket et sted inde i dropdown menuen, hvilket så sørger for, at menuen ikke bliver fjernet ved et klik inde i den.
Bagefter skal vi så oprette 2 funktioner, en til at vise menuen og en til at fjerne den igen samt en funktion til at sende brugeren videre, når man trykker på et af linksne.
<script type="text/javascript">
<!--
// Lav hide variablen
var hide = true;
var open = false;
// Funktion til at vise menuen med
function showMenu() {
// Vi henter alle elementer af typen span. Princrippet i getElementsByTagName er det samme som i ById, men henter her alle elementer af typen span...
var elements = document.getElementsByTagName("span");
// Variabel til at lave en løkke
var i = 0;
// Variabel til at indeholde det foreløbige element
var current;
// Så længe current kan blive lig med det næste af elementerne, så fortsætter vi (== sammenligner to værdier, hvorimod = tegnet faktisk også sætter current til at være elements[ i]) - Husk at fjerne mellemrummet, men ellers ville det blive kursiv!
while(current = elements[ i]) {
// Tjek om den er af typen Invisible
if(current.className == "Invisible") {
// Lav den om til link, så vi kan se det.
current.className = "link";
}
i++; // Opdater i, så vi næste gang får fat i det næste element...
}
// Vi sætter hide til false, så menuen ikke bliver gemt lige med det samme!
open = true;
}
function hideMenu() {
// Tjek, om vi skal gemme menuen
if(hide == true) {
var elements = document.getElementsByTagName("span");
var i = 0;
var current;
while(current = elements[ i]) {
if(current.className == "link") {
current.className = "Invisible";
}
i++;
}
open = false;
// Hvis vi ikke skal gemme den nu sikrer vi os, at den bliver gemt næste gang
} else {
hide = true;
}
}
// Funktion til at sende brugeren videre til en ny side med
function navigate(URL) {
// Send brugeren videre via URL'en...
window.location.href = URL;
}
// -->
</script>
Som du kan se har vi indført et par nye funktioner, som document.getElementsByTagName("span"). Jeg håber, at du allerede har forstået, at den funktion henter alle elementerne af en given type (i vores tilfælde span tag's) ind i et array.
Derefter gennemløber vi så det array, og tjekker klassen af samtlige span elementer, og ændre span's af typen Invisible til link og omvendt, når vi gemmer dem fra link til Invisible.
I navigations funktionen bruger vi også window.location.href, hvilket bare betyder, at klienten skal sendes videre til den side i angiver. Det kunne f.eks. være Index.php eller en hvilken som helst anden side i måtte ønske at sende brugeren videre til.
Det var så selve dropdown menuen, så nu kan du så selv designe den, som du ønsker.
Når du er klar kan du gå videre til næste afsnit, hvor du lærer at bruge key events til at åbne & lukke menuen, samt at vælge linksne med.
Key events
Nu skal vi så have lavet en handler til vores keypress event, så vi kan reagere på taste tryk, og evt. udføre en handling. Derfor er det første vi gør, at sætte body'ens onkeypress event til <body onclick="hideMenu();" onkeypress="keyPress();">, så vi altid vil kunne reagere på tastetryk via vores keyPress funktion.
Så skal vi så igang med at få vores keyPress funktion til at åbne hhv. lukke menuen, når der bliver trykket på "o" knappen. Det gør vi ved at registrere hvilken knap, der blev trykket på i en variabel, og derefter tjekke om det var "o", der blev trykket på.
// Funktion til at reagere på taste tryk
function keyPress() {
// Tjek hvilken knap der blev trykket på
keyp = window.event.keyCode;
// Hvis det var "o" der blev trykkey på, så åben menuen (lille o's kode er 111 og store o's kode er 79)
if(keyp == 111 || keyp == 79) {
// Tjek om menuen er åben, så den skal lukkes
if(open == true) {
hideMenu(); // Gem menuen
// Ellers viser vi menuen
} else {
showMenu(); // Vis menuen
}
}
Denne funktion skal så tilføjes resten af vores javascript, jeg har valgt at placere den nedderst.
Det vi gør er, at vi registrerer hvilken knap, der er blevet trykket på i variablen keyp, for derefter at tjekke om værdien af den er lig "taste koden" for "o". Vi ved, at lille o's kode er 111 og store o's kode er 79, så det er bare at lave en if-sætning if(keyp == 111 || keyp == 79), som betyder hvis keyp er lig 111 (lille o) eller keyp er lig 79 (store o), så gå videre til næste del af koden.
Som i ved fra tidligere, har vi en variabel, open, som er sat til true når menuen er åben og false når den er lukket. Den skal vi så bruge nu, for at finde ud af om vi skal åbne eller lukke menuen, hvilket vi gør ved at gøre brug af de forud definerede funktioner show- og hideMenu.
Nu skal vi så også gøre det muligt for brugeren at vælge links ved at trykke på tastaturet. Jeg har valgt at gøre dette muligt via ID's (beskrives senere), så først angiver vi et ID til hvert af vores links i menuen:
<span id="1" class="Invisible" onclick="navigate('URL');">Link 1</span>
<span id="2" class="Invisible" onclick="navigate('URL');">Link 2</span>
<span id="3" class="Invisible" onclick="navigate('URL');">Link 3</span>
Jeg vil så bruge ID'et, så jeg kan tjekke om ID'et matcher den knap, som der er blevet trykket på. Men da taste koden ikke er magen til vores talsystem og alfabet bliver vi først nødt til at lave en oversættelses funktion. Det gør vi ved at lave en lang if-sætning, som jeg ikke vil beskrive nærmere, da jeg går udfra i kan forstå princippet allerede:
// Funktion til at oversætte key code til tal og bogstaver
function translateKeyCode(code) {
// Hvis koden ligger mellem 48 og 57 er det et tal fra 0-9, så der skal bare trækkes 48 fra for at få det rigtige tal...
if(code >= 48 && code <= 57) {
return code - 48;
// Ellers er det et bogstav, og vi bliver nødt til at lave en længere if-sætning
} else {
// Hvis det er a eller A (vi returnerer altid store bogstaver, så huske det i ID'et)
if(code == 97 || code == 65) {
return "A";
} else if(code == 98 || code == 66) {
return "B";
} else if(code == 99 || code == 67) {
return "C";
} else if(code == 100 || code == 68) {
return "D";
} else if(code == 101 || code == 69) {
return "E";
} else if(code == 102 || code == 70) {
return "F";
} else if(code == 103 || code == 71) {
return "G";
} else if(code == 104 || code == 72) {
return "H";
} else if(code == 105 || code == 73) {
return "I";
} else if(code == 106 || code == 74) {
return "J";
} else if(code == 107 || code == 75) {
return "K";
} else if(code == 108 || code == 76) {
return "L";
} else if(code == 109 || code == 77) {
return "M";
} else if(code == 110 || code == 78) {
return "N";
} else if(code == 111 || code == 79) {
return "O";
} else if(code == 112 || code == 80) {
return "P";
} else if(code == 113 || code == 81) {
return "Q";
} else if(code == 114 || code == 82) {
return "R";
} else if(code == 115 || code == 83) {
return "S";
} else if(code == 116 || code == 84) {
return "T";
} else if(code == 117 || code == 85) {
return "U";
} else if(code == 118 || code == 86) {
return "V";
} else if(code == 119 || code == 87) {
return "W";
} else if(code == 120 || code == 88) {
return "X";
} else if(code == 121 || code == 89) {
return "Y";
} else if(code == 122 || code == 90) {
return "Z";
// Æ, Ø & Å er speciel tegn, og følger ikke "mønstret"
} else if(code == 230 || code == 198) {
return "Æ";
} else if(code == 248 || code == 216) {
return "Ø";
} else if(code == 229 || code == 197) {
return "Å";
}
}
}
Når vi har fået placeret denne kode i bunden af vores javascript er vi klar til at gå videre med vores keypress handler funktion. Dog skal i lige være opmærksomme på, at vi kun giver store bogstaver tilbage, så ønsker i at få et link til at reagere ved et tryk på f.eks. I-knappen, så skal i angive ID'et som et stort "I".
Nu skal vi så udvide vores keyPress funktion, så den også kan få linksne til at reagere, ved tryk på keyboardet. Det vi gør er, at vi får oversat taste koden (keyp) til et tal eller bogstav, og udfra det bogstav forsøger vi, at identificere et element med samme ID.
Kan vi finde et sådant element udløser vi dets onclick event, da vi jo tidligere har defineret denne til, at sende brugeren videre til linket. Men lad os da kigge på noget kode:
// Funktion til at reagere på taste tryk
function keyPress() {
// Tjek hvilken knap der blev trykket på
keyp = window.event.keyCode;
// Hvis det var "o" der blev trykkey på, så åben menuen (lille o's kode er 111 og store o's kode er 79)
if(keyp == 111 || keyp == 79) {
// Tjek om menuen er åben, så den skal lukkes
if(open == true) {
hideMenu(); // Gem menuen
// Ellers viser vi menuen
} else {
showMenu(); // Vis menuen
}
// Ellers tjekker vi, om det er et ID'et på et element, så der skal udløses en onclick event
} else {
// Find ud af hvilket bogstav der blev trykket på
element = translateKeyCode(keyp);
// Hvis elementet findes, så udløs onclick eventet for elementet
if(document.getElementById(element)) {
document.getElementById(element).onclick(); // udløs onclick eventet
}
}
}
Som du kan se, så har jeg udvidet koden med en ekstra del, som hvis koden ikke er lig "o", gør ned i, og derfra tjekker, om der findes et element hvis ID matcher den knap, som der blev trykket på. Gør der det, så vil den udløse onclick eventet, og derved sende brugeren videre til den side, som linket peger på.
Du burde være i stand til at forstå denne del af koden, da du tidligere har lært om identificering af elementer, brugen af if-sætninger og endelig har du selv lavet oversættelsesfunktionen.¨
Nu er vi faktisk færdige med vores javascript dropdown menu, med mulighed for brug af tastetryk, men skulle du have haft problemer med at samle koden sammen undervejs vil jeg lige vise hele min kode:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
#DropMenu {
width: 150px;
}
#DropReleaser {
width: 100%;
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #000000;
font-weight: bold;
text-align: center;
padding: 3px;
border: 1px solid #660000;
background-color: #CC0000;
}
#DropMenu .link {
display: block;
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #FFFFFF;
padding: 1px;
border: 1px solid #000000;
border-top: 0px;
background-color: #660000;
cursor: pointer;
}
#DropMenu .Invisible {
display: none;
}
</style>
<script type="text/javascript">
<!--
// Lav hide variablen
var hide = true;
var open = false;
// Funktion til at vise menuen med
function showMenu() {
// Vi henter alle elementer af typen span. Princrippet i getElementsByTagName er det samme som i ById, men henter her alle elementer af typen span...
var elements = document.getElementsByTagName("span");
// Variabel til at lave en løkke
var i = 0;
// Variabel til at indeholde det foreløbige element
var current;
// Så længe current kan blive lig med det næste af elementerne, så fortsætter vi (== sammenligner to værdier, hvorimod = tegnet faktisk også sætter current til at være elements[ i], husk at fjerne mellemrummene ved [ i] alle steder!!)
while(current = elements[ i]) {
// Tjek om den er af typen Invisible
if(current.className == "Invisible") {
// Lav den om til link, så vi kan se det.
current.className = "link";
}
i++; // Opdater i, så vi næste gang får fat i det næste element...
}
// Vi sætter hide til false, så menuen ikke bliver gemt lige med det samme!
open = true;
}
function hideMenu() {
// Tjek, om vi skal gemme menuen
if(hide == true) {
var elements = document.getElementsByTagName("span");
var i = 0;
var current;
while(current = elements[ i]) {
if(current.className == "link") {
current.className = "Invisible";
}
i++;
}
open = false;
// Hvis vi ikke skal gemme den nu sikrer vi os, at den bliver gemt næste gang
} else {
hide = true;
}
}
// Funktion til at sende brugeren videre til en ny side med
function navigate(URL) {
// Send brugeren videre via URL'en...
window.location.href = URL;
}
// Funktion til at reagere på taste tryk
function keyPress() {
// Tjek hvilken knap der blev trykket på
keyp = window.event.keyCode;
// Hvis det var "o" der blev trykkey på, så åben menuen (lille o's kode er 111 og store o's kode er 79)
if(keyp == 111 || keyp == 79) {
// Tjek om menuen er åben, så den skal lukkes
if(open == true) {
hideMenu(); // Gem menuen
// Ellers viser vi menuen
} else {
showMenu(); // Vis menuen
}
// Ellers tjekker vi, om det er et ID'et på et element, så der skal udløses en onclick event
} else {
// Find ud af hvilket bogstav der blev trykket på
element = translateKeyCode(keyp);
// Hvis elementet findes, så udløs onclick eventet for elementet
if(document.getElementById(element)) {
document.getElementById(element).onclick(); // udløs onclick eventet
}
}
}
// Funktion til at oversætte key code til tal og bogstaver
function translateKeyCode(code) {
// Hvis koden ligger mellem 48 og 57 er det et tal fra 0-9, så der skal bare trækkes 48 fra for at få det rigtige tal...
if(code >= 48 && code <= 57) {
return code - 48;
// Ellers er det et bogstav, og vi bliver nødt til at lave en længere if-sætning
} else {
// Hvis det er a eller A (vi returnerer altid store bogstaver, så huske det i ID'et)
if(code == 97 || code == 65) {
return "A";
} else if(code == 98 || code == 66) {
return "B";
} else if(code == 99 || code == 67) {
return "C";
} else if(code == 100 || code == 68) {
return "D";
} else if(code == 101 || code == 69) {
return "E";
} else if(code == 102 || code == 70) {
return "F";
} else if(code == 103 || code == 71) {
return "G";
} else if(code == 104 || code == 72) {
return "H";
} else if(code == 105 || code == 73) {
return "I";
} else if(code == 106 || code == 74) {
return "J";
} else if(code == 107 || code == 75) {
return "K";
} else if(code == 108 || code == 76) {
return "L";
} else if(code == 109 || code == 77) {
return "M";
} else if(code == 110 || code == 78) {
return "N";
} else if(code == 111 || code == 79) {
return "O";
} else if(code == 112 || code == 80) {
return "P";
} else if(code == 113 || code == 81) {
return "Q";
} else if(code == 114 || code == 82) {
return "R";
} else if(code == 115 || code == 83) {
return "S";
} else if(code == 116 || code == 84) {
return "T";
} else if(code == 117 || code == 85) {
return "U";
} else if(code == 118 || code == 86) {
return "V";
} else if(code == 119 || code == 87) {
return "W";
} else if(code == 120 || code == 88) {
return "X";
} else if(code == 121 || code == 89) {
return "Y";
} else if(code == 122 || code == 90) {
return "Z";
// Æ, Ø & Å er speciel tegn, og følger ikke "mønstret"
} else if(code == 230 || code == 198) {
return "Æ";
} else if(code == 248 || code == 216) {
return "Ø";
} else if(code == 229 || code == 197) {
return "Å";
}
}
}
// -->
</script>
</head>
<body onclick="hideMenu();" onkeypress="keyPress();">
<div id="DropMenu" title="Hit 'o' to open/close" onclick="hide=false; showMenu();">
<span id="DropReleaser">Dropdown</span>
<span id="1" title="Hit '1' to enter..." class="Invisible" onclick="navigate('URL');">Link 1</span>
<span id="2" title="Hit '2' to enter..." class="Invisible" onclick="navigate('URL');">Link 2</span>
<span id="3" title="Hit '3' to enter..." class="Invisible" onclick="navigate('URL');">Link 3</span>
</div>
</body>
</html>
Konklussion
Nu burde du have fået et rimeligt godt indblik i det mest basale i javascript, samt et ekesempel på hvordan javascript KAN bruges til at gøre dine sider mere dynamiske for klienterne/brugerne.
Selvfølgelig var det eksempel, som jeg lavede sikkert ikke helt optimalt, så du kan jo evt. selv prøve at forbedre det, tilføje mere til det osv. Desuden skal du nok også overveje, hvor godt det fungerer sammen med dit indhold, da det vil rykke indholdet nedad, når menuen åbner. Ideen var da også bare, at give et eksempel på hvad javascript kan bruges til i forhold til udvikling af hjemmesider, så du ikke bare fik smidt en masse nyttesløse eksempler i hovedet.
Jeg håber, at du nu har fået mod på at bruge javascript, samt en god forståelse af brugen af javascript generelt!
Har du problemer med noget af koden i denne artikkel kan du jo evt. spørge i forummet...
Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.
Del også gerne artiklen med dine Facebook venner:
Kommentarer (17)
WOW...det er godt nok det længste artikel jeg nogensinde har set. Har ikke fået tygget mig igennem hele artiklen endnu men den ser spændende ud. Godt arbejde
Jeg har et par kommentarer til artiklen.
Den rækkefølge du checker for browserne i er omvendt. Du indikerer via kommentarne at du checker for IE4 via
if(document.all)
Nu er det bare sådan at alle IE versioner har document.all collectionen, og derfor vil den matche samtlige versioner, ikke kun version 4. Du bør derfor placere
if(document.getElementById)
som den første betingelse.
Dernæst er din translateKeyCode funktion langt mere kompleks end det er nødvendigt.
function translateKeyCode(code) { return String.fromCharCode(code).toUpperCase(); }
Du bruger også Object som et variabel navn. Object er en indbygget type i javascript, og det kan derfor lede til visse problemer at bruge netop det som et variabel navn. Jeg vil forslå du ændrer det til noget ala obj.
Og så lige en mindre detalje, i dit mouseOver/mouseOut script har du en lille kommentar fejl. Du indikerer at du checker for IE4, men du checker document.layers, og derfor Netscape.
God artikkel Mads
Den lære man sq noget af
Hybbe:
Tak fordi du gør opmærksom på det!.. Jeg kendte faktisk ikke til de problemet med rækkefølgen af browser tjekket samt brugen af Object som variabel navn, men jeg vil forsøge at rette det i løbet af ugen...
Hvad angår translateKeyCode, så kan jeg sq godt se at din er noget smartere
Jonas:
Ved godt den ser lang ud, men der er meeeget af den, som er kode eksempler...
Mere generelt... Jeg ligger og roder med et WYSIWYG Online CMS, dog endnu kun på test niveau, men er der stemning for en tutorial om det emne, når jeg engang har fået sat mig ind i hvordan man laver sådan et system?..
Kanon artikel Mads
Tog dog lidt tid at tygge sig igennem men har da lært en del, så tak for det.
Ja, fra min side syntes jeg det ville være fedt med en artikel om det emne, så håber da det kommer.
4 hefra.
Jamen så må jo se om ikke jeg inden alt for lang tid kan få skrevet en artikel om det emne...
Jeg tror dog, at jeg inden det lige vil skrive en artikkel om avanceret javascript, som string handling, at lave sine egne objekter samt image preload, da jeg allerede nu bruger disse ting meget i mit CMS.
Det er svært at vide, hvor man skal starte og hvor man skal slutte
Skriver du noget somhelst før din DTD, disabler du IE's mulighed for at gøre brug af en meget væsentlig del af CSS-standarden - box-modellen. Altså slet din XML-prolog (du har ikke brug for den, da du alligevel ikke kan skrive XHTML).
Du kan teste din sides CSS-kompatibillitet med følgende. der skal returnere 'CSS1Compat':
<script type="text/JavaScript">
document.compatMode()
</script>
Læs evt. mere her (specielt under The !DOCTYPE "Switch"):
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.aspDernæst er det at skifte klasse temmelig dårlig kodeskik. Når en CSS-klasse skiftes på et element, spytter browseren et helt nyt DOM-træ ud, som kræver en genberegning af hele dokumentet ... det er yderst dårligt performende.
Langt bedre er det at skifte de enkelte style-properties på elementet. Det kan nu også gøres ganske 'sexy':
<script type="text/JavaScript">
var stylesA = {
"color": "#ff0000",
"backgroundColor": "#ffff00",
"border": "1px solid #ff0000",
};
var stylesB = {
"color": "#ffff00",
"backgroundColor": "#ff0000",
"border": "1px solid #ffff00",
};
function swapStyles(elm, styleObj) {
for (x in styleObj) elm.style[x] = styleObj[x];
}
</script>
<div onmouseover="swapStyles(this, stylesA)" onmouseout="swapStyles(this, stylesB)">TEST</div>
- hvilket giver browseren langt mindre at svede over - og dermed er betydeligt bedre.
Til slut kommer vi så til det spørgsmålet om XHTML:
Sagen er, at XHTML ikke kan bruges på ordentlig måde på nettet, som dette ser ud idag. Faktisk parses stort set al XHTML idag som dårlig HTML4-kode.
Dels fordi, der er så få, der overhovedet _kan_ kode XHTML (det er nemlig *meget* mere end blot at lukke tags og skrive med småt) - dels fordi, den ultimativt største browser (IE6.0) kun understøtter XHTML, hvis XP er opdateret med SP2 ... og så ikke engang fuldt ud.
Du bruger både document.write og innerHTML på trods af, at disse to hører til HTML-DOM'en og ikke kan bruges under XHTML. Gør man det alligevel, tvinger man browseren til at parse siden som HTML4 - men koden må altså parses som fejlfyldt HTML4, da den er fyldt med ' />', som HTML-parseren ikke kender ... og en forkert DTD i forhold til indholdet.
Det samme gælder f.eks. for document.images og document.forms. De tilhører også HTML-DOM'en og kan således ikke bruges under XHTML.
I virkeligheden er din XHTML-kode langt dårligere, end hvis du havde skrevet i HTML4.01-Strict.
Jeg tror, du bør læse noget helt grundlæggende om XHTML, da der tydeligvis er en hel del ting, du slet ikke har forstået. Prøv f.eks. at begynde her:
http://www.eksperten.dk/artikler/537 http://www.eksperten.dk/artikler/538- hvor jeg har forsøgt at få styr på nogle af de grundlæggende misforståelser omkring XHTML, der hærger nettet - og som din artikel er et udmærket eksempel på.
Jeg giver ikke laveste karakter, da der trods alt er huller mellem fejlene
/mvh
PS: Jeg manglede alert'en :o)
<script type="text/JavaScript">
alert(document.compatMode)
</script>
Til Ole Clausen:
Kan godt se du har ret angående problemerne med XHTML'en
Hvad angår det med klasse skift fra javascript ved jeg godt, at det kan være et problem at gøre det på den måde, som jeg har vist her - Men da det skulle være en relativt simpel artikkel har jeg valgt at vise klasse skift frem for ændringer af attributerne hver for sig (Jeg vidste faktisk ikke man kunne gøre som du viser).
Hvad det problem angår vil jeg så tilgengæld i næste artikkel vise hvordan man laver en klasse, som kan bruges til at ændre attributer osv. for et element, hvilket jeg generelt foretrækker fremfor at skulle identificere elementet hver gang
Men ellers tak for kritikken...! Den var konstruktiv og kan helt sikkert bruges i den næste artikel (og evt. videre artikler)...
Hej igen Mads
Det glæder mig, du får noget ud af mine udgydelser. I den forbindelse - og da du skriver, du ikke kendte metoden, jeg viste til property-skift - kunne det være, du også skulle læse denne:
http://www.eksperten.dk/artikler/227- hvor jeg prøver at gøre rede for det nære slægtskab mellem JS-objekter og JS-arrays
/mvh
Det vil jeg da gøre
Dog... Jeg er lidt overbebyrdet med lektier & arbejde for tiden, så jeg får desværre ikke tid til at ændre artiklen foreløbig, men jeg vil ordne det hurtigst muligt!
Har indsendt en rettet version til godkendelse, så nu er der bare tilbage at vente på, at den bliver godkent
Har lige et spørgsmål kun hvofor gør du den ik lidt kortere og vælger at lave en style.css eksempel. Men ellers meget god..
Har rettet den, så den er blevet væsentligt kortere, men er desværre ikk blevet godkendt (eller afvist) endnu
Dobbelt op på super duper mega giga onderen total niceren sej artikel dér!
Jah! er færdig med den!
Mega godt skrevet Go artikel
Rigtig god artikel som man kan lære rigtig meget af...
Nogle enkelte småfejl, men blot taste fejl, ellers fejl fri efter min forståelses evne...
Den sikrer ens basiks med JS og har givet mig en del videre muligheder...
Du skal være
logget ind for at skrive en kommentar.