• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 107
  • 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

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