Solved

Jquery UI, location of dialog box

Posted on 2010-08-17
3
651 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
ID: 33454850
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-
ID: 33482690
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
ID: 33482911
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

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

733 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