Project / Support Center
Welcome, Guest. Please login or register. November 29, 2021, 01:31: AM
Home Help Search Login Register
D-Web Web Site Creator D - Web Web Site Creator On-line HTML Editor No Programming knowledge required. Web Global Net PayPal-Cart Shopping Cart System PayPal - Kart Shopping Cart System for E-Commerce over the internet, that's easy to use. Web Global Net Newsletter Manager Newsletter Manager On-line Newsletter Creator with Email Subscriber Management.
Ring Central Discount
Web Global Net Web Application & Web Development Project Center  |  Technical Issues  |  Javascripting  |  Topic: Dragable AJAX Color Select Tool into field - javascripting yahoo 0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] Go Down Send this topic Print
Author Topic: Dragable AJAX Color Select Tool into field - javascripting yahoo  (Read 9137 times)
admin
Guest
« on: July 08, 2008, 12:22: PM »

Directions:

Simply download yuicolorpicker.zip, and open up "demo.htm" using any text editor for the code to insert onto your page.
Customization

While this script references multiple .js files, to integrate the color picker with your form in the fashion above, you do not need to be bothered with modifying any of these files. Instead, there are only two changes you need to make to the code of "demo.htm" to integrate the color picker into your page:

1) Locate the code:

ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"

These two lines are used to prefill the color boxes to the right of the form fields in question with the color currently inside the field when the page first loads. Without this code, when your page loads, the color boxes will not be initially filled with the color values inside the form fields.

There are two fields in the demo, hence two lines. The first parameter of fillcolorbox(), "colorfield1", should be the ID of the form field, while the second parameter, the ID of the matching color box. See below for more information.

2) Locate the code:

<form>
# <input type="text" id="colorfield1" onFocus="ddcolorposter.echocolor(this, 'colorbox1')"> <span id="colorbox1" class="colorbox">____</span>

# <input type="text" id="colorfield2" onFocus="ddcolorposter.echocolor(this, 'colorbox2')"> <span id="colorbox2" class="colorbox">____</span>
</form>

This code demonstrates how to integrate the color picker with any form field on your page.

The trick here is to add this after a fields ID - onFocus="ddcolorposter.echocolor(this, 'colorbox1')

for each field you want the color to be selected  name them sequentially i.e. colorbox1, colorbox2 etc.

This is the part of the code to identify the proper box :

ddcolorposter.fillcolorbox("fieldname", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"

This is how we set up one field:

<input type="text" name="page_border_color_<?php echo $cnt1; ?>" id="page_border_color_<?php echo $cnt1; ?>"  onFocus="ddcolorposter.echocolor(this, 'colorbox6')" value="<?php echo ($row_rstbl_ppcart_settings['page_border_color']); ?>" size="7" maxlength="6" /><span id="colorbox6" class="colorbox">____</span> New Selection

This :

<span id="colorbox6" class="colorbox">____</span> New Selection

Just shows you what color you've just selected

This we added to show the current color

<table width="25px" height="20px">
                            <tr>
                              <td bgcolor="#<?php echo $row_rstbl_ppcart_settings['page_border_color']; ?>"></td>
                            </tr>
                          </table>

* yuicolorpicker.zip (46.53 KB - downloaded 1219 times.)

* ajax_color_select.jpg (22.81 KB, 364x309 - viewed 2384 times.)
« Last Edit: July 08, 2008, 04:02: PM by Web Global Net » Report to moderator   Logged
Pages: [1] Go Up Send this topic Print 
Web Global Net Web Application & Web Development Project Center  |  Technical Issues  |  Javascripting  |  Topic: Dragable AJAX Color Select Tool into field - javascripting yahoo « previous next »
Jump to:  


Login with username, password and session length
Powered by MySQL Powered by PHP Powered by SMF 1.1.19 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!