?
Solved

JQuery info popup window, best method

Posted on 2010-08-13
7
Medium Priority
?
1,378 Views
Last Modified: 2012-05-10
Hi,

I have a form with a link on it like this

<td class='popup' id='556'>2</td>

and at the bottom of the form a div like this:

<div id='data'>
<div class='556'>some test data</div>
<div class='556'>some more test data</div>
<div class='556'>some extratest data</div>
<div class='553>some test data</div>
<div class='555>some test data</div>
</div>

When I hover over the 2 in the div above I would like a box to pop up next to the table cell over the top of the table. displaying a box with the referenced content in data ie like this

<div class='abox'>
    <div class='boxwrapper'>
    <p>some test data<br />
           some more test data<br />
           some extratest data</p>
    </div>
</div>

When the user  hovers out the hint closes.

For a starter I've got a plug-in that I use here that pulls the data in from an external script, but it is slow, so I'm embedding the data on the page instead, here is  present the plugin i'm using  and css:

 
calling script:
 
$(function(){
      $('td.termified').termifier(
      'includes/subcall.php',
   {
      addClass:'fancy',
      origin: {top:28, left:-10}
   }
   );
      $('table').attr({width:'95%'})
      $('tr:gt(0)').addClass('datatab')
   });

Open in new window

Plugin:
 
(function($){

  $.fn.termifier = function(actionURL,options) {
    var settings = $.extend({
      origin: {top:0,left:0},
      paramName: 'term',
      addClass: null,
      actionURL: actionURL,
      callId:  this.id
    },options||{});
    this.click(function(event){
      //when the user clicks
          $('div.termifier').remove();
      $('<div>')
        .addClass('termifier' +
          (settings.addClass ? (' ') + settings.addClass : ''))
        .css({
          position: 'absolute',
          top: event.pageY - settings.origin.top,
          left: event.pageX - settings.origin.left,
          display: 'none'
        })
        //create this div with the appropiate
        .click(function(event){
          $(this).fadeOut('slow');
        })
        .appendTo('body')
        .append(
          $('<div>').load(
            settings.actionURL,
            encodeURIComponent(settings.paramName) + '=' +
              encodeURIComponent($(this).attr("id")),
            function(){
              $(this).closest('.termifier').fadeIn('slow');
            }
          )
        ); 

 }
);
    this.addClass('termified');
    return this;
  };

})(jQuery);

Open in new window

css:

 
div.termifier {
  background-color: #f3f3f3;
  width: 256px;
  color: brown;
  padding: 8px;
  font-size: 0.8em;

}

div.termifier.fancy {
/*  background: url('images/termifier.bubble.png') no-repeat transparent;*/
  width: 200px;
  height: 60px;
  border-style:solid;
  border-color: black;
  border-width:1px;
  border-radius: 15px;
  -moz-border-radius: 15px;

}

div.termifier.fancy div {
  height: 55px;
  width: 175px;
  overflow: auto;
  color: black;
  margin-left: 15px;

Open in new window

0
Comment
Question by:darren-w-
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33429102
these are very nice and fast too

http://plugins.learningjquery.com/cluetip/demo/
0
 
LVL 26

Expert Comment

by:lenamtl
ID: 33430211
When I don't use the basic tooltip I use this one
http://flowplayer.org/tools/tooltip/index.html

Or you can use other dialog or alert plugins that are UI
http://jqueryui.com/demos/dialog/
0
 
LVL 13

Author Comment

by:darren-w-
ID: 33430304
thanks, will look Monday now.
0
Command Line Tips and Tricks

The command line is a powerful tool at the disposal of every Linux user. Although Linux distros come with beautiful user interfaces, it's worthwhile to learn the command line because it allows you to do a number of things that you otherwise cannot do from the GUI.  

 
LVL 1

Expert Comment

by:hulutter
ID: 33432933
I recomend this script:
http://www.vegabit.com/jquery_bubble_popup/

a solution could be like this:
$('td.popup').SetBubblePopup({
        innerHtml: function () {
                   var id = $(this).attr('id');
                   var popupContent = "<div class='abox'><div class='boxwrapper'><p>";
                   $('#data').find('div.' + id).each(function() {
                     popupContent += $(this).text() + '<br />';
                   );
                   popupContent += '</div></div>';
                   return popupContent;
                   }
        width: 300, // width of the popup
});

Open in new window

0
 
LVL 13

Author Comment

by:darren-w-
ID: 33437412
Not quite there yet, it seems to be using the first class id as a reference for the bubble for all links, also it does not seem to be putting the reference text into the bubble?


<html>
   <head>
      <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
      <script type="text/javascript" src="jquery.BubblePopup-1.1.min.js"></script>
      <script type="text/javascript">     
         $(function() {         
               $('.fillme').SetBubblePopup({
                  innerHtml: function () {
                     var id = $(this).attr('id');
                     var popupContent = "<div class='abox'><div class='boxwrapper'><p>";
                     $('#filltext').find('div.' + id).each(function(i,v) {
                        popupContent += $(v).text() + '<br />';
                        alert("popup:"+popupContent);
                     })
                     popupContent += '</p></div></div>';
                   
                     return popupContent;
                  },
                  bubbleAlign: 'left',
                  width:'auto'
            });
         });
      </script>
   </head>
   <body>
      <p><br /><br /><br /><br /><br /></p>
      <table><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="05">test4</div></td><td>test5</td></tr>
            <tr><td>test1</td><td>test2</td><td>test3</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
         </div>
         <div class="02">
            filltext2 other
         </div>
         <div class="03">
            filltext3
         </div>
         <div class="04">
            filltext4
         </div>
         <div class="05">
            filltext5
         </div>
      </div>
   </body>
</html>

Open in new window

0
 
LVL 13

Author Comment

by:darren-w-
ID: 33437508
I don't think the plug-in can accept a function as it is specified?
0
 
LVL 13

Accepted Solution

by:
darren-w- earned 0 total points
ID: 33438327
Hi,

OK after a bit of experimentation I have found a solution, I have used Jquery UI Dialog box, I have changed my output data (its generated using php; drawn from mssql) so that its laid out in the correct format (e with the <br />

Code below, wonder if I can give some points to myself :)

Completed code


<html>
   <head>
      <link type="text/css" href="jquery-ui/css/custom-theme/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
      <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
      <script type="text/javascript" src="jquery-ui/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><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

example-image.jpg
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

762 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