Search jQuery

jQuery Forum

Taming the farbtastic color-picker space problem

in Using jQuery • 12 years ago

The Farbtastic color picker is an elegant solution to the color-picking problem, but its usefulness is prohibitive in those situations where there is not enough screen real-estate. Because it is large, these are many. Since I want to use it in such a situation, I started working towards a solution.

The designed solution involved in clicking on something small, such as Click to Activate, and having the rest of the page become faded-out, while the color-picker appears superimposed over other parts of the page.

That solution is implemented up to a point. In the code posted:

* the trigger appears as part of the original DOM.,
* clicking the trigger makes the page text fade, the color-picker appear, and the trigger changes to something like Click to Deactivate,
* upon clicking, it does disappear, and the page text resumes it original appearance..

After this point, one might work towards making it more modular and more easily usable as is farbtastic itself.

It requires a var to hold state, and other things. Ideally, it could be combined with the original to offer a wider range of usage patterns. I have no doubt that the code can vastly be improved, since I am relatively new to jquery, although not to computing.

The code is posted below, in the hope that it proves useful to others, The only change made to the farbtastic.js code itself is to add "id='fbc' " to the outermost <div which is added internally. This change is not shown because it would involve posting all of farbtastic.js for this one change. The section of text used to illustrate presumed page content is from the NSIS Users Manual, and has no significance beyond being some text. The div named 'overlay' was employed to allow shifting the whole thing around as a unit relative to the trigger but might be eliminated were that not needed, since everything else works without it, Note also that the input#color from the original farbtastic has been replaced by 'repeater' which is a <div, but seems to work ok to get the color info.

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

<head>
<title>Farbtastic: jQuery color picker plug-in | Steven Wittens - Acko.net
Adapted by Daniel B. Davis</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/farbtastic-dbd.js"></script>
<link rel='stylesheet' href="css/farbtastic.css"/>
<script type="text/javascript">
var state = 0; // 0 = uncreated or hidden, 1 = visible
$(document).ready(function() {
$('#clickit').click(function(){
// has it been created? Yes, toggle, or
if ($('#fbc').length) {
//alert("yes, created");
if (state == 1) {
state = 1 - state;
//alert('its visible');
// has been clicked to Activate
$('#clickit').html("<u>Click to Activate</u>");
$('#main').fadeTo(1200, 1.0);
} else
if (state == 0) {
state = 1 - state;
//alert('its hide');
$('#clickit').html("<u>Click to Deactivate</u>");
$('#main').fadeTo(1200, 0.4);
} else {
//alert('its neither');
}
$('#fbc').toggleClass('dishide disshow');
$('#repeater').toggleClass('dishide disshow');
} else {
// has been clicked to Activate (create)
state = 1 - state;
//alert('no, create now');
$('#clickit').html("<u>Click to Deactivate</u>");
$('#main').fadeTo(2000, 0.4);
// call to create the colorpicker initially
$('#colorpicker').farbtastic(function(color){
$('#repeater').html(color)});
$('#fbc').addClass('disshow');
$('#repeater').toggleClass('dishide disshow');
}
});
});
</script>
<style type="text/css">
.showit { display: block }
.shownone { display: none }
</style>
<style type="text/css">
#overlay { display: block; z-index: 3; position: relative;
top: -250px; left: 20px; right: auto; bottom: auto;
}
body { background-color: black; }
#repeater { z-index: 3; background-color: #FFFFFF; color: black;
position: relative; top: 15px; left: 60px; right: auto; bottom: auto;
width: 60px; height: 20px;
}
.tx { color: white; }
h1 { font: 24px normal; color: white; }
h3 { font: 14px normal; color: white; }

.vishide { visibility: hidden }
.visshow { visibility: visible }
.dishide { display: none }
.disshow { display: inherit }

</style>
</head>
<body>
<div id="main">
<h1>1.1 About NSIS</h1>
<p class='tx'>An installer is the first experience of a user with your application. Slow or unsuccessful software
installations are the most irritating computer problems. A quick and user friendly installer is therefore
an essential part of your software product.
NSIS (Nullsoft Scriptable Install System) is a tool that allows programmers to create such installers for
Windows. It is released under an open source license and is completely free for any use.
NSIS creates installers that are capable of installing, uninstalling, setting system settings, extracting
files, etc. Because it's based on script files, you can fully control every part of your installers. The script
language supports variables, functions, string manipulation, just like a normal programming language -
but designed for the creation of installers. Even with all these features, NSIS is still the smallest
</div>
<h3 id="clickit" class='showit'><u>Click to Activate</u></h3>
<div id="overlay">
<div id="colorpicker"></div>
<div id="repeater" class='dishide' ></div>
</div>
</body>
</html>

