| Index
» Projekty
» phpMyEdit
» Fórum
» Color picker |
 |
lupker
Založený: 17.04.2008
Príspevky: 5
Zaslal: 2008-04-17 17:02
Návrat hore
Odpovedať s citátom
|
Hi folks,
Anyone knows a way to integrate a color picker to several text fields in the mysql database using the phpmyedit?
The color picker needs to convert the selected color to a code like #ffffff, which will be placed into the field.
Help would be great!
Thanks,
Gr,
Mark
|
lupker
Založený: 17.04.2008
Príspevky: 5
Zaslal: 2008-04-20 00:23
Návrat hore
Odpovedať s citátom
|
Okay, for people who like to add a colorpicker to hex value to PME. This will be shown in a new popup window:
1. Here is the code for $opts, modify this as you like for each field which contains a color code (thanks to spudnukem):
| Kód: |
| $opts['fdd']['color']['help'] = 'Select Color : <a href=JavaScript:void(0); onclick=window.open("colorpicker.php?e=PME_data_color","SelectColor","height=330,width=560,left=100,top=100,resizable=no,scrollbars=no,toolbar=no,status=no")>click here</a>'; |
The javascript and images for the colorpicker (i've been using) can be find here:
http://blog.paranoidferret.com/index.php/2007/08/22/javascript-interactive-color-picker/
Just download the images and the javascript.js at the end of the page.
Now make a file called colorpicker.php and add the follow code below.
Have fun!
Gr,
Mark Lupker
Colorpicker.php:
| Kód: |
<?php
$formelement = $_GET['e'];
?>
<style>
body {
background-color:#ffffff;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
table, td, tr {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>
<!--
///////////////////////////////////////
Color Picker Code Starts Here
///////////////////////////////////////
-->
<script type="text/javascript" src="javascript.js"></script>
<div style="position:relative;height:306px;width:531px;border:1px solid black;">
<div id="gradientBox" style="cursor:crosshair;position:absolute;top:15px;left:15px;width:256px;height:256px;">
<img id="gradientImg" style="display:block;width:256px;height:256px;" src="images/color_picker_gradient.png" />
<img id="circle" style="position:absolute;height:11px;width:11px;" src="images/color_picker_circle.gif" />
</div>
<div id="hueBarDiv" style="position:absolute;left:310px;width:35px;height:256px;top:15px;">
<img style="position:absolute;height:256px;width:19px;left:8px;" src="images/color_picker_bar.png" />
<img id="arrows" style="position:absolute;height:9px;width:35px;left:0px;" src="images/color_picker_arrows.gif" />
<br />
</div>
<div style="position:absolute;left:370px;width:145px;height:256px;top:15px;">
<div style="position:absolute;border: 1px solid black;height:50px;width:145px;top:0px;left:0px;">
<div id="quickColor" style="position:absolute;height:50px;width:73px;top:0px;left:0px;"></div>
<div id="staticColor" style="position:absolute;height:50px;width:72px;top:0px;left:73px;"></div>
</div>
<br />
<table width="100%" style="position:absolute;top:55px;">
<tr>
<td>Hex: </td>
<td>
<input size="8" type="text" id="hexBox" onchange="hexBoxChanged();" />
</td>
</tr>
<tr>
<td>Red: </td>
<td>
<input size="8" type="text" id="redBox" onchange="redBoxChanged();" />
</td>
</tr>
<tr>
<td>Green: </td>
<td>
<input size="8" type="text" id="greenBox" onchange="greenBoxChanged();" />
</td>
</tr>
<tr>
<td>Blue: </td>
<td>
<input size="8" type="text" id="blueBox" onchange="blueBoxChanged();" />
</td>
</tr>
<tr>
<td>Hue: </td>
<td>
<input size="8" type="text" id="hueBox" onchange="hueBoxChanged();" />
</td>
</tr>
<tr>
<td>Saturation: </td>
<td>
<input size="8" type="text" id="saturationBox" onchange="saturationBoxChanged();" />
</td>
</tr>
<tr>
<td>Value: </td>
<td>
<input size="8" type="text" id="valueBox" onchange="valueBoxChanged();" />
</td>
</tr>
<tr>
<td></td>
<td align="right">
<a href="javascript:void();" onclick="window.opener.document.forms[0].<? echo $formelement; ?> .value=currentColor.HexString(); window.close();" ><img src="images/ok.jpg" border="0"></a>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
fixGradientImg();
var currentColor = Colors.ColorFromRGB(64,128,128);
new dragObject("arrows", "hueBarDiv", arrowsLowBounds, arrowsUpBounds, arrowsDown, arrowsMoved, endMovement);
new dragObject("circle", "gradientBox", circleLowBounds, circleUpBounds, circleDown, circleMoved, endMovement);
colorChanged('box');
</script>
<!--
///////////////////////////////////////
Color Picker Code Ends Here
///////////////////////////////////////
-->
|
|
andrew1
Založený: 15.04.2010
Príspevky: 3
Zaslal: 2010-05-17 01:32
Návrat hore
Odpovedať s citátom
|
Not sure if anyone still using this or if better way of adding color picker now but just thought I would add these couple of notes to save anyone some time with the above color picker which does work well. Please let me know if there is a better way now.
towards the bottom of the php file
| Kód: |
| href="javascript:void(0); " |
may need to have the speech marks removed - at least it did for me. I don't know javascript so maybe this works somewhere. Also the image file ok.jpg isn't provided here. Easy enough to make one though. Worth noting you need to put the image files under /images.
Initial values arn't set also
Naposledy upravil andrew1 dňa 2010-05-17 01:46, celkom upravené 1 krát
|
andrew1
Založený: 15.04.2010
Príspevky: 3
Zaslal: 2010-05-17 01:45
Návrat hore
Odpovedať s citátom
|
change
for
|
|
Odoslať novú tému
Odpovedať na tému
|
|
|
|
Prihlásiť
Registrácia
English
