CODEWITHSUNDEEP
jqueryclassattributesaddition
BozoExplosion
BozoExplosion

Reputation: 111

Using jQuery to Add a Class Attribute to images, etc. on Page?

Li'l Help? Apologies in advance due to my jQuery.noob status, but I'm drawing a blank and about out of ideas on why this isn't working. Maybe someone here can see something I'm not? I'd surely appreciate any help.

The Issue

This webpage has several images on it (also paragraphs, etc.) that I want to add a class to. They don't currently have a class on them.

Why I want to Add a Class

I want to use CSS3 to target that class and style anything that has it. More specifically this is going to be a pop-in menu and I'd like to adjust the opacity of it and animate its entry & exit.

How I'm attempting to do This

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
        $("img").addClass("menumain");
                   alert("Here I am!"); //This alert will go when I figure this out, I just added it to see if it pops up (it does).
    });
</script>

I've Also Tried it This Way (Note: All of my images contain the string "menumain-" in the file names)

<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
        $("img[src*=menumain-]").attr({class:"menumain"});

    });
</script>

So What Happens When I Try it?

Nothing. I load the page, (that alert does pop up, which I dismiss) then expand out the body using firebug and / or Safari developer tools, etc. and drill down to the images on the page. I see the image attributes, but I don't see where the class was added, much less defined as "menumain" which is what I want the class to be.

Part of Why This is Driving me Crazy

I have another jQuery script on the same page which does something similar. It adds attributes, not a Class attribute, but other attributes to the main Div which surrounds the whole page. I don't have any problems with that jQuery function, so I don't see why this one isn't working.

Why Might it Not Be Working

I've checked the syntax 9 ways from Sunday, but I don't see anything wrong. Still, you know how proof reading syntax can be.

Secondly the images I'm targeting (I'm also going to try to get the text and buttons in the menu tagged in this same class) are buried down in Divs like this:

<div id="image194" style="visibility: inherit;">
     <a name="image194anc">
          <img width="317" height="564" border="0" alt="menumain-bg-317x564"    src="images/menumain-bg-317x564.png" name="image194Img">
     </a>
</div>

I'm assuming that my targeting of $("img[src=menumain-]")* will find those images whether they are in Divs or not, but maybe I'm wrong on that?

One More Thing

This "web page" is generated by an application called Lectora by Trivantis. It's a WYSIWYG authoring tool for instructional designers (who are NOT web developers) who create on line training. So it's not as if I'm creating this whole thing in DreamWeaver or can change the entire approach to the web design. But I should be able to pop a class on a set of page elements and target them with CSS, no?

Please tell me if you see anything wrong. Here's a version of the page --> http://bit.ly/Rijnl8

Upvotes: 11

Views: 21360

Answers (6)

Suraj
Suraj

Reputation: 11

Before: <img src="http://xyz/wp-content/uploads/2023/02/WhatsApp-Image-2023-01-31.jpeg">

Add Script in header:

<script>
jQuery(document).ready(function() {
        jQuery("img[src*=WhatsApp-Image-2023-01-]").addClass("certificate");
});
</script>

After: <img src="http://xyz/wp-content/uploads/2023/02/WhatsApp-Image-2023-01-31.jpeg" class="certificate">

Upvotes: 0

Sergey Snegirev
Sergey Snegirev

Reputation: 1026

In Lectora 11 you can add classes to any objects. Select the object(s) > Propeties tab > Appearance section > Click little arrow in the corner.

Upvotes: 0

TDimaline
TDimaline

Reputation: 25

You could put the images you want styling inside container divs, then do 

$('.container').addClass('yourClass');

then in the class, use

.yourClass img {}

to style all of the images within those containers. It's a workaround, but it should fix your problem! Also, in HTML5, the use of type="text/javascript" within the <script> tags is no longer required.

Upvotes: 1

dstarh
dstarh

Reputation: 5076

This seems to be what you want http://jsfiddle.net/dstarh/Kxfg7/1/

Add a class to every image on the page

Upvotes: 0

Kevin B
Kevin B

Reputation: 95023

jQuery has a built-in method for adding classes.

<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("img[src*=menumain-]").addClass("menumain");

    });
</script>

http://api.jquery.com/addClass

Upvotes: 6

Jeff Fabiny
Jeff Fabiny

Reputation: 325

Just had to do this in an app I built. You're doing the right thing, but you didn't go far enough. Add a value when you use the .attr function:

$('.category').attr('theAttributeHere','theAttributeValueHere');

Upvotes: 0

Related Questions