Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts

    A table with background colors

    Hello!

    Im pretty new to all this html,css,javascript. I hope you guys can help me a little out here.

    I need to make a table with a palette of colors from black to white (grayscale, where white is X). The table shows when the page is loaded. The red border around the color in the palette is the selected color (when u click on it, you select it).

    Something like in this picture:


    The problem is it that i could do this in jquery, but i dont now nothing about jquery. Is the same thing possible to make in javascript or is it not trivial ? Some help/tips/code would be great.

    Thank you guys.
    Last edited by bigbada; 03-04-2013 at 01:27 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    ummm...jQuery *IS* JavaScript. jQuery is nothing but a "helper" library for JavaScript.

    If something is possible in jQuery, it *MUST* be possible in plain vanilla JavaScript.

    BUT...

    The FIRST step here is to create the HTML and CSS. Once you do that, adding the JavaScript to change selections is easy.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    bigbada (03-04-2013)

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,219
    Thanks
    23
    Thanked 606 Times in 605 Posts
    Was doing code while you were writing I guess. Figure it's easy to do a table or two:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <style type="text/css">
    #main{
    	background-color: blue;
    }
    .colorback td{
    	height: 50px;
    }
    </style>
    </head>
    <body>
    <table class="colorback" width="500%" border="1">
    	<tr>
    		<td><div style="height:50px; background-color:#000;" onclick="change('#000');"></div></td>
    		<td><div style="height:50px; background-color:#000;" onclick="change('#111');"></div></td>
    		<td><div style="height:50px; background-color:#000;" onclick="change('#222');"></div></td>
    		<td><div style="height:50px; background-color:#000;" onclick="change('#333');"></div></td>
    		<td><div style="height:50px; background-color:#000;" onclick="change('#444');"></div></td>
    		<td><div style="height:50px; background-color:#888;" onclick="change('#888');"></div></td>
    		<td><div style="height:50px; background-color:#ccc;" onclick="change('#ccc');"></div></td>
    		<td><div style="height:50px; background-color:#fff;" onclick="change('#fff');"></div></td>
    	</tr>
    </table>
    <table id="main" width="500" border="1" >
    	<tr>
    		<td>tom</td>
    		<td>sprat</td>
    		<td>could</td>
    	</tr>
    	<tr>
    		<td>eat</td>
    		<td>no</td>
    		<td>fat</td>
    	</tr>
    	<tr>
    		<td>his</td>
    		<td>wife</td>
    		<td>lean</td>
    	</tr>
    </table>
    </body>
    
    <script type="text/javascript">
    function change(Bcolor){
    	document.getElementById("main").style.backgroundColor = Bcolor;
    	var Mcolor = Bcolor.replace("#", "");
    	if(Mcolor <= 444){
    		document.getElementById("main").style.color = "white";
    	}else{
    		document.getElementById("main").style.color = "black";
    	}
    
    }
    </script>
    </html>

  • Users who have thanked sunfighter for this post:

    bigbada (03-04-2013)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Well, yes, but...

    Try to avoid using <table>s in modern HTML, no?

    And let's make the JS code less obtrusive?
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    div#choices {
        position: relative;
        height: 62px; width: 450px;
        border: solid black 2px;
    }
    div#choices div {
        position: absolute; 
        height: 50px; width: 50px;
        border: solid black 2px;
        margin: 4px;
    }
    div#theChoice {
        position: relative;
        height: 50px; width: 400px;
        border: solid black 2px;
    }
    </style>
    </head>
    <body>
    Just some stuff ...
    <br/><br/>
    <div id="choices">
        <div style="background-color: #000;"></div>
        <div style="background-color: #444;"></div>
        <div style="background-color: #666;"></div>
        <div style="background-color: #888;"></div>
        <div style="background-color: #AAA;"></div>
        <div style="background-color: #CCC;"></div>
        <div style="background-color: #EEE;"></div>
        <div style="background-color: #FFF;"></div>
    </div>
    <br/><br/>
    Current choice:
    <div id="theChoice"></div>
    
    
    <script type="text/javascript">
    (
      function( )
      {
          var divs = document.getElementById("choices").getElementsByTagName("div");
          for ( var d = 0; d < divs.length; ++d )
          {
              var div = divs[d];
              div.style.left = ( d * 55 ) + "px";
              div.onclick = pickThis;
          }
          divs[divs.length-1].style.borderColor = "red";
    
          function pickThis( )
          {
              document.getElementById("theChoice").style.backgroundColor =
                  this.style.backgroundColor;
              for ( var d = 0; d < divs.length; ++d )
              {
                  divs[d].style.borderColor = "black";
              }
              this.style.borderColor = "red";
          }           
      
      }
    )();
    </script>
    </body>
    </html>
    The color gradation still isn't right, but it's closer. Anyway, now you just need to change the background colors to adjust it; no need to muck with the JS code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • The Following 2 Users Say Thank You to Old Pedant For This Useful Post:

    bigbada (03-04-2013), jmrker (03-08-2013)

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ye, i wanted something like that. Thank you both for your effort. I will now study and examine the code little by little and try some new things with it. If i have another question i will ask, but for now thanks.

  • #6
    New Coder
    Join Date
    Feb 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hello

    I added the
    Code:
      document.write('<center><table width="20" border="1">');
    
    		//loop for rows
    		for (j=1;j<=16;j++)
    		{
    			document.write('<tr>');
    		//loop for columns
    		for (i=1;i<=16;i++)
    		{
    			document.write('<td>' +i+ '</td>'); 
    		}
    			document.write('</tr>');
    		}
    			document.write('</table border></center>'); 
    		}	  
    		)();
    to the code, to create a 16x16 table. Now i want to color the cells in the table when i click with mousebutton on it by my selected color. Is this the right way to do it? How do i know what cell do i clicked? Is this the right wy to do it? Or must all cells be their own <div>s ? So for example if i select the black color and then i click on a cell in the table, the cells gets black, then if i select another color and i select the same cell or any other the color changes...

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    div#izbira {
        position: relative;
        height: 62px; width: 450px;
        border: solid black 2px;
    }
    div#izbira div {
        position: absolute; 
        height: 50px; width: 50px;
        border: solid black 2px;
        margin: 4px;
    }
    div#theChoice {
        position: relative;
        height: 50px; width: 400px;
        border: solid black 2px;
    }
    </style>
    </head>
    <body>
    Tu je test
    <br/><br/>
    <div id="izbira">
        <div style="background-color: #000;"></div>
        <div style="background-color: #444;"></div>
        <div style="background-color: #666;"></div>
        <div style="background-color: #888;"></div>
        <div style="background-color: #AAA;"></div>
        <div style="background-color: #CCC;"></div>
        <div style="background-color: #EEE;"></div>
        <div style="background-color: #FFF;"></div>
    </div>
    <br/><br/>
    Moja barva:
    <div id="theChoice"></div>
    
    
    
    <script type="text/javascript">
    (
      function( )
      {
          var divs = document.getElementById("izbira").getElementsByTagName("div");
          for ( var d = 0; d < divs.length; ++d )
          {
              var div = divs[d];
              div.style.left = ( d * 55 ) + "px";
              div.onclick = pickThis;
          }
          divs[divs.length-1].style.borderColor = "red";
    
          function pickThis( )
          {
              document.getElementById("theChoice").style.backgroundColor =
                  this.style.backgroundColor;
              for ( var d = 0; d < divs.length; ++d )
              {
                  divs[d].style.borderColor = "black";
              }
              this.style.borderColor = "red";
          }
    	  
    	  document.write('<center><table width="30" border="1">');
    
    		//loop for rows
    		for (j=1;j<=16;j++)
    		{
    			document.write('<tr>');
    		//loop for columns
    		for (i=1;i<=16;i++)
    		{
    			document.write('<td>' +i+ '</td>'); 
    		}
    			document.write('</tr>');
    		}
    			document.write('</table border></center>'); 
    		}	  
    		)();
    
    </script>
    </body>
    </html>
    Can you make this work maybe with <td onclik="choosenCell(this)" ?
    Last edited by bigbada; 03-06-2013 at 12:19 PM.

  • #7
    New Coder
    Join Date
    Feb 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ok guys, i did it somehow

    html:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="script.js"></script>
    <style type="text/css">
    div#izbira {
        position: relative;
        height: 62px; width: 450px;
        border: solid black 2px;
    }
    div#izbira div {
        position: absolute; 
        height: 50px; width: 50px;
        border: solid black 2px;
        margin: 4px;
    }
    div#theChoice {
        position: relative;
        height: 50px; width: 400px;
        border: solid black 2px;
    }
    </style>
    </head>
    <body>
    Tu je test
    <br/><br/>
    <div id="izbira">
        <div style="background-color: #000;"></div>
        <div style="background-color: #444;"></div>
        <div style="background-color: #666;"></div>
        <div style="background-color: #888;"></div>
        <div style="background-color: #AAA;"></div>
        <div style="background-color: #CCC;"></div>
        <div style="background-color: #EEE;"></div>
        <div style="background-color: #FFF;"></div>
    </div>
    <br/><br/>
    <button type="button" onclick="">Napolni!</button>
    <button type="button" onclick="alert('Hello world!')">Click Me!</button>
    Moja barva:
    <div id="theChoice"></div>
    
    
    
    <script type="text/javascript">
    (
      function( )
      {
          var divs = document.getElementById("izbira").getElementsByTagName("div");
          for ( var d = 0; d < divs.length; ++d )
          {
              var div = divs[d];
              div.style.left = ( d * 55 ) + "px";
              div.onclick = pickThis;
          }
          divs[divs.length-1].style.borderColor = "red";
    
          function pickThis( )
          {
              document.getElementById("theChoice").style.backgroundColor =
                  this.style.backgroundColor;
              for ( var d = 0; d < divs.length; ++d )
              {
                  divs[d].style.borderColor = "black";
              }
              this.style.borderColor = "red";
          }
    	  
    	  document.write('<center><table width="30" border="1">');
    
    		//loop for rows
    		for (j=1;j<=16;j++)
    		{
    			document.write('<tr>');
    		//loop for columns
    		for (i=1;i<=16;i++)
    		{
    			document.write('<td onclick="izbira(this)">' +i+ '</td>'); 
    		}
    			document.write('</tr>');
    		}
    			document.write('</table border></center>'); 
    		}	  
    		)();
    
    </script>
    </body>
    </html>

    .js file

    Code:
    function izbira(celica)
    {	
    	celica.style.backgroundColor = document.getElementById("theChoice").style.backgroundColor 
    }
    
    function napolni()
    {
    //napolni vse pobarvane celice na trenutno izbrano barvo
    }

    I used td onclick="izbira(this) for changing the colors of table cells.
    Now how can i make when i click on button "Napolni" to change all cells that are colored to the selected color from palette ? In short.. I color 3 cells black and 2 cell gray, then when i select another color and click the button "Napolni" all 5 cells change color to the selected color?

    EDIT: solved the problem
    Last edited by bigbada; 03-06-2013 at 03:06 PM.

  • #8
    New Coder
    Join Date
    Feb 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Can this code for picking color from palette be made easier ? I dont really understand the line there: d*55 + px ? Why 55? Can someone explain it?

    Code:
    var divs = document.getElementById("choices").getElementsByTagName("div");
          for ( var d = 0; d < divs.length; ++d )
          {
              var div = divs[d];
              div.style.left = ( d * 55 ) + "px";
              div.onclick = pickThis;
          }
          divs[divs.length-1].style.borderColor = "red";

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Each pallete box (div) is 50px wide as defined in the css and so with a 5px space between them each one is positioned (d*55) + "px" from the left hand margin. At 0, 55, 110, 165 px etc.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    bigbada (03-07-2013)

  • #10
    New Coder
    Join Date
    Feb 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I have a last question. I need to use ajax request, that sends the current picture to the server with the help of asynchronous call. Then on the server with a php script it counts the number of black and white cells on the table field. The result then comes back to the site and shows up in an alert window. So for example if i color 10 cells black and then press the button "Prestej" i must get with the help of ajax the result in a alert window (saying 10 black and 246 white). Do you maybe know how to do that? I have never used ajax, so i would appreciate the help.

    code.zip

  • #11
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    @'Old Pedant'

    Unrelated to OP's problem or continued solution, I found your code intriguing.
    I modified it for my own amusement and understanding and attach it here
    just for others to view and or study. Thanks for the exercise...
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <!-- Modified from: http://www.codingforums.com/showthread.php?t=288763 -->
    <style type="text/css">
    div#choices {
        position: relative;
        height: 32px; width: 560px;
        border: solid black 2px;
    }
    div#choices div {
        position: absolute; 
        height: 25px; width: 25px;
        border: solid black 2px;
        margin: 2px;
    }
    div#theChoice {
        position: relative;
        height: 25px; width: 560px;
        border: solid black 2px;
    }
    </style>
    </head>
    <body>
    <br/><br/>
    <div id="choices">
      <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>
      <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>
    </div>
    <br/><br/>
    Current choice:
    <div id="theChoice"></div>
    
    <script type="text/javascript">
    function d2h(d) {return d.toString(16);}  // decimal to hex
    ( function( ) {
      var divs = document.getElementById("choices").getElementsByTagName("div");
      for ( var d = 0; d < divs.length; ++d ) {
        var div = divs[d];
        div.style.left = ( d * 35 ) + "px";
        var b = d2h(d);  b = '#'+b+b+b;               // form color of box
        div.style.backgroundColor = b;                // set color of box
        div.style.fontSize="0.8em";                   // font size and display of box
        var c = '#fff';  if (d > 7) { c = "#000"; }  div.style.color = c;
        div.innerHTML=b;
        div.onclick = pickThis;
      }
      divs[divs.length-1].style.borderColor = "red";
    
      function pickThis( ) {
        document.getElementById("theChoice").style.backgroundColor = this.style.backgroundColor;
        for ( var d = 0; d < divs.length; ++d ) { divs[d].style.borderColor = "black"; }
        this.style.borderColor = "red";
      }           
    } )();
    </script>
    </body>
    </html>

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Well, let's take it a step further. Why not create the inner <div>s, too?
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    div#choices {
        position: relative;
        height: 32px; width: 560px;
        border: solid black 2px;
    }
    div#choices div {
        position: absolute; 
        height: 25px; width: 25px;
        border: solid black 2px;
        margin: 2px;
    }
    div#theChoice {
        position: relative;
        height: 25px; width: 560px;
        border: solid black 2px;
    }
    </style>
    </head>
    <body>
    <br/><br/>
    <div id="choices">
    </div>
    <br/><br/>
    Current choice:
    <div id="theChoice"></div>
    
    <script type="text/javascript">
    ( function( ) {
      var main = document.getElementById("choices");
      for ( var d = 0; d < 16; ++d ) {
        var div = document.createElement("div");
        div.style.left = ( d * 35 ) + "px";
        div.style.backgroundColor = div.innerHTML = 
            d > 0 ? "#" + (d * 0x111).toString(16) : "#000";
        div.style.fontSize="0.8em";
        div.style.color = d > 9 ?  "#000" : "#fff";
        div.onclick = pickThis;
        main.appendChild( div );
      }
      divs[divs.length-1].style.borderColor = "red";
    
      function pickThis( ) {
        document.getElementById("theChoice").style.backgroundColor = this.style.backgroundColor;
        for ( var d = 0; d < divs.length; ++d ) { divs[d].style.borderColor = "black"; }
        this.style.borderColor = "red";
      }           
    } )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    And then it's just one more step to this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    div#choices {
        position: relative;
        height: 640px; width: 640px;
        border: solid black 2px;
    }
    div#choices div {
        position: absolute; 
        height: 8px; width: 8px;
        border: solid 1px black;
        margin: 0px;
    }
    div#theChoice {
        position: relative;
        height: 25px; width: 640px;
        border: solid black 2px;
    }
    </style>
    </head>
    <body>
    <br/><br/>
    <div id="choices">
    </div>
    <br/><br/>
    Current choice:
    <div id="theChoice"></div>
    
    <script type="text/javascript">
    ( function( ) 
      {
          var main = document.getElementById("choices");
          for ( var r = 0; r < 16; ++r ) 
          {
              for ( var g = 0; g < 16; ++g )
              {
                  for ( var b = 0; b < 16; ++b )
                  {
                      var bgnum = r * 256 + g * 16 + b;
                      var div = document.createElement("div");
                      div.style.left = ( ( bgnum & 0x3F ) * 10 ) + "px";
                      div.style.top  = ( ( bgnum >> 6   ) * 10 ) + "px";
                      div.style.backgroundColor = 
                          "#" + ( ( 0x1000 + bgnum ).toString(16) ).substring(1);
                      div.onclick = pickThis;
                      main.appendChild( div );
                  }
              }
          }
          divs[divs.length-1].style.borderColor = "red";
    
          function pickThis( ) 
          {
              document.getElementById("theChoice").style.backgroundColor = this.style.backgroundColor;
              for ( var d = 0; d < divs.length; ++d ) { divs[d].style.borderColor = "black"; }
              this.style.borderColor = "red";
          }           
    } )();
    </script>
    </body>
    </html>
    Though clearly that's a crappy way to arrange the colors.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    New Coder
    Join Date
    Feb 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    @Old Pedant you maybe know the solution to my ajax question above? It would really help me.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    What have you tried? And why do you need server-side code simply to count the number of black and white cells when you could do that all in JavaScript just as simply, if not much more so? Is this a homework assignment, hence the (somewhat odd) requirements?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •