Call a background image

JavaScript
1

The site is loading the pages correctly using AJAX calls. I would love to switch background images when the content changes. Hopefully fade the background image in.

The images are named exactly the page name. For example, the page contact.php has a background image contact.jpg.

I thought to use the page name as my identifier, but it’s a bit complicated. The pages are in folders (since there are so many pages), so I can’t figure out how to get it.

The demo page is here. You can see the AJAX call when click Benefits, then Product Launch.

Code to call the content (using a hash change):

$("#groups").delegate("a", "click", function() {
		window.location.hash = $(this).attr("href");
		$("#groups a").removeClass('active');
		$(this).addClass('active');
		return false;
	});
	
	$(window).bind('hashchange', function() {
										  
		newHash = window.location.hash.substring(1);
										  
		if (newHash) {
            $mainContent
                .find("#content")
                .fadeOut(600, function() {
                    $mainContent.hide().load(newHash + " #content", function() {
                        $mainContent.fadeIn(600, function() {
							$('.group').stop().animate({
								left : '-130px'
							}, 500);								  
						});
                    });
                });
        };
										  
	});
	
	$(window).trigger('hashchange');
2

How about jQuery to toggle the class, one class could have one image as background, the other class could have the other image as background

.toggleClass() – jQuery API

3

I see how the toggleCLass can turn a class on or off. In my case, I have many pages, each with a unique background.

I thought by naming the images the same as the pages, I could grab the page name, then go get the image and fade it in. I’m just not sure how that goes.

4

I’ve figured out I can grab the current page by grabbing the class of the element that was just clicked. I added a new var called pageName to the ‘delegate’ line:

$("#groups").delegate("a", "click", function() {
		window.location.hash = $(this).attr("href");
		$("#groups a").removeClass('active');
		$(this).addClass('active');
		
		// Get the class name for this page
        var pageName = $(this).attr('class');

		return false;
	});

How do I tell the CSS that I want to use $(pageName).jpg, and fade it in?

5

I am brain storming here.

How about instead of $(this).addClass(‘active’);

$(this).fadeIn(“slow”, function(event){

// Get the class name for this page
var pageName = $(this).attr(‘class’);

$(this).css(“background”, pageName + “.jpg”);

});

6

Thank you for the help, and you did help. The .css() style property was just what I needed.

2 issues: the background changes, but does not fade in as I hoped. And unfortunately I need the line before it which adds the class “active” to $(this).

This is what I have so far. The addClass line is commented out because it doesn’t work. I get one or the other.

$(this)
			//.addClass('active')
			.fadeIn("slow", function(){

				// Get the class name for this page
				var pageName = $(this).attr('class');
				
				$("html").css("background-image","url(images/" + pageName + ".jpg)");
			});
7

How about creating an element for each background, and setting the image for each background. Then setting the display of all elements except the active one to none (“display: none”)

and on click using

.fadeToggle (…)

.fadeToggle() – jQuery API

The elements would all be stacked on top of each, but since they are display none there is no conflict. It calls for much work, but right now I can’t think of why your image is not fading in. If something comes to mind, I’ll post it.

8

On second thought, I think that the image is not fading in because it is not present when you make the call. How about setting the image before you call fade in, and some how set that image to display none; THEN call fadeIN and see what happens

9

That makes sense. I could set the image to display none in the CSS by default. Then fade the image in and see if that does it. I need to move a few things around first, so I’ll post back with what happened either way.

Thank you again for your generosity.

10

I may have given up on fading in a background image. I cannot set the element to display none, as the element is “html”. I can’t set the opacity of html to 0, since that’s the same issue.

But I would like to know why, when I try to add $(this).addClass(‘active’), the next few lines in the .delegate function are ignored.

For example:

$("#groups").delegate("a", "click", function() {
		window.location.hash = $(this).attr("href");
		$("#groups a").removeClass('active');
		$(this).addClass('active');
		
		// find the new page name by class
		var pageName = $(this).attr('class');
		
		// switch the bg in the css
		$("html").css("background-image","url(images/" + pageName + ".jpg)");
		
		return false;
	});

If I remove $(this).addClass(‘active’) then the background changes. Why can’t I do both?

11

I’m still struggling with why I cannot use both statements?