Change background according to URL query

My goal is to dynamically change background images based on a URL parameter, specifically the destination code. With numerous background images available, it's crucial to display the correct one depending on the URL string. For instance, if the URL reads:

a corresponding background image should be linked to the 'ord' query.

Given the variety of station codes ('ord', 'lax', etc.) and corresponding images named 'dest-a', 'dest-b', and beyond, I aim to develop a function that automates the process of displaying the appropriate image based on the station code provided.

While my current script utilizes an if/else statement for this purpose, I'm seeking a more efficient approach to avoid manually assigning each station code with its respective background image within the 'bgImgs' object. How can I design a function that effortlessly swaps background images in alignment with the station code extracted from the URL query?

Answer №1

function setStationBackground (stationCode) {

    var path = "assets/images/stations/";
    var background = null;

    switch (stationCode) {
        case "nyc":
        case "bos":
        case "atl":
        case "mia":
            background = "city-a.jpg";
            break;
        case "chi":
            background = "city-b.jpg";
            break;

        /* More cases here... */

        default:
            background = "city-c.jpg";
            break;
    }

    var backgroundImageUrl = "url(" + path + background + ")";
    document.getElementById("main-content").style.backgroundImage = backgroundImageUrl;
}

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 Jquery script seems to be malfunctioning on one specific page while working perfectly fine on

I received a jQuery script from a foreign web page that I'm trying to implement on my own site. $(function () { var $txt = $('input[id$=TextBoxFiltroProv]'); var $ddl = $('select[id$=DropDownListProv]'); var $items = $ ...

The output.library.type variable in WebPack is not defined

Currently, I am delving into WebPack with a shortcode. As part of my learning process, I am working on a code snippet that involves calculating the cube and square of a number, which are then supposed to be stored in a variable outlined in the webpack.conf ...

Creating a Rails application that dynamically fills a table with data from a

Encountering an issue with Ruby on Rails. I have a "Host Model" that contains a method which has a longer runtime. class Host < ActiveRecord::Base def take-a-while # implement logic here end Attempting to access a page where this method ru ...

general declarations take precedence over media queries

One of my usual CSS rules looks something like this: #dayslist > div { height: 51px; } Then there's the media query CSS rule: @media (max-width: 979px){ #dayslist > div { height: 44px; } } However, whenever I resize my bro ...

Begin the initial function again once the second function has been completed

I have 2 functions in my code: function DisplayAltText(){ var CurrentPhoto = $("#DisplayPhoto img").attr("src"); if( $.browser.msie ) { IECurrentPhoto (CurrentPhoto); } if ($(".PhotoGallery img[src='" +CurrentPhoto+ "&a ...

When the ajax action is [Authorize], the login page is displayed within the UpdateTargetId

The AJAX form I have is linked to an action method. I would like this form to maintain the [Authorize] feature. Here is the AJAX Form: @using (Ajax.BeginForm("Vote", "Rate", null , new AjaxOptions { ...

The functionality of the jQuery function is disrupted when I navigate to a different page/row or perform a search for specific items

Recently, I created a JQuery function that deletes the selected row. Although I am aware of the DataTables option available for this purpose, I chose to implement it myself using just JQuery and JSON without relying on AJAX. However, a problem arises when ...

Hovering Div Issue

I have two divs named me and bubble nested within another div called holder. I am trying to trigger an action when a user hovers over the holder div. Strangely, the action works properly when I hover over me, but it doesn't seem to register when I hov ...

I'm trying to figure out the best way to successfully pass a prop to another component in TypeScript without running into the frustrating issue of not being able to

I have been facing an issue while trying to pass a prop from a custom object I have defined. The structure of the object is as follows: export type CustomObjectType = { data?: DataObject }; export type DataObject = { id: number; name: stri ...

Tips for implementing jqgrid's inline editing feature using arrow keys

Currently, I have implemented inline editing on jqgrid and it is functioning flawlessly. Whenever the user finishes editing a cell and presses enter, the changes are saved successfully. However, I am now looking to enhance the navigation experience for t ...

Is it considered acceptable to modify classes in a stateless React component by adding or removing them?

My stateless component functions as an accordion. When the container div is clicked, I toggle a couple of CSS classes on some child components. Is it acceptable to directly change the classes in the DOM, or should I convert this stateless component to a ...

Trying to modify the chosen option while filtering an ajax source using select2?

I am currently integrating the select2 library within a Bootstrap 4 modal in the following manner: <div class="form-group" id="fg-jbInd"> <label for="jbIndustry" class="control-label"gt;Industry * <sele ...

Best Practices for Implementing JSON.stringify() with an AJAX Request

While I have a limited understanding of ajax and JSON, I am aware that using JSON.stringify in an ajax call can sometimes be beneficial. The ajax call below is functioning properly, whereas the one following it with the stringify method is not. I am unsure ...

Fulfill all of the promises within Bluebird, as well as decline any that do

I am in search of a method to retrieve both successful resolutions and rejections from a promise array. I am relying on the Bluebird implementation, so any ES6 compatible solution would be preferable. One option that comes to mind is utilizing Bluebird&ap ...

Unselecting a span in AngularJS: Switching selection to another span

Whenever I click on an item from my list displayed using ngrepeat, it generates another list specific to the selected element. My goal is to change the background color of the clicked element to indicate it has been selected. However, the problem arises wh ...

The validation process fails when the button is clicked for the second time

When adding a username and email to the userlist, I am able to validate the email on initial page load. However, if I try to enter an invalid email for the second time and click the add button, it does not work. <form id="myform"> <h2>Ad ...

When hovering over the main menu, the submenu appears hidden behind it

I am struggling with setting up a dropdown submenu on my website that uses a responsive Joomla template. The submenu always appears behind the main menu and slider, despite trying z-index and relative positioning. Can anyone help me figure out what I' ...

Tips for managing various potential return types in TypeScript?

In my research on the topic, I came across a discussion thread about obtaining the local IP address in Node.js at Get local IP address in Node.js. In that thread, there is a code snippet that I would like to incorporate: import net from 'net'; c ...

Retrieve data from the database by selecting an option from the dropdown menu

I am currently facing a minor issue with the filtering system I am developing. The problem arises when selecting the "All" category from a dropdown menu, which is not part of the database but a separate HTML option. Here is a visual representation of the ...

Scaling divs proportionately using a container

I have numerous elements enclosed within a <div class="wrapper">. My aim is to resize this outer div and ensure that the inner elements scale proportionately along with it. For instance, when dealing with a group of SVGs, adjusting the transform pro ...