$this.css(...) is null or not an object - Draggable Background plugin on IE8

Question

'$this.css(...)' is null or not an object

Getting this error, but only in IE (Haven't tested above 8, don't need to test below it)

I have been using this draggable background plugin, and thats where the error is coming from. Ill drop some of the code around where the error occurs below - Its the third line in this snippet

    var x0 = e.clientX
      , y0 = e.clientY
      , pos = $this.css('background-position').match(/(-?\d+).*?\s(-?\d+)/) || []
      , xPos = parseInt(pos[1]) || 0
      , yPos = parseInt(pos[2]) || 0

It happens when I try to click and drag to move the background it just errors straight away

Any suggestions appreciated

thanks

edit: below is the full script

  !function($) {
    var $window = $(window)

    // Helper function to guarantee a value between low and hi unless bool is false
    var limit = function(low, hi, value, bool) {
      if (arguments.length === 3 || bool) {
        if (value < low) return low
        if (value > hi) return hi
      }
      return value
    }

    // Adds clientX and clientY properties to the jQuery's event object from touch
    var modifyEventForTouch = function(e) {
      e.clientX = e.originalEvent.touches[0].clientX
      e.clientY = e.originalEvent.touches[0].clientY
    }

    $.fn.backgroundDraggable = function(options) {
      var options = $.extend({}, $.fn.backgroundDraggable.defaults, options)

      return this.each(function() {
        var $this = $(this)
          , $bg = $this.css('background-image')
          , src = $bg.match(/^url\(['"]?(.*?)['"]?\)$/i)

        // If no background-image css property or no src just return
        if (!$bg || !src) return

        // Get the image's width and height if bound
        var img = { width: 0, height: 0 }
        if (options.bound) {
          var i = new Image
          i.onload = function() {
            img.width = i.width
            img.height = i.height
          }
          i.src = src[1]
        }

        $this.on('mousedown.dbg touchstart.dbg', function(e) {
          e.preventDefault()

          if (e.originalEvent.touches) {
            modifyEventForTouch(e)
          }
          else if (e.which !== 1) {
            return
          }

          var x0 = e.clientX
            , y0 = e.clientY
            , pos = $this.css('background-position').match(/(-?\d+).*?\s(-?\d+)/) || []
            , xPos = parseInt(pos[1]) || 0
            , yPos = parseInt(pos[2]) || 0

          $window.on('mousemove.dbg touchmove.dbg', function(e) {
            e.preventDefault()

            if (e.originalEvent.touches) {
              modifyEventForTouch(e)
            }

            var x = e.clientX
              , y = e.clientY

            xPos = options.axis === 'y' ? xPos : limit($this.innerWidth()-img.width, 0, xPos+x-x0, options.bound)
            yPos = options.axis === 'x' ? yPos : limit($this.innerHeight()-img.height, 0, yPos+y-y0, options.bound)
            x0 = x
            y0 = y

            $this.css('background-position', xPos + 'px ' + yPos + 'px')
          })
        })

        $window.on('mouseup.dbg touchend.dbg', function() { $window.off('mousemove.dbg touchmove.dbg') })
      })
    }

    $.fn.backgroundDraggable.defaults = {
      bound: true
    , axis: undefined
    }
  }(jQuery);

What did you get when you output the css value to the console? — Reinstate Monica Cellio, Jul 23 '13 at 13:50
Can you please search and make sure that `$this` is defined somewhere, and if it it, please post here the value. — Spokey, Jul 23 '13 at 13:52
Either `$this` is undefined, or IE8 just doesn't support that particular CSS property — Alnitak, Jul 23 '13 at 13:52
The answer is in this thread : http://stackoverflow.com/questions/594870/fix-for-background-position-in-ie — Brewal, Jul 23 '13 at 13:56

score 3 · Accepted Answer · edited May 23 '17 at 11:57

3

As guessed at in my comment to the OP, and confirmed by another commentator, IE 8 simply doesn't support that particular CSS property, so the output of the .css() function is undefined.

See Fix for background-position in IE for more details.

You can also obtain a jQuery plugin that adds that CSS property to jQuery when using IE at https://github.com/brandonaaron/jquery-cssHooks/ (look for the bgpos.js module)

edited May 23 '17 at 11:57

Community

1
1

answered Jul 23 '13 at 13:58

Alnitak

334,560
70
407
495

Sorry to be awkward and carry this on longer than necessary, but how would I go about implementing that plugin into making this one work? – Jul 23 '13 at 14:34
@shakethefloor just download that plugin into your project, add it with a ` – Alnitak Jul 23 '13 at 14:44
I thought as much, it's definitely included and loaded, but still getting the same error.. I'll double check just to make sure – Jul 23 '13 at 14:57
What does `$.support` contain for `backgroundPositionXY` and `backgroundPosition` once the plugin is loaded? – Alnitak Jul 23 '13 at 15:03

score 1 · Answer 2 · edited May 23 '17 at 12:21

I think you mean something like $(this).css() , or this.css, deping on your surroundings...

So it seems that $this was defined as $(this), so the problem is with the css value background-position, as @brewel noted in the comments: Fix for background-position in IE

saying

A bit more digging about on the Interweb has revealed the answer: IE doesn't understand the selector background-position. It understands the non-standard background-position-x and background-position-y.

score 0 · Answer 3 · answered Jul 23 '13 at 14:01

0

It's not the .css() function that is the problem but the parameter. MSIE doesn't read backgroundPosition but backgroundPositionX and backgroundPositionY.

answered Jul 23 '13 at 14:01

tehknox

278
1
5

$this.css(...) is null or not an object - Draggable Background plugin on IE8

3 Answers3