Avatar billede netroam Nybegynder
08. marts 2007 - 10:50 Der er 7 kommentarer og
2 løsninger

Vis farvekode fra script i input felt

Hej alle!

Jeg har kigget lidt på nedenstående script og valgt at bruge det i et lille projekt, jeg har gang i.

http://www.dynamicdrive.com/dynamicindex11/colorjack/index.htm

Scriptet giver mig mulighed for at vælge baggrundsfarve til nogle tabel-celler i forbindelse med det projekt. MEN jeg vil gerne have farvekoden, der bliver valgt (f.eks. #f0f0f0) ind i et input felt, så jeg nemt og hurtigt kan sende det videre i en formular, når jeg gerne vil have det hele lagt i en database, men jeg kan ikke rigtig få den kode ud i et input text felt.

Er der nogen, der ud fra ovenstående script kan lave en lille tilføjelse, der på linje med farvekoden øverst i farvepaletten kan opdatere et input text felt på samme måde? Altså at den opdaterer real time, når jeg vælger farve?

På forhånd tak.
Avatar billede cpufan Juniormester
08. marts 2007 - 11:47 #1
har du denne:

function mkColor(v){
//** In this case, just update DIV with ID="colorbox" so its background color reflects the chosen color
$S('colorbox').background='#'+v;
}

på din side?
Avatar billede cpufan Juniormester
08. marts 2007 - 11:50 #2
så sæt denne i din form:

<input type="text" id="colorch">

og

function mkColor(v){
//** In this case, just update DIV with ID="colorbox" so its background color reflects the chosen color
//$S('colorbox').background='#'+v;
$S('colorch').value='#'+v;
}
Avatar billede netroam Nybegynder
08. marts 2007 - 12:00 #3
Det ser ikke ud til at fungere på den måde desværre! Skriver ihvertfald ikke noget i text-feltet
Avatar billede cpufan Juniormester
08. marts 2007 - 12:11 #4
så bruger du ikke scriptet rigtigt.
Avatar billede netroam Nybegynder
08. marts 2007 - 12:23 #5
Jeg har lavet det sådan her - og selve farvevalget virker fint nok, men den gider ikke sætte value i det tekst-felt, jeg har lavet længere nede. LiveDisplay skal du ikke tage dig af - det er et andet script jeg har kørende andetsteds fra.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>

<link href="colorjack.css" rel="stylesheet" type="text/css" />

  <title></title>

  <script src="js/colorjack.js" type="text/JavaScript"></script>

</head>

<body>

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="sms_title">
  <tr>
    <td align="center"><div id="plugin" style="TOP: 0px; LEFT: 0px; Z-INDEX: 20;">
      <div id="plugHEX" onmousedown="stop=0; setTimeout('stop=1',100);">FFFFFF</div><div id="plugCLOSE" onmousedown="toggle('plugin')">X</div><br>
        <div id="SV" onmousedown="HSVslide('SVslide','plugin',event)" title="Saturation + Value">
          <div id="SVslide" style="TOP: -4px; LEFT: -4px;"><br /></div>
        </div>
        <div id="H" onmousedown="HSVslide('Hslide','plugin',event)" title="Hue">
          <div id="Hslide" style="TOP: -7px; LEFT: -8px;"><br /></div>
          <div id="Hmodel"></div>
        </div>
      </div>

      <br>
      <!--Sample DIV to show selected color -->

      <table height="16" cellspacing="0" cellpadding="0" border="0" id="colorbox" style="width: 200px; border: 1px solid #77ADD9; background-color: #ffffff" class="calendartext">
        <tr>
          <td width="160" valign="top">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
              <tr>
                <td align="center" width="14" height="12" valign="top"><img src="images/transparent.gif" width="1" height="2" alt=""><br><img src="images/transparent.gif" alt="" border="0" id="ikon"></td>
                <td class="calendartext" style="padding-left: 5px; padding-right: 5px;" valign="top"><b><div id="LiveDisplay" align="left"></div></b></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>

      <input type="text" id="colorch">

      <script type="text/javascript">
      //*** CUSTOMIZE mkcolor() function below to perform the desired action when the color picker is being dragged/ used
      //*** Parameter "v" contains the latest color being selected
      function mkColor(v){
      //** In this case, just update DIV with ID="colorbox" so its background color reflects the chosen color
      $S('colorbox').background='#'+v;
      $S('colorch').value='#'+v;
      }

      loadSV(); updateH('FFFFFF');
      </script>
    </td>
  </tr>
</table>

</body>
</html>
Avatar billede cpufan Juniormester
08. marts 2007 - 13:04 #6
script src="js/colorjack.js"

det er denne, der er den aktive tror jeg.
Avatar billede netroam Nybegynder
08. marts 2007 - 13:08 #7
Ja, den ligger det rette sted, men hvad skal der ændres i den js-fil for at det virker? Er ikke selv nogen JavaScript-haj, så aner ikke hvad der lige skal ske.
Avatar billede netroam Nybegynder
08. marts 2007 - 13:11 #8
Never mind ... got it! Jeg erstattede følgende:

$S('colorch').value='#'+v;

med:

$('colorch').value='#'+v;

Ifølge js.filen, hvor funktionerne ser således ud:

function $(v) { return(document.getElementById(v)); }
function $S(v) { return($(v).style); }

Så nu virker det helt som det skal. Skal vi dele pointsene??
Avatar billede netroam Nybegynder
09. marts 2007 - 09:58 #9
Pointsene er delt lige over. Du ledte mig på det rette spor, og så fandt jeg ud af resten. Tak for hjælpen igen!
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