Solved

JQuery info popup window, best method

Posted on 2010-08-13
7
1,341 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

911 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

22 Experts available now in Live!

Get 1:1 Help Now