CODEWITHSUNDEEP
jquerycss
kyle_conrad
kyle_conrad

Reputation: 23

Use jQuery to set background-image of div based on "name"

Basically, have a portfolio site I'm working on, with upwards of 15 pieces in it. Would like to be able to use the "name" selector that I'm currently already using to show the pieces (i.e. slide the min) to set the background of the thumbnail div without having all the CSS markup manually done. Might be confusing to explain, maybe this code I worked up (that isn't working) could help.

Here's the actual thumbnail HTML:

<a name="allies" class="portbox port-link allieslink">
    <div class="port-info">
        <h3>Creative Allies</h3>
        <p class="port-label">Product</p>
        <p class="port-detail">Print Design</p>
        <p class="port-label">Year</p>
        <p class="port-detail">2010</p>
     </div>
</a>

As of right now, that "allieslink" class has this in the CSS:

.allieslink {
    background: url(IMG/portfolio/allies-link.jpg) center top no-repeat;
}

So what I want to do is take out the manual CSS - have the jQuery calculate based on the "name" setting, then plug in that same name selector (with "-link.jpg" added) as CSS.

Here's my current jQuery code (inside a document ready function):

var artname= $(".port-link").name;
$(".port-link").css("background","url(IMG/portfolio/" + artname + "-link.jpg) center top no-repeat;");

Obviously, this isn't working. I'm not exactly sure why, as I feel like I'm on the right path, it's probably something dumb in there. Just trying to figure out the exact jQuery to make it work right. Help?

(As of right now, have classes in CSS for all of the elements, but you can imagine that as the portfolio grows, this will get quite long.)

Upvotes: 2

Views: 2228

Answers (4)

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13461

To retrieve the value of name attribute use

var artname= $(".port-link").attr('name');

Or

 var artname= $(".port-link")[0].name;

You can retrieve the value of name attribute this way. But this will not solve your problem Entirely. In that case you have to loop through the links and set background for each of them. You can use .each() to do that or even better you can take advantage of the implicit looping of .css() method like this.

$(".port-link").css("background",function(){
   return "url(IMG/portfolio/" + this.name + "-link.jpg) center top no-repeat";
});

And if you want the background to be positioned center bottom on hover then you can do that using jQuery like this.

$(".port-link").hover(function(){
     // hover in set background position for hover
     $(this).css('background-position','center bottom');
 },function(){
     // hover out reset background position
     $(this).css('background-position','center top');
 });

And remove the hover css.

Upvotes: 1

poncha
poncha

Reputation: 7866

Try this:

$(".port-link").each(function() {
    $(this).css('background', 'url(IMG/portfolio/' + $(this).attr("name"); + '-link.jpg) center top no-repeat');
});

This iterates through all the matched elements and applies background accordingly for each one of them using appropriate name

Upvotes: 1

jakee
jakee

Reputation: 18556

you want to get the attribute name, not some field name that probably doesnt even exist:

var artname= $(".port-link").attr('name');

Upvotes: 0

Rodolfo
Rodolfo

Reputation: 4183

try var artname= $(".port-link").attr("name")

Upvotes: 1

Related Questions