PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Wed Jul 08, 2020 12:08 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 1 post ] 
Author Message
 Post subject: Colour picker pop-up
PostPosted: Thu Aug 11, 2005 4:08 am 
Offline
Forum Newbie

Joined: Fri Jun 10, 2005 2:41 am
Posts: 18
I was looking for a snippet that allowed me to pop-up a colour chart, select a colour and then send it back to the original form as a hex number. Couldn't find one, so wrote one. Here it is:

There are two parts. First is the form that pops up the colour chart and receives the selected colour:

Syntax: [ Download ] [ Hide ]
<html>

<head>

<title>Colour Form</title>

<!--

  Author:     David Tee

  Copyright:  TenForward Ltd

  Web Site:   http://www.tenforward.biz

  Email:      david@tenforward.biz

  Comments:   Simple tool for selecting colours and inserting the results into form input fields

                                                  Part 1: the form where the colour is needed

-->

<script>



function popCal(returnbox){

//first detect the mouse position

        var posx = 0;

        var posy = 0;

        if (!e)

          var e = window.event;

        if (e.pageX || e.pageY) {

                posx = e.pageX;

                posy = e.pageY;

        }

        else if (e.clientX || e.clientY) {

                posx = e.clientX + document.body.scrollLeft + 10;

                posy = e.clientY + document.body.scrollTop + 70;

        }



//now open the colour picker window near the mouse position

        var cal = window.open("colchart.php?returnbox="+returnbox,"colchart","width=460,height=70,left="+posx+",screenx="+posx+",top="+posy+",screeny="+posy);

        cal.focus();

}

</script>

</head>



<body>

<h3>Pick a colour</h3>

<form name="MyForm">

  <input type="text" name="colour1">

        <button type="button" title="Click here to view colours" onclick="javascript:popCal('colour1')">--></button>

  <br>

  <input type="text" name="colour2">

        <button type="button" title="Click here to view colours" onclick="javascript:popCal('colour2')">--></button>

</form>



</body>

</html>


Second is the colour chart that is popped-up (called colchart.php):

Syntax: [ Download ] [ Hide ]
<html>

<head>

<title>Colour Chart</title>

<!--

  Author:     David Tee

  Copyright:  TenForward Ltd

  Web Site:   http://www.tenforward.biz

  Email:      david@tenforward.biz

  Comments:   Simple tool for selecting colours and inserting the results into form input fields

                                                  Part 2: the colour selection chart

-->

<script>



// return to the page that opened this and set the colour value to the input box on the form

function updateParent(chosencolour){

        opener.document.MyForm.<?=$_GET['returnbox']?>.value = chosencolour;

        opener.document.MyForm.<?=$_GET['returnbox']?>.focus();

        window.close();

}



// check that enter was pressed and return to the opening page

function checkEnter(chosencolour) {

        var code;

  var e = window.event;

        if(e.keyCode)

          code = e.keyCode;

        else if(e.which)

            code = e.which;

  if(code==13)

          updateParent(chosencolour);

}



function showColour(col) {

  colval.value = col;    //display the hex value of the colour

        showcol.bgColor = col; //set the background colour of the row to the colour

}



</script>

</head>

<body topmargin="1" leftmargin="1">

<table align="center" bgcolor="" border="1" cellpadding="0" cellspacing="0" width="100%">



<?php

$cw=10; # width of the colour box

$ch=12; # height of the colour box



for($g=255;$g>=0;$g-=51) {

  echo "  <tr>\n";

  for($r=255;$r>=0;$r-=51) {

    for($b=255;$b>=0;$b-=51) {

                  $cl = "#".substr("000000".dechex(($r<<16)+($g<<8)+$b),-6); # create the hex string of the colour with preceeding zeros

      $rw  = "    <td height=\"$ch\" width=\"$cw\" ";

                        $rw .= "title=\"$cl\" ";

                        $rw .= "bgcolor=\"$cl\" ";

                        $rw .= "onclick=\"updateParent('$cl')\" ";

                        $rw .= "onmouseover=\"showColour('$cl')\" ";

                        $rw .= ">\n";

      $rw .= "    </td>\n";

                        echo $rw;

    }

        }

        echo "  </tr>\n";

}

?>



  <tr id="showcol" bgcolor="#ffffff">

    <td colspan="36">

      <input type="text" name="colval" value="" size="7" onkeypress="checkEnter(this.value)">

    </td>

  </tr>

</table>

</body>

</html>


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group