overlibmws Scrollbar Examples
|
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('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,
but '
+'will<br>clear the TIMEOUT and close on<br>mouse off if
you '
+'move<br>onto anywhere in the popup.', TEXTPADDING,0,
STICKY, MOUSEOFF, TIMEOUT,10000, MIDX,0,RELY,10, BORDER,2, WRAP,
STATUS,'Example without scrollbar');
|
|
With overflow scrollbar
|
Called by the statement
| |
return overlib('<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,
but '
+'will<br>clear the TIMEOUT and close on<br>mouse off if
you '
+'move<br>onto anywhere in the popup.</div>',
TEXTPADDING,0,
STICKY, MOUSEOFF, TIMEOUT,10000, MIDX,0,RELY,10, BORDER,2, WRAP,
STATUS,'Example with overflow scrollbar');
|
NOTE that Netscape v4.x browsers pre-date
the CSS overflow property and thus will not create scrollbars within popups.
|
With overflow scrollbar and caption
|
Called by the statement
| |
return overlib('<div
class=\'ovfl\'>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,
but '
+'will<br>clear the TIMEOUT and close on<br>mouse off if
you '
+'move<br>onto anywhere in the popup.</div>',
TEXTPADDING,0,
CAPTIONPADDING,4, CAPTION,'Example with scrollbar and caption',
STICKY, NOCLOSE, TIMEOUT,10000, MIDX,0,RELY,10, BORDER,2, WRAP,
STATUS,'Example with overflow scrollbar and caption');
|
|
With overflow scrollbar, caption and Close link
|
Called by the statement
| |
return overlib('<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'
+'close on mouse off if you move<br>onto the popup. Instead, '
+'use<br>the Close link at upper right.</div>',
TEXTPADDING,0,
CAPTIONPADDING,4, CAPTION,'Example with scrollbar and caption',
STICKY, MIDX,0,RELY,10, BORDER,2, WRAP,
STATUS,'Example with overflow scrollbar, caption and Close link');
|
|
|
|
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>
|
With iframe scrollbar
|
Called by the statement
| |
return overlib('<iframe src=\'zzzArchive.html\'
width=\'510\' '
+'height=\'200\'
scrolling=\'auto\'></iframe>',
TEXTPADDING,0,
STICKY, MOUSEOFF, TIMEOUT,10000, MIDX,0,RELY,10, BORDER,2, WRAP,
STATUS,'Example with iframe scrollbar');
|
NOTE that Netscape v4.x browsers
pre-date iframe and will mishandle this markup unless you put alternate content
in the iframe container. Also NOTE that iframe is
not included in the strict DTDs. It thus is preferable to
use object (see below).
|
With object scrollbar
|
Called by the statement
| |
return overlib('<object data=\'zzzArchive.html\'
width=\'510\' '
+'height=\'200\'
type=\'text/html\'></object>',
TEXTPADDING,0,
STICKY, MOUSEOFF, TIMEOUT,10000, MIDX,0,RELY,10, BORDER,2, WRAP,
STATUS,'Example with object scrollbar');
|
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('<object data=\'zzzArchive.html\'
width=\'510\' '
+'height=\'200\'
type=\'text/html\'></object>',
TEXTPADDING,0,
CAPTIONPADDING,4, CAPTION,'Example with object scrollbar and caption',
STICKY, NOCLOSE, TIMEOUT,10000, MIDX,0,RELY,10, BORDER,2, WRAP,
STATUS,'Example with object object scrollbar and caption');
|
|
With object scrollbar, caption and Close link
|
Called by the statement
| |
return overlib('<object data=\'zzzArchive.html\'
width=\'510\' '
+'height=\'200\'
type=\'text/html\'></object>',
TEXTPADDING,0,
CAPTIONPADDING,4, CAPTION,'Example with object scrollbar and caption',
STICKY, MIDX,0,RELY,10, BORDER,2, WRAP,
STATUS,'Example with object scrollbar, caption and Close link');
|
|
|
