jQuery BeautyTips and IE
December 12, 2008 - 8:39am
The trick
Here is some example code that highlights what you need to do.
<!--[if IE]> <script type="text/javascript" src="/path/to/excanvas-compressed.js"></script> <![endif]--> <script type="text/javascript" src="/path/to/jquery.js"></script> <script type="text/javascript" src="/path/to/jquery.bt.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#example').bt(); }); </script>
First, excanvas is conditionally loaded in IE. Then we load jQuery and Beauty Tips. Finally, we use Beauty Tips.
Does that make sense. You need this flow for dependancies. Any scripts your script depends on need to be loaded (and therefore included) before your script.
December 12, 2008 - 1:35pm
December 12, 2008 - 7:51pm
Error In Page
If you have debugging running on the page http://statecenter.com/industrysectorshardcoded with IE you'll see an error on like 149. That section of code reads:
The error says 'Object doesn't support this property or method'. In this I would start by putting a ; after }) on line 5. This could be causing the problem. Did that work?
December 12, 2008 - 8:00pm
December 13, 2008 - 11:13am
Unsupported Method
The unsupported method looks to be bt on the $ object. I would start by cleaning up the theme with regard to js.
First, get rid of the js var BASE_URL. Instead use DRUPAL.settings.basePath.
Second, use drupal_add_js to add the beauty tips plugin. That will group it with the rest of them and give it some refreshing control.
Third, use drupal_add_js to add the beauty tip instancing, or put it in a scripts.js file. Instead of $ you might try using jQuery.... $ is just a reference to the jQuery object after all.
December 16, 2008 - 6:53pm
I found the problem. It is a
I found the problem. It is a syntax error in IE [Expected Identifier, String or Number]. I deleted one comma at the end of the function and it is working properly.
Thanks for the help Matt, I will post a link when the section using BeautyTips is complete.
March 16, 2009 - 12:36pm
Here is the completed result
Here is the completed result of my first venture into Beautytips.
April 3, 2009 - 5:23am
April 3, 2009 - 9:59am
April 3, 2009 - 12:02pm
Which example isn't working
Which example isn't working in IE8. The Geeks and God or my site, http://statecenter.com/industrysectors. My site seems to be fine in IE8 on XP. It looks like the GeeksandGod.com Beautytips links to email, iTunes, and RSS are not working in IE8 on XP.
Simone, what version of Windows are you running? The problem happens on IE8 in the Windows 7 Beta on my site and GeeksandGod.com. The same issue occurs on the BeautyTips demo page. I think it's that Exporercanvas isn't working in IE8 yet. This is what the BeautyTips plugin relies on to work in IE. Here is a screenshot of the demo page Matt.
IE8 XP http://img.skitch.com/20090403-ebt678t9fms2pyj9tmc...
FF3 OS X http://img.skitch.com/20090403-ej9mw3rywhwntkhhqxu...
I'll work on this and post my progress.
April 3, 2009 - 12:06pm
From the BeautyTips issue Que
From the BeautyTips issue Que on IE8 issues.
http://plugins.jquery.com/node/7109
Apparently you need this code in your head.
<meta http-equiv="X-UA-Compatible" content="IE=7" />
April 3, 2009 - 1:31pm
OK, I think I have my
OK, I think I have my BeautyTips implementation working in IE8. Place
<meta http-equiv="X-UA-Compatible" content="IE=7" /> at the very top of <head> and IE8 will render your page as if it were IE7. This isn't the best solution in my opinion but it will work for the time being.
Here is a link to my implementation of BeautyTips. http://statecenter.com/industrysectors
May 12, 2009 - 1:22am
What am i missing?
Hi, I have been struggling with this for a while and thought I would bug you in my desperation to find a solution. Could someone please have a peek at my implementation of BT and see if it is obvious to you why I can not get this to work in IE8? Thanks for any help.. I am totally stuck at this point. The link is here:
May 12, 2009 - 1:33am
May 12, 2009 - 1:38am
Hi, thanks for the fast
Hi, thanks for the fast reasponse :D It is coming up transparent, the bubbles with no backgrounds. I have made all the changes detailed here and at the jQuery site, I have them loading in the proper order, no bugs detected (at least by firebug).. cant think of what else it could be
May 12, 2009 - 1:40am
May 15, 2009 - 1:03am
May 15, 2009 - 10:28am
June 19, 2009 - 6:06pm
September 1, 2009 - 3:39am
misaligning of text/image and tip bubble
Great tooltip plug in – prettiest one I’ve seen. However, I have problems implementing it. It works without the below CSS, which is needed for the background of the website.
body {
font-family:Trebuchet MS, Helvetica, Arial, sans-serif;
font-size:75%;
line-height:1.5em;
text-align:center; /* if I remove this line, the positioning of the text/image and
bubble line up properly */
background:url(../images/page-bg-line.jpg) top left repeat-x #FFFFFF;
}
The words and images are shifted to the left or right, so it they are positioned outside the tooltip. (However, when using the complex animation tip, the words are centred).
As I’m not a CSS guru, I just wondered if someone can help me resolve this frustrating problem, which I’ve spent hours on. I’ve read some issues about absolute and relative position – is this my problem, if so how do I make the necessary changes – but I thought this was corrected with the latest version, which I am using?
The below shows what files I’m using and the js:
link rel="stylesheet" type="text/css" href="style/copy of copy of style.css">
<!-- STUFF YOU NEED FOR BEAUTYTIPS -->
<script src="BeautyTips/other_libs/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="BeautyTips/other_libs/jquery.hoverIntent.minified.js" type="text/javascript" charset="utf-8"></script>
<script src="BeautyTips/other_libs/bgiframe_2.1.1/jquery.bgiframe.min.js" type="text/javascript" charset="utf-8"></script>
<script src="BeautyTips/other_libs/excanvas_r3/excanvas.js" type="text/javascript" charset="utf-8"></script>
<script src="BeautyTips/jquery.bt.min.js" type="text/javascript" charset="utf-8"></script>
<!-- /STUFF -->
<!-- cool easing stuff for animations -->
<script src="BeautyTips/other_libs/jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
<!-- /easing -->
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#example1').bt();
$('#example16').bt('<img src="images/header-gallery-botox-f.png" width="200" height="197" />',
{
width: 200,
fill: 'white',
cornerRadius: 20,
padding: 20,
strokeWidth: 1,
trigger: ['mouseover']
});
$('#example20').bt({
showTip: function(box){
var $offsetParent = $("#example20");
var $content = $('.bt-content', box).hide(); /* hide the content until after the animation */
var $canvas = $('canvas', box).hide(); /* hide the canvas for a moment */
var origWidth = $canvas[0].width; /* jQuery's .width() doesn't work on canvas element */
var origHeight = $canvas[0].height;
$(box).show(); /* show the wrapper, however elements inside (canvas, content) are now hidden */
$canvas
.css({width: origWidth * .5, height: origHeight * .5, left: origWidth * .25, top: origHeight * .25, opacity: .1})
.show()
.animate({width: origWidth, height: origHeight, left: 0, top: 0, opacity: 1}, 400, 'easeOutBounce',
function(){$content.show()} /* show the content when animation is done */
);
},
/* when using hideTip, do NOT forget 'callback' at end of animation */
hideTip: function(box, callback){
var $content = $('.bt-content', box).hide();
var $canvas = $('canvas', box);
var origWidth = $canvas[0].width;
var origHeight = $canvas[0].height;
$canvas
.animate({width: origWidth * .5, height: origHeight * .5, left: origWidth * .25, top: origHeight * .25, opacity: 0}, 400, 'swing', callback); /* callback */
},
/* other options */
shrinkToFit: true,
hoverIntentOpts: {
interval: 0,
timeout: 0
}
});
});
</script>
</head>
Plugins.
<body>
<p> hello I am fine <span id="example1" title="The content of this tooltip is provided by the 'title' attribute of the target element.">hover</span was not you ></p>
<p> test me <span id="example16">hover</span></p>
<p> testing testing <span id="example20" title="Animations are a bit complicated, but very flexible.">hover</span>
</p>
</body>September 4, 2009 - 7:45am
Fix to misaligning of text/image and tip bubble
Hi
I had the same problem, the problem is the centered body.
To fix this you just have to add this simple code to your css file:
div.bt-wrapper {
text-align: left;
}Keep in mind that the bubble code is added to the end of body element, but all elements of the div must be left aligned.
---
Best regards
October 20, 2009 - 9:57am
November 14, 2009 - 2:51am
im soo stuck
First off I must say I love Geeks and God and I miss the Mustardseed podcast. I had a client fall in love with the look of the Beautytips module and I have been trying to implement it all day. I even sat in the IRC channel asking people but with no luck. Can anyone here help me? I am trying to get an image on the top right of touchplandirect.com to display an image below it when hovered. If you could help me I would reaaallly appreciate it! Keep up the great work!
November 27, 2009 - 8:47am
Regarding jquery beauty tips 0.95 version
Hey even though you are using 0.95 version of beauty tips but still in its demo page they had use
so i think you are using this statement in your code thats why its working fine at your side..
Please check and let me know..
If possible show me url where ur beauty tips pluggins is workig well..
December 8, 2009 - 11:34am
November 2, 2010 - 6:30am
Beauty Tip Issue regarding
I have a very little knowledge about beauty tip. So please help me out with this problem.
In my project, beauty tip and hoverIntent plugings are used. When the mouse pointer is made to hover on any of the link, a bubble tooltip gets displayed with the link's respective contents. There are hyperlinks within the bubble tooltip too. When I click anyone of those links it is opening the parent link's page.
To be more clearer.
MyLink--> If this a link on which I hover the mouse pointer, A bubble tooltip with the following content gets displayed.
This is my link. You can click YourLink too.
--> Here "YourLink" is a hyperlink. When I click this, it is opening MyLink's page but not that of YourLink's.
How do I solve this problem?
So I am venturing into jQuery and I like the Jeff Robbins jQuery plugin BeautyTips. Matt Farina is using it on Geeks and God. How can I get this to work in IE? I have ExplorerCanvas loading but it still won't work in IE. It works perfectly in Firefox and Webkit. I am really stumped.
bobkepford.com