Changeset 2437

Timestamp:

07/21/07 02:49:01 (1 year ago)

Author:

kswedberg

Message:

fixed problem in Safari when triggering cluetip from an "area" element
added 'fx' option.

Location:

trunk/plugins/cluetip

Files:

• demo/alt-demo.html (modified) (2 diffs)
• demo/index.html (modified) (2 diffs)
• jquery.cluetip.css (modified) (1 diff)
• jquery.cluetip.js (modified) (7 diffs)

trunk/plugins/cluetip/demo/alt-demo.html

@@ -27 +27 @@
   </ul>
   <div id="container">
-
-    <p>This is a demo page for the new clueTip &mdash; a jQuery-based, AJAX-powered tooltip developed by <a href="http://www.learningjquery.com/">Karl Swedberg</a>. The clueTip plug-in was inspired by <a href="http://www.codylindley.com">Cody Lindley</a>'s jTip script. Many feature ideas were provided by Shelane Enos. Glen Lipka and Jörn Zaefferer provided expert advice. <a href="http://www.tweaktheviking.com">Jonathan Chaffer</a> helped a lot, but eschewed the co-author designation out of sheer modesty. </p>
+    <p>This is a demo page for the new clueTip &mdash; a jQuery-based, AJAX-powered tooltip developed by <a href="http://www.learningjquery.com/">Karl Swedberg</a>. The clueTip plug-in was inspired by <a href="http://www.codylindley.com">Cody Lindley</a>'s jTip script. Many feature ideas were provided by Shelane Enos. <a href="http://commadot.com/">Glen Lipka</a> and <a href="http://bassistance.de/">Jörn Zaefferer</a> provided expert advice. <a href="http://www.tweaktheviking.com">Jonathan Chaffer</a> helped a lot, but eschewed the co-author designation out of sheer modesty. </p>
     <p style="padding: .5em; border: 2px solid #ccc">This page uses the <a href="http://www.codylindley.com/blogstuff/js/jtip/">jTip</a> style for the clueTips. </p>
     <div id="features">
@@ -173 +172 @@
       <li><del>Optimize ajax loading to avoid multiple requests for the same clueTip content.</del> Done!</li>
       <li><del>Allow clueTips to take advantage of Brian Cherne's hoverIntent plugin</del> Done!</li>
-      <li><del>Include some kind of .png alpha transparency fix for IE 6 and under.</del> Done! </li>
+      <li><del>Include some kind of .png alpha transparency fix for IE 6 and under.</del> Abandoned in favor of divs with reduced opacity </li>
     </ul>
     </div>

trunk/plugins/cluetip/demo/index.html

@@ -28 +28 @@
   <div id="container">
 
-    <p>This is a demo page for the new clueTip &mdash; a jQuery-based, AJAX-powered tooltip developed by <a href="http://www.learningjquery.com/">Karl Swedberg</a>. The clueTip plug-in was inspired by <a href="http://www.codylindley.com">Cody Lindley</a>'s jTip script. Many feature ideas were provided by Shelane Enos and Glen Lipka. <a href="http://www.tweaktheviking.com">Jonathan Chaffer</a> helped a lot, but eschewed the co-author designation out of sheer modesty. </p>
+    <p>This is a demo page for the new clueTip &mdash; a jQuery-based, AJAX-powered tooltip developed by <a href="http://www.learningjquery.com/">Karl Swedberg</a>. The clueTip plug-in was inspired by <a href="http://www.codylindley.com">Cody Lindley</a>'s jTip script. Many feature ideas were provided by Shelane Enos. <a href="http://commadot.com/">Glen Lipka</a> and <a href="http://bassistance.de/">Jörn Zaefferer</a> provided expert advice. <a href="http://www.tweaktheviking.com">Jonathan Chaffer</a> helped a lot, but eschewed the co-author designation out of sheer modesty. </p>
     <div id="features">
     <h3>Features</h3>
@@ -163 +163 @@
       <li><del>Optimize ajax loading to avoid multiple requests for the same clueTip content.</del> Done!</li>
       <li><del>Allow clueTips to take advantage of Brian Cherne's hoverIntent plugin</del> Done!</li>
