Avatar billede haolan Nybegynder
27. november 2005 - 01:30 Der er 11 kommentarer og
1 løsning

Colorpicker i popup

Hey.. Jeg har et colorpickersystem jeg gerne vil have til at fungere på den måde at ud for hvert formularfelt kan trykke på "vælg farve" og så åbner den en popup med et farveskema hvor man så kan klikke på den ønskede farve og så vil HEX-koden automatisk placere sig i formularfeltet..

Jeg kender intet til Javascript, så håber i kan hjælpe..

Mit farveskema ser sådan ud:

<?

$result = mysql_query("SELECT farve FROM farver") or die(mysql_error());

echo "<table class='skema' cellspacing='0'>";
$colums = 24;  # Antal kategorier pr række
$i = 0;
while ($r = mysql_fetch_array($result))
{
    $bgcolor = $r['farve'];
    if ($i % $colums == 0 && $i != 0)
    {
        echo "</tr>\n";
    }

    if ($i % $colums == 0)
    {
        echo "<tr>\n";
    }

    echo "<td width='10' bgcolor='#$bgcolor'><a href='&color=".$r['farve']."' style='color: ".$r['farve']."'>&nbsp;&nbsp;</a></td>\n";
    $i++;
}

while ($i % $colums != 0)
{
    echo "<td>&nbsp;</td>\n";
    $i++;
}

echo "</tr></table>";

?>
Avatar billede skovenborg Nybegynder
27. november 2005 - 20:34 #1
Du kan prøve at tilføje denne funktion til din "hovedside" - altså den med alle inputfelterne ;-)

<script type="text/javascript">
var activeInput;
function openColorPicker(inputElm) {
    activeInput = inputElm;
    window.open("farveskema.php","new_win","width=400,height=300"); // Vælg selv indstillinger og filnavn ;-)
}

function chooseColor(hexValue) {
    if (activeInput) {
      activeInput.value = hexValue;
    }
}
</script>

I dit farveskema skal du tilføje dette til alle dine links (det er vel $r['farve']'s værdi du gerne vil have overført, ikke!?!):
echo "<td width='10' bgcolor='#$bgcolor'><a href='&color=".$r['farve']."' style='color: ".$r['farve']."' onclick=\"opener.chooseColor('".$r['farve']."');\">&nbsp;&nbsp;</a></td>\n";

Noget i den stil i hvert fald. Har ikke lige testet det ;-)
Avatar billede skovenborg Nybegynder
27. november 2005 - 21:03 #2
Jeg har foresten glemt det vigtigste ;-)

Din formular på hovedsiden skal nemlig indeholde muligheden for at åbne popup-vinduet:
<form name="form1">
<input type="text" name="farve1"><input type="button" value="Vælg farve" onclick="openColorPicker(this.form.farve1);">
eller
<a href="java script:openColorPicker(document.form1.farve1);">Vælg farve</a>
selvom jeg nok vil undgå brugen af links til den slags (et link bør bruges til det som det er, nemlig et link, som henviser til en anden side) - så hellere en span med den rette style:
<span onclick="openColorPicker(document.form1.farve1);">Vælg farve</span>
</form>
Avatar billede haolan Nybegynder
27. november 2005 - 21:54 #3
Øhm.. det virker ikke.. den skriver siden kan ikke vises hvis jeg klikker på en farve
Avatar billede skovenborg Nybegynder
27. november 2005 - 21:58 #4
Har du da valgt den rigtige url?

Jeg regner da med du får åbnet et popupvindue, hvori der så står at siden ikke kan vises. Hvis dette er tilfældet skal du lige checke url'en i window.open:
window.open("farveskema.php","new_win","width=400,height=300");

Der hvor der står farveskema.php skal du indsætte filnavnet til den php-fil hvori dit farveskema-script ligger (det du skrev helt fra starten ;-). Du skal så også lige huske at lave de ændringer jeg skrev om i dit farveskema-script ;-)
Avatar billede haolan Nybegynder
27. november 2005 - 22:01 #5
Jaja den åbner farveskemaet, men når jeg trykker på en farve skriver den siden kan ikke vises..

Det der står er jo:
<a href='&color=".$r['farve']."'
og det er ikke en gyldig fil.. Men hvad skal der så stå der?
Avatar billede haolan Nybegynder
27. november 2005 - 22:03 #6
ahh den virker godt nok.. Den skal bare lukke popuppen igen når man har valgt farve.. Kan man ikke det?
Avatar billede skovenborg Nybegynder
27. november 2005 - 22:12 #7
Nåja, det er selvfølgelig ulempen ved at bruge links til den slags :-S Du kunne evt. bare fjerne linket helt (du bruger jo alligevel ikke linket til noget ;-) og så sætte onclick-eventen på selve tabelcellen:
echo "<td width='10' style='width:10px;height:10px;background-color:#$bgcolor;color:".$r['farve'].";' onclick=\"opener.chooseColor('".$r['farve']."');self.close();\"></td>\n";

Læg mærke til self.close() lukker popupvinduet. Bemærk også jeg fjernede de to mellemrum (&nbsp;), og istedet udstyrede cellen med en højde (height). Denne kan du altid ændre på for at få den ønskede højde, eller du kan lægge dem igen ;-)
Avatar billede haolan Nybegynder
27. november 2005 - 23:23 #8
Najs.. Men når du laver det der onclick istedet for link.. Kan man så ikke lave hånd som markør ligesom der er ved links..?
Avatar billede skovenborg Nybegynder
27. november 2005 - 23:28 #9
jo, det kan du godt:
echo "<td width='10' style='width:10px;height:10px;background-color:#$bgcolor;color:".$r['farve'].";cursor:pointer;cursor:hand' onclick=\"opener.chooseColor('".$r['farve']."');self.close();\"></td>\n";

Da IE (tidligere i hvert fald) brugte hand istedet for pointer (som er den officielle værdi for "hånden" - den kan jo variere mellem forskellige systemmer) bliver man nødt til to gange at definere cursor.
Avatar billede haolan Nybegynder
27. november 2005 - 23:36 #10
Nice.. tak for hjælpen.. læg svar for points
Avatar billede skovenborg Nybegynder
27. november 2005 - 23:40 #11
det var så lidt - og værsgo' :-)
Avatar billede skovenborg Nybegynder
27. november 2005 - 23:43 #12
og tak for points :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester