473,320 Members | 1,988 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

When I click on first highlighted red checker piece how can I get that piece to move

74 64KB
Here is the HTML file

Expand|Select|Wrap|Line Numbers
  1. @model CheckerBoard.Models.HomeModel
  2.  
  3. <html>
  4.  
  5.     <head>
  6.         <title>@Model.PageTitle</title>
  7.         <link href="~/Styles/Home.css" rel="stylesheet" />
  8.     </head>
  9.  
  10.     <body>
  11.  
  12.             <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  13.             <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
  14.             <script src="~/Scripts/Home.js"></script>
  15.  
  16.             <div class="home">
  17.  
  18.                 <div class="board">
  19.                     <div class="row">
  20.                         <div class="cell piece red"></div>
  21.                         <div class="cell piece red"></div>
  22.                         <div class="cell piece red"></div>
  23.                         <div class="cell piece red"></div>
  24.                         <div class="cell piece red"></div>
  25.                         <div class="cell piece red"></div>
  26.                         <div class="cell piece red"></div>
  27.                         <div class="cell piece red"></div>
  28.                     </div>
  29.                     <div class="row">
  30.                         <div class="cell piece red"></div>
  31.                         <div class="cell piece red"></div>
  32.                         <div class="cell piece red"></div>
  33.                         <div class="cell piece red"></div>
  34.                         <div class="cell piece red"></div>
  35.                         <div class="cell piece red"></div>
  36.                         <div class="cell piece red"></div>
  37.                         <div class="cell piece red"></div>
  38.                     </div>
  39.                     <div class="row">
  40.                         <div class="cell"></div>
  41.                         <div class="cell"></div>
  42.                         <div class="cell"></div>
  43.                         <div class="cell"></div>
  44.                         <div class="cell"></div>
  45.                         <div class="cell"></div>
  46.                         <div class="cell"></div>
  47.                         <div class="cell"></div>
  48.                     </div>
  49.                     <div class="row">
  50.                         <div class="cell"></div>
  51.                         <div class="cell"></div>
  52.                         <div class="cell"></div>
  53.                         <div class="cell"></div>
  54.                         <div class="cell"></div>
  55.                         <div class="cell"></div>
  56.                         <div class="cell"></div>
  57.                         <div class="cell"></div>
  58.                     </div>
  59.                     <div class="row">
  60.                         <div class="cell"></div>
  61.                         <div class="cell"></div>
  62.                         <div class="cell"></div>
  63.                         <div class="cell"></div>
  64.                         <div class="cell"></div>
  65.                         <div class="cell"></div>
  66.                         <div class="cell"></div>
  67.                         <div class="cell"></div>
  68.                     </div>
  69.                     <div class="row">
  70.                         <div class="cell"></div>
  71.                         <div class="cell"></div>
  72.                         <div class="cell"></div>
  73.                         <div class="cell"></div>
  74.                         <div class="cell"></div>
  75.                         <div class="cell"></div>
  76.                         <div class="cell"></div>
  77.                         <div class="cell"></div>
  78.                     </div>
  79.                     <div class="row">
  80.                         <div class="cell piece black"></div>
  81.                         <div class="cell piece black"></div>
  82.                         <div class="cell piece black"></div>
  83.                         <div class="cell piece black"></div>
  84.                         <div class="cell piece black"></div>
  85.                         <div class="cell piece black"></div>
  86.                         <div class="cell piece black"></div>
  87.                         <div class="cell piece black"></div>
  88.                     </div>
  89.                     <div class="row">
  90.                         <div class="cell piece black"></div>
  91.                         <div class="cell piece black"></div>
  92.                         <div class="cell piece black"></div>
  93.                         <div class="cell piece black"></div>
  94.                         <div class="cell piece black"></div>
  95.                         <div class="cell piece black"></div>
  96.                         <div class="cell piece black"></div>
  97.                         <div class="cell piece black"></div>
  98.                     </div>
  99.                 </div>
  100.  
  101.             </div>
  102.  
  103.     </body>
  104.  
  105. </html>
Here is the CSS file

Expand|Select|Wrap|Line Numbers
  1. .home > .board
  2. {
  3.     display: table;
  4.     border: 1px solid black;
  5. }
  6.  
  7. .home > .board > .row
  8. {
  9.     display: table;
  10. }
  11.  
  12. .home > .board > .row > .cell
  13. {
  14.     width: 80px;
  15.     height: 80px;
  16.     border: 1px solid black;
  17.     display: inline-block;
  18. }
  19.  
  20. .piece
  21. {
  22.     background-size: 75px 75px;
  23.     background-repeat: no-repeat;
  24.     background-position: center;
  25.     background-origin: content-box;
  26. }
  27.  
  28. .red
  29. {
  30.     background-image: URL('../images/red.png');
  31. }
  32.  
  33. .black
  34. {
  35.     background-image: URL('../images/black.png');
  36. }
Expand|Select|Wrap|Line Numbers
  1. $(document).ready(function ()
  2. {
  3.     var cells = $(".cell");
  4.     var colorCount = 0;
  5.  
  6.     for (var i = 0; i < cells.length; i++)
  7.     {
  8.         var cell = $(cells[i]);
  9.         var isDark = colorCount % 2 == 0;
  10.         var isNextRow = (i + 1) % 8 == 0;
  11.         colorCount += isNextRow ? 2 : 1;
  12.         cell.css("background-color", isDark ? "navy" : "white"); 
  13.     }
  14.     $(".cell.piece.red").on({
  15.         click: function () {
  16.             $(this).css("background-color", "yellow"); }
  17.     });
  18.     $(".cell.piece.black").on({
  19.         click: function () {
  20.             $(this).css("background-color", "yellow");  }
  21.     });
  22.     $(".cell.piece.red").on({
  23.         click: function () {
  24.             $(this).appendTo(".row.cell"); }
  25.     }); 
  26.  
  27.  
  28. });

Hey Everybody. I have an HTML file, CSS file, and a JavaScript file. I have been trying to figure out how when I click on the first red checker piece that becomes highlighted how I am going to move that to an unoccupied cell. So to be clear when I click on the highlighted first red checker it should move to the next closet unoccupied cell. Can someone help? Here is what I have so far with JavaScript file and other files.
Feb 24 '17 #1
0 982

Sign in to post your reply or Sign up for a free account.

Similar topics

2
by: Shyguy | last post by:
Is there any way to stop Access from highlighting all the text in a memo box? If I click again the text is no longer highlighted, but I would like to get it to not highlight at all. Thanks for...
2
by: VBLearner | last post by:
How to close the parent and all child forms together at once when click on parent window's close button X?
7
by: Mary | last post by:
I have a student who has a hyphenated first name. If I concatenate the name like this: StudentName:( & ", " & ), it works as expected. If, however, I try to get the first name first by...
13
by: MLH | last post by:
I have a form, frmVehicleEntryForm. On it is a subform control named frmAddnlOwnrListSubForm. The subform control's source object is frmAddnlOwnrListSubForm. When I click on the subform control,...
2
by: pbd22 | last post by:
Hi. Can somebody tell me how to prevent a postback when I click on the little "plus" sign next to the treenode's root folder? It postbacks and I have to restart a video stream coming to the...
0
by: abdulazees | last post by:
when click button i want to print autometicaly reportveiwer data, i not need to show reportviewer.
5
by: hidayu1986 | last post by:
how to disable textbox when click on radiobutton using VB script on Visual Studio.Net 2005. currently i used this coding but it is not functioning. Private sub...
2
by: sachin satav | last post by:
I want send Info on particular E-Mail ID when click on send button on form in ASP .Net .
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.