Tips for dynamically retrieving a CSS file for an HTML page

With multiple html pages containing the same navbar, I made the decision to place the navbar in its own file called navbar.html and use ajax with jquery.get() to dynamically load it onto each page. This prevents redundant code across all pages.

Currently, there is no stylesheet included in navbar.html as the styles are applied when loaded back onto the calling page.

Should I include the .css in the navbar.html, even though they both reference the same 2 stylesheets? While it seems possible, I haven't tested this yet. It could make future changes easier. What is the best practice here without using server-side code?

If there is a more conventional approach that you know of, please advise. Coming from a .net web forms background, I would typically use a master page. Any relevant links for further information on this topic would also be appreciated.

Answer №1

Take a look at the code snippet below:

To get started, create an index.php page
Next, include your navbar.php in index.php using <?php include'navbar.php';?>

Follow these steps to activate the button on each page:

1- Define the name of your page: <?php $page = 'company';?>
2- Create an active class in your CSS file
3- Apply the active class to the button

<!-- begin snippet: js hide: false console: true babel: false -->

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

The impact is felt across every button in CSS

Why is this happening? When I hover over a button, all buttons apply the effect, which should not be the case. I only want the effect to be applied to the button that I am hovering over. .buttons{ font-family: arial; text-decoration: none; padding ...

Splitting the div into two columns

I've encountered various solutions to this issue, but when I integrate an Angular2 component inside the divs, it fails to function properly. Here is my progress so far: https://i.stack.imgur.com/qJ8a9.jpg Code: <div id="container"> <div ...

Having trouble with setting the margin-top of a div?

When I attempted to apply the margin-top property to a div's style, it didn't have any effect. https://i.stack.imgur.com/jyY2G.png Below is the code snippet: .side { margin-left: 65%; margin-top: 3%; margin-right: 3%; border: 1px sol ...

I am having trouble with node.js express not recognizing the path to my CSS files

My objective is to load information onto an HTML page using Node.js and Express. The issue I am facing is that when I try to open the main page (which displays all the books from the database), everything works smoothly - the CSS and JS files are located ...

Retrieve data from ajax request and display it in view template without the need for a form

I am using a div class that retrieves content from a for loop queryset. <div class="form-group row"> <div class="col-md-4">Contract Number</div> <label class="col-md-8" id="so_hd_goc&q ...

A step-by-step guide on duplicating the functionality of the jQuery

Issue at Hand: I'm attempting to recreate the functionality of jQuery's ajax method as I find myself utilizing XMLHttpRequest multiple times within a script. However, I am hesitant to include jQuery as a dependency since I only require a few meth ...

What is the process behind the creation of the class or id fields in HTML for Gmail and Quora? How are these

When using Gmail: <tr class="zA yO" id=":1t4"> While on Quora: <span id="ld_zpQ1Cb_27965"> What is the purpose behind this and what specific tool do they employ to achieve it? ...

Concealing scroll bars while still maintaining the ability to scroll by using overflow:scroll

Similar Question: How to hide the scrollbar while still allowing scrolling with mouse and keyboard I have created a sidebar for a web application that needs to enable users to scroll through it without displaying a scrollbar. The content is 500px high ...

Recreate body content with JQuery Mobile

I've been attempting to duplicate the entire HTML content within the tags. However, even though the appearance on screen is correct, none of the links are functioning.</p> <p>To view the fiddle, click here: [Here is a fiddle][1]</p> ...

no such file exists in the directory

My current project involves connecting a javascript file to an html file using the <script> tag. However, upon rendering the html page, I encountered an error in the console indicating that the javascript file could not be located. Here is the struc ...

Retrieving Information from Website Components in JavaFX Web View

I am currently developing a Java FX program that loads a folder containing HTML/CSS/JS files with 3 different websites. While the websites are displaying correctly in the webview, I am looking for a way to capture user interactions, such as checkbox selec ...

What is the method for adjusting the position of materialize CSS select options?

https://i.stack.imgur.com/b9p9T.png One issue arises when I open the Materialize CSS select, as the options end up covering the input. Ideally, I prefer the options to appear underneath the input. <div class="input-field "> ...

Fetching a JSON object from an external URL using JavaScript

Currently, I am working on a project using JavaScript and have an API that provides me with a JSON Object. You can access this JSON object by clicking on the following link: . Within this JSON object, there is a specific element located at JSONOBJECT.posi ...

Trouble getting PHP and AJAX FormData to communicate with each other

I'm completely baffled! Ajax doesn't seem to be sending the file to PHP, and I can't figure out why. Can anyone make sense of this? Here is the code snippet: ----- HTML ----- <input id="mmSelectedDoc" name="selectedFiles[]" type="file" ...

inquiry on php function properties

I have a PHP file containing two functions. <?php function first () { //in real case more conditions echo "first"; return true; } function second () { //in real case more conditions echo "second"; return true; } first(); second(); ?> And in an ...

Tips for eliminating a worldwide ajax event handler using jQuery

Although it may not be the most advanced question (I am a beginner in JQuery), I am facing an issue: Whenever a specific button is clicked on my website, I must add a function that registers a global ajax event handler (.ajaxSend to be precise) and verifi ...

Error message: An attempt to call an undefined function get_query_var() has caused a fatal

Recently I encountered a file named: taxonomy-product_cat-ford.php On my homepage, there is a menu that displays: All car | ford | toyota By default, the homepage always shows all cars. To specifically load the content of taxonomy-product_cat-ford.php, I ...

Creating a dynamic dropdown menu based on a class value using JavaScript in PHP

There are two dropdown menus on my webpage that display information from my SQL table. The first dropdown contains different "Colors," and the second dropdown contains members associated with each color group. Each member is categorized into different optg ...

Ensure that text input is restricted from containing any HTML or script tags when utilizing the Web API within an HTML page

On a html page, there are two text boxes provided for entering Employee Name and Employee Age, along with a Save button. Clicking this button triggers the Web API method called SaveEmployeeData to save the data. This Web API is hosted on an asp.net website ...

Checkbox label covering checkbox

I've been trying to enhance a login page with checkboxes by implementing code from react-bootstrap.github.io The issue I'm facing is that the checkboxes are overlapping their corresponding labels. Below is the snippet from my register.js file: ...