Solved

Jquery UI, location of dialog box

Posted on 2010-08-17
3
610 Views
Last Modified: 2012-08-13
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
0
Comment
Question by:darren-w-
  • 2
3 Comments
 
LVL 15

Assisted Solution

by:SRigney
SRigney earned 100 total points
Comment Utility
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
 
LVL 13

Author Comment

by:darren-w-
Comment Utility
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
 
LVL 13

Accepted Solution

by:
darren-w- earned 0 total points
Comment Utility
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

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now