SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb jQuery and backgroundPosition issue

    Hello,

    I am facing a problem now after upgrading jQuery to v1.7.1. The following stopped working (and it used to work just fine with jQuery 1.4.2 before the upgrade):

    Code:
    	$(function()
    	{
    		$("#nav a").hover(function()
    		{
    			$(this).stop().animate({ backgroundPosition: "(0px 50px)" }, 175);
    		},
    		function()
    		{
    			$(this).stop().animate({ backgroundPosition: "(0px 100px)" }, 175);
    		});
    	});
    Has anyone come accross this problem, and knows a possible fix it? I assume it's caused by a syntax change but can't figure out what is different now.

    Thanks a lot!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by andROO View Post
    Has anyone come accross this problem, and knows a possible fix it? I assume it's caused by a syntax change but can't figure out what is different now.
    Yep, they changed things there from jQuery 1.5 onwards. You'll now need to separate them out in to x and y settings.

    For example:
    Code:
    $(this).animate({'background-position-x': '0px', 'background-position-y': '50px'}, 175);
    Last edited by paul_wilkins; Feb 25, 2012 at 05:08.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul, I managed to rework the backgroundPosition into background-position-x and background-position-y settings to be able to use jquery-1.7.1. However, that also broke a slider that I'm using on the same page. The error manager says "curAnim is undefined" and points to the slider script. I did a quick check and noticed that even though jquery 1.4.2 has the curAnim property, it's definitely missing from the latest version of the library. Is there a way to bring it back via extending jquery somehow? I'd very much want to know that since I managed to fix 3 other scripts to be able to use them with the latest jquery, and it's this slider that messes things up...

    Thanks again!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by andROO View Post
    The error manager says "curAnim is undefined" and points to the slider script.
    What is the slider that you are using?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    It's the jQuery siteFeature plugin: http://s3.envato.com/files/376136/index.html that I'm trying to fix. It runs on an older version of jQuery and I'm trying to make it work with the latest which does not seem to have the curAnim property defined. Thanks a lot!

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by andROO View Post
    It's the jQuery siteFeature plugin: http://s3.envato.com/files/376136/index.html that I'm trying to fix. It runs on an older version of jQuery and I'm trying to make it work with the latest which does not seem to have the curAnim property defined. Thanks a lot!
    First start by using the latest version of sitefeature - the version that it's at is at least 2.7.1, and I see in some places that there is a version at 2.7.5 as well. The one you are currently using seems to be 2.6
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see, I downloaded sitefeature 2.7.1 and looked at the code, there seems to be an instance of "curAnim" among the lines so I guess the problem is there still. Haven't found a version 2.7.5 to see if it's the same there...

  8. #8
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apparently, the use of the curAnim feature relates to the tab arrow background animation which I can definitely live without it if nothing can be done about the lines quoted below, for the sake of bringing the slider back to a working state. Either way, thanks for pointing out a new version of the script available, I'll make sure I'll upgrade to the latest available.
    Code:
        $.fx.step.backgroundPosition = function(a) {
            if (!a.bgPosReady) {
                var b = $.curCSS(a.elem, 'backgroundPosition');
                if (!b) {
                    b = '0px 0px'
                }
                b = toArray(b);
                a.start = [b[0], b[2]];
                var c = toArray(a.options.curAnim.backgroundPosition);
                a.end = [c[0], c[2]];
                a.unit = [c[1], c[3]];
                a.bgPosReady = true
            }
            var d = [];
            d[0] = ((a.end[0] - a.start[0]) * a.pos) + a.start[0] + a.unit[0];
            d[1] = ((a.end[1] - a.start[1]) * a.pos) + a.start[1] + a.unit[1];
            a.elem.style.backgroundPosition = d[0] + ' ' + d[1]
        }
    As far as I know, backgroundPosition became "background-position-x" and "background-position-y" in the newer jquery so the problem may be linked to that...

  9. #9
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It didn't work. Removing the lines around "curAnim" cause the slider to break after reaching the end tab. It normally should go back to the first tab but it doesn't... So I may need some further help here, please.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    About the best advice that I can give from here is that you get in touch with the developer of the plugin.
    SiteFeature discussion: http://codecanyon.net/item/sitefeature/discussion/53896
    Makfak's profile: http://codecanyon.net/user/makfak
    Makfak's website: http://www.makfak.com/

    If you cannot convince him to update it for a more recent version of jQuery, you'll have to decide whether to stay with the older version of jQuery, or to find a different plugin that works in the version of jQuery that you want to use.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I appreciate your help!


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
  •