Replies(1)

dbdavis

Re: Taming the farbtastic color-picker space problem

12 years ago

Since that last post, I have continued refining the solution. I've would up with a reasonable thing which might drop into any application that needs it. Starting from the Farbtastic Demo2.html, which uses a single picker for multiple selections, a defect was, from my viewpoint, that the picker was showing all the time, brightening when used, but always nonetheless present.

In this version, offered below, the opacities have been altered, permitting:--

the picker to be invisible until one of the color destinations is clicked upon,
the picker to disappear after color selection is completed and the mouse moves away,
the picker to take no space in the layout because z-index is used (as in the earlier example).

Placement of the picker, in this version, is absolute, unlike the original demo2, where it is floated. As before, it is important that it both occupies no space, but sits on top while in use, and that it seamlessly disappears after use. In this demo version, I've used a textarea to represent other on-page material, but unlike the intended usage, this textual material uses a z-index lower than the picker, so the text will appear beneath the picker when it is visible.

the code is posted below. The only thing needed to make it work is to get a copy of the farbtastic plug-in, and to install it in a subdirectory to the one where this code was placed, named js, or to edit the script statement to point to where it has been put.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Farbtastic</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/farbtastic.js"></script>
<link rel="stylesheet" href="css/farbtastic.css" type="text/css" />
<style type="text/css" media="screen">
   .colorwell {
     border: 2px solid #fff;
     width: 6em;
     text-align: center;
     cursor: pointer;
   }
   body .colorwell-selected {
     border: 2px solid #000;
     font-weight: bold;
   }
   #picker {
          z-index: 5; position: absolute; top: 70px; left: 300px;
   }
   #textbox {
       z-index:1; position: absolute; top: 60px; left: 290px;
   }
</style>

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $('#demo').hide();
    var f = $.farbtastic('#picker');
    var p = $('#picker').css('opacity', 0.0);
    var selected;

      $('.colorwell')
      .each(function () { f.linkTo(this); $(this).css('opacity', 0.5); })
      .focus(function() {
        if (selected) {
          $(selected).css('opacity', 0.75).removeClass('colorwell-selected');
        }

        f.linkTo(this);
        p.css('opacity', 1);
        $(selected = this).css('opacity', 1).addClass('colorwell-selected');
      });
      $('#picker').hover(function(){p.css(opacity(1.0))}, function(){p.css('opacity',0.0)});
});
</script>
</head>
<body>
<h1>jQuery Color Picker: Farbtastic</h1>
<div id="demo" style="color: red; font-size: 1.4em">jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>

<form action="" style="width: 500px;">
<div id="outer">
<div id="picker"></div>

<div class="form-item"><label for="color1">Color 1:</label><input type="text" id="color1" name="color1" class="colorwell" value="#123456" /></div>

<div class="form-item"><label for="color2">Color 2:</label><input type="text" id="color2" name="color2" class="colorwell" value="#123456" /></div>
<div class="form-item"><label for="color3">Color 3:</label><input type="text" id="color3" name="color3" class="colorwell" value="#123456" /></div>
</div>
</form>

<p>More info available on the <a href="http://code.google.com/p/farbtastic/">Farbtastic Project</a> page.</p>
<p>Created by <a href="http://www.acko.net/">Steven Wittens</a>.</p>

<textarea id='textbox' rows="14" cols="39">
This command inserts a section group. The section group must be closed with SectionGroupEnd, and should contain 1 or more sections. If the section group name begins with a !, its name will be displayed with a bold font. If /e is present, the section group will be expanded by default. If index_output is specified, the parameter will be !defined with the section index (that can be used for SectionSetText etc). If the name is prefixed with 'un.' the section group is an uninstaller section group.
</textarea>

</body>
</html>

Top Reply

Response title

Attachments

jQuery Forum

Taming the farbtastic color-picker space problem

Replies(1)

Re: Taming the farbtastic color-picker space problem

Statistics

Tags

Actions