Currently, I am developing a website where all the pages slide around on the main landing page. The process starts with a div having an ID of "main" and a class of "currentpage." When navigating through the menu items, the content slides away to reveal the next page's content. Each new page has its own unique ID (for example, #about) along with the "currentpage" class added to it.
One issue I encountered is related to the body tag, which has a background image attached to it. Initially, each page had its own background image specified, but due to padding in the primary div, the original image from the body tag still showed behind the specified background image for that particular page. As a solution, I want to dynamically change the body tag's background image based on the currently active page ID.
I believe step one would involve checking whether a specific ID is being displayed and if the corresponding div has the "currentpage" class. Step two would then entail changing the background image accordingly.
Here are the attempts I made, none of which worked successfully:
Attempt 1:
if ($this.is('#about')) {
$('.bgimage').css({"background":"url(imageurlhere)"});
}
The above code did not produce any results as expected.
For my second attempt, I modified an old thread from Stack Overflow to test whether the concept was heading in the right direction. Here is the altered code snippet:
Attempt 2:
if ($("#about").hasClass("currentpage")) {
$('#about').css({"background-color":"red"});
}
Unfortunately, this also did not yield the desired outcome when navigating to the About page.
I ensured to clear the cache after each attempt and verified the presence of updated code blocks in the JS file manually.
Edit
The basic layout of the page includes the following structure:
<body class="video">
<div class="preload">Content for preload overlay</div>
<nav>Site navigation here</nav>
<main>
<div id="pt-main" class="pt-perspective ">
<div class="page-1 currentpage" id="main"></div>
<div class="page-2" id="about"></div>
<div class="page-3" id="services"></div>
<div class="page-4" id="portfolio"></div>
<div class="page-5" id="contact"></div>
</div>
</main>
As users click on different nav links, the "currentpage" class transitions from one div to another, highlighting the active page.
The CSS for the body tag is as follows:
.video {
background: url(../img/video_bg.jpg);
background-size: cover;
}
I aim to modify the background image of .video depending on which page is active - #about, #services, #portfolio, etc.
TL;DR
I require assistance with implementing a code block that checks for a specific ID within a div that also contains a certain class, allowing me to customize the background image using CSS.?
Edit 2:
In order to address the issue, I devised a workaround strategy including the following steps:
1) Set the overall background color to #000, removed the original bg-image completely, and reintroduced a full-screen video that was previously hidden
2) Modified each nav menu item to include a hidevid class, except for the Home link which became showvid
3) Implemented CSS rules for each page ID (e.g., #about {background-image: url(image);}
4) Created a new CSS class: .hidethis {display: none;}
5) Used the following jQuery script:
$(document).ready(function(){
$(".hidevid").click(function(){
$("video").addClass("hidethis");
});
$(".showvid").click(function(){
$("video").removeClass("hidethis");
});
});
This approach resulted in capturing the essence of the desired effect by changing the background to black only visible when transitioning between pages while maintaining the video display on the landing ("home") page. Clicking on the navigation menu triggers the "slide" effect showing the respective background image and hiding the video element along with other contents represented by the nav menu against a black backdrop.