[jQuery] Re: cluetip issue firefox/safari local content w/link

Wed, 24 Jun 2009 14:20:22 -0700

actually, the more I look at the html, the less sense I can make of it. you have DIVs and DLs nested inside As. You also have links within other links. Please make sure that the HTML is valid first and then check the clueTip stuff again. 

thanks,

--Karl

____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Jun 24, 2009, at 4:31 PM, Karl Swedberg wrote:


Hi there,
I copied your html from below and your jQuery, but I can't find in the html any element with a class of "nextcontainer" 

        $('.nextcontainer a.cell_link')


--Karl

____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Jun 24, 2009, at 11:14 AM, kurtzilla wrote:



Cluetip works fine in IE

But in Firefox/Safari....
I am displaying multiple cluetips(7). Each cluetip corresponds to a
different event on our calendar, in theory and for discussion
purposes, one for each day of the week.

Hovering over the first link (sunday) yields a cluetip with a title
and content, however, the content corresponds to the last link
(saturday). In safari - it is displaying content from the third link.

Hovering over any subsequent link shows only a title and no content.
I have moved the link around within the content - to no avail. So, ie, 
it does not matter if the link is within the rel class or within it.
(see the difference between Sunday and Monday below)
If I remove the links from the content, everything works fine.

My goal is to have my content sticky and clickable/linkable. Right
now, I am relying soley on the initial link portion for linking. On
hover, I would like the cluetip to cover up the original link and that 
the cluetip popup be clickable to the relevant page.


html notes....

example cluetip link <a href='/Store/select.aspx?sid=15454'
class="cell_link" rel=".nxt_billing" title="SUNDAY">
the static content is contained within the hd and ft divs - the popup/ 
cluetip content is within the bd div
**note I have also tried linking the rel to bd - but this created even 
more issues as I have other bd divs within the page

html code....(jquery call is below)

<div class="container">
   <table border="0" cellpadding="0" cellspacing="0">
       <tr>
           <td>
               <a href='/Store/select.aspx?sid=15454'
class="cell_link" rel=".nxt_billing" title="SUNDAY">
                   <div class="evt_dialog">
                       <div
class="content">
                           <div
class="hd">
                           Wed 06/24</div>
                           <div class="ft"><img onclick='javascript:
redirect("http://localhost/Store/select.aspx?sid=15454";);' border="0"
src="/Resources/Images/Venues/thumbsm/newbordergray.png" /></div>
                           <div class="bd">
                               <a class="linktip" href='/Store/
select.aspx?sid=15454'>
                                   <div class="nxt_billing">
                                       <img border="0" src="/
Resources/Images/Venues/thumbsm/newbordergray.png" align="right"
class="imagetip" />
                                       <dl><dt>THE SWARGE<dd>EGGO
&amp; STACY</dd><dd>Doors: 8:30 / Show: 09:00 PM</dd><dd>$8 ADV / $12
DOS</dd><dd>All Ages</dd></dt></dl>
                                   </div>
                               </a>
                           </div>
                       </div>
                       <div class="b"><div></div></div>

                   </div>
               </a>
           </td>
           <td>
               <a href='/Store/select.aspx?sid=15452'
class="cell_link" rel=".nxt_billing" title="MONDAY">
                   <div class="evt_dialog">
                       <div
class="content">
                           <div
class="hd">
                           Thu 06/25</div>
                           <div class="ft"><img onclick='javascript:
redirect("http://localhost/Store/select.aspx?sid=15452";);' border="0"
src="/Resources/Images/Acts/thumbsm/Dynamo.jpg" /></div>
                           <div class="bd">
                               <div class="nxt_billing">
                                   <a class="linktip" href='/Store/
select.aspx?sid=15452'>
                                       <img border="0" src="/
Resources/Images/Acts/thumbsm/Dynamo.jpg" align="right"
class="imagetip" />
                                       <dl><dt>THE DYNAMO<dd>SPECIAL
GUEST</dd><dd>Doors: 8:30 / Show: 09:00 PM</dd><dd>$10 ADV / $15 DOS</ 
dd><dd>21+</dd></dt></dl>
                                   </a>
                               </div>
                           </div>
                       </div>
                       <div class="b"><div></div></div>

                   </div>
               </a>
           </td>
           <td>
               <a href='/Store/select.aspx?sid=15430'
class="cell_link" rel=".nxt_billing" title="TUESDAY">
                   <div class="evt_dialog">
                       <div
class="content">
                           <div
class="hd">
                           Fri 06/26</div>
                           <div class="ft"><img onclick='javascript:
redirect("http://localhost/Store/select.aspx?sid=15430";);' border="0"
src="/Resources/Images/Acts/thumbsm/livecrow.jpg" /></div>
                           <div class="bd">
                               <a class="linktip" href='/Store/
select.aspx?sid=15430'>
                                   <div class="nxt_billing">
                                       <img border="0" src="/
Resources/Images/Acts/thumbsm/livecrow.jpg" align="right"
class="imagetip" />
                                       <dl><dt>LIVE CROW &amp;
