Focal Point
[CLOSED] Preview box popup when hovering over a link

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/2637021136

May 28, 2013, 04:09 PM
Tim P.
[CLOSED] Preview box popup when hovering over a link
Hey guys:
We are wanting to try out a new design for our current dashboard and i just wanted to see if anyone has tried it out before.

Basically we have 4 or 5 hyperlinks at the top of the page, each one corresponding to a
box on that same page. What we want to have happen is when you hover over a hyperlink, a 'preview' of the corresponding box appears in a popup.

We have been toying with the idea of using dummy data for it so it would load instantly rather than live data.

Anyone ever tried something like this?

Thanks.

This message has been edited. Last edited by: <Kathryn Henning>,


WebFOCUS App Studio 8.2.02
Windows 7, All Outputs
June 05, 2013, 02:34 PM
ebaig
You could try the jquery route. Here is a link with some demos to get you started.

http://jqueryui.com/tooltip/

There are loads of customization techniques on the web if you're keen on building a hover over tool tip.

Erfan


WebFOCUS 77, Windows, HTML PDF EXCEL
June 10, 2013, 11:30 AM
Tim P.
We have tried a couple of jquery ideas for this topic one of which was just diplaying a jquery dialog box. Unfortunately it seems that with webfocus starting IE in quirks mode, most of the functionality doesn't work.

Been looking for a way to keep webfocus from entering quirks mode to no avail so far.


WebFOCUS App Studio 8.2.02
Windows 7, All Outputs
June 10, 2013, 11:49 AM
Francis Mariani
For HTML Composer GUI built HTML pages we do the unthinkable: we edit the code. We add an HTML 5 doctype to the top of the file: 
<!DOCTYPE HTML>
Every time we save a file after a GUI modification, we also remove the 
<!-- Generated by Report Layout Painter -->
comment. This should keep IE out of quirks mode.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
June 10, 2013, 02:18 PM
Tim P.
I will have to try that. I vaguely remember trying something similar and the doctype that would normally go in is baked into a servlet somewhere.

I did not think we could change the doc type because the baked in version was issued before it even got to the html file.


WebFOCUS App Studio 8.2.02
Windows 7, All Outputs
June 11, 2013, 09:36 AM
DBADiaz
You can also force an IE mode via a meta tag.
Webfocus 8 attaches a meta to html pages built through composer that force IE9 mode.

Just keep in mind that when you open the file in composer, it will move the metat towards the end of the head component.
The meta needs to be the first tag in the Head or it will not take.

<META id=RLT_STANDARDS_MODE_META content=IE=9 http-equiv=X-UA-Compatible>


For more information visit:
IE compatibilty features


Release: DevStudio 7703
OS: Win7
Outputs: HTML, PDF, EXCEL

June 11, 2013, 11:47 AM
JL
A possible solution if you are just using the HTML composer:



BTW, I would split the fex to data retrieval - if dummy data, pulls from dummy data and if real, pull from real data; and the display of the data. This means that you can then use the same fex to populate the hover and the actual component and one fex to change if the report changes.


Year(s) of experience in WebFOCUS: 5+. Using WebFOCUS 7.7.03 on Windows platform with Oracle/SQL Server.
June 11, 2013, 01:00 PM
J
Good idea JL,

You don't even need the panel. You can just use the frame.

You want autoexecute to be set to false, other wise it won't stay hidden.

Onmouseover just use the IbComposer_execute function to execute (thus displaying the frame.)

Onmouseout you will have to hide it (with IbComposer_showHtmlElement)

There is a page on such IBI javascript functions in the documentation


WebFOCUS 7.7.03/8.0.08
Dev Studio 7.7.03/8.0.08
App Studio 8.0.08
Windows 7
ALL Outputs
June 11, 2013, 01:05 PM
J
The above method will force you to use sample data since it executes each time

If you want live data to be loaded on page update you will need to set auto execute to true and then in the onintialupdate function you will need initially hide it. Use the IbComposer_showHtmlElement to show/hide it on mouseover and mouse out.

If there are going to be a few samples, this method wouldn't hurt. If you have a lot of link previews you will want to execute them as needed and probably use the above method.

Pretty much all of this is done through the GUI


WebFOCUS 7.7.03/8.0.08
Dev Studio 7.7.03/8.0.08
App Studio 8.0.08
Windows 7
ALL Outputs
May 11, 2017, 10:26 AM
vaayu
Hello Tim,
Have you been able to implement the popup succesfully? I have a similar requriment to show a "mini chart" as a popup on click or hover in an HTML report field. Please share your sample if you can. Thanks in advance!
quote:
Originally posted by Tim P.:
We have tried a couple of jquery ideas for this topic one of which was just diplaying a jquery dialog box. Unfortunately it seems that with webfocus starting IE in quirks mode, most of the functionality doesn't work.

Been looking for a way to keep webfocus from entering quirks mode to no avail so far.



-********************
Sandbox: 8206.10
Dev: 8201M
Prod:8009
-********************
May 11, 2017, 11:15 PM
David Briars
Regarding adding 'supplementary' data, we mostly either add it to the report or create a drill down.

A couple of times we have created a tooltip. Tooltips are created by the 'tittle' attribute of a tag.

Here is an example:

JOIN
 PCD IN GGSALES
TO 
 PCD IN GGPRODS
AS J1
END
-*
DEFINE FILE GGSALES
 PRODUCT_ROLLOVER/A175 = 
  '<span style="cursor: default;" title="' |
   'Vendor: ' | GGPRODS.VENDOR_NAME | '">' |
   PRODUCT |
  '</span>';
END
-*
TABLE FILE GGSALES
"Sales Listing"
PRINT SEQ_NO
      CATEGORY
      PCD
      PRODUCT_ROLLOVER AS 'Product Name'
      DOLLARS/I8C
WHERE SEQ_NO IN (1792,2125,2788,4099);
ON TABLE SET STYLE *
  INCLUDE = endeflt, $
  TYPE=DATA, COLUMN=PRODUCT_ROLLOVER, COLOR=BLUE,$
 ENDSTYLE
END