SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Call a background image

    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):
    Code JavaScript:
    $("#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');
    Last edited by ggeiger; Aug 15, 2011 at 15:51. Reason: added code snippet

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code JavaScript:
    $("#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. #5
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code JavaScript:
    $(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. #7
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by websonalized; Aug 17, 2011 at 21:17. Reason: more information

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code JavaScript:
    $("#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. #11
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by websonalized View Post
    I am brain storming here.

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

    $(this).fadeIn("slow", function(event){
    I'm still struggling with why I cannot use both statements?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •