Change the position of the specified footer on the one-page website

I am currently in the process of creating a single-page layout website. What I want is to have the elements with the class "footer-bar" positioned absolutely on each page, but on the #Home Page, it should be position relatively.

Does anyone have any suggestions on how to make specific changes to individual pages? I don't want to have the footer written into every page, just once. I only need a CSS change if I am on the #Home page.

Thank you for any ideas.

<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#Other">Other</a></li>
</ul>

<ul class="tabs-content">
<li id="Home"> Content for Home Page </li>       ---->Footer position:relative
<li id="Other"> Content for Other Page </li>     ---->Footer position:absolute
</ul>

<div class="footer">Footer Content</div>
htmlcss

Answer №1

It seems like your question is a bit unclear, but based on my interpretation, this code could potentially solve your issue:

.footer-bar {
position: absolute;
/* add any other necessary styles */
}

.footer-bar#Home {
position: relative;
/* add more custom styles here */
}

UPDATE:

To make the #Home in the CSS above a .Home, incorporate the following jQuery code within the required function.

$(".footer-bar").addClass("Home");

Alternatively

$(".footer-bar").css("position","relative");

Answer №2

To achieve this, consider using Jquery for the task at hand.

It is important to have a method in place to determine which tab is currently active. Therefore, implement a click event on your navigation links that will add or remove an .active class to your tabs accordingly.

Once you can identify the active tab, check if it corresponds to the 'home' tab and make any necessary CSS adjustments.

If this explanation seems unclear, I can create a sample demonstration for you. =)

Answer №3

This is the method I used:

$("#navpoint1, #navpoint2, #navpoint3, #navpoint4").on("click", function () {
         $(".footerbar").css({

         position: 'absolute',
         bottom: '0'

         });
     });

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

Manipulating a specific element within an ng-repeat in AngularJS without affecting the others

I'm currently working on developing a basic single page application to monitor people's movements. While I've made good progress, I've encountered an issue with the click function in the child elements of each person div. When I try to ...

javascripthtmlangularjs

The functionality to move forward and backward in Modal Bootsrap seems to be malfunctioning

I am in need of assistance as I have encountered a major issue that has halted my work progress for several days. My goal is to implement a feature that allows users to navigate between different days both forwards and backwards. While the functionality it ...

javascripthtmljquerycss

In PHP, you can use the `echo` statement to output an HTML input

Incorporating HTML into PHP using heredoc methodology can sometimes lead to challenges when trying to retrieve user input variables. Attempting to access the input variable with $_GET["input"] may result in an error message indicating an undefined index: ...

javascriptphphtml

Trouble with sending SMTP emails from Flask app (Error 500)

Currently, I am in the process of developing a website using Python and Flask where I have successfully implemented a Contact Form Modal. The modal opens up smoothly allowing me to fill it out (many thanks to the supportive community <3), however, upon ...

htmlflaskbootstrap-5flask-mail

Obtaining the date input value from the ng2-date-picker component in Angular2

I am struggling to extract the value from a date picker input field (ng2-date-picker). Despite attempting various methods to retrieve the value, I have not been successful. For reference, here is the link to the npm package I am utilizing. This represent ...

htmlangulartypescript

Tips on elevating a dragged div above all other elements when utilizing two scrollbars

Currently, I have two horizontal scrollers where I need to drag a div from the upper scroller to the lower scroller. While this functionality is working properly, there is an issue with the dragged div getting lost under the borders of the scroller during ...

javascriptjqueryhtmlcssscroller

What is the best way to extract words from a string within a textarea using javascript?

Currently, I am focused on improving my skills in JavaScript and HTML. In one of my projects, there is a text area where the user inputs a CSV format like this: 17845 hello bye 789 After input, I get 17845,hello,bye,789. Now, the challenge is t ...

javascriptjqueryhtmlcsvtextarea

Generate a separate div in an HTML file for each item listed in a JSON document

I have a JSON file structured like this: { "text": "HelloWorld", "id&quo;t: "1", }, { "text": "HelloMoon", "id": "2", } Now, I want to generate a <div> in my HTML for ...

javascripthtmljson

Is the order in which properties are executed always the same in CSS rules?

Have you ever wondered about the way browsers handle CSS properties within the same rule? The topic of rules precedence has been discussed at length, but this specific question focuses on the execution order by the browsers. In my view, I have always assu ...

cssproperties

Bootstrap: Troubleshooting Margin Problems

I am currently utilizing the Bootstrap sb admin template. I attempted to include 3 columns in a row, but encountered the issue of them being merged together with no space around them. I experimented by modifying the Bootstrap file through a CDN link and pr ...

htmltwitter-bootstrapcss

The placement of buttons in a responsive web design

Need help with adjusting button positions in mobile mode relative to text. Tried using different position settings like absolute and relative, but buttons are not staying aligned with the text on mobile devices. Can anyone assist? .button { display: b ...

htmlcss

I recently encountered an issue where the Google Chrome Element Inspector (Developer Tools) unexpectedly removed an HTML element from

While using WordPress, I noticed a strange issue on the admin side when utilizing Google Chrome v.32 Element Inspector (Developer Tools) - some of the elements in my HTML seem to disappear. However, when I view the page without the Developer Tools, all the ...

htmlwordpressgoogle-chromegoogle-chrome-devtools

Navigate to the parent element in the DOM

Looking to add some unique styling to just one of the many Mat dialog components in my project. It seems like modifying the parent element based on the child is trickier than expected, with attempts to access the DOM through the <mat-dialog-container> ...

htmlcssangulartypescriptdom

Tips for modifying the appearance of a text file within an iframe

Lately, I've been facing a dilemma on my website. I have an iframe code that looks like this: <iframe src ="http://hokuco.com/cde/user.txt" id ="myIframe"></iframe> However, the consolas font used in the iframe makes my website appear ...

htmlcssiframe

Guide to Generating a Dynamic HTML Menu

Is "dynamically" the correct term for what I'm trying to achieve? * I am looking to have a basic one-level menu appear on every one of the 80 pages on my website. The menu items will be updated regularly - some added, some removed, and so on. What is ...

htmlmenu

Applying Bootstrap classes to adjust font weight

Are there any pre-existing Twitter Bootstrap classes that can be used for styling font weight, such as font-weight: bold and other variations? I'd prefer not to reinvent the wheel if Bootstrap already has this capability. ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

A guide on sending multiple input values using the same class name or id through ajax

My goal is to send multiple input values through AJAX to my PHP script. Everything works smoothly when I use getElementById. However, I have the functionality to add a child. The issue arises when it only retrieves values from the first child while iterati ...

javascriptphpjqueryajaxhtml

Learn how to create a responsive flickr embedded video with Bootstrap!

I'm struggling to make the embedded video responsive. I attempted the solution mentioned in a Stack Overflow post but it didn't work for me. The video's width remains the same and doesn't scale down properly, appearing out of bounds on ...

htmlcsstwitter-bootstrapvideoflickr

Stopping the WordPress gallery at the end without looping using Elementor

Is there a way to make my gallery stop at the end of the last picture without having to add any jQuery code? I inserted this gallery using elementor widgets and would appreciate your help on this matter. Additional information: Upon clicking on an image, ...

htmljquerywordpressgalleryelementor

Creating personalized static HTML cards with PHP Mirror API for Google Glass

Looking to integrate an HTML formatted card into Google Glass timeline using the Mirror API. Utilizing the PHP PHP Mirror Client API, which accepts a message and image as parameters, displaying the image in the background similar to this example: insert ...

phphtmlgoogle-glassgoogle-mirror-apiaero-glass