Integrate the ID attribute in CSS to create a scrolling background

I resorted to using Google Translate, so please don't inquire why.

Currently, I'm working on a script where I am attempting to incorporate a variable (using JavaScript) into a CSS file.

<span id="s-map"></span>

    {background: url('backgrounds/{<span id="s-map"></span>}/1.jpg;');}

The issue I am facing is that I am employing a background scroll and trying to utilize a variable in order to finalize the path leading to the background images /

Here's a brief explanation of the scenario:

(The script is invoked in a game via URL. The page details will be fetched from the game, hence originating the "mapname" variable)

The current map in the game is de_dolls | So mapname= "de_dolls";

function GameDetails(mapname) {
        document.getElementById("s-map").innerHTML = mapname;
    }

    Url ('backgrounds/ {<span id="s-map"> </ span>} / 1.jpg;');}

And now I aim to achieve this result:

Url ('backgrounds/de_dolls/1.jpg;');}

I hope someone comprehends the system....

Below are all the relevant parts of the script:

Javascript.js

function GameDetails(servername, serverurl, mapname, maxplayers, steamid, gamemode) {
        document.getElementById("s-name").innerHTML = servername;
        document.getElementById("s-map").innerHTML = mapname;
        document.getElementById("s-mode").innerHTML = gamemode;
        document.getElementById("s-max").innerHTML = maxplayers;
    }

index.php

<div id="background-scroll">
    <div id="bg1"></div><!-- BG 1 -->
    <div id="bg2"></div><!-- BG 2 -->
    <div id="bg3"></div><!-- BG 3 -->
    <div id="bg4"></div><!-- BG 4 -->
    <div id="bg5"></div><!-- BG 5 -->
    <div id="bg6"></div><!-- BG 6 -->
    </div>

style.css

#background-scroll { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index:-10;}

    #bg1 {background: url('backgrounds/*MAPNAME*/1.jpg;'); background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}

    #bg2 {background: url('backgrounds/*MAPNAME*/2.jpg; ?>'); background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}

    #bg3 {background: url('backgrounds/*MAPNAME*/3.jpg; ?>'); background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}

    #bg4 {background: url('backgrounds/*MAPNAME*/4.jpg; ?>'); background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}

    #bg5 {background: url('backgrounds/*MAPNAME*/5.jpg; ?>'); background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}

    #bg6 {background: url('backgrounds/*MAPNAME*/6.jpg; ?>'); background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}

Many thanks in advance! Please feel free to ask if you have any questions :)

javascriptjqueryhtmlcss

Answer №1

Modifying an external stylesheet through Javascript is not possible, but you can adjust the styling of elements dynamically. Check out this demo on how to implement it: http://jsfiddle.net/wg4MG/

HTML:

 //Remember to add class="maps"
<div id="background-scroll">
    <div id="bg1" class="maps"></div>
    <!-- BG 1 -->
    <div id="bg2" class="maps"></div>
    <!-- BG 2 -->
    <div id="bg3" class="maps"></div>
    <!-- BG 3 -->
    <div id="bg4" class="maps"></div>
    <!-- BG 4 -->
    <div id="bg5" class="maps"></div>
    <!-- BG 5 -->
    <div id="bg6" class="maps"></div>
    <!-- BG 6 -->
</div>

CSS:

//Removed background styles from #bg's
#background-scroll {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index:-10;
}
#bg1 {
    background-size: 100% auto;
    background-size: cover;
    width: 100%;
    height: 100%;
}
#bg2 {
    background-size: 100% auto;
    background-size: cover;
    width: 100%;
    height: 100%;
}
#bg3 {

    background-size: 100% auto;
    background-size: cover;
    width: 100%;
    height: 100%;
}
#bg4 {
    background-size: 100% auto;
    background-size: cover;
    width: 100%;
    height: 100%;
}
#bg5 {
    background-size: 100% auto;
    background-size: cover;
    width: 100%;
    height: 100%;
}
#bg6 {
    background-size: 100% auto;
    background-size: cover;
    width: 100%;
    height: 100%;
}

JS:

function GameDetails(servername, serverurl, mapname, maxplayers, steamid, gamemode) {
    document.getElementById("s-name").innerHTML = servername;
    document.getElementById("s-map").innerHTML = mapname;
    document.getElementById("s-mode").innerHTML = gamemode;
    document.getElementById("s-max").innerHTML = maxplayers;


}
//This function will update the background image to the specified URL with *MAPNAME*
function changeBackground(mapname){
    var maps = document.getElementsByClassName("maps");

    for(var i =0; i < maps.length; i++)
    {
        maps[i].style.background = "url('backgrounds/"+mapname+"/2.jpg')";
    }
}

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

Node JS Request Params 500 Error

When generating the URI, everything appears to be in order and the list data is displayed on the page. However, when sending the request in the request method, a 500 error occurs instead of the body being returned. Here is the URI: http://yufluyuinnepal.c ...

javascriptnode.jsecmascript-6

Unable to access the POST value in the current context

I am having trouble retrieving the values from a simple form that consists of two files: APP.js and FORM.ejs. I am attempting to get the values submitted through the form. APP.js: const http = require('http'); const express = require("express"); ...

javascriptnode.jsformsexpressejs

Can the Browser Handle Quick Sorting of Enormous XML Data?

