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
|
Hatell1974
Založený: 23.04.2022
Príspevky: 219
Zaslal: 2024-03-01 11:40
Návrat hore
Odpovedať s citátom
|
A color picker is a valuable tool in digital design and creative projects, allowing users to precisely select and match colors from an extensive spectrum. This tool simplifies the process of choosing hues, ensuring visual harmony in designs, websites, or artworks. Moreover, for businesses in the food sector, such as bakeries, the color picker becomes a particularly essential instrument, enabling the selection of natural colors that evoke a sense of freshness and authenticity, aligning perfectly with themes like
Natural Colors for bakery
. From graphic designers aiming for a cohesive brand palette to web developers fine-tuning the aesthetics of a website, the color picker facilitates precision and consistency. In various industries, it plays a pivotal role, in helping users create visually appealing and professional-looking content.
|
|
Odoslať novú tému
Odpovedať na tému
|
|
Prihlásiť
Registrácia
English
