SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot radiant_luv's Avatar
    Join Date
    Apr 2009
    Location
    WebVille
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    move body background

    was just wondering if possible to move background position with click of a button (toggle). so created example http://jsfiddle.net/VpULJ/2/
    basically i want on click of the "click" button the content wrapper show up. what i want is to shift the background position right the bottom of the #wrapper div.
    in next click wrapper gets hidden and then i want to shift the background up where it was (possibly with animate). been trying to figure out for long. anyone pointing to the right direction would be great help.

    Thanks
    Personal Playground: www.sudipmondal.com
    Twitter: @iam_sudip

  2. #2
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    The jQuery css() can be used to set /change css properties.
    Here's an example, moves the background image down and up when click a button.
    Code:
    <style type="text/css"><!--
    #dv1 {
      background-image: url('image.jpg');
      background-repeat: no-repeat;
      background-position: center top;
      width:200px;
      height:400px;
     }
    --></style>
    
    <script type="text/javascript"><!--
    $(document).ready(function() {
      var ix = 1;
      $('#btn').click(function() {
        $('#dv1').css(
        {
          'background-position': '0 '+ (100 * (ix % 2)) +'%'
        });
        ix++;
      });
    });
    --></script>
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  3. #3
    SitePoint Zealot radiant_luv's Avatar
    Join Date
    Apr 2009
    Location
    WebVille
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MarPlo View Post
    Hi,
    The jQuery css() can be used to set /change css properties.
    Here's an example, moves the background image down and up when click a button.
    Code:
    <style type="text/css"><!--
    #dv1 {
      background-image: url('image.jpg');
      background-repeat: no-repeat;
      background-position: center top;
      width:200px;
      height:400px;
     }
    --></style>
    
    <script type="text/javascript"><!--
    $(document).ready(function() {
      var ix = 1;
      $('#btn').click(function() {
        $('#dv1').css(
        {
          'background-position': '0 '+ (100 * (ix % 2)) +'%'
        });
        ix++;
      });
    });
    --></script>
    Thanks. I want to move the <body> background animate down and up with a toggle click happening on a button. rather a slow transition to it's new position that to sudden move.
    Personal Playground: www.sudipmondal.com
    Twitter: @iam_sudip

  4. #4
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Kinda confused by what you want, you basically just want the background to animate when the user clicks right? Change your JS code to this:
    Code:
    $('#click').click(function(){
        $('body').animate({
      'background-position-x': '10%',
      'background-position-y': '20%'
    }, 10000, 'linear');
    });
    ​
    http://jsfiddle.net/VpULJ/3/

  5. #5
    SitePoint Zealot radiant_luv's Avatar
    Join Date
    Apr 2009
    Location
    WebVille
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by OMGCarlos View Post
    Kinda confused by what you want, you basically just want the background to animate when the user clicks right? Change your JS code to this:
    Code:
    $('#click').click(function(){
        $('body').animate({
      'background-position-x': '10%',
      'background-position-y': '20%'
    }, 10000, 'linear');
    });
    ​
    http://jsfiddle.net/VpULJ/3/
    ah, let me try explaining, a button which toggle the wrapper div - slides down and up. so when wrapper slides down i would like slide down the background image as well and on the next click when wrapper div slide up and get hidden the background image too would slide up to it's initial position.
    Personal Playground: www.sudipmondal.com
    Twitter: @iam_sudip

  6. #6
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh ok. Something like this? http://jsfiddle.net/VpULJ/5/

    I can explain how I did this if this is what you needed.

    [EDIT]
    Replace "toggle" with "slideToggle" for a smoother effect, like this: http://jsfiddle.net/VpULJ/8/

    [EDIT...again]
    And to prevent the background from wrapping try add "no-repeat" to the background css like this: http://jsfiddle.net/VpULJ/9/

  7. #7
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    To this page: http://keith-wood.name/backgroundPos.html there is a small jQuery plugin for animate background position. Very easy to use.
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  8. #8
    SitePoint Zealot radiant_luv's Avatar
    Join Date
    Apr 2009
    Location
    WebVille
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by OMGCarlos View Post
    Oh ok. Something like this? http://jsfiddle.net/VpULJ/5/

    I can explain how I did this if this is what you needed.

    [EDIT]
    Replace "toggle" with "slideToggle" for a smoother effect, like this: http://jsfiddle.net/VpULJ/8/

    [EDIT...again]
    And to prevent the background from wrapping try add "no-repeat" to the background css like this: http://jsfiddle.net/VpULJ/9/
    This is great. yes, this is what I was looking for. It would be very kind of you, if you can explain the logic to achieve this. Thanks a ton.

    [EDIT]
    not happening on FF12
    Last edited by radiant_luv; May 12, 2012 at 09:09. Reason: reporting - FF issue
    Personal Playground: www.sudipmondal.com
    Twitter: @iam_sudip

  9. #9
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    No problem, this is what's happening:
    Code:
    $('#wrapper').data('dir', 1); //Set the direction to move the background in
    $('#wrapper').data('orig_height', $('#wrapper').height()); //Remember the height of this element
    Here I'm just storing a variable dir inside the element for easy referencing. You could just the same use a variable like "var dir = 1" if you'd like.
    1 is an easy number to Toggle, because you can multiply it by -1 to get the opposite.
    1 * -1 = -1
    -1 * -1 = 1

    The height of the element changes when you slide it up or down, so I'm storing the original height (before it slides) "orig_height" into the elements data "memory", so I can look it up later.

    Pretty easy, just using $().data(var) to store variables.

    Next:
    Code:
        var dir = $('#wrapper').data('dir'); //The direction to push the background
        var height = $('#wrapper').data('orig_height');
        $('#wrapper').data('dir', (dir*-1)); //"toggle" the direction
    All I'm doing here is taking the values we just stored out from the element into local variables "dir" and "height".
    I toggle "dir" by multiplying it by -1...so it's now the opposite of whatever it just was. Then I store this back into the element for future use.

    Code:
        $('#wrapper').slideToggle('slow', 'linear');
        $('body').animate({'background-position-y': (1+dir)*height/2+'px'}, 'slow', 'linear'); //Animate the background
    Here I have two animations going at the SAME time at the SAME speed with the SAME easing. In order to make it work, we need to move the backdground down X pixels, where X is the height of the #wrapper.

    This part looks confusing:
    (1+dir)*height/2+'px'

    It's just some fancy math tricks. (1+dir) will ALWAYS equal either 0 or 2, depending on if dir is -1 or 1.
    If height = 100 then this means that
    (0 or 2) * height = 0 or 200
    200 is double the height of #wrapper, so we divide it by 2. We add 'px' to the end so the string becomes "100px"


  10. #10
    SitePoint Zealot radiant_luv's Avatar
    Join Date
    Apr 2009
    Location
    WebVille
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by OMGCarlos View Post
    No problem, this is what's happening:
    Code:
    $('#wrapper').data('dir', 1); //Set the direction to move the background in
    $('#wrapper').data('orig_height', $('#wrapper').height()); //Remember the height of this element
    Here I'm just storing a variable dir inside the element for easy referencing. You could just the same use a variable like "var dir = 1" if you'd like.
    1 is an easy number to Toggle, because you can multiply it by -1 to get the opposite.
    1 * -1 = -1
    -1 * -1 = 1

    The height of the element changes when you slide it up or down, so I'm storing the original height (before it slides) "orig_height" into the elements data "memory", so I can look it up later.

    Pretty easy, just using $().data(var) to store variables.

    Next:
    Code:
        var dir = $('#wrapper').data('dir'); //The direction to push the background
        var height = $('#wrapper').data('orig_height');
        $('#wrapper').data('dir', (dir*-1)); //"toggle" the direction
    All I'm doing here is taking the values we just stored out from the element into local variables "dir" and "height".
    I toggle "dir" by multiplying it by -1...so it's now the opposite of whatever it just was. Then I store this back into the element for future use.

    Code:
        $('#wrapper').slideToggle('slow', 'linear');
        $('body').animate({'background-position-y': (1+dir)*height/2+'px'}, 'slow', 'linear'); //Animate the background
    Here I have two animations going at the SAME time at the SAME speed with the SAME easing. In order to make it work, we need to move the backdground down X pixels, where X is the height of the #wrapper.

    This part looks confusing:
    (1+dir)*height/2+'px'

    It's just some fancy math tricks. (1+dir) will ALWAYS equal either 0 or 2, depending on if dir is -1 or 1.
    If height = 100 then this means that
    (0 or 2) * height = 0 or 200
    200 is double the height of #wrapper, so we divide it by 2. We add 'px' to the end so the string becomes "100px"

    This is awesome. Couldn't have been better explanation than this. Thank a lot. Much appreciated.
    Currently I m trying to debug why it's not functioning on FF. Probably background-position-y has to dome something.
    Personal Playground: www.sudipmondal.com
    Twitter: @iam_sudip

  11. #11
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh crap that's right, Firefox (and opera I think) don't support background-position-x/y

    $.animate() has a callback function called "step":
    $.animate({opacity: 1}, step: function(step, fx){
    ...stuff...
    })

    but I don't have any time to work out a solution right now. It can get tricky so maybe someone else can help with that.

  12. #12
    SitePoint Zealot radiant_luv's Avatar
    Join Date
    Apr 2009
    Location
    WebVille
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by OMGCarlos View Post
    Oh crap that's right, Firefox (and opera I think) don't support background-position-x/y

    $.animate() has a callback function called "step":
    $.animate({opacity: 1}, step: function(step, fx){
    ...stuff...
    })

    but I don't have any time to work out a solution right now. It can get tricky so maybe someone else can help with that.

    Sorry, I haven't updated the thread. I have been able to get it work using step function. will update in the fiddle. Thanks.
    Personal Playground: www.sudipmondal.com
    Twitter: @iam_sudip


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
  •