FRIENDS<dd>SPECIAL GUEST</dd><dd>Doors: 8:30 / Show: 09:00 PM</ dd><dd> 
$16.75 ADV / $22 DOS</dd><dd>21+</dd></dt></dl>
                                   </div>
                               </a>
                           </div>
                       </div>
                       <div class="b"><div></div></div>

                   </div>
               </a>
           </td>
           <td>
               <a href='/Store/select.aspx?sid=15455'
class="cell_link" rel=".nxt_billing" title="WEDNESDAY">
                   <div class="evt_dialog">
                       <div
class="content">
                           <div
class="hd">
                           Fri 07/10</div>
                           <div class="ft"><img onclick='javascript:
redirect("http://localhost/Store/select.aspx?sid=15455";);' border="0"
src="/Resources/Images/Venues/thumbsm/newbordergray.png" /></div>
                           <div class="bd">
                               <a class="linktip" href='/Store/
select.aspx?sid=15455'>
                                   <div class="nxt_billing">
                                       <img border="0" src="/
Resources/Images/Venues/thumbsm/newbordergray.png" align="right"
class="imagetip" />
                                       <dl><dt>THE LEEB<dd>SPECIAL
GUEST</dd><dd>Doors: 8:30 / Show: 09:00 PM</dd><dd>$10 ADV / $15 DOS</ 
dd><dd>All Ages</dd></dt></dl>
                                   </div>
                               </a>
                           </div>
                       </div>
                       <div class="b"><div></div></div>

                   </div>
               </a>
           </td>
           <td>
               <a href='/Store/select.aspx?sid=15441'
class="cell_link" rel=".nxt_billing" title="THURSDAY">
                   <div class="evt_dialog">
                       <div
class="content">
                           <div
class="hd">
                           Fri 07/17</div>
                           <div class="ft"><img onclick='javascript:
redirect("http://localhost/Store/select.aspx?sid=15441";);' border="0"
src="/Resources/Images/Acts/thumbsm/bees.jpg" /></div>
                           <div class="bd">
                               <a class="linktip" href='/Store/
select.aspx?sid=15441'>
                                   <div class="nxt_billing">
                                       <img border="0" src="/
Resources/Images/Acts/thumbsm/bees.jpg" align="right"
class="imagetip" />
                                       <dl><dt>THE BEES<dd>SPECIAL
GUEST</dd><dd>Doors: 8:30 / Show: 09:00 PM</dd><dd>$25</dd><dd>All
Ages</dd></dt></dl>
                                   </div>
                               </a>
                           </div>
                       </div>
                       <div class="b"><div></div></div>

                   </div>
               </a>
           </td>
           <td>
               <a href='/Store/select.aspx?sid=15444'
class="cell_link" rel=".nxt_billing" title="FRIDAY">
                   <div class="evt_dialog">
                       <div
class="content">
                           <div
class="hd">
                           Sat 07/25</div>
                           <div class="ft"><img onclick='javascript:
redirect("http://localhost/Store/select.aspx?sid=15444";);' border="0"
src="/Resources/Images/Acts/thumbsm/pardon.jpg" /></div>
                           <div class="bd">
                               <a class="linktip" href='/Store/
select.aspx?sid=15444'>
                                   <div class="nxt_billing">
                                       <img border="0" src="/
Resources/Images/Acts/thumbsm/pardon.jpg" align="right"
class="imagetip" />
                                       <dl><dt>PARDON<dd>SPECIAL
GUEST</dd><dd>Doors: 11:30 / Show: 11:45 PM</dd><dd>$25 ADV / $30 DOS</ 
dd><dd>All Ages</dd></dt></dl>
                                   </div>
                               </a>
                           </div>
                       </div>
                       <div class="b"><div></div></div>

                   </div>
               </a>
           </td>
           <td>
               <a href='/Store/select.aspx?sid=15450'
class="cell_link" rel=".nxt_billing" title="SATURDAY">
                   <div class="evt_dialog">
                       <div
class="content">
                           <div
class="hd">
                           Wed 08/26</div>
                           <div class="ft"><img onclick='javascript:
redirect("http://localhost/Store/select.aspx?sid=15450";);' border="0"
src="/Resources/Images/Acts/thumbsm/Whois.jpg" /></div>
                           <div class="bd">
                               <a class="linktip" href='/Store/
select.aspx?sid=15450'>
                                   <div class="nxt_billing">
                                       <img border="0" src="/
Resources/Images/Acts/thumbsm/Whois.jpg" align="right"
class="imagetip" />
                                       <dl><dt>WHOIS<dd>SPECIAL
GUEST</dd><dd>Doors: 8:30 / Show: 09:00 PM</dd><dd>$10 ADV / $15 DOS</ 
dd><dd>All Ages</dd></dt></dl>
                                   </div>
                               </a>
                           </div>
                       </div>
                       <div class="b"><div></div></div>

                   </div>
               </a>
           </td>
       </tr>
   </table>
</div>


JQuery code:

$('.nextcontainer a.cell_link').cluetip(
   {
   hoverIntent: {
   sensitivity:  1,
   interval:     300,  //mouseover
   timeout:      400   //mouseout
 },
       local: true,
       cluetipClass: 'jtip',
       showTitle: true, // hide the clueTip's heading
       mouseOutClose: true,
       closePosition: 'title',
       closeText: '<img src="/Images/cross.png" alt="close" />',
       hideLocal: false
           }
    );

Reply via email to