[SOLVED] POP-UP Field in a HTML Report (Kind of Pop-Up Decode)

August 28, 2011, 02:29 AM

Bonjour,
Just using the text Editor, I want to make a Pop-Up Field in a HTML Report.
For Instance : Let LIB_CODE be a Field that gives a Description of CODE.

 
 Focus Verb
     CODE
     LIB_CODE     NOPRINT
   ...

What should I write in the HTML Style Sheet so that LIB_CODE (of the line) appear when the mouse gets onto CODE (of the line)
I Searched in the Documentation before, with my usual unefficiency ...
Thanks for Help
Cordially and Focusely

This message has been edited. Last edited by: Baillecl,

August 28, 2011, 05:16 AM

Carlos Da Costa

Hi,

You may use the title html attribut :
http://www.w3schools.com/tags/att_standard_title.asp

Have a nice day,

August 29, 2011, 06:33 AM

Baillecl

Bonjour,
SO, TITLE is the HTML idea.
But my point is How, with WebFocus and friends, can I tell that the content of the Focus Field LIB_CODE (of a line) should appear as Bubble Text
when the cursor gets onto the Focus Field CODE (of this line).

Cordially and Focusely.

The following text can be jumped by those (many, almost all) who think that just foreward is the direction to be looked at.

Beginning of Bailleulerie N° 14 673
I am very happy that plenty of specialists come to this forum so we get more aware of the real technical world
(I-Way specialists come first to my mind, closely followed by DB2-Specialists and HTML specialists, etc ...)

But my (very deep) interest towards Focus, is that it makes those great fonctionalities available to simple guys who are just Focus (and friends) specialists.
Focus is swallowing the important things of modern informatics and make them available to us in a (rather) simple way.

Typical of this are the Style Sheet that were born long ago, so that Focus could reach PostScript Printers and make us discover that Printing was not only a matter
of 66 lines * 132 Columns (Pyjama Paper, mine was white and a nice dark blue ... RGB (I never knew, nor searched for))
And this way to build an interface between the Focus internal Matrix (and friends) was extended to some great parts of the Out-of-Focus World as PDF and
pushing the idea further Excel and HTML (and friends).

I'm not deeply interested in The Macro langage inside of Excel (How brilliant it happens to be, sometimes) because I'm afraid in the changes between Excel Versions.
I'm not deeply interested in the Middleware exchanges that make my Fexes and HTMLs (even if I tend to Hate MRE that does so many things for me, I didn't ask him for)
A bit of the same towards HTML Source Code (which I find frightfully Verbose, how powerful and universal it is).
I am not ignorant of those, but they are not my roots, they are not my Basis onto which my feet are clutched. Focus is ( and MVS, TSO and a few others ...)

So, if I'm interested of How HTML handles the problem, my Point is How Focus handles the Problem and tells HTML to do the Job.

End of Bailleulerie N° 14 673

August 29, 2011, 09:45 AM

ABT

Consider the following, pure HTML examples:

<!doctype html public "-//w3c//dtd html 3.2 final//en">
<html>
<head>
<title></title>

<style>
a.info{
    position:relative; /*this is the key*/
    z-index:24;
    }

a.info:hover{
z-index:25;
}

a.info span{
display: none
}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:1em;
    left:1em;
    width:10em;
    border:1px solid #000;
    background-color:#333;
    color:#fff;
    text-align: left
    }

a.info:hover span ul li{ /*the span will display just on :hover state*/
	text-decoration:none;
}

</style>

</head>
<body>
<a href="#" title="this is a really long tool tip Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.">I am a really long A title attribute</a><br /><br /><br /><br /><br />
<a href="#" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excep
teur sint occaecat cupidatat non proident, sunt in culpa qui offi
cia deserunt mollit anim id est laborum.">I am an A title attribute with hardcoded line breaks.</a><br /><br /><br /><br /><br />
<a href="#" title="* Item 1
* Item 2
* Item 3
* Item 4
* Item 5">tooltip with hardcoded line breaks and 'bullets'.</a><br /><br /><br /><br /><br />

<a class="info" href="#">CSS Styles <span><b>Weekly Tasks:<b><br /><ul><li>First Item</li><li>Second Item</li><li>Third Item</li><li>Fourth Item</li></ul></span></a><br /><br /><br /><br /><br />

</body>
</html>

As far as how to wrap focus into any of this, consider this:

DEFINE FILE CAR
 MESSAGE/A18V = 'This is a tooltip.';
 CSS_FORMATTED_MSG/A200V = '<b>Details:<b><br /><ul><li>Model: '| MODEL |'</li><li>Country: '| COUNTRY |'</li></ul>';
 AS_TITLE/A300V = '<a title=''' | MESSAGE | ''' href=''http://www.google.com/search?q=' || COUNTRY || '''>'| COUNTRY | '</a>';
 AS_CSS/A300V   = '<a class=''info'' href=''#''>'| COUNTRY | ' <span>' | CSS_FORMATTED_MSG | '</span></a>';
END

TABLE FILE CAR
PRINT
 AS_TITLE
 AS_CSS

ON TABLE HOLD AS H001 FORMAT HTMTABLE
ON TABLE SET ONLINE-FMT HTML
END

-HTMLFORM BEGIN
<!doctype html public "-//w3c//dtd html 3.2 final//en">
<html>
<head>
<title></title>


<style>
a.info{
    position:relative; /*this is the key*/
    z-index:24;
    }

a.info:hover{
z-index:25;
}

a.info span{
display: none
}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:1em;
    left:1em;
    width:25em;
    border:1px solid #000;
    background-color:#333;
    color:#fff;
    text-align: left
    }

a.info:hover span ul li{ /*the span will display just on :hover state*/
	text-decoration:none;
}

</style>

</head>
<body>
!IBI.FIL.H001;
</body>
</html>
-HTMLFORM END

August 29, 2011, 09:53 AM

ABT

above is an uuuuuugggggglllllllyyyyyy CSS popup. See here (http://www.google.com/search?q=css+tooltip) for much prettier ideas of how to employ this concept.

Essentially, you'll just replace the CSS code and perhaps add a marker in the line you write out from WebFocus.

- ABT

August 30, 2011, 12:32 PM

Baillecl

My God, you speak Latin, I'm exploded with pleasure ( I'll ask Google to translate, one never knows).
It's not exactly what I was expecting,(kind of {éMagical Mystery ToolKit = LIB_CODEè}. But a ringing bell tells me to open and change my mind. That's exactly what I'm searching in this forum : Go and have a look there, you'll have to work, but it's worth the trip.
Thanks a lot

August 31, 2011, 09:43 AM

George Patton

Just remember, in case you get hit by a bus and have to be rushed to the hospital with a broken leg:

Semper ubi sub ubi ...

Pigs and Latin have something to teach everyone ....