PDA

View Full Version : Rich HTML Balloon Tooltip



GoogleQuality
11-11-2008, 08:20 PM
1) Script Title: Rich HTML Balloon Tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm

3) Describe problem:
my problem is that the script is working ok on firefox but it doesn't work on IE6
i don't know what is the problem
my page has an html forum that is being printed using php function, then the divs which will hold the description is being printed after that using another function

any help please

jscheuer1
11-12-2008, 03:56 AM
Demo page works fine in IE 6 here.

Please post a link to the page on your site that contains the problematic code so we can check it out.

GoogleQuality
11-12-2008, 07:40 AM
thanks

yes the demo page worked on my IE also but i didn't know y it didn't work for my website

this is the link

http://www.jjt.ly/exam/survay.php

when you hover your mouse over any text it should popup some info

it's working on FF but not on IE

jscheuer1
11-12-2008, 01:01 PM
It's a name game. Seriously, when IE goes looking for:


<div id="sms" class="balloonstyle" style="width: 350px; background-color:#E67817" dir="ltr">
The well known service. Short message service
</div>

<div id="mms" class="balloonstyle" style="width: 350px; background-color:#E67817" dir="ltr">
The well known service. Multimedia messaging service
</div>


The first thing it sees is:


<tr>
<td style="padding:5px 70px 5px 0px;font-weight:bold"><a href="#" rel="sms">SMS</a>&nbsp;&nbsp;&nbsp;
<select name="sms"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>
</td>

<td style="padding:5px 10px 5px 0px;font-weight:bold"><a href="#" rel="mms">MMS</a>&nbsp;&nbsp;&nbsp;
<select name="mms" ><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>
</td>
</tr>

and it gets confused. So the rel/id used for a tip needs to be unique to the page, and in IE this includes named elements. So you could have:


<tr>
<td style="padding:5px 70px 5px 0px;font-weight:bold"><a href="#" rel="smstip">SMS</a>&nbsp;&nbsp;&nbsp;
<select name="sms"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>
</td>

<td style="padding:5px 10px 5px 0px;font-weight:bold"><a href="#" rel="mmstip">MMS</a>&nbsp;&nbsp;&nbsp;
<select name="mms" ><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>
</td>
</tr>

and:


<div id="smstip" class="balloonstyle" style="width: 350px; background-color:#E67817" dir="ltr">
The well known service. Short message service
</div>

<div id="mmstip" class="balloonstyle" style="width: 350px; background-color:#E67817" dir="ltr">
The well known service. Multimedia messaging service
</div>

That would work.

GoogleQuality
11-13-2008, 11:47 PM
thanks man very much. it worked