Solved

Javascript change Body Background

Posted on 2016-08-05
2
47 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 108

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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)

910 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now