JQuery :: Taming The Farbtastic Color-picker Space - Clicking The Trigger Makes The Page Text Fade

Dec 28, 2010

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.

View 1 Replies


ADVERTISEMENT

JQuery :: Trigger Fade Out Function When Clicking Alert Message

Jul 15, 2010

I am currently doing a fadein and fadeout function using jquery. When I click on a <a>, the page will fade in. There is an alert message (which is the javascript alert()) prompt out on the page once the page fade in. However, I want to fade out the page when I click the "OK" in the alert message.

I've tried but cannot success..

$('alert').click( function(){
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out

[Code]....

View 1 Replies View Related

JQuery :: Cycle Plugin Makes Clicking Sound When Changes Slides Only On IE?

Oct 17, 2011

I am using the Cycle Plugin on my website, [URL]. For some reason, and only on IE, when the cycle action occurs there is a clicking sound, like the clicking sound when the user clicks on a page hyperlink. The sound happens before the cycle action starts and when it ends. why this is happening and how can I prevent it from making the clicking sound?

View 3 Replies View Related

Color Picker Cookies - Script To Select A Color For The Css Theme

Mar 11, 2011

I have created a javascript script to select a color for the css theme. I have it working great for picking, but the problem is when I refesh it goes back to the default. why my cookies are not saving?

from html page

View 2 Replies View Related

Passing A Color Value From Color Picker To A PHP Form Variable?

Feb 12, 2009

I have a script which uses a colorpicker in which the user can select a color, and in the preview section the color of one div is changed to this color value. This is done by a javascript function of the color picker. called setcolor. The code for this function is given below:

function setColor(color) {
var inp = document.getElementById("pageSurround");
inp.style.backgroundColor = color;
}

Now I want that the value 'color'(used above to set bg color for the element 'pageSurround') is passed to a form variable named 'in_backgroundColor'(the color picker is being invoked in a PHP Script) so that this value can be stored in the database. How should this be coded.

View 3 Replies View Related

CSS And A Conditional Statement - Trigger The Fade-in/fade-out Functions Of The Span Class Is NOT Set To Active?

Jun 20, 2011

I found this script for a navigation fade-in/fade-out and I want to modify it so it'll only trigger the fade-in/fade-out functions of the span class is NOT set to active. Here is the javascript:

Code:
$(function() {
$("#nav ul#menu li span.active").css("opacity","1");
$("#nav ul#menu li span.active").hover("opacity","1");[code].....

It's the part of the code beneath the comment CONDITIONALS BELOW that I want to be able to only trigger it if span is not set to class .active.

View 1 Replies View Related

Make A Page Fade Out, Then Fade In, With Different Text?

Jul 18, 2010

I'm learning javascript, and was wondering if it was Possible to have buttons/links that you click, the whole page fades out, and then fade's in, with different stuff. here are my ideas for just changing the stuff

Text: 1. having a javascript src file to start, and then when the button is clicked, that is formatted to white, the text layer is moved down, and a new javascript file is loaded?

View 3 Replies View Related

Script That Makes A Link A Different Color On Click?

Feb 20, 2011

I have a script that makes a link a different color on click, i would like to add a hover color to the links that are NOT active. Script below.

function activate(el) { var links=document.getElementsByTagName("a"); for(i=0;i<links.length;i++) { if(links[i].className=="toggle") { links[i].style.color="#999"; } } el.style.color="#DF8700"; }

[code].....

View 3 Replies View Related

A Better Color Picker?

Jun 13, 2004

I have made a javascript color picker that is different than one that I have seen before. I like it better (thats why I made it), it has a photoshop feel to it. The color picker is pretty easy to add to any page, but may not be for beginners. I have it posted on my blog where I try to post useful code snuppets and classes. I put it there because it does use external files and can not be demonstrated in this post. Attached is an image of the color picker.

View 3 Replies View Related

Color Picker

Jun 6, 2005

I'm making my own color picker which unfortunately isnt working to well in IE. It works fine in Firefox and Opera. However with IE none of the Colors get displayed they show up empty, im not sure on why Ive tried making sure there padding, a margin width set etc none of which even worked....

View 1 Replies View Related

Start With Color Picker Using A Layered Div?

Feb 27, 2010

how to start with color picker using a layered div? i would like to have idea about that..

View 1 Replies View Related

Cross Browser Color Picker?

Jul 24, 2009

My editor uses following script for selecting font color and background colours which is working fine in IE but dosn't work in firefox:

[Code]...

View 1 Replies View Related

JQuery :: Trigger A Event In Parent On Clicking Child?

Aug 18, 2011

I need to click on a child element and trigger an function in the parent, but know when i enable it both child and parent are getting executed.As you see in the attachment photo when I click the flip page icon the T-shirt should hide and create a description on T-shirt.

View 3 Replies View Related

Clicking In List Box White Space?

Jan 19, 2010

Right now when someone clicks on my listbox I immediately do an update on the form to populate the selected item.

Is there a way to detect if a user has clicked on some white area of a list box? If my list is sized 8 items but the list only has 4 items, if the user clicks near the bottom of the list where there is no item to select, can I detect that? Currently I get the form updating even if I click on the white area of the list and I'd like the form to update only if I actually click on an item in the list.

View 1 Replies View Related

Fade Images Slideshow Display Blank Space In IE

Jul 19, 2011

We're using a fade image slideshow from : [URL]. On our webpage: [URL]. It works perfectly in Firefox, Chrome and Safari. However in I.E. ( were using v.9) it shows no images at all, just a blank space. The code is exactly the same as the page on javascriptkit yet his images fade as they should ours do not show at all.

View 2 Replies View Related

JQuery :: Fade A Css Property Like Background Color?

Apr 23, 2010

I have a button where on hover, the background-color changes. Is it possible to fade or tween between the over and out color? I've never used jquery before so a link to an example

View 1 Replies View Related

Code To Just Underline Linked Text To A Certain Color (red) But Doesn't Change The Text Color?

Mar 26, 2009

Is there code to just underline linked text to a certain color (red) but doesn't change the text color (it was white & when hovered over, it still stays white with a red underline)?

View 4 Replies View Related

JQuery :: AddClass - Change The Color Of Surrounding Text Of The Disabled Radio Button To The Color Grey

Feb 8, 2010

I have this markup:

[Code]...

There are two radio buttons, sometimes one will be disabled, other times the other will be disabled. I would like to make a script that: First: Changes the color of surrounding text of the disabled radio button to the color grey. Second: Checks the other radio button.

This was my plan: I would make a script that: First: Removes all the current classes and add the class "greyed_out" (or better: change only the color of) the parent element, all siblings and children of siblings (if any) of the radio button that is disabled at that time.Second: Sets the attribute "checked to the other radio button". I made a script, but when I set the bottom radio button to disabled the script doesn't work:

[Code]...

View 4 Replies View Related

OnClick Makes Text Appear

Jul 20, 2005

I try to create the following:

2 buttons next to each other, on a webpage
button 1 makes (onClick) text 1 appear just beneath the button
button 2 makes (onClick) text 2 appear just beneath the button

in each of the texts at the end there's a third button to make the text
dissappear again

IS THIS POSSIBLE? HOW?

View 4 Replies View Related

Checkbox Makes A Text Field Required?

Mar 24, 2011

I have a checkbox named "sales" that I want to make a input field required only if it is checked. The input field name is "telephone".

View 7 Replies View Related

Fade To Color

Mar 29, 2006

on links i want it so when you hover it takes 6 seconds to fade over to white, is that possible?

View 10 Replies View Related

Script To Display Text And And Image With Fade In Fade Out?

Jun 30, 2011

I am php developer,[URL]... a fade in fade out effect (image + text) which is working very nice but Can i do this like with text on top(not on an image)and image below it like header : text below that an image

example
<table>
<tr><td> header for image</td></tr>
<tr><td> image here</td></tr>
</table>

Can you pls suggest any other script to display an html page or pages like this just the way i had defined above in fade in fade out ....

View 1 Replies View Related

Change Text Color For One Document.write But Not Color Of All Text?

Jul 23, 2005

I want to make the date at the top right darker blue. But when I do that, all the light blue text next to the pictures also changes.

How can I control the color of the result of document.write output without changing the forground color of the entire page? Note my document write includes variables, so I was hesitant to imbed an html command in the document.write.

View 7 Replies View Related

Change <div> Text Color & Font Without Refreshing Page?

Aug 16, 2009

I need to change the font color, font size & font face of some text assigned in a div. To do so I have a form select option menu at the top, adn below the menu three's 3/4 divs with some text. I need to change text properties of the div from select menu, and the page must not refresh. Its actually a little version of text editor.

View 5 Replies View Related

Randomly Changing Color Of Specified Text On Page Reload

Jul 9, 2009

I am currently successfully using the following code to randomly change the color of specified text ("quotations" - see below) each time the page is reloaded. The only problem is that the colors are too random. Instead of the code I now have, I'm looking for code that would allow me to define a distinct list of colors through which the text would randomly rotate each time the page loads. In other words, I want to choose each of the randomly loaded colors of my text.

<html><head>
<script type="text/javascript">
var quotations = new Array()
quotations[1]= "text1"
quotations[2]= "text2"
quotations[3]= "text3"
quotations[4]= "text4"
quotations[5]= "text5"
function display(){
a=Math.floor(Math.random()*quotations.length)
document.getElementById('quotation').innerHTML=quotations[a]
setTimeout("display()",500000) .....
}
</script>

<script language="Javascript">
function rancolour(){
var red = Math.floor(Math.random() * 255);
var green = Math.floor(Math.random() * 255);
var blue = Math.floor(Math.random() * 255);
document.all.main.style.color = 'rgb('+red+','+green+','+blue+')';
}
</script>
<link rel="stylesheet" type="text/css" href="/style.css">
</head><body>
<body onLoad="rancolour();">
<div id="main" style="color:#FF0062">
<div id="quotation"><SCRIPT type="text/javascript">display()</SCRIPT></div>
<form onchange="display(this.value)">
<input type="submit" id="style3" value="M O R E" />
</form></div></div></body></html>

View 5 Replies View Related

Change The Color Of A Cel By Clicking On It And Select The Value?

Mar 25, 2011

How can I click on a cel and get the value of that cel and at the same time change the color?Like this:

<td width="40" align="center" bgcolor="#008080">info06
<input type="button" onclick="bgColor='blue';" value="Select" />
</td>

[code]....

View 1 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved