• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 84
  • Last Modified:

Javascript change Body Background

I have the following JS code:

$(document).ready(function(){
	
	$('#trend li a').click(function(){
		var imgbg = $(artBG);
		//console.log(imgbg);
		$('body').css({backgroundImage: "url(" + artBG + ")"});		
		localStorage.setItem("body_background", artBG);
	});

});

Open in new window


I have the following HTML code:

<div id="trend">
<ul id="list">
<li><a href="#">LINK 1 HERE</a></li>
<li><a href="#">LINK 2 HERE</a></li>
<li><a href="#">LINK 3 HERE</a></li>
<li><a href="#">LINK 4 HERE</a></li>
   </ul>
</div>

Open in new window


The value of artBG is an absolute URL to an image (.jpg)

I am trying to simply change the BODY background image when I click the link in the list

FYI - I have presented this as static code, but know that each item in the list has a different url associated to its artBG since it is being dynamically generated from php

This is the actual php code (the above is a simple static representation):
echo '<div id="trend">';
if ($result->num_rows > 0) {
echo '<ul id="list">';
while($row = $result->fetch_assoc()) {
echo '<script type="text/javascript">';
echo 'var artBG ='. $row['wallpaper'];
echo '</script>';
echo '<li><a href="index_mpx.php?t=mpxmusic&p='.$row['title_p'].'">'.$new_playlist.'</a></li>';
}
echo '</ul>';
echo '</div>';

Open in new window

0
edavo
Asked:
edavo
1 Solution
 
James BilousSoftware EngineerCommented:
You are making a script tag that assigns a new artBG variable for every list item you generate.

Instead, try adding a unique class to every list item link you generate. Then, generate an onclick handler for that identifier using jquery that sets the background when clicked.
1
 
Ray PaseurCommented:
See if this makes sense.  We use a class identifier to carry the background image URL.  You could get this information from a database or other server-side data model, and use PHP to put the information into the HTML document.
https://iconoun.com/demo/temp_edavo.php
<?php // demo/temp_edavo.php
/**
 * https://www.experts-exchange.com/questions/28961750/Javascript-change-Body-Background.html
 */
error_reporting(E_ALL);


// USE PHP TO CREATE VARIABLES FOR OUR HTML
$dat = date('r');
$xyz = "This page was rendered at $dat";

// USE PHP TO CREATE THE CSS CLASS NAMES
$r_class = "r";
$b_class = "b";

// USE PHP TO CREATE THE CSS IMAGE LINKS
$r_image = "red_square.png";
$b_image = "blu_square.png";


// CREATE OUR WEB PAGE IN HTML5 FORMAT
$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style type="text/css">
.$r_class {
    background-image:url("images/$r_image");
}
.$b_class {
    background-image:url("images/$b_image");
}
</style>

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#make_red").click(function(){
        $("body").removeClass("$b_class");
        $("body").addClass("$r_class");
    });
    $("#make_blu").click(function(){
        $("body").removeClass("$r_class");
        $("body").addClass("$b_class");
    });
});
</script>

<title>HTML5 Page With jQuery in UTF-8 Encoding</title>
</head>
<body>

<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>

<p>$xyz</p>
<input id="make_red" value="Make Body Red" />
<input id="make_blu" value="Make Body Blue" />

</body>
</html>
HTML5;


// RENDER THE WEB PAGE
echo $htm;

Open in new window

Here are the image links:
https://iconoun.com/demo/images/red_square.png
https://iconoun.com/demo/images/blu_square.png
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now