|
These examples compare popups with versus without
CSS overflow:auto; generated scrollbars, or with
scrollbars generated by using an iframe or object
element as the popup content.
|
Without scrollbar
|
Called by the statement:
| |
return overlib(myText1,
WRAP, TEXTPADDING,6, STICKY, MOUSEOFF,
TIMEOUT,10000, MIDX,0, RELY,10, BASE,2,
STATUS,'Example without scrollbar');
|
|
with this string variable definition:
| |
var myText1=
'This captionless example sets<br>MOUSEOFF and a
TIMEOUT of 10<br>'
+'seconds, such that it will close<br>after that interval if you ignore
it,<br>'
+'but will clear the TIMEOUT and<br>close <a href="javascript:void(0);" '
+'name="mtxt1" id="mtxt1" onmouseover="return overlib2(omo,
REF,\'mtxt1\', '
+'REFP,\'LL\', FGCLASS,\'olfg2\', WRAP, BASE,2)" onmouseout="nd2();"'
+'>on mouse off<\/a> if you move<br>onto anywhere in the popup.';
var omo=' Implemented via the MOUSEOFF or NOCLOSE
command. ';
|
|
|
|
Draggable with overflow scrollbar, caption and Close link
|
Called by the statement:
| |
return overlib(myText2,
WRAP, TEXTPADDING,0, BORDER,2, STICKY, CLOSECLICK,
CAPTIONPADDING,4, CAPTION,'Example with scrollbar and caption',
MIDX,0, RELY,10, DRAGGABLE, DRAGCAP,
STATUS,'Draggable with overflow scrollbar, caption and Close link');
|
|
with this string variable definition:
| |
var myText2=
'<div class="ovfl">This captioned example
does<br>not set TIMEOUT '
+'nor NOCLOSE<br>so that it will not close after some<br>interval
if you '
+'ignore it, nor will it<br>close <a href="javascript:void(0);" '
+'name="mtxt2" id="mtxt2" onmouseover="return overlib2(omo,
REF,\'mtxt2\', '
+'REFP,\'LL\', FGCLASS,\'olfg2\', WRAP, BASE,2)" onmouseout="nd2();"'
+'>on mouse off<\/a> if you move<br>onto the popup. Instead,
use<br>'
+'the Close link at upper right.<\/div>';
|
The DRAGCAP command restricts the dragging handle to
the caption.
|
|
|
Draggable with overflow scrollbar and caption
|
Called by the statement:
| |
return overlib(myText3,
WRAP, TEXTPADDING,0, BORDER,2, STICKY, NOCLOSE,
CAPTIONPADDING,4, CAPTION,'Example with scrollbar and caption',
TIMEOUT,10000, MIDX,0, RELY,10, DRAGGABLE,
DRAGID,'ovflo',
STATUS,'Draggable with overflow scrollbar and caption');
|
|
with this string variable definition:
| |
var myText3=
'<div class="ovfl"
id="ovflo">This captioned
example sets<br>NOCLOSE and a '
+'TIMEOUT of 10<br>seconds, such that it will close<br>after that
interval '
+'if you ignore it,<br>but will clear the TIMEOUT
and<br>close '
+'<a href="javascript:void(0);" name="mtxt3" id="mtxt3" onmouseover="return '
+'overlib2(omo, REF,\'mtxt3\', REFP,\'LL\', FGCLASS,\'olfg2\', WRAP,
BASE,2)" '
+'onmouseout="nd2();">on mouse off<\/a> if you move<br>onto anywhere
in the '
+'popup.</div>';
|
The DRAGID command with the id
of the div container should be used when scrollbars are enabled and the dragging handle
is not restricted to the caption.
|
With overflow scrollbar
|
Called by the statement:
| |
return overlib(myText4,
WRAP, TEXTPADDING,0, BORDER,2, STICKY, MOUSEOFF,
TIMEOUT,10000, MIDX,0, RELY,10,
STATUS,'Example with overflow scrollbar');
|
|
with this string variable definition:
| |
var myText4=
'<div class="ovfl">This captionless example
sets<br>MOUSEOFF and a TIMEOUT '
+'of<br>10 seconds, such that it will close<br>after that interval if
you '
+'ignore it,<br>but will clear the TIMEOUT and<br>close '
+'<a href="javascript:void(0);" name="mtxt4" id="mtxt4" onmouseover="return '
+'overlib2(omo, REF,\'mtxt4\', REFP,\'LL\', FGCLASS,\'olfg2\', WRAP,
BASE,2)" '
+'onmouseout="nd2();">on mouse off<\/a> if you move<br>onto anywhere in
the '
+'popup.</div>';
|
|
|
|
Scrolling with overflow scrollbar, caption and Close link
|
Called by the statement:
| |
return overlib(myText2,
WRAP, TEXTPADDING,0, BORDER,2, STICKY, CLOSECLICK,
CAPTIONPADDING,4, CAPTION,'Example with scrollbar and caption',
MIDX,0, RELY,10, SCROLL,
STATUS,'Scrolling with overflow scrollbar, caption and Close link');
|
|
with the myText2 string variable (see above) for the lead argument.
|
|
|
The style of the above popups is controlled via
overlib's CSS class variables defined in a script block,
as follows:
|
<script type="text/javascript">
<!--
OLpageDefaults(BGCLASS,'olbg', CGCLASS,'olcg', FGCLASS,'olfg',
CAPTIONFONTCLASS,'olcap', CLOSEFONTCLASS,'olclo',
TEXTFONTCLASS,'oltxt');
//-->
</script>
|
|
and for the popups with overflow scrollbars, in an encasing
div:
|
<div class='ovfl'>...popup
content...</div>
|
|
in conjunction with a style sheet defined in a style block
as follows:
|
<style type="text/css>
<!--
.ovfl {
width:266px; height:100px;
border:1px none #000000; padding:6px;
overflow:auto;
}
.olbg {background-color:#333399;}
.olcg {background-color:#aa00aa; text-align:center;}
.olfg {background-color:#ccccff; text-align:center;}
.olcap {font-family:Arial; font-size:12px; font-weight:bold; color:#ffffff;}
a.olclo {font-family:Verdana; font-size:10px; font-weight:bold; color:#ddddff;}
a.olclo:hover {color:#ffffff;}
.oltxt {font-family:Arial; font-size:16px; color:#000000;}
-->
</style>
|
NOTE that Netscape v4.x browsers pre-date
the CSS overflow property and thus will not create scrollbars within popups.
|
|
With iframe scrollbar, caption and Close link
|
Called by the statement:
| |
return overlib(OLiframeContent('zipArchive.html', 510, 200, 'if1', 1,
(OLie4&&!OLopr)?'yes':'auto'),
WIDTH,510, TEXTPADDING,0, BORDER,2, STICKY, CLOSECLICK,
CAPTIONPADDING,4, CAPTION,'Example with iframe scrollbar and caption',
MIDX,0, RELY,10,
STATUS,'Example with iframe scrollbar, caption and Close link');
|
|
which uses this simple function for the lead argument in the overlib
call:
| |
function OLiframeContent(src, width, height, name, frameborder, scrolling) {
return ('<iframe src="'+src+'" width="'+width+'" height="'+height+'"'
+(name!=null?' name="'+name+'" id="'+name+'"':'')
+(frameborder!=null?' frameborder="'+frameborder+'"':'')
+' scrolling="'+(scrolling!=null?scrolling:'auto')+'">'
+'<div>[iframe not supported]</div></iframe>');
}
|
Import the distribution's iframecontentmws.js support script to have
this function available for use in overlib or overlib2 calls.
NOTE that Netscape v4.x browsers
pre-date iframe and will mishandle this markup unless you put alternate content
in the iframe container,as this function does. Also NOTE
that iframe is not included in the strict DTDs. You instead
could use object (see below), but browsers do still support iframe
despite its absence from those DTDs. Review more iframe examples.
|
With object scrollbar, caption and Close link
|
Called by the statement:
| |
return overlib(OLobjectContent('zipArchive.html', 510, 200, 'ob1'),
WIDTH,510, TEXTPADDING,0, BORDER,2, STICKY, CLOSECLICK
CAPTIONPADDING,4, CAPTION,'Example with object scrollbar and caption',
MIDX,0, RELY,10,
STATUS,'Example with object scrollbar, caption and Close link');
|
|
which uses this simple function for the lead argument in the overlib
call:
| |
function OLobjectContent(data, width, height, name) {
return ('<object data="'+data+'" width="'+width+'" height="'+height+'"'
+(name?' name="'+name+'" id="'+name+'"':'')+' type="text/html">
<div>[object not supported]</div></object>');
}
|
Import the distribution's objectcontentmws.js support script to have
this function available for use in overlib or overlib2 calls.
NOTE that Netscape v4.x browsers
pre-date object and will mishandle this markup unless you put alternate content
in the object container.
|
With object scrollbar and caption
|
Called by the statement:
| |
return overlib(OLobjectContent('zipArchive.html', 510, 200, 'ob2'),
WIDTH,510, TEXTPADDING,0, BORDER,2, STICKY, NOCLOSE,
CAPTIONPADDING,4, CAPTION,'Example with object scrollbar and caption',
TIMEOUT,10000, MIDX,0,RELY,10,
STATUS,'Example with object scrollbar and caption');
|
|
which uses the above simple function.
|
With object scrollbar
|
Called by the statement:
| |
return overlib(OLobjectContent('zipArchive.html', 510, 200, 'ob3'),
WIDTH,510, TEXTPADDING,0, BORDER,2, STICKY, MOUSEOFF,
TIMEOUT,10000, MIDX,0,RELY,10,
STATUS,'Example with object scrollbar');
|
|
which uses the above simple function.
|
Embedded div with scrollbar:
This embedded example
is not a DHTML popup
and thus uses an
overlib instead of overlib2 call
for the popup in its content.
Scroll the content to verify
that the popup stays consistently
aligned (REFC,'UL', REFP,'LL')
with the REFerenced link.
|
|
