Solved

JQuery info popup window, best method

Posted on 2010-08-13
7
1,334 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-
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 24

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

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

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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 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)

708 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

18 Experts available now in Live!

Get 1:1 Help Now