CODEWITHSUNDEEP
javascriptjquery
kdjernigan
kdjernigan

Reputation: 397

Javascript/Jquery: How do I modify this script to avoid have to use a <A> tag?

One of the issues I have with this script is that I have to have a link tag to get the rel from it. I am looking at doing descriptions when user mouseover's a table row.

What I need: If TD has desc, append text. <td desc="blah blah blah">

 this.screenshotPreview = function () {
     xOffset = 20;
     yOffset = 30;

     $("tr:has(a[desc])").hover(function (e) {
         var text = $(this).find('a').attr('desc');
         $("body").append("<p id='screenshot'>" + text + "</p>");
         $("#screenshot")
             .css("top", (e.pageY - yOffset) + "px")
             .css("left", (e.pageX + xOffset) + "px")
             .fadeIn("fast");
     },function () {
         this.title = this.t;
         $("#screenshot").remove();
     });
     $("a.screenshot").mousemove(function (e) {
         $("#screenshot")
             .css("top", (e.pageY - yOffset) + "px")
             .css("left", (e.pageX + xOffset) + "px");
     });
 };


 // starting the script on page load
 $(document).ready(function () {
     screenshotPreview();
 });

JSFIDDLE: http://jsfiddle.net/zD99p/1/ (in jsfiddle, it still uses rel instead of desc. You can code it either way, I can change that with no problem)

Upvotes: 0

Views: 57

Answers (3)

Slobodan Stojanovic
Slobodan Stojanovic

Reputation: 174

Maybe something like this:

...
 $("td[desc]").hover(function (e) {
     var text = $(this).attr('desc');
     $("body").append("<p id='screenshot'>" + text + "</p>");
...

And change html to this:

<td desc="blah blah">content ...

http://jsfiddle.net/6yMNM/

Upvotes: 1

Axel Amthor
Axel Amthor

Reputation: 11096

in your JSFIDDLE you missed a closing </a>. I changed that and changed the <a>to a <div>and it worked. look here.

Upvotes: 0

Jason P
Jason P

Reputation: 27012

You can use data- attributes:

http://jsfiddle.net/MWkXJ/

<td data-desc="..."></td>

$("td[data-desc]").hover(function (e) {
     var text = $(this).data('desc');
     //...

Upvotes: 3

Related Questions