Full version: jsB@nk » Text » Fly-Out Textbox
URL: https://www.javascriptbank.com/fly-out-textbox.html
Use this JavaScript to display several sections of text in a small area. Degrades nicely.
Full version: jsB@nk » Text » Fly-Out Textbox
URL: https://www.javascriptbank.com/fly-out-textbox.html
<style>h2 { font-weight: normal; font-size: 1.4em; clear: both;}body > h2 { clear: none;}.section h2 { cursor: pointer; }#flyout .section { float: left; width: 20em; height: 25em; background: url('mback.jpg') #444 repeat-y; margin-left: 0; color: white; padding: 0; overflow: hidden;}#flyout h2 { font-family: monospace; width: 1em; font-size: 1.2em; padding-top: 1ex; float: left; padding-left: 1ex; padding-right: 0.2ex; height: 100%; clear: none; position: relative;}#flyout .section div { margin-left: 2em; padding: 1em; background: #B4E9FF; color: black; height: 100%; border-bottom: solid 1px #777; border-right: solid 1px #777; border-top: solid 1px #ccc;}#flyout + * { clear: both;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script>// Created by: Jacqueline Porjes :: http://porjes.com/example_css.htmlfunction show(Me) { var section = Me.parentNode; var menu = section.parentNode; for(var i = 0; i < menu.childNodes.length; i++) { if (menu.childNodes[i].length == 0) continue; if (typeof menu.childNodes[i].style != 'object') continue; menu.childNodes[i].style.width = '2em'; menu.childNodes[i].style.background = 'url(mback.jpg) #B4E9FF repeat-y'; menu.childNodes[i].style.color = '#000'; } section.style.width = '20em'; section.style.background = "url(mback2.jpg) #00E0FF repeat-y"; section.style.color = '#ff0000'; return true;}function showfirst() { if (!document.getElementsByTagName) return; var a = document.body.getElementsByTagName("div"); for (i = 0; i < a.length; i++) { if (a[i].id == "flyout") { if (typeof a[i].style != 'object') continue; var x = a[i].getElementsByTagName("h2"); for (j = 0; j < x.length; j++) { if (x[j].className == "showfirst") { if (typeof x[j].style != 'object') continue; show(x[j]); return; } } } }}window.onload=showfirst;</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="flyout"> <div class="section" > <h2 onclick="show(this);" class="showfirst">s o m e s t u f f</h2> <div> <h3>Some stuff</h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam scelerisque lacinia justo. Integer in dolor nec turpis vestibulum luctus . Sed condimentum. Aliquam cursus molestie nunc. Donec eu nunc. Integer tristique erat euismod justo. Proin nec odio. Sed quam eros, vestibulum a, blandit eu, pretium at, nisl. Quisque ut.</p> <p> Tristique erat euismod justo. Proin nec odio. Sed quam eros, vestibulum.</p> </div> </div> <!-- section --> <div class="section"> <h2 onclick="show(this);">o t h e r s t u f f</h2> <div> <h3>Other stuff</h3> <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p> </div> </div> <!-- section --> <div class="section"> <h2 onclick="show(this);">m o r e s t u f f</h2> <div> <h3>More stuff</h3> <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit? de un nov lingua franca: on refusa continuar payar custosi traductores.</p> <p>Tristique erat euismod justo. Proin nec odio. Sed quam eros, vestibulum.</p> </div> </div> <!-- section --> <div class="section"> <h2 class="showfirst" onclick="show(this);">y e t m o r e s t u f f</h2> <div> <h3>And yet more stuff</h3> <p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental.</p> </div> </div> <!-- section --></div> <!-- flyout --><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->