Color picker, nu også Opera (og IE6) + kort vejledning.
Stig Johansen
Color pickeren er egentlig bare et v�rkt�j til eget brug, da jeg har brug
for at kunne se farvekombinationer i sin helhed.
Det er selvf�lgelig ikke det samme som at jeg kan finde ud af at sammens�tte
farver:)
Men selv om det er til mig selv, kunne det v�re andre kunne f� gl�de af den,
m�ske vil nogen endda l�gge p� en hjemmeside(skolen) og lave en lille
vejledning.
Den er naturligvis til fri afbenyttelse og kopiering, uden man beh�ver at
n�vne ophavet.
Jeg skrev tidliger et sp�rgsm�l, der kun gik id p� FF, og det var fordi
skidtet ikke virkede i Opera (og IE6).
Desv�rre oplever jeg nogle anderledes adf�rd i Opera mht. javascript og DOM,
s� jeg havde egentlig besluttet mig til "f*ck Opera", meen man er vel
alligevel nysgerrig, og tager udfordringen op ;)
Jeg fandt problemet, og fik det l�st.
Brugervejledninger er ikke rigtig noget jeg gider at lave, men hvs der er
interesse for det vil jeg godt lave en overordnet en.
Her er en kort en, hvis man vil afpr�ve den:
color pickeren:
<http://w-o-p-r.dk/tips/color.picker.asp>
Der er 2 overordnede funktioner.
Den ene som er default, viser et preview pane.
Dette preview pane er en redigerbar div, hvilket vil sige, at det ogs� er en
wysiwyg editor.
Her kan man skrive tekster, copy paste HTML fra andre sider, og der er ogs�
nogle simple redigeringsfunktioner vha. tastatur.
Denne editor kan skifte/toggle mellem wysiwyg og tekst(html) ved at bruge
tastekombinationern ctrl+alt+t
Men v�r opm�rksom p�, at selvom det vises som tekst, s� er det stadig en
html editor, s� hvis man copy/paster anden tekst, kan det v�re n�dvendigt
at copy/paste det ind over notepad for at fjerne formatteringen.
Den anden overordnede funktion er 'real time wysiwyg color picking'.
Her bliver preview pane skiftet ud med indhold fra en given hjemmeside, evt.
ens egen.
Det sker ved at angive URL'en i inputfeltet, og klikke p� 'use url'
checkboksen.
Herefter vises denne side i preview pane, dog underst�ttes ikke javascript,
med mindre det er angivet som absolutte url'er.
Dette preview pane er nu klikbart, og ved klik p� de enkelte elementer vises
en r�d border for at markere valget.
Samtidig vises en lille 'dom inspector', der indeholder elementet, parent
element, og child element(hvis det findes).
Endvidere vises previous og next sibling.
Ved klik p� disse elementer kan man mao 'navigere' sig gennem DOM tr�et.
Det kr�ver nok lidt indsigt i DOM tr�er, men det vil v�re for omfattende at
lave et fuldt dom tr�.
Det valgte element er nu target for color pickeren, og klik/tr�k i sliders
vil �ndre for/baggrundsfarve p� det valgte element.
Da jeg har lavet det s�dan, at klik p� sliders med samme v�rdi ikke udl�ser
�ndring, aktiveres den aktuelle v�rdi ved klik p� 'This node' ovre i 'dom
tr�et'.
Hver �ndring bliver gemt i en history liste, s� klik p� 'undo' ovre i 'dom
inspectoren' 'undoer' den sidste handling, og fjerner den fra historie
listen.
For at holde styr p� hvilke �ndringer der er foretaget, findes der en
funktion til at vise history listen.
Den kaldes ved klik p� history ovre p� 'dom inspectoren'.
Her er der informationer om hver �ndring, og hver �ndring kan 'undoes'
eller/og 'redoes'.
Men hvis der er foretaget flere p� hinanden f�lgende �ndringer p� samme
element, er det kun den _enkelte_ handling, der bliver tilbagef�rt, og ikke
'resten'.
Den samlede r�kkef�lge kan genskabes ved at klikke p� 'replay' �verst i
historielisten.
Jeg synes selv jeg kan f� gl�de at det, og h�ber ogs� andre kan f� det.
--
Med venlig hilsen
Stig Johansen