Currently, our team is facing a problem due to server restrictions that are beyond our control. We are required to use an XML file and parse it using JavaScript/jQuery instead of utilizing a database for a job. Moreover, we do not have direct write access ...

javascriptjqueryxmlxslt

Using Node.js: Interacting with npm inside a module

Is there a more efficient way to implement self-updating functionality for a globally installed module than using the code snippet below? require("child_process").exec("npm update -g module-name"); I came across some documentation regarding installing np ...

javascriptnode.jsnpm

Update the variable using Ajax after the content has loaded

I am struggling with the following code snippet: <?php $num=12; ?> <html> <head></head> <body> <div id="test"></div> <script type="text/javascript"> function fetchContent() { var ...

javascriptphpajaxvariablesload

Using recycled frame buffers in a threejs fragment shader

I'm currently working on a project to develop an app that emulates the effect of long exposure photography. The concept involves capturing the current frame from the webcam and overlaying it onto a canvas. As time progresses, the image will gradually ...

javascriptthree.jswebglfragment-shader

Steer clear of pre-made CSS divs when incorporating them into your

I have created a CSS file that includes the following styles for div elements: div { height:auto; float:left; padding:0px; margin:0px; overflow:hidden; text-align:left; width:auto; } img { border:none; } ul { padding:0; margin:0; } ...

csshtmlintegration

tips for extracting live hyperlinks by accessing hrefs

While parsing the HTML code of a webpage, I am extracting all the links mentioned as hrefs using regex. However, I have encountered a situation where certain websites, like Wikipedia, mention hrefs in the HTML code as a paraphrase. For example: The code s ...

javahtmlparsinghref

Converting camera space coordinates to scene space in three.js

I want to position a cube relative to the camera instead of relative to the scene. However, in order to display it in the scene, I need to determine the scene coordinates that align with the cube's camera space coordinates. I came across the function ...

javascriptthree.jscoordinate-transformation

What is the reason for the inability to input a null byte in a file when using ascii mode with node.js?

Below is the code snippet I have written: var fs = require('fs'); var fp = fs.openSync('binary.txt', "w"); var byte = '\0'; fs.writeSync(fp, byte, null, 'ascii'); However, upon execution, when I check the con ...

javascriptnode.js

What is the process of defining a group of particles in relation to a vector path using Three.js?

In my exploration of Three.js, I have been experimenting with particle clouds and their unique properties. Many examples I have come across utilize shape geometries to generate fields of particles or random parameters for their distribution. However, I a ...

javascriptvectorgraphicsthree.jsparticle-system

The jquery datepicker is malfunctioning after switching to another component

My current setup includes the following versions: jQuery: 3.3.1 jQuery UI: 1.12.1 AngularJS: 6 Here's a snippet of my code: <input id="test" type="text" class="form-control" value=""> In my component (component.t ...

javascriptjqueryhtmlcssangularjs

Enhancing User Experience in VueJS with Pug Templates and Transitions

Managing multiple 'pages' of content within a multi-step process can be challenging, especially when trying to incorporate VueJS's transition feature for a carousel-like slide in/out effect. The contents being transitioned are stored in sepa ...

cssvue.jspug

Using a 2D png image as a texture around a 3D sphere in Three.js results in a dark appearance

As I explore THREE.js to showcase a 3D rotating earth on the web, my goal is to also have an image surrounding the spinning globe. Despite trying various methods, none seemed to work out for me. The image loader option I attempted failed to display anythi ...

javascriptthree.js

Populate HTML form with return values using jQuery AJAX

I am struggling with retrieving values from jQuery/AJAX and displaying them in an HTML form within the index.php file. This is what my index.php looks like: <script type="text/javascript"> $(document).ready(function () { $('#display'). ...

javascriptphpjqueryhtmlajax

Expanding Submenu Width

Currently working on developing a Dynamic Sub-menu for Wordpress, similar to the one shown here: . However, I am facing an issue with the width as it is set to 'auto' but not aligning the sub-menu properly. I would like the sub-menus to float lef ...

javascriptcsswordpress

The login button has dual functionality, redirecting users to different pages based on their login status. First-time logins will be directed to an agreement page, while returning users will be

During my testing of login functionality, I follow these steps: Enter username Enter password Click on the login button Verify if the agreement page is displayed This is how my Page Object Model (POM) for the login page looks like: class loginPage { ...

javascriptnode.jscypress

The error message displayed reads as follows: "topojson has encountered a TypeError: Unable to access the property 'feature' as

Context A problem has arisen with JavaScript when trying to use the topojson.feature(topology, object) function. It seems that this issue appeared after moving from TopoJSON version 1.6.26 to version 2.x, although the functionality remains similar. The p ...

javascriptnpmwebpackecmascript-6topojson

Adjust the size of a textarea once text is removed

When you type text, a textarea expands in size. But what if you want it to dynamically decrease its height when deleting text? $('textarea').on('input', function() { var scrollHeight = parseInt($(this).prop('scrollHeight&apos ...

javascripthtmlcss

Is the latest Swiper JS version compatible with outdated web browsers?

Seeking information on browser compatibility. I am interested in upgrading to the latest version 8.4.5 of Swiper JS for my project, currently using version 4.1.6. Upon examining their shared Github repository file .browserslistrc, I noticed changes that ta ...

javascriptreactjsangularswiper.js