/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Color picker, nu også Opera (og IE6) + kor~
Fra : Stig Johansen


Dato : 02-01-10 06:28

Hej.

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

 
 
Søg
Reklame
Statistik
Spørgsmål : 177459
Tips : 31964
Nyheder : 719565
Indlæg : 6408182
Brugere : 218881

Månedens bedste
Årets bedste
Sidste års bedste