[jQuery] Bubble Issue with the browser
<br clear="all"><span class="postbody">Hi
I am having problem with the coda bubble window..
please check the urls:
InternetExplorer view:
<a href="http://img133.imageshack.us/img133/7538/83905753.jpg" target="_blank" class="postlink">http://img133.imageshack.us/img133/7538/83905753.jpg</a>
Mozilla View:
<a href="http://img29.imageshack.us/img29/1955/mozillan.jpg" target="_blank" class="postlink">http://img29.imageshack.us/img29/1955/mozillan.jpg</a>
</span>
<table class="code" align="center" cellpadding="3" cellspacing="1" width="90%">
<tbody><tr>
<td class="row1"><span class="genmed"><b>Code:</b></span></td>
</tr>
<tr>
<td class="row2"><span class="postbody"><font color="#006600"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Coda Bubble Example</title>
<style type="text/css" media="screen">
<!--
* {
margin: 0;
padding: 0;
}
a*{
font-size: 12px;
line-height: 1.2em;
background-color: #fff;
color: #666;
font-family: "Arial";
}
body {
padding: 10px;
}
h1 {
margin: 14px 0;
font-family: 'Trebuchet MS', Helvetica;
}
p {
margin: 14px 0;
font-family: 'Trebuchet MS', Helvetica;
}
.bubbleInfo {
position: relative;
top: 50px;
left: 50px;
width: 500px;
}
.trigger {
position: relative;
}
/*.selectedRow {
border: 1px solid #FF3333;
background-color: #F0F0F0;
cursor: pointer;
} */
/* Bubble pop-up */
.popup {
background-color: #FFFFCC;
position: absolute;
display: none;
z-index: 250;
border-collapse: collapse;
}
.popup td.corner {
height: 15px;
width: 19px;
}
.popup td#topleft { background-image: url(bubble-1.png); }
.popup td.top { background-image: url(bubble-2.png); }
.popup td#topright { background-image: url(bubble-3.png); }
.popup td.left { background-image: url(bubble-4.png); }
.popup td.right { background-image: url(bubble-5.png); }
.popup td#bottomleft { background-image: url(bubble-6.png); }
.popup td.bottom { background-image: url(bubble-7.png); text-align: center;}
.popup td.bottom img { display: block; margin: 0 auto; }
.popup td#bottomright { background-image: url(bubble-8.png); }
.popup table.popup-contents {
font-size: 12px;
line-height: 1.2em;
background-color: #FFFFCC;
color: #666;
font-family: "Arial";
}
table.popup-contents th {
text-align: right;
text-transform: lowercase;
}
table.popup-contents td {
text-align: left;
}
tr#release-notes th {
text-align: left;
text-indent: -9999px;
background: url(starburst.gif) no-repeat top right;
height: 50px;
}
tr#release-notes td a {
color: #333;
}
-->
</style>
<script src="javascript/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript/thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
<script type="text/javascript">
<!--
/*$(function() {
$('div').mouseover(function() {
$(this).addClass('selectedRow');
}).mouseout(function() {
$(this).removeClass('selectedRow');
});
});*/
$(function () {
$('.bubbleInfo').each(function () {
var distance = 10;
var time = 250;
var hideDelay = 100;
var hideDelayTimer = null;
var beingShown = false;
var shown = false;
var trigger = $('.trigger', this);
var info = $('.popup', this).css('opacity', 0);
$([trigger.get(0), info.get(0)]).mouseover(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
// don't trigger the animation again
return;
} else {
// reset position of info box
beingShown = true;
info.css({
top: 150,
left: 140,
display: 'block'
}).animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
}
return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
info.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
shown = false;
info.css('display', 'none');
});
}, hideDelay);
return false;
});
});
});
//-->
</script>
</head>
<body id="page">
<FORM ACTION="">
<div class="bubbleInfo">
<div class="trigger" id="download"
onmouseover="javascript:document.getElementById('download').style.backgroundColor='#F0F0F0';
javascript:document.getElementById('download').style.border= '1px solid
#FF3333';"
onmouseout="javascript:document.getElementById('download').style.backgroundColor='';
javascript:document.getElementById('download').style.border= '';">
DocSearch is a powerful web based, integrated & out of
the box document Scanning - Storing - Searching & Retrieving
system. Designed for higher efficiency and productivity to handle
virtually large volumes of paper forms or documents of any organization
irrespective of size that have a compelling need to digitize, store,
retrieve and process paper based documents. The digitized documents can
therefore be accessed and retrieved on a fly in seconds for future
references or can be retained for archival purposes thereby leveraging
the benefits of digital e-document processing technology.
DocSearch helps virtually any organization in leveraging
the digital revolution to store, search and retrieve the digital
content that can be relied upon as de-facto document processing
capability to yield higher ROI.
<a href="<a href="http://verinon.com/docsearch.html">http://verinon.com/docsearch.html</a>">DocSearch</a>
</div>
<table id="dpop" class="popup">
<tbody><tr>
<td id="topleft" class="corner"></td>
<td class="top"></td>
<td id="topright" class="corner"></td>
</tr>
<tr>
<td class="left"></td>
<td><table class="popup-contents">
<tbody>
<tr>
<td
colspan="2"><u><font face="arial" size="2">Document
Properties</font></u>:</td><td></td>
<td align="right"><a
href="<a href="http://google.com?TB_iframe=true&height=370&width=600&modal=true">http://google.com?TB_iframe=true&height=370&width=600&modal=true</a>"
class="thickbox">ViewPage</a></td></tr>
<tr>
<td><b>Name:</b></td>
<td>MEL2_IC_2009_JAN_EMP12331
</td> <td>Size:120kb |PDF</td>
</tr>
<tr>
<td
colspan="4"><b>Category:</b> Claims |Loc:
Hyd | Owner: James |Created:05-Jun-2009</td>
</tr>
<tr id="release-notes">
<td align="top"><b>Content:</b></td>
<td colspan="2">
WELCOME TO FOOD & WINE IMPORTS<BR>
We recognize and continue to emphasize that outstanding people are the key to our success.
Thanks to each of you, Food & Wine Imports (the "Company") has emerged as a leader in the field of
high end epicurean imports.
<BR><a title="Read the release notes" href="./releasenotes.html">View Additional Properties</a></td>
</tr>
</tbody></table>
</td>
<td class="right"></td>
</tr>
<tr>
<td class="corner" id="bottomleft"></td>
<td class="bottom"><!-- <img
width="30" height="29" alt="popup tail"
src="<a href="http://jqueryfordesigners.com/demo/images/coda/bubble-tail2.png">http://jqueryfordesigners.com/demo/images/coda/bubble-tail2.png</a>"/>
--></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody></table><BR><BR><BR>
</div>
<div class="bubbleInfo">
<div class="trigger" id="download1"
onmouseover="javascript:document.getElementById('download1').style.backgroundColor='#F0F0F0';
javascript:document.getElementById('download1').style.border= '1px
solid #FF3333';"
onmouseout="javascript:document.getElementById('download1').style.backgroundColor='';
javascript:document.getElementById('download1').style.border= '';">
DocSearch is a powerful web based, integrated & out of
the box document Scanning - Storing - Searching & Retrieving
system. Designed for higher efficiency and productivity to handle
virtually large volumes of paper forms or documents of any organization
irrespective of size that have a compelling need to digitize, store,
retrieve and process paper based documents. The digitized documents can
therefore be accessed and retrieved on a fly in seconds for future
references or can be retained for archival purposes thereby leveraging
the benefits of digital e-document processing technology.
DocSearch helps virtually any organization in leveraging
the digital revolution to store, search and retrieve the digital
content that can be relied upon as de-facto document processing
capability to yield higher ROI.
<a href="<a href="http://verinon.com/docsearch.html">http://verinon.com/docsearch.html</a>">DocSearch</a>
</div>
<table id="dpop" class="popup">
<tbody><tr>
<td id="topleft" class="corner"></td>
<td class="top"></td>
<td id="topright" class="corner"></td>
</tr>
<tr>
<td class="left"></td>
<td><table class="popup-contents">
<tbody>
<tr>
<td
colspan="2"><u><font face="arial" size="2">Document
Properties</font></u>:</td><td></td>
<td align="right"><a
href="<a href="http://google.com?TB_iframe=true&height=370&width=600&modal=true">http://google.com?TB_iframe=true&height=370&width=600&modal=true</a>"
class="thickbox">ViewPage</a></td></tr>
<tr>
<td><b>Name:</b></td>
<td>MEL2_IC_2009_JAN_EMP12331
</td> <td>Size:120kb |PDF</td>
</tr>
<tr>
<td
colspan="4"><b>Category:</b> Claims |Loc:
Hyd | Owner: James |Created:05-Jun-2009</td>
</tr>
<tr id="release-notes">
<td align="top"><b>Content:</b></td>
<td colspan="2">
WELCOME TO FOOD & WINE IMPORTS<BR>
We recognize and continue to emphasize that outstanding people are the key to our success.
Thanks to each of you, Food & Wine Imports (the "Company") has emerged as a leader in the field of
high end epicurean imports.
<BR><a title="Read the release notes" href="./releasenotes.html">View Additional Properties</a></td>
</tr>
</tbody></table>
</td>
<td class="right"></td>
</tr>
<tr>
<td class="corner" id="bottomleft"></td>
<td class="bottom"><!-- <img
width="30" height="29" alt="popup tail"
src="<a href="http://jqueryfordesigners.com/demo/images/coda/bubble-tail2.png">http://jqueryfordesigners.com/demo/images/coda/bubble-tail2.png</a>"/>
--></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody></table><BR><BR><BR>
</div>
</FORM>
</body>
</html></font></span></td>
</tr>
</tbody></table>
<span class="postbody">
please anybody advise how to fix this?
Regards,
Bharath</span>
--
భరత్ భూషణ్ అంబటి