-      <li><del>Include some kind of .png alpha transparency fix for IE 6 and under.</del> Done! </li>
+      <li><del>Include some kind of .png alpha transparency fix for IE 6 and under.</del> Abandoned in favor of divs with reduced opacity </li>
     </ul>
     </div>

trunk/plugins/cluetip/jquery.cluetip.css

@@ -1 +1 @@
 #cluetip {
-  z-index: 1001;
+  position: absolute;
+/*  z-index: 1001;*/
+  background: #d9d9c2;
 }
 #cluetip-outer {

trunk/plugins/cluetip/jquery.cluetip.js

@@ -100 +100 @@
       closeText: 'Close',
       truncate: 0,
+      fx: {
+        open: 'fadeIn',
+        openSpeed: 'fast',
+        close: 'hide',
+        closeSpeed: ''
+      },
       arrows: false, // CHANGE THIS TO true IF YOU WANT jTip-STYLE ARROWS FOR ALL clueTips
       dropShadow: true,
@@ -130 +136 @@
         $cluetip = $('<div></div>')
           .attr({'id': 'cluetip'})
+          .css({zIndex: 1002})
         .append($cluetipOuter)
         .appendTo('body')
@@ -135 +142 @@
         $('<img src="' + defaults.waitImage + '" />')
           .attr({'id': 'cluetip-waitimage'})
-          .css({position: 'absolute', zIndex: '1001'})
+          .css({position: 'absolute', zIndex: 1001})
         .appendTo('body')
         .hide();
-        var cluezIndex = $cluetip.css('zIndex') != 'auto' ? $cluetip.css('zIndex') : '1002';
+        var cluezIndex = $cluetip.css('zIndex') != 'auto' ? parseInt($cluetip.css('zIndex'), 10) : 1002;
         $cluetip.css({position: 'absolute', zIndex: cluezIndex});
         $cluetipOuter.css({position: 'relative', zIndex: +cluezIndex+1});
@@ -149 +156 @@
         };
         $dropShadow.css({position: 'absolute', backgroundColor: '#000'})
-          .appendTo($cluetip);
+          .prependTo($cluetip);
       }
+
       var $this = $(this);      
       var tipAttribute = $this.attr(defaults.attribute);
@@ -176 +184 @@
       var cluetipClose = function() {
         $cluetipOuter 
-        .children().empty().end()
-        .parent().hide();
+        .parent()[defaults.fx.close](defaults.fx.closeSpeed).end()
+        .children().empty();
         if (tipTitle) {
           $this.attr('title', tipTitle);
@@ -224 +232 @@
           $cluetip.css({backgroundPosition: bgPos});
         }
-        
-        $cluetip.show();       
+       
+        $cluetip.hide()[defaults.fx.open](defaults.fx.openSpeed);
       };
 
@@ -270 +278 @@
           $this.addClass(defaults.hoverClass);
         }
-        
-        sTop = $(document).scrollTop();
-        offTop = $this.offset().top;
-        offLeft = $this.offset().left;
-        winWidth = $(window).width();
-        posX = (offWidth > offLeft && offLeft > tipWidth)
-          || offLeft + offWidth + tipWidth > winWidth 
-          ? offLeft - tipWidth - 15 
-          : offWidth + offLeft + 15;
-        posY = offTop;
- 
+        if ($this[0].tagName.toLowerCase() != 'area') {
+          sTop = $(document).scrollTop();
+          offTop = $this.offset().top;
+          offLeft = $this.offset().left;
+          winWidth = $(window).width();
+          posX = (offWidth > offLeft && offLeft > tipWidth)
+            || offLeft + offWidth + tipWidth > winWidth 
+            ? offLeft - tipWidth - 15 
+            : offWidth + offLeft + 15;
+          posY = offTop;
+        }
         $cluetip.css({width: defaults.width});
+
         if ($this.css('display') != 'block' && posX >=0 && $this[0].tagName.toLowerCase() != 'area') {
           $cluetip.css({left: posX + 'px'});