Javascript Color picker

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
QuickSnail
Forum Commoner
Posts: 46
Joined: Fri Dec 21, 2007 11:13 am

Javascript Color picker

Post by QuickSnail »

-Edited-
Last edited by QuickSnail on Thu Oct 22, 2009 1:12 pm, edited 1 time in total.
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Post by Zoxive »

There is no `setColor` Function.

Code: Select all

function setcolor(Color){
    alert(Color + ' wants to be set to something!');
}
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

QuickSnail
Forum Commoner
Posts: 46
Joined: Fri Dec 21, 2007 11:13 am

Post by QuickSnail »

Kieran Huggins wrote:http://acko.net/dev/farbtastic

Wow that is a really nice color picker...



Ok well thanks for the help guys.


I am planning on making some generators for myspace layouts and junk..

So I'm probably going to need your help with the php.
QuickSnail
Forum Commoner
Posts: 46
Joined: Fri Dec 21, 2007 11:13 am

Post by QuickSnail »

Ok thats cool.

I have that working now.

Now what i need is a code to take the innertext of the colorwell and put it into the places i want in a text area.


Sorry about the double post. but i wanted to bump this topic as well.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Hehe I've made myspace help sites before. The generators can be challenging ;)

To put the color into a text area, you'll need to perhaps add a parameter to the setColor function

Code: Select all

function setColor(color, element)
{
    //set the color
    document.getElementById(element).value = color;
}
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
QuickSnail
Forum Commoner
Posts: 46
Joined: Fri Dec 21, 2007 11:13 am

Post by QuickSnail »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Thats cool and all.. But since you say you have made myspace things.

Then you also know it helps to put them in a textarea tag.

For some reason the script isn't running on the textarea is there a way to tell it to run and then generate what i want.. 


What I'm making is a falling object generator. Yes i know i can go online almost anywhere and find one.

But you can't learn how it works unless you build it, so thats what I'm trying to do.


[syntax="html"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 

<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript" src="farbtastic.js"></script>
 
<link rel="stylesheet" href="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;
   }
 
</style>
 
 
	<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    

$('#demo').hide();
    var f = $.farbtastic('#picker');
    var p = $('#picker').css('opacity', 

0.25);
    var selected;
    $('.colorwell')
      .each(function () { f.linkTo(this); 

$(this).css('opacity', 0.75); })
      .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');
      });
  });
 
	</script>

</head>

 <body>

 <p>Please select the color number. Then use the item to your right to change it.</p>
	 <form action="" style="width: 500px;">
  <div id="picker" style="float: right;">
	 </div>
  
<div class="form-item">
<label for="color1">Color 1:</label>
<input type="text" id="color" name="color1" class="colorwell" value="#123456" />
</div>
  
 
</form>

<Textarea cols="40" rows="10" onfocus="this.select();">
<script type="text/javascript">

<Textarea cols="30" rows="4">
function setColor(color, element)
{
    //set the color
    document.getElementById(element).value = color;
}
</Textarea>
</Form>
</script>


</body>

</html>

Thats what i have so far.


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

for the falling objects you generally just generate a list of pixel widths from the left of the page and position (directional down) marquees that amount from the left of the page. each marquee gets it's own position from the left.

marquee direction="down" style="position: absolute; top: 100px; left: 75px;"
marquee direction="down" style="position: absolute; top: 100px; left: 100px;"
marquee direction="down" style="position: absolute; top: 100px; left: 125px;"

etc...

choosing the color of the text would be as simple as passing the color from the color picker to a text field. have a php script generate the code inside the textarea after the settings are POSTed.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
QuickSnail
Forum Commoner
Posts: 46
Joined: Fri Dec 21, 2007 11:13 am

Post by QuickSnail »

I know this. That was the easy part.

I'm making the generator remember..
Post Reply