Solved

Javascript change Body Background

Posted on 2016-08-05
2
53 Views
Last Modified: 2016-08-05
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
Comment
Question by:edavo
2 Comments
 
LVL 8

Expert Comment

by:James Bilous
ID: 41744439
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
 
LVL 109

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 41744579
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

These days socially coordinated efforts have turned into a critical requirement for enterprises.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question