How can I get all occupied cells to highlight upon clicking on them?

74 64KB

Here is HTML code

Expand|Select|Wrap|Line Numbers

 <html>
 
    <head>

        <title>@Model.PageTitle</title>

        <link href="~/Styles/Home.css" rel="stylesheet" />

    </head>
 
    <body>
 
            <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

            <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

            <script src="~/Scripts/Home.js"></script>
 
            <div class="home">
 
                <div class="board">

                    <div class="row">

                        <div class="cell piece red"></div>

                        <div class="cell piece red"></div>

                        <div class="cell piece red"></div>

                        <div class="cell piece red"></div>

                        <div class="cell piece red"></div>

                        <div class="cell piece red"></div>

                        <div class="cell piece red"></div>

                        <div class="cell piece red"></div>

                    </div>

                    <div class="row">

                        <div class="cell piece red"></div>

                        <div class="cell piece red"></div>

                        <div class="cell piece red"></div>

                        <div class="cell piece red"></div>

                        <div class="cell piece red"></div>

                        <div class="cell piece red"></div>

                        <div class="cell piece red"></div>

                        <div class="cell piece red"></div>

                    </div>

                    <div class="row">

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                    </div>

                    <div class="row">

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                    </div>

                    <div class="row">

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                    </div>

                    <div class="row">

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                        <div class="cell"></div>

                    </div>

                    <div class="row">

                        <div class="cell piece black"></div>

                        <div class="cell piece black"></div>

                        <div class="cell piece black"></div>

                        <div class="cell piece black"></div>

                        <div class="cell piece black"></div>

                        <div class="cell piece black"></div>

                        <div class="cell piece black"></div>

                        <div class="cell piece black"></div>

                    </div>

                    <div class="row">

                        <div class="cell piece black"></div>

                        <div class="cell piece black"></div>

                        <div class="cell piece black"></div>

                        <div class="cell piece black"></div>

                        <div class="cell piece black"></div>

                        <div class="cell piece black"></div>

                        <div class="cell piece black"></div>

                        <div class="cell piece black"></div>

                    </div>

                </div>
 
            </div>
 
    </body>
 
</html>

Here is JavaScript mixed with JQuery code

Expand|Select|Wrap|Line Numbers

 $(document).ready(function ()

{

    var cells = $(".cell");

    var colorCount = 0;
 
    for (var i = 0; i < cells.length; i++)

    {

        var cell = $(cells[i]);

        var isDark = colorCount % 2 == 0;

        var isNextRow = (i + 1) % 8 == 0;

        colorCount += isNextRow ? 2 : 1;

        cell.css("background-color", isDark ? "navy" : "white"); 

    }

    $(".cell piece red").click(function(){

        $(".this").css("background-color", "yellow"); 

    });
 
});

Here is my CSS codes

Expand|Select|Wrap|Line Numbers

 .home > .board

{

    display: table;

    border: 1px solid black;

}
 
.home > .board > .row

{

    display: table;

}
 
.home > .board > .row > .cell

{

    width: 80px;

    height: 80px;

    border: 1px solid black;

    display: inline-block;

}
 
.piece

{

    background-size: 75px 75px;

    background-repeat: no-repeat;

    background-position: center;

    background-origin: content-box;

}
 
.red

{

    background-image: URL('../images/red.png');

}
 
.black

{

    background-image: URL('../images/black.png');

}

Feb 23 '17 #1

Subscribe Post Reply

1040

Dormilich

8,658

Expert Mod 8TB

What is the problem you encounter?

Feb 24 '17 #2

dseals22

64KB

I can't get the red and blue checkers to highlight when I click on them?

Feb 24 '17 #3

dseals22

64KB

Can you help me @Dormilich

Feb 24 '17 #4

by: Harry | last post by:

CSS Description: Table contains a column of td cells with links. Achieved: 1. Entire link cells highlight when hovered. 2. The entire area of these cells are clickable. Problem:

HTML / CSS

Populate a popup window with clickable records from an Access DB and upon clicking, populate a selectbox on the original webpage with the clicked record

by: Enjoy Life | last post by:

We have an ASP site that hits up an Access database of categories of products and products. (e.g. Categories = Napkins, Tablecloths; Products = 20x20 Napkins, 21x21 Napkins, 54x54 Tablecloths,...

ASP / Active Server Pages

CSS: Change text color upon click

by: Yeah | last post by:

I have a multiple choice quiz where I would like to use CSS to change the color of the answers upon clicking them. I would like to present the right and wrong answers up front, rather than direct...

HTML / CSS

Open images after double clicking them on form

by: chrisse_2 | last post by:

Hi, I am working with images which vary depending on what record you are looking at. The images are linked into my database using vba code. I would like the user to be able to double click on...

Microsoft Access / VBA

button does not work upon clicking

by: David | last post by:

Hi, I have 3 buttons on a asp.net page. They are exactly the same except for the name. Two of the buttons works but the third one does not respond to the clicking. Here is the code: <tr> <td...

ASP.NET

Add a Column to Grid Upon Clicking on OK Button

by: Fir5tSight | last post by:

Hi All, This seems to be a difficult problem for me. Hope you can help me out... I have a program whose major part is a grid that displays several columns from data obtained from a stored...

.NET Framework

Need Help with ASP .NET datagrid: how to select a range of cells

by: bh | last post by:

I am working on a calendar application that requires me to let the user select a range of adjacent cells by: 1-clicking in the start cell (start of range) 2-holding down the mouse key...

ASP.NET

Submitting forms by clicking on text-based tabs as opposed to SUBMIT button

by: Alex | last post by:

Hello, I hope I can explain this properly. I'm writing an application with a tabbed-based navigation, and a form which gets filled out by users will be split into 5 subtabs. What I need is...

Javascript

transfer values from one page to another upon clicking a button

by: pipet2002 | last post by:

how can i send values from one page to another upon clicking a button which links me to that page

Javascript

Requery Subform upon clicking a button in the main form.

by: SwatiGV | last post by:

I want to update the subform upon clicking a button (Run) in the main form. The Run button on the main form is updating a query(Filter Region). This query is the Source Object of the Subform. The...

Microsoft Access / VBA

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

How can I get all occupied cells to highlight upon clicking on them?

Similar topics