Advanceret profiltekst

lytter lige med...for har aldrig før hørt om at man kan skifte baggrunds farven i textarea :o)

<ole>

Du kan vel gøre noget à la:

<style type="text/css">
.swatch {
    font-size: 0px;
    line-height: 0px;
    width: 10px;
    height: 10px;
    border: 1px solid #666666;
}
</style>
<script type="text/JavaScript">
var actCol = false;
function setCol(swatch) {
    actCol = swatch.style.backgroundColor;
}
function setForeCol() {
    if (actCol) document.getElementById("gnu").style.color = actCol;
    else alert("Vælg først en farve");
}
function setBackCol() {
    if (actCol) document.getElementById("gnu").style.backgroundColor = actCol;
    else alert("Vælg først en farve");
}
</script>

<div onclick="setCol(this)" class="swatch" style="background-color:#ff0000">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#ffff00">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#00ff00">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#0000ff">&nbsp;</div>

<button onclick="setForeCol()">Forecolor</button>
<button onclick="setBackCol()">Backcolor</button>

<textarea id="gnu"></textarea>

/mvh
</bole>

:) hehe ved heller ikke om det lige er i javascript eller hvad :b men man skal jo starte et sted hehe :)

Men de har noget lignede på www.arto.dk.

Hej ole. Det ser ikke ud til at virke hehe.

Det er fordi OleBole mangler et ")" i "setCol(this"..  dvs: "setCol(this)"

Jeg prøver igen at indkopiere det dokument, jeg lavede (og testede)  :)

<style type="text/css">
.swatch {
    font-size: 0px;
    line-height: 0px;
    width: 10px;
    height: 10px;
    border: 1px solid #666666;
}
</style>
<script type="text/JavaScript">
var actCol = false;
function setCol(swatch) {
    actCol = swatch.style.backgroundColor;
}
function setForeCol() {
    if (actCol) document.getElementById("gnu").style.color = actCol;
    else alert("Vælg først en farve");
}
function setBackCol() {
    if (actCol) document.getElementById("gnu").style.backgroundColor = actCol;
    else alert("Vælg først en farve");
}
</script>

<div onclick="setCol(this)" class="swatch" style="background-color:#ff0000">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#ffff00">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#00ff00">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#0000ff">&nbsp;</div>

<button onclick="setForeCol()">Forecolor</button>
<button onclick="setBackCol()">Backcolor</button>

<textarea id="gnu"></textarea>

yups ... det er igen Ekspertens middelmådige kode, der æder noget. Gad vide, hvorfor de dog ikke stiller flere spørgsmål på Eksperten, så deres site kunne komme til at virke lidt professionelt?  :o|

Anyway, som thesurfer helt rigtigt skriver, mangler der afslutninger på parenteserne i onclick-handler'ne  :)

:) det prøver jeg lige så :)

Ja såden.

Men du skal jeg gerne have de farever man bruger som baggrund og som man bruger som tekst ind i databsen (bruger php, mysql) hvordan kan det så lade sig gøre :o

Så skal du indsætte værdierne i nogle skjulte textboxe, og derefter submitte formen..

Her er et eksempel, med et par ændringer (textarea, funktionerne):

function setForeCol(f) {
if (actCol) {
    f.tekstfelt.style.color = actCol;
    f.fcolor = actCol;
} else {
    alert("Vælg først en farve");
}

function setBackCol(f) {
if (actCol) {
    f.tekstfelt.style.backgroundColor = actCol;
    f.bcolor = actCol;
} else {
    alert("Vælg først en farve");
}

<form ...>
...
<button onclick="setForeCol(this.form)">Forecolor</button>
<button onclick="setBackCol(this.form)">Backcolor</button>

<textarea name="tekstfelt"></textarea>
<input type="hidden" name="fcolor"><input type="hidden" name="bcolor">
...
</form>

husk at du skal bruge en submit.. f.eks.:

<input type="submit" name="submit" value="Gem indstillingerne">

Men, det går jeg ud fra, at du vidste :-)

:) hehe jaer, kunne jeg regne mig til :D

