Response title
This is preview!
- Screen name: dbdavis
dbdavis's Profile
4 Posts
1 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- After my prior post on this issue, I have completed what I regard as the 'best' solution for page design using the farbtastic color picker, and expect that this is my last post on the subject. Although the prior solution was simple, it had the defect that, although invisible, the color picker was still there, and if the mouse inadvertently crossed the picker, the color in the last colorwell would be disturbed. Also, while over the picker, the cursor became a large +.
In this new solution, these problems are fixed, but it requires a change to the farbtastic.js file. The html solution posted here is based upon the farbtastic Demo2.html, and allows multiple colorwells to be used with one picker.
Change to the Farbtastic.js file
This change allows altering the farbtastic container after it is connected to the picker. That is, after the client executes: $.farbtastic('#picker'); or some such. It is done simply to give it a name.
In that file, somewhere around line 35, you will see: $(container).html('<div id="fbc" class="farbtastic">....
Change that line to read: $(container).html('<div id="fbc" class="farbtastic"> ...
The inserted material is shown in boldface and underline.
The JQuery source
The source below allows:
- multiple color destinations (colorwells),
- the picker to appear superimposed upon anywhere you put it after clicking upon the colorwell,
- the picker to disappear after the cursor moves off the picker,
- firing of the color change when the picker disappears.
<!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-dbd.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;
}
.dishide { display: none }
.disshow { display: inherit }
</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;
$('#fbc').addClass('dishide');
$('.colorwell')
//.each(function () { f.linkTo(this); $(this).css('opacity', 0.5); })
.focus(function() {
if (selected) {
$(selected).removeClass('colorwell-selected');
}
f.linkTo(this);
$('#fbc').removeClass('dishide');
$('#fbc').addClass('disshow');
p.css('opacity', 1);
$(selected = this).css('opacity', 1).addClass('colorwell-selected');
});
$('#picker').hover(function(){p.css(opacity(1.0))
p.removeClass('dishide');
p.addClass('disshow');
} // cursor over picker
, function(){
var kolor = $(selected).attr('value');
// distribute value of kolor to all
//destinations which require i.t
p.css('opacity',0.0)
$('#fbc').removeClass('disshow');
$('#fbc').addClass('dishide');
} // cursor leaves picker
);
});
</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>- 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>- I am just started trying to use Galleria, but failing to get started. It keeps complaining about the .js: In order to develop this, I started with the getting started and wrote the page below. After it failed, I took one of the demos, copied its page source, saved the page source, then tried to load from the saved page source after adjusting the location of the js for Galleria. Result: similar messages. Then I resumed using mt first-developed page source and improved it from the demo.
From the Firefox Error Console:
-----------------------------------------------
Warning: Unexpected token in attribute selector: '!'.
Source File: file:///C:/slideTest/ketut slideshow based upon Galleria.html
Line: 0
-----------------------------------------------
Error: Fatal error: Theme at C:/slideTest/aino-galleria-fc65989/src/themes/fullscreen/galleria-fullscreen.js could not load, check theme path.
Source File: file:///C:/slideTest/aino-galleria-fc65989/src/galleria.js
Line: 3475
-----------------------------------------------
Error: Fatal error: No theme found.
Source File: file:///C:/slideTest/aino-galleria-fc65989/src/galleria.js
Line: 3475
And the script (I've omitted many of the img entries and replaced them with one ..., since they are repetitious.);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<title>Ketut Slideshow based upon Galleria</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript" src="aino-galleria-fc65989/src/galleria.js"></script>
<script type="text/javascript" src="aino-galleria-fc65989/src/themes/fullscreen/galleria-fullscreen.js"></script>
</head>
<body>
<!--
<div id="gallery">
<img src="/img/pic1.jpg" alt="My description" title="My title">
<img src="/img/pic2.jpg" alt="Another text" title="Another title">
</div>
-->
<div id="gallery">
<img src="images/colinandeleanor.jpg" alt=" DSCN0129" title="DSCN0129"/> />" />
<img src="images/DSCN0129.jpg" alt="DSCN0129" title="DSCN0129" />
<img src="images/DSCN0809.jpg" alt="DSCN0809" title="DSCN0809" />
...
<img src="images/IMG_0858.jpg" alt="IMG_0858" title="IMG_0858" />
<img src="images/IMG_0870_2.jpg" alt="IMG_0870_2" title="IMG_0870_2" />
</div>
<script>
// Load theme
Galleria.loadTheme('C:/slideTest/aino-galleria-fc65989/src/themes/fullscreen/galleria-fullscreen.js');
$('#gallery').galleria();
</script>
</body>
</html>
What appears on the web page is mostly blank except for />" /> in the upper left.
I have downloaded and used the 1.2 Beta for Galleria, and am using firefox Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 (.NET CLR 3.5.30729) operating on Windows 7. The machine is a 64-bit machine, but usually that does not matter when running in 32-bit mode.
What is going on. Why can't a simple thing work? Why can't just saving the page source and rerunning it work?
Many thanks.- 15-Dec-2010 11:08 PM
- Forum: Using jQuery
I'm a newbie to JQuery. Not sure where to post this. I am using an innerfade slideshow. It is working, but seemingly cannot be centered. After I added captions, the caption text displays as centered under the image, but the image is offset to the left.I have tried adding center text and align="center" in various places:- on the div- on the img- at various points in the cssNothing seems to alter it. I've had a look at the jquery.innerfade.js, and at the jquery.js for fadeOut, but it's far too much to digest at a first go.The abstracted html of the show is:<div id=xxx...xx><ul><li><img src="slide-1" alt=.../>caption-1 text</li><li><img src="slide-2" alt=.../>caption-2 text</li>...</ul></div>And relevant portions of the css are:
li {
font: bold 14pt serif;
color: #FFFFFF;
}
.fade{
margin-bottom: 2em;
}
fade p{
margin-bottom: 2em;
text-align: center;
width: 100%;
background: #fff;
}ul#xxx..xx li img{
border: 2px solid #ccc;
padding: 4px;
}
ul {
margin-bottom: 2em;
}Its driving me crazy -- there MUST be something simple, but what?Thanks very much.- «Prev
- Next »
Moderate user : dbdavis
© 2013 jQuery Foundation
Sponsored by and others.
