Jquery UI, location of dialog box

I've got a jquery UI dialog box that pops up next to links, in my example the box will appear next to the link, but in the working copy it does not.  Can anyone see what is going wrong?

Faulty Code:
 
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>

<script type="text/javascript">
   $(function(){
      $('.fillme').each(function() {
         var $link=$(this);
         var p = $(this).position();
         var $dialog = $("div."+this.id)
         .dialog({
            autoOpen: false,
            position: [p.left+50,p.top],
            resizable: false,
            width:3,
            minHeight:20
         });

         $link.hover(
         function(e) {
            //var x =  e.pageX//$(this).position().left;
           // var y =  e.pageY//$(this).position().top;
            //$dialog.dialog("option","position",[x+30,y-30])
            $dialog.dialog('open');
            //alert ("Left: "+x+"   top:  "+y+"mLeft: "+f.pageX+"   mtop:  "+f.pageY);
            return false;
         },
         function() {
            $dialog.dialog('close');
            return false;
         });
      });

      //add a few custom mods to form
      $(".ui-dialog-titlebar").hide();
      $('table').attr({width:'95%', id:'sorttable'});
      $('tr:gt(0)').addClass('datatab');
      $("#sorttable").tablesorter();

   });

</script>

<link rel="stylesheet" type="text/css" href="css/general.css">

<div>
   <table><thead>
		<tr>

			<th>Qualification Title</th>
			<th>NDAQ Reference</th>
			<th>Qualification Type</th>
			<th>approvalEndDate</th>
			<th>Score</th>
			<th>Vocational</th>

			<th>Domain</th>
			<th>Qualification Status</th>
			<th>Qualification Level</th>
			<th>Approved</th>
			<th>Number of Courses</th>
			<th>Pathways</th>

			<th>providerId</th>
</tr>
		</thead>		<tbody><tr>
			<td>WJEC Level 3 Key Skills in Application of Number</td>
			<td>10003137</td>
			<td>KS</td>
			<td>Aug 31 2010 12:00AM</td>

			<td>24</td>
			<td>G</td>
			<td>E</td>
			<td>Live</td>
			<td>3</td>
			<td>Y</td>

			<td>1</td>
			<td>1</td>
			<td>4354</td>
		</tr>
<tr>
			<td>WJEC Level 3 Key Skills in Communication</td>
			<td>10003162</td>

			<td>KS</td>
			<td>Aug 31 2010 12:00AM</td>
			<td>24</td>
			<td>G</td>
			<td>E</td>
			<td>Live</td>

			<td>3</td>
			<td>Y</td>
			<td>1</td>
			<td>1</td>
			<td>4354</td>
		</tr>

<tr>
			<td>WJEC Level 3 Key Skills in Information and Communication Technology</td>
			<td>10003198</td>
			<td>KS</td>
			<td>Aug 31 2010 12:00AM</td>
			<td>24</td>
			<td>G</td>

			<td>E</td>
			<td>Live</td>
			<td>3</td>
			<td>Y</td>
			<td>1</td>
			<td>1</td>

			<td>4354</td>
		</tr>
<tr>
			<td>EDEXCEL Level 3 BTEC National Certificate in Hairdressing</td>
			<td>10030463</td>
			<td>VRQ</td>
			<td>Aug 31 2010 12:00AM</td>

			<td>0</td>
			<td>V</td>
			<td>C</td>
			<td>Live</td>
			<td>3</td>
			<td>Y</td>

			<td>1</td>
			<td>1</td>
			<td>4354</td>
		</tr>
<tr>
			<td>EDEXCEL Level 3 BTEC National Award in Hairdressing</td>
			<td>10030475</td>

			<td>VRQ</td>
			<td>Aug 31 2010 12:00AM</td>
			<td>0</td>
			<td>V</td>
			<td>C</td>
			<td>Live</td>

			<td>3</td>
			<td>Y</td>
			<td>1</td>
			<td>1</td>
			<td>4354</td>
		</tr>

<tr>
			<td>WJEC Level 3 Key Skills in Improving Own Learning and Performance</td>
			<td>10038310</td>
			<td>KS</td>
			<td>Aug 31 2010 12:00AM</td>
			<td>24</td>
			<td>G</td>

			<td>E</td>
			<td>Live</td>
			<td>3</td>
			<td>Y</td>
			<td>1</td>
			<td>1</td>

			<td>4354</td>
		</tr>
<tr>
			<td>WJEC Level 3 Key Skills in Problem Solving</td>
			<td>10038358</td>
			<td>KS</td>
			<td>Aug 31 2010 12:00AM</td>

			<td>24</td>
			<td>G</td>
			<td>E</td>
			<td>Live</td>
			<td>3</td>
			<td>Y</td>

			<td>1</td>
			<td>1</td>
			<td>4354</td>
		</tr>