Ole bole og thesurfer må gerne smide et svar :)

Jeg smider et svar.. håber at det er OK med OleBole..

Min kode ser nu sådan her ud:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
<head>
<style type="text/css">
.swatch {
    font-size: 0px;
    line-height: 0px;
    width: 10px;
    height: 10px;
    border: 1px solid #666666;
}
</style>
<script type="text/JavaScript">
var actCol = false;
function setCol(swatch) {
    actCol = swatch.style.backgroundColor;
}
function setForeCol() {
    if (actCol) document.getElementById("gnu").style.color = actCol;
    else alert("Vælg først en farve");
}
function setBackCol() {
    if (actCol) document.getElementById("gnu").style.backgroundColor = actCol;
    else alert("Vælg først en farve");
}

function setForeCol(f) {
if (actCol) {
    f.tekstfelt.style.color = actCol;
    f.fcolor = actCol;
} else {
    alert("Vælg først en farve");
}

function setBackCol(f) {
if (actCol) {
    f.tekstfelt.style.backgroundColor = actCol;
    f.bcolor = actCol;
} else {
    alert("Vælg først en farve");
}
}
}
</script>
</head>

<body>

<div onclick="setCol(this)" class="swatch" style="background-color:#ff0000">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#ffff00">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#00ff00">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#0000ff">&nbsp;</div>

<form method="post" action="">

<textarea id="gnu" cols="50" rows="10"></textarea><br>

<button onclick="setForeCol()">Tekstfarve</button>
<button onclick="setBackCol()">Baggrundsfarve</button>

<input type="hidden" name="fcolor"><input type="hidden" name="bcolor">

</form>

</body>
</html>

Syntes bare ikke det virker helt 100% også med tekst farven og såden.. :b

Hmm.. det vil ikke virke.. du mangler name="tekstfelt" i <textarea>
Det var en af de 2 ændringer jeg lavede..

Man kunne også definere 2 variabler: f (formen), t (textarea i f)
Så slipper man for at skulle skrive f.tekstfelt (t) og document.getElementById("gnu") (t)..

Ahh... har selv lavet en fejl :-)

Det skal være:

f.fcolor.value = actCol;
f.bcolor.value = actCol;

: o okaaaay :D er noob til javascript.

har giver den navnet tekstfelt nu. Men samme fejl når man vil ændre på skriftfarven.

Har du set indlægget med ".value = actCol;"-delen?
".value = actCol;"-delen skal bare tilføjes, til begge funktioner (1 i hver funktion)..

:b det rettet det men får stadig samme fejl.

www.efy.dk/kode.txt :) min nuværende kode

hehe.. du har tilføjet mine funktioner... :-)
Mine funktioner skal erstatte OleBoles.. dvs, der skal kun være 2 funktioner.. og det er dem med setXXXXCol(f).. (XXXX = Fore/Back)

Jeg lagde ikke engang mærke til det, i dit indlæg 10/04-2005 23:44:07

Og så mangler du også this.form i onclick="setForeCol()" og onclick="setBackCol()"

Dvs:

<button onclick="setForeCol(this.form)">Tekstfarve</button>
<button onclick="setBackCol(this.form)">Baggrundsfarve</button>

Jeg vil prøve at være mere vågen, ved dine kommende indlæg :-)

:b så jeg skal slet ikke bruge dine funktioner?
hehe?

jo, mine funktioner skal bruges.. :-)
Det er OleBoles der ikke skal bruges..

Faktisk er de ens.. med en lille modificering.. :-)

Okey :) alllltså :) nu ser mine kode sådan her ud:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
<head>
<style type="text/css">
.swatch {
    font-size: 0px;
    line-height: 0px;
    width: 10px;
    height: 10px;
    border: 1px solid #666666;
}
</style>
<script type="text/JavaScript">
function setForeCol(f) {
if (actCol) {
    f.tekstfelt.style.color = actCol;
    f.fcolor.value = actCol;
} else {
    alert("Vælg først en farve");
}

function setBackCol(f) {
if (actCol) {
    f.tekstfelt.style.backgroundColor = actCol;
    f.bcolor.value = actCol;
} else {
    alert("Vælg først en farve");
}
}
}
</script>
</head>

<body>

<div onclick="setCol(this)" class="swatch" style="background-color:#ff0000">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#ffff00">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#00ff00">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#0000ff">&nbsp;</div>

<form method="post" action="">

<textarea id="gnu" name="tekstfelt" cols="50" rows="10"></textarea><br>

<button onclick="setForeCol(this.form)">Tekstfarve</button>
<button onclick="setBackCol(this.form)">Baggrundsfarve</button>

<input type="hidden" name="fcolor"><input type="hidden" name="bcolor">

</form>

</body>
</html>

Men for stadig sejl, har har gjordt hvad du har bedt mig om ikke?

fejl*

Kigger lige på det, og kommer med den komplette løsning..

Jotak :D Acceptere lige det svar så :)

Du har udeladt en del af scriptet og lavet ged i 'tuborgerne'

<script type="text/JavaScript">
var actCol = false;
function setCol(swatch) {
    actCol = swatch.style.backgroundColor;
}

function setForeCol(f) {
    if (actCol) {
        f.tekstfelt.style.color = actCol;
        f.fcolor.value = actCol;
    } else {
        alert("Vælg først en farve");
    }
}
function setBackCol(f) {
    if (actCol) {
        f.tekstfelt.style.backgroundColor = actCol;
        f.bcolor.value = actCol;
    } else {
        alert("Vælg først en farve");
    }
}
</script>

1) Jeg oprettet et spm til OleBole, så han kan få points

2) Her er den komplette løsning (håber ikke at Eksperten spiser noget....):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
<head>
<style type="text/css">
.swatch {
    font-size: 0px;
    line-height: 0px;
    width: 10px;
    height: 10px;
    border: 1px solid #666666;
}
</style>
<script type="text/JavaScript">
var actCol = false;

function setCol(swatch) {
    actCol = swatch.style.backgroundColor;
}

function setForeCol(f) {
if (actCol) {
    f.tekstfelt.style.color = actCol;
    f.fcolor.value = actCol;
} else {
    alert("Vælg først en farve");
}
}

function setBackCol(f) {
if (actCol) {
    f.tekstfelt.style.backgroundColor = actCol;
    f.bcolor.value = actCol;
} else {
    alert("Vælg først en farve");
}
}

</script>
</head>

<body>

<div onclick="setCol(this)" class="swatch" style="background-color:#ff0000">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#ffff00">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#00ff00">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#0000ff">&nbsp;</div>

<form method="post" action="">

<textarea name="tekstfelt" cols="50" rows="10"></textarea><br>

<button onclick="setForeCol(this.form)">Tekstfarve</button>
<button onclick="setBackCol(this.form)">Baggrundsfarve</button>

<input type="hidden" name="fcolor"><input type="hidden" name="bcolor">

</form>

</body>
</html>

- en anden ting er, at du slet ikke kan anvende den slags form-adresseringer under XHTML. Man skal scripte helt anderledes, hvis man skal have andet en dårlig kode ud af XHTML. Men din kode parses formodentlig i forvejen som dårlig HTML ... ikke XHTML  ;o)
Prøv at læse disse to:
    http://www.eksperten.dk/artikler/537
    http://www.eksperten.dk/artikler/538

OleBole> Læg et svar: http://www.eksperten.dk/spm/608425

Tak for hjælpe i begge 2 :)

Hehe nej kunne bare ikke se den i IE først, havde noget blokering på, troed der var fordi jeg skulle proppe en doctype på :)

Nåå ja, opretter et spørgsmål med 130 points også til dig ole.

Jaer der virker nu. Men skal de 2 hidden felter ikke ha en value eller er der ikke rigtig noget af poste :o?

