Javascript If/Else statement checking content:url

Question

I'm having issues with figuring out the correct syntax to have my code check the value of one of my images with the id '#main'. My CSS has the image changing its src based on a media query using the content:url attribute. The reason I'm doing it this way is because I have about 5 different background images that trigger at different widths to provide a frame for my content and I need to be able to adjust the height of my ".text" div based on what image is being used as the frame currently.

I understand how to code all that, all I need is help with how to ask for the value correctly on the first one and I should be able to do the rest from there. Just to clarify once again, the issue is in the if/else statement; the code works without the if/else statement.

Here is what I have:

function updateHeight()
{

if ($("#main").css('content') === 'url("../images/main-bg2-landscape.png")') {

    var div = $('.text');
    var width = div.width();

    div.css('height', width *.57);}
}

Just an example of the CSS in place:

#main {z-index: -1;
       position: absolute;}

.text {position: absolute;
       background-color: #FFFFFF;
       background-position: top;
       left: 11%;
       width: 78%;
       margin-top: 19%;
       opacity: .4;}

@media only screen and (min-width: 1025px) {

     #main {content:url(../images/main-bg2-landscape.png);}

     .text {position: absolute;
       background-color: #FFFFFF;
       background-position: top;
       left: 11%;
       width: 78%;
       margin-top: 19%;
       opacity: .4;}
}

Thanks

score 1 · Accepted Answer · answered Jan 14 '15 at 20:44

1

The problem is most likely that the "url()" call in the css will result in the full path to the image in the HTML that is ultimately rendered. It will not be the relative path you place in the .css file

Probably something like /images/main-bg2-landscape.png in this case. If you inspect the image element in chrome or the browser of your choice you'll see the full path that ends up in your HTML.

A better option may be to do the comparison on the name of the file only so that you aren't dependent on the location of the image. Something like:

if ($("#main").css('content').indexOf("main-bg2-landscape.png") !=-1) {

var div = $('.text');
var width = div.width();

div.css('height', width *.57);}

}

answered Jan 14 '15 at 20:44

Joe W

2,773
15
35

Well so far so good, your code worked like a charm but if you don't mind I'm not too well versed in javascript. Could you explain what exactly the indexOf and the !-1 did exactly? Did the indexOf basically search the string for that section of the image file name and the -1 have something to do with the z-index I have on it? Thanks – G4MOOSE Jan 14 '15 at 21:09
@G4MOOSE - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf – Weafs.py Jan 14 '15 at 21:12
The indexOf is just the javascript version of whether one string contains a substring. More here: http://stackoverflow.com/questions/1789945/how-can-i-check-if-one-string-contains-another-substring – Joe W Jan 14 '15 at 21:31

Javascript If/Else statement checking content:url

1 Answers1