Adjust the background color of the body content to reflect changing content

How can I change the background color to #97EFFC when a menu item is selected? I want the body content background to be transparent until a menu item is displayed.

Site.css
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
        background-color:transparent
    }
    .body-content {
        padding: 0;
        background-color: #97EFFC;
    }

Site.Master 
<div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
                <hr />
            </asp:ContentPlaceHolder>
            <footer>
                <p>It is  <%: DateTime.Now %> at Bob's Place</p>
            </footer>
        </div>

Here is the menu, it follows the standard from VS2013 -- does the JavaScript go in the Site.css?

   <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a runat="server" href="~/">Home</a></li>
            <li><a runat="server" href="~/About">About</a></li>
            <li><a runat="server" href="~/Contact">Contact</a></li>
            <li><a runat="server" href="~/WeatherInfo/WeatherInfoMenu">WeatherInfo</a></li>
        </ul>
        <asp:LoginView runat="server" ViewStateMode="Disabled">
            <AnonymousTemplate>
                <ul class="nav navbar-nav navbar-right">
                    <li><a runat="server" href="~/Account/Register">Register</a></li>
                    <li><a runat="server" href="~/Account/Login">Log in</a></li>
                </ul>
            </AnonymousTemplate>
            <LoggedInTemplate>
                <ul class="nav navbar-nav navbar-right">
                    <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %>!</a></li>
                    <li>
                        <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                    </li>
                </ul>
            </LoggedInTemplate>
        </asp:LoginView>
    </div>
</

div>

Answer №1

Here is a way to achieve this: when a menu item is selected,

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
      $('.nav').click(function() {
        $('body').css('background-image', 'url(images/tabs3.png)');
      });
});
</script>
</head>

You can also apply custom styling like so,

$('body').css('background-color', '#97EFFC'); // change background color

$('body').css('background-color', 'rgba(255,0,0,0.5)'); // make background semi-transparent

For an example of jQuery usage, visit: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Top-align the background of the inline element

This particular inquiry pertains to a curious discrepancy in the computed height of an inline nonreplaced element across different web browsers. The question can be found here: Why the computed height of inline nonreplaced element differs between browsers? ...

Spinner loading animation not showing correctly

Even though it shows up when I hover over and inspect, the image remains completely invisible. It's saved in the same folder and I believe all the file names are correct, but for some reason, it's just not working as expected. Any help would be g ...

Optimizing jQuery Dialog for Different Window Sizes

I am currently developing a responsive website and facing a challenge. I need to implement a popup for window sizes smaller than 480px, but on desktop screens, the content should be visible without being inside the popup. I want to avoid duplicating the co ...

Tips for creating responsive scrollable columns in an HTML table with Bootstrap

I'm not a professional web designer. I attempted to create a web layout with scrollable columns containing data in anchor tags that are loaded dynamically. To achieve this, I created an HTML table structure along with a stylesheet. Here is the source ...

I specialize in optimizing blog content by omitting the final line within a React framework

https://i.stack.imgur.com/WKOXT.png Currently, I have 4 lines and the 5th line in the current input field. This is my React code snippet: import { FC, useEffect, useState } from "react"; interface BlogWitterProps {} const BlogWitter: FC<B ...

Showing child elements within a div using AngularJS

I am eager to create a straightforward AngularJS website that will showcase an initially hidden HTML element along with all of its children. Below is the HTML structure snippet I plan to use: <div class="hiddenStuff"> <h3>Game Over</h3&g ...

Why does this inner HTML table always adjust its width based on the content within it? Is there a way to make it match the width of its container instead

I'm not very familiar with HTML and CSS, and I've come across a problem. Here is the CSS structure in question: <!-- TECHNICAL REFERENCE: --> <div id="referenteTecnicoTab"> <table width="800px" class="standard-table-cls table-he ...

"Change the value of a style setting in React to 'unset

One of the components has CSS properties such as `right` and `bottom` that are set with a classname. I tried to override these values using the `style` prop but have only been successful in setting numerical values like `10px` or `0px`, not `unset`. Wha ...

What is the best way to position a div as a footer within a larger main div?

I am aiming to create a div with simple header, content, and footer sections. Here is the design I am trying to achieve: https://i.stack.imgur.com/QfnGa.png You can check out my code on jsfiddle. I'm having trouble understanding how the relative lay ...

Obtaining visuals in a specific manner

I have a customized slider (flexslider) with 10 images per slide. The images are currently manually inserted, but I want to optimize the slider to dynamically extract images using PHP. However, my current setup only displays one image per slide. How can I ...

Positioning custom buttons using CSS and HTML

Need help with centering a button inside a div within a table cell. Is there a way to determine the current size of the hovered-over div and position the button in the middle both vertically and horizontally? https://i.sstatic.net/6NQ9J.jpg I hope you ...

Repairing the Left-sided Popup Leaflet

Can someone help me with fixing the positioning of the Popup to the left of the map? Currently, it does not stay aligned to the left edge when moving the map. I tried using position: fixed in my styling, and while everything looks good when zooming, it br ...

Is there a way to eliminate the number spinner in Angular specifically for certain input fields?

I am facing an issue where I need to remove the numeric spinner from only a few selected inputs. By adding the following code snippet to my styles.scss file, I was able to successfully remove the spinner: /* Chrome, Safari, Edge, Opera */ input[matinput]: ...

Enhance your web forms with jQuery Chosen's automatic formatting feature

Having trouble adding a feature to my multi-select input box using jQuery Chosen. The current functionality allows users to enter custom values not in the list. The new feature should automatically format numbers entered by users, for example: User input ...

The :root selector has encountered a malfunction within the Angular component

I'm interested in experimenting with CSS variables in my Angular 11 component. <div class="main-content"> <a>Test Link</a> </div> Here is my app.component.css: div.main-content{ --main-color: red } a{ color: v ...

How to eliminate looping animations with jQuery

While looping through items, I am encountering an issue where an animation triggers when the loop returns to the first div. I simply need a way to switch between divs without any animations on a set interval. $(document).ready(function () { function s ...

"Interaction with jQuery causes button element to shift position upon resizing of browser

I am encountering an issue with a div element that has jQuery appended to it for a bounce effect. The element is absolutely positioned within its relative parent. However, when the browser is resized, the child element does not remain centrally aligned dur ...

Adjusting the color of an HTML slider button as it moves

In my setup, I have a straightforward slider that I plan to use for controlling the movement of a stepper motor based on the slider's position. I wanted to give the website where this will be hosted a professional look, so I've spent quite some t ...

Display or conceal elements based on the screen size using Bootstrap 3 classes

While this may seem straightforward for some, the reality is quite different. I have two images that need to be displayed based on screen size. In my HTML code, I used classes like hidden-md, hidden-sm, and hidden-xs assuming they would only show on larg ...

Aligning a rotated paragraph in the middle of its parent container

Here is my current progress: http://jsfiddle.net/2Zrx7/2/ .events{ height:100px; position: relative; } .tt_username{ position: absolute; top:0px; height: 100%; width: 30px; background: #ccc; text-align: center; } .tt_usern ...