Solved

Javascript change Body Background

Posted on 2016-08-05
2
64 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 9

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 110

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

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
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 how to look for a specific file type in a local or remote server directory using PHP.

690 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