Switch the ID Class Depending on the URL - Image Replacement with URL Detection -

Question

Switch the ID Class Depending on the URL - Image Replacement with URL Detection -

My Goal: I am attempting to dynamically assign a different class to the div element "logoswap" based on the current URL (e.g., foo.com/item1).

Below is the code I have put together, but it appears to be flawed. While I am more proficient in XHTML/CSS and have some experience with PHP, I am not an expert in JavaScript. Unfortunately, I cannot utilize PHP for this task even though I know it could be done with PHP. I have a PHP version that accomplishes what I need, but I am struggling to integrate the PHP functionality properly.

Essentially, I am trying to display a different logo depending on the directory or URL. The image does not necessarily have to be called in as a background element using a CSS class, I just need it to change based on the URL parameter mentioned above...

  $(function() {
  var url = location.pathname;

  if(url.indexOf('item1') > -1) {
    document.getElementById("logoswap").className += " class1";
   }

  elseif(url.indexOf('item2') > -1) {
    document.getElementById("logoswap").className += "class2";
   }

  elseif(url.indexOf('item3') > -1) {
    document.getElementById("logoswap").className += "class3";
   }

  elseif(url.indexOf('item4') > -1) {
    document.getElementById("logoswap").className += "class4";
   }

  elseif(url.indexOf('item5') > -1) {
    document.getElementById("logoswap").className += "class5";
   }

  else {
    document.getElementById("logoswap").className += "class1";
   }

  });

This is my current implementation which may not be the most aesthetically pleasing.

I have reached out because I require assistance in improving it.

javascript css url if-statement

Answer 1

Answer №1

Applying CSS Class Based on URL Pathname

You can check out the solution in action on jsfiddle.

Here's an example where utilizing numeric expressions could be beneficial, although it doesn't directly relate to the previous question.

$(function() {
  var rgx = /item(\d+)$/,
      url = location.pathname,
      id = (rgx.test(url)) ? url.match(rgx)[1] : '1';
  $("#logoswap").addClass("class" + id);
});

UPDATE:

Given the new information, you might require an array of values that align with the intended class names.

$(function(){
  // Creating a string array
  var matches = "brand1 brand2 brand3".split(" "),
      url = location.pathname.match(/\w+$/)[0], // retrieving the last item
      id = matches.indexOf(url),
      className = matches[(id > -1) ? id : 0];
  $("#logoswap").addClass(className);
});

To put this into effect, certain prerequisites must be met such as ending paths with a number as specified here and ensuring image accessibility along with defining styles for each possibility.

CSS Configuration

#logoswap {
  height: 200px;
  width: 200px;
}
.class1 {
  background-image: url(/path/to/default.jpg);
}
.class2 {
  background-image: url(/path/to/second.jpg);
}
.brand1 {
  background-image: url(/path/to/brand/1/logo.jpg);
}
...

Without jQuery

If jQuery isn't being utilized, you can turn to using window.onload.

(function(){
  var old = window.onload;
  window.onload = function(){
    old();
    var r = /item(\d+)$/,
        url = location.pathname,
        id = (r.test(url)) ? url.match(r)[1] : '1';
    document.getElementById('logoswap').className += "class" + id;
  };
})()

I want to emphasize the importance of understanding Regular Expressions for anyone working with code like this. They are incredibly useful across various programming languages.

Answer 2

Applying CSS Class Based on URL Pathname

You can check out the solution in action on jsfiddle.

Here's an example where utilizing numeric expressions could be beneficial, although it doesn't directly relate to the previous question.

$(function() {
  var rgx = /item(\d+)$/,
      url = location.pathname,
      id = (rgx.test(url)) ? url.match(rgx)[1] : '1';
  $("#logoswap").addClass("class" + id);
});

UPDATE:

Given the new information, you might require an array of values that align with the intended class names.

$(function(){
  // Creating a string array
  var matches = "brand1 brand2 brand3".split(" "),
      url = location.pathname.match(/\w+$/)[0], // retrieving the last item
      id = matches.indexOf(url),
      className = matches[(id > -1) ? id : 0];
  $("#logoswap").addClass(className);
});