<tr>
			<td>WJEC Level 3 Key Skills in Working With Others</td>
			<td>10038395</td>

			<td>KS</td>
			<td>Aug 31 2010 12:00AM</td>
			<td>24</td>
			<td>G</td>
			<td>E</td>
			<td>Live</td>

			<td>3</td>
			<td>Y</td>
			<td>1</td>
			<td>1</td>
			<td>4354</td>
		</tr>

<tr>
			<td>WJEC Level 3 Welsh Baccalaureate Advanced Diploma</td>
			<td>50018048</td>
			<td>OG</td>
			<td>Aug 31 2012 12:00AM</td>
			<td>0</td>
			<td>G</td>

			<td>E</td>
			<td>Live</td>
			<td>3</td>
			<td>Y</td>
			<td>1</td>
			<td>1</td>

			<td>4354</td>
		</tr>
<tr>
			<td>EDEXCEL Level 3 BTEC National Certificate in Art and Design</td>
			<td>50018073</td>
			<td>VRQ</td>
			<td>Aug 31 2010 12:00AM</td>

			<td>0</td>
			<td>V</td>
			<td>D</td>
			<td>Live</td>
			<td>3</td>
			<td>Y</td>

			<td>1</td>
			<td>1</td>
			<td>4354</td>
		</tr>
<tr>
			<td>EDEXCEL Level 3 BTEC National Award in Art and Design</td>
			<td>50018097</td>

			<td>VRQ</td>
			<td>Aug 31 2010 12:00AM</td>
			<td>0</td>
			<td>V</td>
			<td>D</td>
			<td>Live</td>

			<td>3</td>
			<td>Y</td>
			<td>1</td>
			<td>1</td>
			<td>4354</td>
		</tr>

<tr>
			<td>EDEXCEL Level 3 BTEC National Diploma in Art and Design</td>
			<td>50018103</td>
			<td>VRQ</td>
			<td>Aug 31 2010 12:00AM</td>
			<td>0</td>
			<td>V</td>

			<td>D</td>
			<td>Live</td>
			<td>3</td>
			<td>Y</td>
			<td>1</td>
			<td>1</td>

			<td>4354</td>
		</tr>
<tr>
			<td>AQA Level 3 Advanced GCE with Advanced Subsidiary GCE (Additional) in Travel and Tourism</td>
			<td>50036725</td>
			<td>GCE</td>
			<td>Aug 31 2014 12:00AM</td>

			<td>120</td>
			<td>V</td>
			<td>C</td>
			<td>Live</td>
			<td>3</td>
			<td>Y</td>

			<td><div class='fillme' id='50036725'>2</div></td>
			<td>1</td>
			<td>4354</td>
		</tr>
<tr>
			<td>Cambridge International Level 3 Pre-U Certificate  in Art History (Principal)</td>
			<td>50042555</td>

			<td>OG</td>
			<td>Aug 31 2011 12:00AM</td>
			<td>80</td>
			<td>G</td>
			<td>D</td>
			<td>Live</td>

			<td>3</td>
			<td>Y</td>
			<td>1</td>
			<td>1</td>
			<td>4354</td>
		</tr>

<tr>
			<td>EDI Level 2 NVQ in Food Processing and Cooking</td>
			<td>10058722</td>
			<td>NVQ</td>
			<td>Jul 31 2010 12:00AM</td>
			<td>100</td>
			<td>V</td>

			<td>C</td>
			<td>Live</td>
			<td>2</td>
			<td>Y</td>
			<td>1</td>
			<td>1</td>

			<td>4354</td>
		</tr>
<tr>
			<td>City & Guilds Level 2 NVQ in Food Manufacture</td>
			<td>50020481</td>
			<td>NVQ</td>
			<td>Dec 31 2010 12:00AM</td>

			<td>0</td>
			<td>V</td>
			<td>A</td>
			<td>Live</td>
			<td>2</td>
			<td>Y</td>

			<td>1</td>
			<td>1</td>
			<td>4354</td>
		</tr>
<tr>
			<td>WJEC Level 1/Level 2 GCSE in Additional Mathematics (Pilot)</td>
			<td>10064588</td>

			<td>GCSE</td>
			<td>Aug 31 2011 12:00AM</td>
			<td>20</td>
			<td>G</td>
			<td>A</td>
			<td>Live</td>

			<td>1,2</td>
			<td>Y</td>
			<td><div class='fillme' id='10064588'>2</div></td>
			<td>1</td>
			<td>4354</td>
		</tr>

