Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

JQuery info popup window, best method

Posted on 2010-08-13
7
Medium Priority
?
1,392 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
Industry Leaders: 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!

 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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)
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…
Suggested Courses

636 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