BeautyTips and exact positioning
Sunday, May 31st, 2009
While developing ideaday.de – my company's website – I came up with the idea to use speech bubbles for user interaction, along with a picture of three business men set against a sunset background.
There's a wonderful plugin called BeatyTips to create these bubbles. It's using so-called canvas drawing to create these beatiful speech bubbles, originally meant as tool tips.
So far, so good. I set up my picture as a background image, and inserted the bubble JS code.
That's where the trouble with exact positioning started. You see, I wanted the image to be centered, and the bubble's spikes to protrude from the most likely mouth position of each of the men.
Here's the code I finally came up with – it may be of use to some people running into the same problems.
1) index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
It's important that the DOCTYPE is transitional – with strict DOCTYPE, IE 7 wouldn't show the bubbles
<HTML lang="de">
<HEAD>
(…)
<!– BEAUTYTIPS –>
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.hoverIntent.minified.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bgiframe_2.1.1/jquery.bgiframe.min.js" type="text/javascript" charset="utf-8"></script>
<!–[if IE]><script src="js/excanvas_r3/excanvas.js" type="text/javascript" charset="utf-8"></script><![endif]–>
<script src="js/jquery.bt.min.js" type="text/javascript" charset="utf-8"></script>
<!– /STUFF –>
There's a lot going on here. Jquery, the base JS library BeautyTips is based upon, is included. If the browser is IE – this is an IE specific control structure, the other browsers treat this as a comment – ExplorerCanvas developed by Google is included:
Firefox, Safari and Opera 9 support the canvas tag to allow 2D command-based
drawing operations. ExplorerCanvas brings the same functionality to Internet
Explorer; web developers only need to include a single script tag in their
existing canvas webpages to enable this support.
<link href="css/ideaday.css" rel="stylesheet" type="text/css" />
</HEAD>
<BODY>
<DIV style="position:relative; height:100%; width:100%; overflow:hidden;">
The table (see below) is actually higher than the viewport's height – this DIV, in combination with additional CSS (see below), prevents the browsers from displaying scroll bars, the content is clipped to viewport height – which makes for a nice user experience ("What's the scrollbar for, hon?").
<center>
<TABLE border="0" width="1181px" height="100%" style="background-image: url('/assets/ideaday-team.jpg'); background-repeat:no-repeat; border-style:none;">
<TR height="260px"><TD colspan=7> </TD></TR>
<TR height="1px">
<TD width="300px"> </TD>
<TD width="1px"><DIV type="text" id="left" style="" class="target"></DIV></TD>
<TD width="253px"> </TD>
<TD width="1px"><DIV type="text" id="center" style="" class="target"></TD>
<TD width="253px"> </TD>
<TD width="1px"><DIV type="text" id="right" style="" class="target"></TD>
<TD> </TD>
<TR height="700px"><TD colspan=7> </TD></TR>
</TABLE>
</center>
</DIV>
The table is set to the width of the background image. The height, and an "*" for the last TR's height is respected by Firefox and Opera – but not by IE. Using 700px for the last TR ensures the table shows the full background image (which is 826px high), whereas the DIV above clips it to viewport height.
The bubbles' spikes will begin at the 1px wide and high DIVs included in the TDs above. To position them exactly, I've built this whole table and tailored the position of the containing TDs to fit. Positioning the DIVs absolutely won't work, as you have no idea where the image actually is (it is centered, remember?), and BeautyTips had trouble with relative positioning. This table method does work like a charm, though!
<script type="text/javascript">
window.onload = function(){
$('#left').bt({
trigger: 'none',
clickAnywhereToClose: false,
ajaxPath: '/php/interact.php',
width: 600,
fill: 'rgba(255, 255, 255, .9)',
strokeWidth: 0, /*no stroke*/
spikeLength: 40,
spikeGirth: 10,
padding: 20,
cornerRadius: 30,
cssStyles: {
fontFamily: 'tahoma,verdana,arial,sans-serif',
fontSize: '13px'
}
});
$('#left').btOn();(…)
</BODY>
</HTML>
This is the actual script to display the speech bubble, loading the contents via AJAX. I toggle it on manually ($('#left').btOn();), there's no on mouse-over event in my case.
2) ideaday.css
html,body{
margin:0;
padding:0;
height:100%;
border:none;
overflow:auto;
background-color:#000;}
html>body { overflow: visible; }
(…)
- To avoid a black border on top of the image, we have to set margin and padding of html and body to zero.
- The height has to be 100% as IE sets the viewport height to what is needed by the content – the table's 100% would NOT correspond to the full viewport height which is available. On second thought, maybe one could do without this, as the table's last row is stretching beyond the picture's height, thus forcing the viewport to be high enough.
- the overflow:auto and html>body part are needed to prevent the Internet Explorer showing scrollbars.
Voilà.
Margaret Thatcher from WikipediaThese are excerpts from an interesting 