Page 1 of 1

Javascript Color picker

Posted: Fri Dec 21, 2007 11:18 am
by QuickSnail
-Edited-

Posted: Fri Dec 21, 2007 12:06 pm
by Zoxive
There is no `setColor` Function.

Code: Select all

function setcolor(Color){
    alert(Color + ' wants to be set to something!');
}

Posted: Fri Dec 21, 2007 12:09 pm
by Kieran Huggins

Posted: Fri Dec 21, 2007 12:34 pm
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.

Posted: Fri Dec 21, 2007 2:33 pm
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.

Posted: Fri Dec 21, 2007 2:49 pm
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;
}

Posted: Fri Dec 21, 2007 4:32 pm
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]

Posted: Fri Dec 21, 2007 4:37 pm
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.

Posted: Fri Dec 21, 2007 5:03 pm
by QuickSnail
I know this. That was the easy part.

I'm making the generator remember..