<tr>
			<td>City & Guilds Level 1 Certificate in General Food and Beverage Service (QCF)</td>
			<td>50067540</td>
			<td>QCF</td>
			<td>Dec 31 2010 12:00AM</td>
			<td>0</td>

			<td>V</td>
			<td>C</td>
			<td>Live</td>
			<td>1</td>
			<td>Y</td>
			<td>1</td>

			<td>1</td>
			<td>4354</td>
		</tr>
</tbody></table><div class='hidden'>
<div id='multi-paths'><div class='10064588'>MATH<br />Additinal Mathematics<br />Maths<br />-Gcse In Additional Mathematics<br />-Gcse In Additional Mathematics<br />-Gcse In Additional Mathematics<br />Mathematics Additional<br />WJEC Level 1/Level 2 GCSE in Additional Mathematics (Pilot)<br />Additional Mathematics<br />Additional Maths<br />Certificate in Additional Maths<br />Additional Maths<br />Additional Maths test100510<br />Mathematics-Additional<br />Mathematics<br />Gcse In Additional Mathematics</div>

<div class='50036725'>Travel and Tourism Year 12<br />Travel and Tourism Year 13</div>
</div>

</div>

Open in new window

Working test:
 
<html>
   <head>
      <link type="text/css" href="css/custom-theme/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
      <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
      <script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
      <script type="text/javascript">
         $(function() {
            $('.fillme').each(function() {
               var $link=$(this);
               var p = $(this).position();
               var $dialog = $("div."+this.id)
               .dialog({
                  autoOpen: false,
                  position: [p.left+50,p.top],
                  resizable: false,
                  width:3,
                  minHeight:20
               });
               $link.hover(
               function() {
                  $dialog.dialog('open');
                  return false;
               },
               function() {
                  $dialog.dialog('close');
                  return false;
               });
            });
            $(".ui-dialog-titlebar").hide();
         });
      </script>
      <style>
         .fillme{text-decoration: underline; cursor: pointer; color: blue; }
         #filltext{visibility: hidden;display: none; }
      </style>
   </head>
   <body>
      <p>Example</p>
      <table width="100%" >
         <thead>
            <tr><th>fff</th><th>fff</th><th>fff</th><th>fff</th><th>fff</th></tr>
         </thead>
         <tbody>
            <tr><td>test1</td><td>test2</td><td>test3</td><td>test4</td><td><div class="fillme" id="02">test5</div></td></tr>
            <tr><td>test1</td><td>test2</td><td>test3</td><td>test4</td><td>test5</td></tr>
            <tr><td>test1</td><td>test2</td><td>test3</td><td><div class="fillme" id="04">test4</div></td><td>test5</td></tr>
            <tr><td>test1</td><td>test2</td><td><div class="fillme" id="05">test3</div></td><td>test4</td><td>test5</td></tr>
            <tr><td>test1</td><td><div class="fillme" id="03">test2</div></td><td>test3</td><td>test4</td><td>test5</td></tr>
         </tbody></table>
      <div id="filltext">
         <div class="01">
            filltext1
         </div>
         <div class="02">
            filltext2<br />
            filltext2 other
         </div>
         <div class="03">
            filltext3
         </div>
         <div class="04">
            filltext4<br />
            filltext4<br />
            filltext4<br />
            filltext4<br />
            filltext4<br />
         </div>
         <div class="05">
            filltext5
         </div>
      </div>
   </body>
</html>

Open in new window

css-and-js.zip
screenshot.jpg
screenshotok.jpg
LVL 13
darren-w-Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SRigneyCommented:
I'm not sure the position is working at all.  In the example where it works it's in a cell and loads exactly where it would be on the page.  In the example that doesn't work it loads exactly where it would be on the page.
0
darren-w-Author Commented:
Hi,

Ive noticed that when the page is displayed all on one page the hint works fine, but when it extends beyond this it faults.

Assuming this is something to do with how jquery works out the location of the mouse, I think I will look at the mousemove function.

Darren
0
darren-w-Author Commented:
This is my solution, that works
$(function() {
            $('.fillme').each(function() {
               var $link=$(this);
               var p = $(this).position();
               var $dialog = $("div."+this.id)
               .dialog({
                  autoOpen: false,
                  position: [p.left+50,p.top],
                  resizable: false,
                  width:3,
                  minHeight:20
               });
               $link.mouseover(function() {
                  $dialog.dialog("open");
               }).mousemove(function(event) {
                  $dialog.dialog("option","position", {
                     my: "left",
                     at: "right",
                     of: event,
                     offset: "20 20"
                  });

               }).mouseout(function() {
                  $dialog.dialog("close");
               });
            });
            $(".ui-dialog-titlebar").hide();
         });

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.