Utilizing Jquery to locate the current URL for the purpose of changing or adjusting the class

Looking for a way to use jQuery to dynamically update the margin properties of a specific class based on the current page – whether it's the homepage, admin page, or a common page. The targeted class in question is "breadcrumb."

.breadcrumb{margin-top:10px;margin-left:20px;}

To accomplish this task, we first need to identify the current URL by utilizing:

 var pathname = window.location.pathname;

Once we have obtained the current path, our goal is to distinguish between admin pages, homepages, and common pages. For common pages, the margin-left value should be set to 15px, while both home and admin pages should have a margin-left value of 20px.

Example URLs:

- Admin page: www.mydomain.com/admin

- Homepage: www.mydomain.com

- Other pages: www.mydomain.com/......

If anyone has suggestions on how to achieve this functionality or knows of a more efficient approach, any assistance would be greatly appreciated.

jquerycssjquery-selectors

Answer №1

To avoid using javascript/jQuery, my preference would be to assign a specific class (such as <body class="admin"> and <body class="hp">) for admin pages and homepages. Subsequently, I would implement the following CSS code:

.breadcrumb {
    margin-top: 10px;
    margin-left: 15px;
}

.hp .breadcrumb,
.admin .breadcrumb { margin-left: 20px; }

Answer №2

To implement this with jQuery, follow these steps:

        $(document).ready(function() {
            var path = "window.location";

            var segments=path.split('/');

 //check if it is an admin or home page

            if(segments[1]=="admin"||segments[1]==""){

                $("body").css("margin-left","20px");


            }

          else{
          $("body").css("margin-left","15px");

           }
        });

Answer №4

To determine which pathname to use, I would utilize the .split('/') method and then verify if the pathname[1] is equal to '', 'admin', or any other value.

Answer №5

if(pathname === admin || pathname === "")
{
 $("body").css("margin-left","20px");
}
else
{
 $("body").css("margin-left","15px");
}

Add the following code inside document.ready function

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

A guide to displaying jQuery UI autocomplete on an HTML textbox

Here's my code snippet: I've been trying to implement autocomplete functionality by fetching values through Ajax, but I've hit a roadblock. Despite going through numerous solutions on Stack Overflow, I haven't been able to resolve the i ...

jqueryhtmlajaxjquery-uijquery-ui-autocomplete

Toggling multiple sets of checkboxes using Jquery

Currently, everything is functioning as expected, but there seems to be a minor issue... In my setup, I have 2 sets of checkbox blocks labeled Group A and Group B If I choose 'all' for Group A, all checkboxes in that group toggle their state ac ...

jquerycheckboxtoggle

Ensure the left and right screen widgets remain fixed in their positions as the user scrolls down the page using the spacebar

Currently, I have a webpage that showcases products with a large height attribute. I am looking for a way to make the page scroll down when the user hits the space bar to view more products. However, I want my screen widgets such as the shopping cart and ...

javascriptcsspositioning

Requesting data from an ASP.NET MVC web API using an Ajax call

I have been working on an MVC app and trying to establish an AJAX connection to a web API controller. However, the error message that keeps appearing is "Unidentified". Additionally, when I attempt to throw a random exception in my api controller delete ac ...

asp.net-mvcjqueryasp.net-web-api

Retrieve the element by its Id for precise targeting on a particular webpage

I'm new here and looking for some assistance, so please help if you can :) I'm working on a web page but encountered an issue that I hope you can help me solve. Here are the 3 files involved: home.html --> Main page login.html --> Page ...

javascripthtmlcssiframe

Displaying AJAX Confirmation in a Popup Window

My form is set up to insert data into a database via an AJAX request. Upon successful insertion, the "rentinsert.php" will display a success message on the page that reads "Your order has been placed". However, I would like this success message to appear i ...

javascriptphpjqueryhtmlajax

Receive the complete HTML page as a response using JavaScript

When making an Ajax post to a specific page, I either expect to receive an ID as a response if everything goes smoothly, or I might get a random html page with a HTTP 400 error code in case of issues. In the event of an error, my goal is to open the enti ...

