[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

To make my Color Pallet (Picker) more efficient

Posted on 2004-11-05
17
Medium Priority
?
244 Views
Last Modified: 2008-02-01
Hello :-).
I build my first Color Pallet (Picker), but I paid attention about the time of "compiling" of the script and this too much(for me) time.
I find that only the build of the pallet take:
In Mozilla FireFox - 670 ms
In IE - 470 -> but every refreshing is growing up :-(

This is the code of the Pallet builder:
--------------------------------------------------------
function createDiv(id, color, i){
            var oDiv = document.createElement("div");
            oDiv.className = "little";
            switch(color){
                  case "red":
                        oDiv.style.backgroundColor = "rgb("+i+",0,0)";
                  break;
                  case "green":
                        oDiv.style.backgroundColor = "rgb(0,"+i+",0)";
                  break;
                  case "blue":
                        oDiv.style.backgroundColor = "rgb(0,0,"+i+")";
                  break;
            }
            oDiv.onclick = function(){
                  fncSwitch(color, this.style.backgroundColor, true);
            };
            document.getElementById(id).appendChild(oDiv);
            delete oDiv;oDiv=null;
      }
      function CreatePallet(){
      var st = new Date().getTime();
      var red = document.getElementById("red");

            for(var i=0;i<255;i++){
                  createDiv("red", "red", i);
                  createDiv("green", "green", i);
                  createDiv("blue", "blue", i);
            }
      var et = new Date().getTime();
      alert(et-st+"ms");
      }
-------------------------------------------------------------------


Thanks Nir :-)!
0
Comment
Question by:NirTayeb
17 Comments
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12510143
It is impossible to work out what are you doing without more code. Try this instead, click to select

<script>
document.write('<table cellspacing=0>')
rows=30
cols=20
for (j=0;j<=cols;j++){
document.write('<tr> ')
for (i=0;i<=rows;i++)
{L=1-j/cols
H=i/rows
S=1.0
if (L < 0.5) temp2=L*(1.0+S)

if (L >= 0.5) temp2=L+S - L*S

temp1 = 2.0*L - temp2

temp3=H+1.0/3.0
if (temp3 < 0) temp3 = temp3 + 1.0
if (temp3 > 1) temp3 = temp3 - 1.0

  if (6.0*temp3 < 1) color=temp1+(temp2-temp1)*6.0*temp3

  else if (2.0*temp3 < 1) color=temp2

  else if (3.0*temp3 < 2) color=temp1+(temp2-temp1)*((2.0/3.0)-temp3)*6.0

  else color=temp1
  red=Math.round(256*color)

 temp3=H
if (temp3 < 0) temp3 = temp3 + 1.0
if (temp3 > 1) temp3 = temp3 - 1.0

  if (6.0*temp3 < 1) color=temp1+(temp2-temp1)*6.0*temp3

  else if (2.0*temp3 < 1) color=temp2

  else if (3.0*temp3 < 2) color=temp1+(temp2-temp1)*((2.0/3.0)-temp3)*6.0

  else color=temp1
  green=Math.round(256*color)

temp3=H-1.0/3.0
if (temp3 < 0) temp3 = temp3 + 1.0
if (temp3 > 1) temp3 = temp3 - 1.0

  if (6.0*temp3 < 1) color=temp1+(temp2-temp1)*6.0*temp3

  else if (2.0*temp3 < 1) color=temp2

  else if (3.0*temp3 < 2) color=temp1+(temp2-temp1)*((2.0/3.0)-temp3)*6.0

  else color=temp1
  blue=Math.round(256*color)

document.write('<td height=10 width=3 bgColor=rgb(',red,',',green,',',blue,') onmouseover="f1.t1.value=this.bgColor;tab.bgColor=this.bgColor" onclick="f1.t2.value=this.bgColor;tab.bgColor=this.bgColor"><\/td>')
}
document.write("<\/tr>")
}
document.write("<\/table>")
</script>

<html>

<head>
<title></title>
</head>

<body>

<form name="f1">
  <p><input type="text" name="t1"> </p>
  <p><input type="text" name="t2"> </p>
</form>

<table id="tab" border="1" width="10" height="40">
  <tr>
    <td width="100%">&nbsp;</td>
  </tr>
</table>
</body>
</html>
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12510155
The number of  rows and cols are ajustable
(ps credit to Xxavier for the code)
0
 
LVL 7

Expert Comment

by:Xxavier
ID: 12510841
....I bet that hurt. :-)
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Expert Comment

by:wzd3
ID: 12511934
I don't think that netscape handles bgColor=rgb(r,g,b) format color specifications.  Insert your favorite dec/hex converter!
0
 

Author Comment

by:NirTayeb
ID: 12512186
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12512978
0.047 secs :-)

<head>
<script>
d=new Date()
for(i=0;i<255;i++){
 hex=i.toString(16)
 if (hex.length==1) hex='0'+hex
 str=''
 str='<div style="position:absolute;left:'+i+';top:0;background:#'+hex+'0000;width=1;height=50" onclick=\"col(r,\''+hex+'\')"><\/div>'
 str+='<div style="position:absolute;left:'+i+';top:50;background:#00'+hex+'00;width=1;height=50"  onclick=\"col(g,\''+hex+'\')"><\/div>'
 str+='<div style="position:absolute;left:'+i+';top:100;background:#0000'+hex+';width=1;height=50" onclick=\"col(b,\''+hex+'\')"><\/div>'
 document.write(str)
}
r='ff';g='ff';b='ff';

function col(c,hex){
 switch (c)
 {case r:c=''+hex+''+g+''+b;r=hex;break
  case g:c=''+r+''+hex+''+b;g=hex;break
  case b:c=''+hex+''+g+''+b;b=hex;break
 }
 document.getElementById('pal').style.background='#'+c
 document.getElementById('col').value='#'+c.toUpperCase()
}
g=new Date()
alert((g.getTime()-d.getTime())/1000)
</script>
</head>

