Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    106
    Thanks
    27
    Thanked 3 Times in 3 Posts

    Change background position on mouse-hover

    Hi all,
    I tried to create a mouse over effect using jquery. When user hovers #box1_trigger link, the #service_box1 div should change it's background position. The code i created is the following it's not working for some reason.


    html:
    Code:
    <div class="service_box box1" id="service_box1">
        <a href="#" id="box1_trigger">
            <h3>bla bla</h3>
            <p>bla bla bla bla bla</p>
        </a>
    </div>
    javascript:
    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    	$("#box1_trigger").hover(
    		function() {
    			$("#service_box1").stop().animate({backgroundPosition:"(0 -250px)"}, "slow");    
    		},
    		function() {
    			$("#service_box1").stop().animate({backgroundPosition: "0 0"}, "slow");  
    		}
    	);
    });
    </script>
    css:
    Code:
    #service_box1{
    	width:318px; height:282px;
    	float:left;
    	background:url(images/services_panel.png) 0 0 no-repeat;
    }
    a#box1_trigger{
    	width:100%; height:100%;
    	float:left;
    	display:block;	
    }
    Could you help me fix this please??

  • #2
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    The parens around the background position values are wrong.

    This:
    PHP Code:
    $("#service_box1").stop().animate({backgroundPosition:"(0 -250px)"}, "slow"); 
    is supposed to be this:

    PHP Code:
    $("#service_box1").stop().animate({backgroundPosition:"0 -250px"}, "slow"); 
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • Users who have thanked venegal for this post:

    ktsixit (10-13-2011)

  • #3
    Regular Coder
    Join Date
    Sep 2008
    Posts
    106
    Thanks
    27
    Thanked 3 Times in 3 Posts
    hi venegal and thank you for your reply.

    I changed the code but it's still not working.

  • #4
    4jd
    4jd is offline
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Not sure what you need it for but have you tried using CSS?

    Code:
    .className a {
    display: block;
    width: 100px;
    height: 20px;
    background: transparent url(img.jpg) no-repeat;
    }
    
    .className a:hover {
    background-position: -100px 0;
    }
    
    <div class="className">
    <a href="#">link</a>
    </div>
    Just thought I'd throw my 2 cents worth, Good Luck
    --------------
    Jay

  • #5
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    4jd: CSS won't work here, since the trigger is different from (and not an ancestor of) the element whose background needs to change. Also, it's supposed to be animated.

    ktsixit: There doesn't seem to be anything else wrong with the code you posted, so if it's still not working, you're probably not using a plugin that actually enables animating the background position. With vanilla jQuery, you can't do that, since it doesn't take a single numerical value. So, use something like this: http://plugins.jquery.com/project/ba...osition-Effect.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • Users who have thanked venegal for this post:

    ktsixit (10-13-2011)

  • #6
    Regular Coder
    Join Date
    Sep 2008
    Posts
    106
    Thanks
    27
    Thanked 3 Times in 3 Posts
    venegal,

    I'll try to use the script you suggested, although I'm already using jquery in my page. I'll tell you if it worked or not
    Last edited by ktsixit; 10-13-2011 at 09:08 AM.

  • #7
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Quote Originally Posted by ktsixit View Post
    venegal,

    I'll try to use the script you suggested, although I'm already using jquery in my page. I'll tell you if it worked or not
    That "although" doesn't make much sense here — you are supposed to use that plugin because you are using jQuery. It extends jQuery with the ability to animate background positions.

    If it doesn't work for some reason, you will have to show a live example, so we see how you actually implemented it.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • Users who have thanked venegal for this post:

    ktsixit (10-13-2011)

  • #8
    Regular Coder
    Join Date
    Sep 2008
    Posts
    106
    Thanks
    27
    Thanked 3 Times in 3 Posts
    ok, it's finally working. Thank you very much for your help


  •  

    Posting Permissions

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