javascriptjqueryajax

Clicking anywhere outside a popup menu in JavaScript will deactivate a toggle and hide it

I have three different menu options: home,Clinic, and About. When I click on the Clinic option, a Megamenu appears, and if I click on it again, the Megamenu is hidden. I want the Megamenu to hide when clicking anywhere on the webpage. The issue is that cu ...

javascripthtmljquery

Implementing AJAX and mySQL in jQuery Sortable

Hello, I have successfully implemented a sortable list on the backend of my website to manage categories. The list updates the database using an Ajax call without needing to reload the page. However, I am facing an issue where the order number displayed in ...

phpjquerymysqlajaxjquery-ui-sortable

improved efficiency through the use of ajax technology

When I make simple ajax requests like this: $.ajax({ type: "POST", url: "atuamae.org/send.php", data: dataString, success: function() { //display message back to user here $('#message').val(''); } ...

phpjqueryajaxperformance

What could be the reason for the incorrect parsing of this JSON data?

Issue arising due to unparseable JSON in JavaScript and jQuery API. Here is the code snippet: JSON parsing issue in JavaScript: // Code sample: alert(data); // output is an object alert(data.horas[0].hora; // returns undefined The JSON structure: {"hor ...

javascriptjqueryajaxjson

What are a few common methods for using JQuery to create an Ajax request?

In the past, I relied on the ASP.NET update panel control for Ajax operations. However, I have since been advised that using JQuery is a more effective way to make Ajax calls. Can anyone provide me with information on popular methods for making Ajax call ...

jquery

invalid audio element

I'm currently working on building an audio player with a visualizer feature. However, when I try to initiate the audio player by clicking on the input button, my debug console keeps showing this error message: Uncaught (in promise) DOMException: Fa ...

javascriptjqueryhtmlaudio

Choosing a dynamic datepicker element for customization using jQuery

Trying to customize the positioning of a jQuery datepicker and came across an interesting solution on How to control positioning of jQueryUI datepicker. The code snippet suggested is: $.extend(window.DP_jQuery.datepicker,{_checkOffset:function(inst,offset ...

jqueryjquery-uidatepicker

How can I make the columns in my table stand out with different background colors?

I'm currently working on implementing alternating background colors for columns in a table. I have successfully applied CSS to a simple table, but I am facing issues when dealing with more complex tables that involve rowspan and colspan. Can anyone of ...

htmlcsscss-tables

JavaScript: create a button that dynamically changes size and color when scrolling

I have a pulsing button (#scrollarrow) at the bottom of my website that disappears as I start scrolling. The jQuery code responsible for this effect is as follows: $(document).ready(function(){ $(window).scroll(function(){ if ($(thi ...

javascriptjqueryhtmlcss

By checking the active box and completing the fields, the button will be activated

I'm currently working on a form that requires all fields to be filled out and the acceptance checkbox to be checked before the Submit button becomes active. If any entry or the checkbox is subsequently removed, the button should become inactive again. ...

javascriptjqueryhtml

What steps should I take to ensure that the buttons on my restaurant website are correctly displaying the overlays?

I'm currently facing an issue with the functionality of the buttons on my React.js-powered restaurant website. These buttons are located within a component called MenuButtons.jsx and are situated at the bottom of a shorter menu section on the homepage ...

javascriptcssreactjsjsx

Is there a way to apply the $(document).ready(function() to multiple inputs at once?

As a newcomer to JavaScript/jQuery, I am working on a form that contains 4 date selections using DatePicker. Even though the settings for all 4 date selections are the same, I attempted to use dp1 for all of them, but unfortunately, it did not work. While ...

javascriptjqueryfullcalendar

jQuery failing to execute

Can someone help me figure out why my alert isn't working when a button is clicked using jQuery? I'm not sure if it's a syntax error or something else. <!DOCTYPE html> <html> <head> <title>BETA BLOCKER NET</title& ...

javascriptjqueryhtml