<body>
 <div style="position:absolute;left:260;top:0;;width=100;height=150" id="pal"></div>
 <div style="position:absolute;top:160;"><input type="input" id="col" size="8"></div>
</body>
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12512996
shld be       case b:c=''+r+''+g+''+hex;b=hex;break

(also can any one explain wht the date appears in the box when you first click blue, goes when the alerts are taken out)
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12513070
>>also can any one explain wht the date appears in the box when you first click blue, goes when the alerts are taken out<<

replace

g=new Date()
alert((g.getTime()-d.getTime())/1000)

with

g1=new Date()
alert((g1.getTime()-d.getTime())/1000)
0
 
LVL 31

Accepted Solution

by:
GwynforWeb earned 500 total points
ID: 12513206
FINAL VERSION
(0.078secs load,   0.63secs refresh)


<head>
<script>
d=new Date()
for(i=0;i<255;i++){
 hex=i.toString(16)
 if (hex.length==1) hex='0'+hex
 str=''
 str='<div style="position:absolute;left:'+i+';top:0;background:#'+hex+'0000;width=1;height=50" onclick=\"col(1,\''+hex+'\')"><\/div>'
 str+='<div style="position:absolute;left:'+i+';top:50;background:#00'+hex+'00;width=1;height=50"  onclick=\"col(2,\''+hex+'\')"><\/div>'
 str+='<div style="position:absolute;left:'+i+';top:100;background:#0000'+hex+';width=1;height=50" onclick=\"col(3,\''+hex+'\')"><\/div>'
 document.write(str)
}
r='ff';g='ff';b='ff';

function col(c,hex){
 switch (c)
 {case 1:c=''+hex+''+g+''+b;r=hex;break
  case 2:c=''+r+''+hex+''+b;g=hex;break
  case 3:c=''+r+''+g+''+hex;b=hex;break
 }
 document.getElementById('pal').style.background='#'+c
 document.getElementById('col').value='#'+c.toUpperCase()
}
g1=new Date()
alert((g1.getTime()-d.getTime())/1000)
</script>
</head>

<body>
<div style="position:absolute;left:260;top:0;;width=100;height=150" id="pal"></div>
<div style="position:absolute;top:160;"><input type="input" id="col" size="8"></div>
</body>

0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12513207
(0.078secs load,   0.063secs refresh)
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12513255
try this this is super cool, move the mouse and click

<head>
<script>
d=new Date()
for(i=0;i<255;i++){
 hex=i.toString(16)
 if (hex.length==1) hex='0'+hex
 str=''
 str='<div style="position:absolute;left:'+i+';top:0;background:#'+hex+'0000;width=1;height=50" onclick=\"setColor()" onmousemove=\"col(1,\''+hex+'\')"><\/div>'
 str+='<div style="position:absolute;left:'+i+';top:50;background:#00'+hex+'00;width=1;height=50" onclick=\"setColor()" onmousemove=\"col(2,\''+hex+'\')"><\/div>'
 str+='<div style="position:absolute;left:'+i+';top:100;background:#0000'+hex+';width=1;height=50" onclick=\"setColor()" onmousemove=\"col(3,\''+hex+'\')"><\/div>'
 document.write(str)
}
r='ff';g='ff';b='ff';

function col(c,hex){
 switch (c)
 {case 1:color=''+hex+''+g+''+b;r=hex;break
  case 2:color=''+r+''+hex+''+b;g=hex;break
  case 3:color=r+''+g+''+hex;b=hex;break
 }
 document.getElementById('pal').style.background='#'+color
 document.getElementById('col').value='#'+color.toUpperCase()
}

function setColor(){
document.getElementById('col1').value='#'+color.toUpperCase()
document.getElementById('pal1').style.background='#'+color
}

g1=new Date()
alert((g1.getTime()-d.getTime())/1000)
</script>
</head>

<body>
<div style="position:absolute;left:260;top:0;;width=50;height=150" id="pal"></div>
<div style="position:absolute;left:315;top:0;;width=50;height=150" id="pal1"></div>
<div style="position:absolute;top:160;">
 <input type="input" id="col" size="8">
 <input type="input" id="col1" size="8">
</div>
</body>

0
 

Author Comment

by:NirTayeb
ID: 12513666
Thankssssssssssssssssssssss !!!

one tip for you ;-)
when you set the width and height in CSS use the ":" char (colon char). IE know interpret this but under the standart, yoo must to use the colon (therefore I just not understood why it's no working on my Mozilla fireFox)


Thanks again!
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12514450
>>when you set the width and height in CSS use the ":" char (colon char)<<

I know I should use the : and I alway try to use it but for some reason I about 50% when I am rushing I end up typing =.  I should have tested on NS as well. Thx for the points
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12514471
..just noticed the B ,  I'd rather you had not given me any points at all. A bit of a slap in the face. :-(
0
 

Author Comment

by:NirTayeb
ID: 12514713
I gave you !
now I haven't the "Accept" button near the comment header.

if is not, so tell me how. please?
I a new member in this site. until now I just read but 2 day ago I register and ask here.
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12514826
   Ah I see you are new here, sorry for my words. Giving around  B here is for a 3rd rate answer to a question, C's are rarely if ever given. People will get annoyed with you if you give  B' as fewer points are added to their total. (it does not cost you any more points to give an A).  It is too late to change now, but that is OK and no problems.

GfW  :-)
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12514929
........oh dear I see you have added  a neutral comment to my profile, the first 'neutral' I have ever got., This is dissappointing as I put a fair amount of time into the code. :--(
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question