To put this into effect, certain prerequisites must be met such as ending paths with a number as specified here and ensuring image accessibility along with defining styles for each possibility.

CSS Configuration

#logoswap {
  height: 200px;
  width: 200px;
}
.class1 {
  background-image: url(/path/to/default.jpg);
}
.class2 {
  background-image: url(/path/to/second.jpg);
}
.brand1 {
  background-image: url(/path/to/brand/1/logo.jpg);
}
...

Without jQuery

If jQuery isn't being utilized, you can turn to using window.onload.

(function(){
  var old = window.onload;
  window.onload = function(){
    old();
    var r = /item(\d+)$/,
        url = location.pathname,
        id = (r.test(url)) ? url.match(r)[1] : '1';
    document.getElementById('logoswap').className += "class" + id;
  };
})()

I want to emphasize the importance of understanding Regular Expressions for anyone working with code like this. They are incredibly useful across various programming languages.

Answer 3

Answer №2

There's absolutely nothing wrong with your current setup. However, you could enhance it by implementing the following:

$(function() {
    var currentURL = window.location.pathname;
    var logoElement = document.getElementById("logoswap");
    var index = 6;

    logoElement.className = "class1";

    while(index--)
    {
        if(currentURL.indexOf("item" + index) > -1) {
            logoElement.className = "class" + index;
        }
    }
});

I hope this solution proves to be helpful for you.

Answer 4

There's absolutely nothing wrong with your current setup. However, you could enhance it by implementing the following:

$(function() {
    var currentURL = window.location.pathname;
    var logoElement = document.getElementById("logoswap");
    var index = 6;

    logoElement.className = "class1";

    while(index--)
    {
        if(currentURL.indexOf("item" + index) > -1) {
            logoElement.className = "class" + index;
        }
    }
});

I hope this solution proves to be helpful for you.

Answer 5

Answer №3

To include an id to the body of a webpage using solely HTML and CSS, you can do so by adding it (or appending it with JavaScript) in this manner:

<body id="item1">

In your CSS file, establish a selector like this:

#item1 #logoswap {
    // class1 CSS
}

Answer 6

To include an id to the body of a webpage using solely HTML and CSS, you can do so by adding it (or appending it with JavaScript) in this manner:

<body id="item1">

In your CSS file, establish a selector like this:

#item1 #logoswap {
    // class1 CSS
}

Switch the ID Class Depending on the URL - Image Replacement with URL Detection -

Answer №1

Applying CSS Class Based on URL Pathname

CSS Configuration

Without jQuery

Answer №2

Answer №3

Similar questions

What is the process for creating a loading screen using three.js?

Having trouble with Next.js getStaticProps? Getting a TypeError that says "Cannot read properties of undefined (reading 'map')"?

Properly maintaining child processes created with child_process.spawn() in node.js

Retrieving every item from an unnumbered inventory in PHP

What is the best method for sending the styled and checked option via email?

Working with decimal numbers in jQuery and JavaScript: a basic guide

What are some methods to boost height in the opposite direction?

`Position the login page contents in the center`

Creating a cutoff with CSS: A step-by-step guide

Revamping the Bootstrap admin template

Encountering issues with @media queries: W3C CSS Validation Service is reporting an error

Detecting Unflushed Requests in Jasmine and AngularJS

GraphQL query must receive an object for the Mongo filter, but instead, it received a string

What is the best way to align bootstrap col-md-4 and col-md-5 in the center of a webpage?

What is the best approach to create a customized array using or not using spread syntax in this scenario?

The feature for height is not functioning correctly on IOS devices, specifically iPhones

The blur() function in -webkit-filter does not seem to function properly in Vue.js

Utilize Node.js to parse JSON data and append new nodes to the final output

Easier way to transform tables into panels for compact browser sizes

Should you stick with pre-defined styles or switch to dynamic inline style changes?