Calling a jQuery Function on a Dynamic id

[Steve Dyke]

This is probably the strangest request of the day.

I am building a table using jstl loop. one of the columns contains a tool description. I am placing the content in a span tag. My idea is to use jQuery.hoverIntent to display an image of the tool from this column content.

My issue is the cells in this column are dynamically assigned an id using the row/col number.

How can I set up my jQuery function based on these dynamic id's.

[Bear Bibeault]

I wouldn't.

Rather, assign a common class name to the elements, and bind a single event handler to all of them via the class name. Remember that the target element is available as event.target (or this if the target and trigger are one and the same).

[Steve Dyke]

Bear Bibeault wrote:I wouldn't.

Rather, assign a common class name to the elements.

So first instead of the id="uniqueID" attribute in the span tag I would use say class="toolDescColumn"?

[Bear Bibeault]

Pretty much. Why bother with ids if you don't need to?

Also, modern convention is to use dashes for class names rather than camel case. So tool-description rather than toolDescColumn (if it's a span, it's not a column, so don't call it that).

Whether it goes on the span or not depends on how you want to use the event.

[Steve Dyke]

Bear Bibeault wrote:(if it's a span, it's not a column, so don't call it that).

I am just a little confused here.

This is my code. Isn't the span necessary so the class has a tag for this attribute to be contained in. Or do I class the td tag?

<c:when test="${status2.count == 3}">
	<td class="autoscaledTD7">
		<span class="tool-description">${arrayElement}</span>
	</td>
	</c:when>

[Steve Dyke]

Bear Bibeault wrote:I wouldn't.

Rather, assign a common class name to the elements, and bind a single event handler to all of them via the class name. Remember that the target element is available as event.target (or this if the target and trigger are one and the same).

I have my hoverIntent function firing now, bound class to hoverIntent event, how do I get the value of the cell I hover over.

[Bear Bibeault]

Steve Dyke wrote:Isn't the span necessary so the class has a tag for this attribute to be contained in. Or do I class the td tag?

Why would you think that you could not put the class on the <td>?

Steve Dyke wrote:I have my hoverIntent function firing now, bound class to hoverIntent event, how do I get the value of the cell I hover over.

If the class is placed on the <td> element, it can be obtained as I already posted above.

If the event fires on an inner <span>, I'd use .closest() to find the parent <td> element.

[Steve Dyke]

I have changed up my way of doing this a little.

Each cell has an image tag that displays as 30 x 30 pixels. The img tag is classed.

My desire is when hovered over the image displays as 100 x 100 pixels.

this is as far as I have gotten. but this causes all of the img tags to expand at the same time, not just the targeted one. Also how can I get it to expand outside the cell so it does not affect row height:

<td class="autoscaledTD7">
    <img title="Hover to Expand" class="modified30ToolPicture" src="${imgPath}">
</td>


$(document).ready(function(){
    $(".modified30ToolPicture").hoverIntent(function(){
        //alert(this.src);
       $(".modified30ToolPicture").css({width: '100px', height: '100px'});
   },
   function(){
       $(".modified30ToolPicture").css({width: '30px', height: '30px'});
});

});

[Bear Bibeault]

Ditch the script -- and you certainly don't need something as complicated as hoverIntent() for something so simple.

Just use CSS:

img.i-inflate-on-hover:hover { width: 100px, height: 100px; }

(assuming a class name of i-inflate-on-hover )

[Bear Bibeault]

Steve Dyke wrote:Also how can I get it to expand outside the cell so it does not affect row height:

That's a tougher one. You'll need to dicker around relative or absolute positioning, to take the image out of the normal flow, and possibly z-index. Personally, unless that's a required approach, I'd try something other than inflating the image.

What are you actually trying to accomplish?

[Bear Bibeault]

P.S. It might also be easier to do with jQuery animations. I do something similar (drop an element out of the flow and increase its size) in the examples of chapter 5 of jQuery in Action (2nd Ed) (I forget if you have a copy or not).

[Steve Dyke]

Bear Bibeault wrote:What are you actually trying to accomplish?

I just want to show a thumb nail image in a cell and when the user hovers over the image and stops for however long the image expands to a descerable size. When the cursor leaves the image it goes back to thumb nail.

And no I do not have a copy of the jQuery in Action book.

[Bear Bibeault]

If I understand what you are after, that's called a "lightbox". I think you may find lots of hits for a search on lightbox plugin.

[Bear Bibeault]

Steve Dyke wrote:And no I do not have a copy of the jQuery in Action book.

(kidding)

[Steve Dyke]

Bear Bibeault wrote:If I understand what you are after, that's called a "lightbox". I think you may find lots of hits for a search on lightbox plugin.

I have looked at Lightbox2 but it requires that you have the image in two different sizes. My desire is to expand the one image from 30 x 30 px to 100 x 100 px then back again.

[Bear Bibeault]

Steve Dyke wrote:

Bear Bibeault wrote:If I understand what you are after, that's called a "lightbox". I think you may find lots of hits for a search on lightbox plugin.

I have looked at Lightbox2 but it requires that you have the image in two different sizes. My desire is to expand the one image from 30 x 30 px to 100 x 100 px then back again.

Use 2 of the same image? Find another plugin?

(Note that if the image is normal resolution at 100x100, it's gonna look like crap expanded to 300x300. Make sure that the image is native to the larger size.)