Variable w/ JQuery selector breaks my code

Question

I'm having an issue with a jQuery selector in a variable. Oh and the HTML (background-image:url('SOME-IMAGE-URL')) has an inline style, not in a stylesheet.

I can't seem to make this JS/JQuery script. It completely breaks the script.

var contentHeight = $(this).css('background-image').height();

Full code:

var sliderWidth = 0;

$(".slider li").each(function() {
    var contentHeight = $(this).css('background-image').height();
    sliderWidth = sliderWidth + 100;
    $(".slider ul li").css("height",contentHeight);
});

var sliderContentWidth = sliderWidth/100;

$(".slider").css("width",sliderWidth + "%");
$(".slider li").css("width",100/sliderContentWidth + "%");

setInterval(function(){ 
    $(".slider ul").css("right",100/sliderContentWidth + "%");
}, 5000);

Because it has no method `.height()`, what are you trying to do??? — tymeJV, Jul 30 '13 at 21:12
@JonasRothmannHjalager You want to get the height of the actual image in the `background-image`? Maybe you should rephrase your question to 'How do I get the height of the background image of a div set with CSS' ? — Benjamin Gruenbaum, Jul 30 '13 at 21:13
@JonasRothmannHjalager Which was already answered by the way - http://stackoverflow.com/q/5106243/1348195 — Benjamin Gruenbaum, Jul 30 '13 at 21:13
The problem has nothing to do with a "variable w/jQuery selector." — Matt Ball, Jul 30 '13 at 21:14
@YotamOmer `$(this).css('background-image')` returns a string. `string.height()` is not a function. — Jason P, Jul 30 '13 at 21:15
I'm not asking about the code, this should be working. So why is it breaking? — Jonas Rothmann Hjalager, Jul 30 '13 at 21:16
*"I'm not asking about the code, this should be working. So why is it breaking?"* - Well then you're clearly asking about the code..? — Fergus In London, Jul 30 '13 at 22:20

Fergus In London · Accepted Answer · 2013-07-30T22:18:26.410

$.css()

The above function (jQuery.css()) returns the CSS value for a given property; in your case a string. Strings don't have a .height() method though.

So on your line..

var contentHeight = $(this).css('background-image').height();

This is actually happens..

$(this) is evaluated; and returns a jQuery instance.
.css('background-image') is ran on the jQuery instance, and a string is returned (the image name)
.height() is ran on the string... but it doesn't exist.. uh oh.

In your scenario though, the height of the element itself will probably suffice.

$(this).height()

Especially considering that by default the background will just repeat if it's smaller than the element, and won't overflow if it's bigger.

Going beyond the question though, and to clarify after your comment below:

You want the size of the background image? This doesn't hold much use in reality. Take a look at the W3 documentation for background properties.

If the image is smaller than the element it's applied to, then the background-repeat property defaults to repeat. End result? The background takes on the whole element.

If the image is larger than the element it's applied to, then it's simply invisible outside the boundaries of the element. This is why sprites work. End result? The background takes on the whole element.

This behaviour can be changed using different properties, but in your scenario it doesn't appear to be. So essentially, the height of the element is the height of the background.

If you want to get the actual dimensions of the image then you're going to need to use a <img> element which, being a DOM element, DOES have height() and width() methods/properties. (Although this is going to require absolute positioning and possibly some z-indexing; and if you need to do this then it's probably best to re-think whatever you're doing)

I've explained this in my answer. You're setting the background image inline through CSS right? In which case the background-image size isn't relevant; as it will be repeated if it's too small - and will take up the whole element if it's too big. **By setting the background-image property of the element you are definitely going to have the whole element covered with a background; unless you use additional CSS properties such as ```background-size```; which you aren't.** — Fergus In London, Jul 30 '13 at 21:59

Variable w/ JQuery selector breaks my code

1 Answers1