Body background image and jquery

0 Views

I am knew to jquery and I am having a bit of trouble with trying to get something working.

Basically I have a wordpress site, on each page is a different background image for the body tag. I want to be able to toggle on a button and then the body background image to drop about 500px.

Read More

Basically I have a hidden contact area on the top of my page, and when you click on the button(a.contact) the hidden contact area(#contactArea) is revealed by dropping down from the top, however when the contactArea drops some of my background image is hidden until you click on the button again.

What I am trying to achieve is that the background image drops (still completely visible) when the hidden contactArea is revealed, so that the background image is always visible…. I hope that makes sense?!

my css code is:

body.page.page-id-240 {background:url(images/main-home-bg.jpg) center
600px no-repeat;

My current jquery is: 

$(window).load(function() {
$("#contactArea").css('height', '0px');

$("a.contact").toggle( 
            function () { 
                $("#contactArea").animate({height: "225px"}, {queue:false, duration: 500, easing: 'linear'} )
            }, 
            function () { 
                $("#contactArea").animate({height: "0px"}, {queue:false, duration: 500, easing: 'linear'}) 
            } 
    ); 


});

If anyone could help it would be greatly appreciated! 🙂

Post Views: 0

Related posts

Leave a Reply

1 comment

  1. Easiest way to achieve this is to have your code which exposes the contacts area add an additional CSS class to the body tag e.g. reposition-bg. Then define the appropriate CSS class to modify the body’s BG position. Does that make sense?

    CSS:

    body.reposition-bg {
    /*your new position for when contact area is exposed*/
    background-position-y: 200px 
}

    and change your JS to:

    $(window).load(function() {
$("#contactArea").css('height', '0px');

$("a.contact").toggle( 
            function () { 
                $("body").addClass("reposition-bg");
                $("#contactArea").animate({height: "225px"}, {queue:false, duration: 500, easing: 'linear'} )
            }, 
            function () { 
                $("#contactArea").animate({height: "0px"}, {queue:false, duration: 500, easing: 'linear'}) 
            } 
    ); 


});

    Alternatively, if you have the flexibility to do so and it doesn’t impede your UI, you could set the #contactArea to be position: absolute so it will be positioned over the top of your current content rather than pushing it down.