Hehe jaer du kunne også bare gøre det 8)

Du kunne:
1) disable submit-knappen, så man ikke kan submitte, uden at begge hidden-felter er udfyldte (via scriptet)

2) lade vær med at gemme indstillingerne på php/asp-siden, hvis et eller begge felter er tomme..

- rolig, nu ... thesurfer har allerede været så venlig at dele med mig i et andet spørgsmål. Der er ingen grund til at kaste flere points efter os  ;o)

jamen begge felter er jo tomme.

Der er ingen value på :O

Hehe :o) venligt af ham.

Prøv dette, så du kan se, hvad der sker, når man vælger farve:
  <input type="text" name="fcolor"><input type="text" name="bcolor">

Det sker i denne linie i funktionen 'setForeCol':
    f.fcolor.value = actCol;
- og den tilsvarende linie i den anden funktion

Netop.. de er tomme, med mindre at man vælger noget..

Du vil måske ha', at de nuværende værdier (fra sidste gang at brugeren gemte indstillingerne) skulle stå i felterne?

Hvilket serverside scriptsprog bruger du (ASP eller PHP) ?  (eller andet..?)

:D uhuh sejt :b

Jamen det var det så :) Taak!

Php :)

*LooL* ... vi snubler lidt rundt her  ;D
unsafe >> Fandt du af det? Virker det - eller ...?  :)

:) jaer det virker. Mange tak til jer begge!

- fint ... selvtak  ;o)

Jeg kan ikke få det til at virke i Firefox :O

Dette er mit script, præcist det som the surfer gav mig:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
<head>
<style type="text/css">
.swatch {
    font-size: 0px;
    line-height: 0px;
    width: 10px;
    height: 10px;
    border: 1px solid #666666;
}
</style>
<script type="text/JavaScript">
var actCol = false;

function setCol(swatch) {
    actCol = swatch.style.backgroundColor;
}

function setForeCol(f) {
if (actCol) {
    f.tekstfelt.style.color = actCol;
    f.fcolor.value = actCol;
} else {
    alert("Vælg først en farve");
}
}

function setBackCol(f) {
if (actCol) {
    f.tekstfelt.style.backgroundColor = actCol;
    f.bcolor.value = actCol;
} else {
    alert("Vælg først en farve");
}
}

</script>
</head>

<body>

<div onclick="setCol(this)" class="swatch" style="background-color:#ff0000">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#ffff00">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#00ff00">&nbsp;</div>
<div onclick="setCol(this)" class="swatch" style="background-color:#0000ff">&nbsp;</div>

<form method="post" action="">

<textarea name="tekstfelt" cols="50" rows="10"></textarea><br>

<button onclick="setForeCol(this.form)">Tekstfarve</button>
<button onclick="setBackCol(this.form)">Baggrundsfarve</button>

<input type="hidden" name="fcolor"><input type="hidden" name="bcolor">

</form>

</body>
</html>

Før gad det godt. Nu gider det ikke :S

Hehe ... det er fordi, du nu har en form - og fordi, Moz er lidt dum på dette punkt. Den tror fejlagtigt, at ethvert button-element er en submit-knap, selvom den ikke har type="submit"  :o|
Løsningen er at returnere false i onclick-handler'en:

<button onclick="setForeCol(this.form);return false">Tekstfarve</button>
<button onclick="setBackCol(this.form);return false">Baggrundsfarve</button>

- det var måske ikke helt tydeligt forklaret, men Moz submitter simpelthen formen, hvergang du trykker på en af knapperne. Det undgår du på den måde, jeg viste  :)

... og så skal du naturligvis have en rigtig submit-knap, så du kan gemme:
    <button type="submit">Gem</submit>

Hehe jo jeg forstod der godt :)

Mange tak :) nu virker det !! :D

Eller nej. Jo fint det med det. Men når jeg poster farverne ind i databsen kommer de ind som eks rgb(102, 255, 51).

www.efy.dk/advance.php kig selv når i vælger en farve havd der kommer til at stå i de 2 felter som skulle være usynlige.

hmm... Mozilla FireFox skriver rgb-værdier, hvor Opera og Internet Explorer skriver hex-værdier..

Så skal du bruger bruge et "RGB to Hex"-script :-)

F.eks.: http://javascript.internet.com/equivalents/rgb-to-hex.html

"bruger bruge" = "bare bruge" ... tja.. :-)

Kan du hjælpe lidt det det så det nærmest er i scriptet? fordi alle der så vil rette den i mozilla kan jo ikke. :/

Jeg ser lige, om jeg ikke kan implementere noget kode, i den eksisterende kode.. :-)
hang on..

:D tak. så der i inputsne kommer til at stå hex koder selvom det er i firefox :o)?

yep :-)

:o) sejt mann! hehe venter spændt ;)

Jeg er lidt optaget lige nu.. så det kan godt tage noget tid.. jeg vender tilbage hurtigst muligt.. behøver ikke at reloade siden hele tiden :-)

Hehe det helt i orden :) kigger til den om en times tid. ellers kigger jeg bare i morgen ;)

Jeg var faktisk igang med koden, lige efter jeg skrev linket..
Det gik faktisk bedre end forventet.. jeg er færdig med koden.. skal bare lige finpudse det..

Hele denne JavaScript-blok, fra <script type="text/JavaScript"> og til </script>, skal erstatte det du allerede har:

<script type="text/JavaScript">
var actCol = false;
var r = "";
var g = "";
var b = "";
var arrHex = new Array("A","B","C","D","E","F");
var arrDec = new Array("10","11","12","13","14","15");

function setCol(swatch) {
    actCol = swatch.style.backgroundColor;
}

function udregn(nummer)
{
msg = ""
for (i=0; i<arrDec.length; i++){
    if (nummer == arrDec[i]) return arrHex[i];
}
return nummer;
}

function d2h(farve)
{
farve = farve.substr(4, farve.indexOf(")") - 4);
farve = farve.split(", ");
r = farve[0]; g = farve[1]; b = farve[2]

r = "" + udregn(Math.floor(r / 16)) + udregn(r % 16);
g = "" + udregn(Math.floor(g / 16)) + udregn(g % 16);
b = "" + udregn(Math.floor(b / 16)) + udregn(b % 16);

return "#" + r + g + b;
}

function setForeCol(f) {
if (actCol) {
    if (actCol.indexOf("rgb") > -1) actCol = d2h(actCol);
    f.tekstfelt.style.color = actCol;
    f.fcolor.value = actCol;
} else {
    alert("Vælg først en farve");
}
}

function setBackCol(f) {
if (actCol) {
    if (actCol.indexOf("rgb") > -1) actCol = d2h(actCol);
    f.tekstfelt.style.backgroundColor = actCol;
    f.bcolor.value = actCol;
} else {
    alert("Vælg først en farve");
}
}
</script>

Lige et par ting..

1) slet linien (msg = ""), da den er overflødig (var en test)
2) tilføj ";" i slutningn af linien: r = farve[0]; g = farve[1]; b = farve[2];

Scriptet er testet, og virker, med Mozilla FireFox v1.0.2, Opera v7.54u1 og Internet Explorer v6x ..

hmm.. jeg kunne have brugt farve.substring(4, farve.indexOf(")")) i stedet..

Hehe jeg prøver :)

Jamen du prøver bare frem :) siger lige hvis det ikke virker

Jammen JAAAA det virker ;)

Tak skal du ha :)

www.efy.dk/advance.php <- der er det færdige resultat!

;) bare jeg kunne give dig flere points hehe :)

Det behøver du ikke.. jeg lærte faktisk også lidt i dag :-)

:-) Også mig. Hehe og fik en masse god hjælp :)

Nådada ... man kan da heller tage sig en enkelt 'fridag', uden der sker en masse  :D

hehe.. jamen, olebole, så kan du jo optimere min kode, nu hvor du er her.. :-)