[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1402
  • Last Modified:

JQuery info popup window, best method

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
darren-w-
Asked:
darren-w-
1 Solution
 
Michel PlungjanIT ExpertCommented:
these are very nice and fast too

http://plugins.learningjquery.com/cluetip/demo/
0
 
lenamtlCommented:
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
 
darren-w-Author Commented:
thanks, will look Monday now.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
hulutterCommented:
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
 
darren-w-Author Commented:
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
 
darren-w-Author Commented:
I don't think the plug-in can accept a function as it is specified?
0
 
darren-w-Author Commented:
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

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now