html and code

floating div

this javascript gives you an iframe-type floating layer.

function getElement( ) [ line 20 ]

function get_lineheight( ) [ line 25 ]

function setScrollDIVht( ) [ line 30 ]

full source of floating div [ line 1 - 57 ] | download floating div

1	<style type="text/css">
2	#thingy {
3	width: 300px;
4	height: 250px;
5	overflow: auto;
6	padding-left: 5px;
7	padding-right: 3px;
8	background: white;
9	}
10	#sizer {
11	position: absolute;
12	top: -100px;
13	display: none;
14	}
15	.divtext {
16	font: 200 14px helvetica,arial,verdana,sans-serif;
17	}
18	</style>
19	<script type="text/javascript" language="javascript">
20	function getElement(id)
21	{
22	return document.getElementById ? document.getElementById(id) :
23	document.all ? document.all(id) : null;
24	}
25	function get_lineheight(id)
26	{
27	var el = getElement(id);
28	if (el && typeof el.offsetHeight != 'undefined') return el.offsetHeight;
29	}
30	function setScrollDIVht(id)
31	{
32	var lineheight = get_lineheight('sizer');
33	var el = getElement(id);
34	var elHt = el.offsetHeight;
35	if (el && el.style) el.style.height = String(elHt + (lineheight - (elHt%lineheight)) + 'px');
36	}
37	</script>
38	</pre><!-- end tag just for demo - remove when using this code -->
39	<span id="sizer" class="divtext"><br></span> <!-- use <br> to sample line height -->
40	<div id="thingy" class="divtext"> <!-- assign text class to both elements -->
41	<script type="text/javascript" language="javascript">
42	for (i=0;i<400;i++) document.write('blah '); //filler
43	</script>
44	</div>
45	<script type="text/javascript" language="javascript">
46	setScrollDIVht('thingy');
47	</script>
48	<form style="margin-top:10px;">text-size:
49	<select onchange="x=options[selectedIndex].value; getElement('sizer').style.fontSize=getElement('thingy').style.fontSize=x; setScrollDIVht('thingy')">
50	<option value="11px">11px</option>
51	<option value="13px">13px</option>
52	<option value="14px" selected="selected">14px</option>
53	<option value="16px">16px</option>
54	<option value="22px">22px</option>
55	<option value="32px">32px</option>
56	</select>
57	</form>
58

22 hits by 12 users in the last 30 minutes.