»
EnglishFrenchVietnamese

Print - Fly-Out Textbox - JavaScriptBank.com

Full version: jsB@nk » Text » Fly-Out Textbox
URL: http://www.javascriptbank.com/fly-out-textbox.html

Fly-Out Textbox © JavaScriptBank.comUse this JavaScript to display several sections of text in a small area. Degrades nicely.

Full version: jsB@nk » Text » Fly-Out Textbox
URL: http://www.javascriptbank.com/fly-out-textbox.html



CSS
<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-->


JavaScript
<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-->


HTML
<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-->