Is it possible to adjust the CSS code linked to the HTML tag based on the specific webpage being viewed?

I am facing an issue with the homepage of my website, which uses Scrollmagic.js for smooth scrolling. In order for the sticky footer CSS to work properly on all other pages, the HTML tag needs to have a height of 100%. However, if I add this height value to the homepage, it interferes with the scrolling functionality. Is there a way, using either CSS or jQuery, to dynamically change the height of the HTML tag based on the specific page the user is on?

Alternatively, are there any sticky footer methods available that do not rely on setting the height of the HTML tag to 100% like in the code snippet below:

    html, body {
      height: 100%;
    }

Thank you.

javascriptjqueryhtmlcss

Answer №1

To determine the current page and make CSS adjustments based on it, you can utilize the URL.

JavaScript

window.onload = function() {
    var url = window.location.href;
    var currentPage = url.substring(url.indexOf('.com') + 4, url.length);
    var htmlElement = document.querySelector('html');

    if (currentPage !== "/index.html") {
        /* Modify CSS if not on the index.html page */
        htmlElement.style.height = "100%";
    }
}

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

experiment with jest and react-testing-library for testing functions

I'm having trouble accessing a method inside a functional component in React using Jest and react-testing-library. I attempted to use enzyme, but it seems like everything is shifting towards RTL instead. import React from "react"; const simpleCompo ...

javascriptreactjsjestjsreact-testing-library

The components are not anchored to the window

In the header, I require: The logo to be positioned on the left side of the banner (without space) Both the banner and logo to always be centered on the page regardless of screen size Four images that should always be at the top right corner of the windo ...

csstwitter-bootstraptwitter-bootstrap-3

Pop-up - maintain the initial value

I'm working on a modal using Bootstrap and React. Inside the modal, there's a dropdown with an initial empty option: <select class="form-control" onChange={this.handleSelectCat}> <option disabled selected></option> < ...

javascripthtmltwitter-bootstrapreactjsbootstrap-modal

Top method for showcasing only unique values from various div tags with identical class names

Is there a way to show only unique values from multiple divs with the same class name? <div class="categories">cat 1</div> <div class="categories">cat 1</div> <div class="categories">cat 2</div> <div class="categorie ...

javascriptjqueryhtmljquery-selectors

Unable to assign a value to an indexed property in 'FileList': Setter function for index properties is not enabled

angular.module('myApp') .directive('fileModel', ['$parse', 'uploadService','messageService','CONF', function ($parse, uploadService,messageService,CONF) { return { restrict ...

javascriptangularjsfilelist

Retrieving text from a draggable div using jQuery

I have a draggable div that I can move over another element with the class .outerDiv which contains text content. Is there a way for me to retrieve the text from .outerDiv that overlaps with the draggable div? $(".outerDiv .isStore").draggable({ contain ...

javascriptjqueryhtmlcss

A bottom border that spans the entire width, complete with padding

I am attempting to create a uniform border for each item on my list. However, due to the nested structure of the list, I have used padding to achieve this. As a result, the appearance is as expected and behaves normally. Check out the JSFiddle Example C ...

htmlcsslayoutborder

Determining Asynchrony in Node.js Through Programming

Is there a way to assess if a function can be executed asynchronously without requiring a callback? I am currently working with Node.js on the Intel Edison platform and utilizing mraa. The native C++ functions like i2c.readReg(address) do not have provisi ...

javascriptnode.jsasynchronousintel-edison

Tips for concealing the bar graph while maintaining the visibility of the data labels in HighCharts

Is there a way to hide one bar but keep the data labels in HighCharts? I have 3 bars: Target Realization Percentage I want to display only the first and second bars, with only 1 data label which is the percentage. So, I made some adjustments to my co ...

javascriptjsonhighcharts

Attempting to send a POST request, only to be informed by the form that it is devoid of

I have been struggling with this problem for some time now. I implemented the category_create_post functionality in the categoryController, and everything seems to be set up correctly. I also configured the category_form.ejs to accept user input. However, ...

javascriptnode.jsexpresspost

Arranging array positions in ThreeJS

My BufferGeometry contains an array of x/y/z positions with almost 60,000 points (18,000 values), [3, 2, 1, 3, 2, 1, 3, 2, 1, ...] To obtain random points, I am considering shuffling these positions and then selecting the first 30,000. One idea is to fir ...

javascriptarrayssortingthree.js

JavaScript Class vs Function as Definition

Having trouble locating documentation for this issue. I devised a JavaScript class in the following manner: class Polygon { constructor(height, width) { this.height = height; this.width = width; } area = function() { return this.height ...

javascriptjsfiddle

Setting up Swiper in a ReactJS environment

I've been trying to incorporate Swiper for a slider in my React application, but it's not behaving as expected. Here's what I did: npm install Swiper Then I imported Swiper in the componentDidMount method of my component like this: import ...

javascriptreactjsswiper.js

Material-inspired Design Device Compatible DIV slide with JS, JQuery, and CSS

My goal is to achieve something similar to this: Desired Live Website I am looking for a feature where clicking on the div will slide in content from the right, load an external page inside it, and close when prompted. The slider div should be device c ...

javascriptjquerycssfluid-layoutmaterial-design

I'm looking for a way to implement a jQuery-style initialization pattern using TypeScript - how can I

My library utilizes a jQuery-like initialization pattern, along with some specific requirements for the types it should accept and return: function JQueryInitializer ( selector /*: string | INSTANCE_OF_JQUERY*/ ) { if ( selector.__jquery ) return select ...

javascriptjquerytypescript

Having difficulty modifying styles within the React Material-UI app bar component

I created a unique component and tried to implement it in AppBar, but the styles are not being overridden. I utilized the makeStyles hook which works perfectly fine outside of the AppBar, however, within the AppBar and ToolBar, I am encountering difficulti ...

javascriptreactjsmaterial-ui

What is the process for displaying the attributes of a custom object in Typescript?

I need help returning an array of prop: value pairs for a custom object using the myObject[stringProp] syntax. However, I keep encountering this error message: TS7053: Element implicitly has an 'any' type because expression of type 'str ...

javascripttypescript

Is there a way for me to utilize the imported data from one component in the context API using an arrow function?

I am trying to utilize placeInfo, reviews, detailsInfo, news from a data file. Instead of using value='hello', I am unsure if I can directly use it like this: value={placeInfo, reviews, detailsInfo, news}, as it is producing an error. Should I st ...

javascriptnode.jsreactjs

What is preventing Angular from loading on this Plnkr?

I've spent time researching my problem and testing various solutions, but I still can't seem to resolve it. Angular doesn't appear to be loading correctly in Plunker for some reason. I've heard that ng-app is no longer supported in ne ...

javascriptangularjsplnkr.co

Designate the preferred location for requesting the desktop site

Is there a way to specify the location of the 'Request desktop site' option? Here is the code I am currently using: var detector = new MobileDetect(window.navigator.userAgent); if(detector.mobile() != null || detector.phone() != null || det ...

javascriptphphtmlcss