11

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.

Improve this question
3
  • you have <script type="text/javascript"> tags inside your .js file. You don't need those script tags in the set-up-touch-events-header.js file- It's causing an error Commented Aug 3, 2012 at 18:17
  • It appears in your example, that the images are not loaded by the time the $(document).ready(...) executes. Pausing the script there on a break point in the chrome debugger shows this - there are no .img tags at that point in time. Your syntax looks correct. Commented Aug 3, 2012 at 18:17
  • You don't need to look for syntax errors. The console in the browser will have the error messages from your scripts, if there is a syntax error it will tell what file and line. Commented Aug 3, 2012 at 18:21

6 Answers 6

Reset to default
6

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

Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

Basically. His real problem is going to be somewhere else, such as whether or not the images exist at that point. This probably should have been a comment.
So the images, since they are part of a "pop up" menu (i.e. the menu is not visible until a button is clicked, then the elements that form the menu like the images and text all just "show up"), they aren't visible on the page when the page loads. Thus the $(document).ready function doesn't trigger the jQuery, because the images "aren't there." And when the menu pops in, nothing triggers the script. Is that about it?
The $(document).ready works, however $("img[src*=menumain-]") doesn't find any images because they aren't attached to the document is my guess. I haven't been to the link you provided to confirm.
Each of those images is in its own Div. I suppose it's possible to target the Div as in "$(Find me all Divs which contain an image which has a source that, itself, contains the string "menumain-"). Any hints on that syntax?
If $("img[src*=menumain-]") doesn't select any images, selecting the image's parent and then the images also won't select any images unless you have a direct reference to that div and the div is a document fragment.
|
1

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.

Improve this answer

Comments

0

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');
Improve this answer

2 Comments

I've seen this a couple of ways: $("img[src*=menumain-]").attr({class:"menumain"}); ~ and also ~ $("img[src*=menumain-]").attr("class","menumain"); I'm not sure if one is wrong, or if they're both usable, but one better than the other for some reason.
@BozoExplosion Can you try adding the class after the images are called? That is, whatever event handler is 'showing' the images, have it use a callback function to add the class. It will happen fast enough that the user won't notice it.
0

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

Add a class to every image on the page

Improve this answer

1 Comment

Yeah, that's pretty much where I'm headed. From the other comments though it appears I'm running into trouble because, strictly speaking, the images either A)aren't visible when the page loads, and so the query for images fails to find any ~ OR ~ B) the script is loading on the page before the images load (whether visible or not) and so the query fails. I'm not sure if it's one of those, both of those, or something else. I need these images to not be visible when the page loads, but to hit 'em with the class anyway.
0

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

Improve this answer

Comments

0

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">

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.