I think there is alot of stuff going on in this thread.
Some best practices though:
never use ID unless it truly is a 1 time thing. Like
1. A global header
2. A global footer
3. Left nav container.
These are things that will never ever have something else like it.
Otherwise, always use classes.
In general in jQuery you use the following syntax:
$("CSS").jQueryFunction();
So for what is possible in the first part, look here:
http://docs.jquery.com/Selectors
Ad the second part look here: http://jquery.com/api/ or
http://www.visualjQuery.com
The jQuery "way" is different than straight javascript programming. Usually
much easier.
Look at the tutorials, even if you are a solid JS programmer. It helps to
get the basics.
Otherwise, I am lost as to what this thread is asking for at this point. :)
Glen
On 7/20/07, Andy Matthews <[EMAIL PROTECTED]> wrote:
You're probably right that your glossy and iradius50 "classes" are
interfering with jQuery code.
Have you tried this:
$('.glossy').click(function(){
alert('testing');
}
Concerning the xPath options that the previous poster mentioned. Let's
pretend we have a navbar (id=navigation) with multiple buttons inside it,
like so:
<div id="navigation">
<img src="images/Advanced Search Glossy_WIDE.jpg" class="glossy iradius50"
alt="" />
<img src="images/Home Glossy_WIDE.jpg" class="glossy iradius50" alt="" />
<img src="images/Contact Us Glossy_WIDE.jpg" class="glossy iradius50"
alt=""
/>
</div>
Now each of those buttons has a number of ways that you can access it:
$('img') // assuming that you want all images to have the click behaviour
$('.glossy') //only images with the glossy class applied to it
$('#navigation img') //all images contained within the div with an id of
navigation
This last one might be the most useful to you, assuming that these buttons
have a parent container with a unique identifier.
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Mitchell Waite
Sent: Friday, July 20, 2007 1:41 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Click to call a fuction?
How generous of you to go into this detail and give me so many options.
Sadly I tried all of these techniques and none of them worked.
1. The mixing of the ID and class in my first example still didn't work.
2. The idea of adding the additional class xyz to the existing class
didn't
work. It may be because
class="glossy iradius50"
"glossy" is a cool plugin that modifies button images so they have curved
edges and look like glass and "iradius50" is a parameter for glossy.
Glossy
is just is.
3. Using an .xyz class in the div did not work either. I am not sure why.
Perhaps the two classes are interfering with each other.
I need to read more about selectors.
It may also be my project has too many bells and whistles that it's not a
true test of your ideas.
-----
Essentially, you need some way with CSS (or possibly XPath) selectors to
distinguish the elements that need your new behavior. Create a selector
for
those elements and create a JQuery object from them using the "$()"
function. Then it's easy to send a behavior to the click method of this
JQuery object.
------
I have read this 10 times and I am still not sure what you are saying.
Mitch
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Scott Sauyet
Sent: Friday, July 20, 2007 11:01 AM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Click to call a fuction?
Goofy wrote:
> What happens if you already have some 3rd party class on the image
> like this:
>
> <img src="images/Advanced Search Glossy_WIDE.jpg" class="glossy
> iradius50" alt="" />
>
> If I add an ID the click never gets fired
>
> <img src="images/Advanced Search Glossy_WIDE.jpg" id="PanelOpenGlossy"
> class="glossy iradius50" alt="" />
It should. This
$('#PanelOpenGlossy').click(function(){
alert('testing');
}
should work.
> My other question is this: the ID has to be unique for this approach
> to work, right? You can't call the same function but have to make a
> new one. That seems inefficient as I would be repeating the same
> function for every click, only difference would be there IDs.
If you can add an additional class, e.g. class="glossy iradius50 xyz", to
all the relevant images, then you can simply change the selector above:
$('.xyz').click(function(){
alert('testing');
}
Notice the change from "#" to "."; this is the CSS way of switching from
ids
to classes.
If you can't add this class, you'll need to find some other way of
distinguishing them from images that shouldn't have this functionality.
For instance if this is all the images inside any div with class
"clickable", then you might use:
$("div.clickable img").click(function() {
alert('testing');
}
Or if you need only those images inside the div with id "main" that don't
have the class "ignoreMe", you might try
$("#main img").not(".ignoreMe").click(function() {
alert('testing');
}
Essentially, you need some way with CSS (or possibly XPath) selectors to
distinguish the elements that need your new behavior. Create a selector
for
those elements and create a JQuery object from them using the "$()"
function. Then it's easy to send a behavior to the click method of this
JQuery object.
Good luck,
-- Scott
