« »

Use this JavaScript to display several sections of text in a small area. Degrades nicely.

Label: Fly-Out Textbox

Demo
Enlarge
Reload
New window

Generate your business videos by AI with voice or just text

Your first FREE AI Video App! Automate Your First AI Video. Create Your Professional Video In 5 Minutes By AI No Equipment Or Video Editing Skill Requred. Effortless Video Production For Content Marketers. Free UNLMITED AI Video App in Your Hand

Code
CSS
JavaScript
HTML
Print

Copy All x2

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

Copy All x2

<script>

// Created by: Jacqueline Porjes :: http://porjes.com/example_css.html

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

Copy All x2

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

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

26/09/2007
Jacqueline Porjes [more]
5,240
0
0
0
6.64 KBytes

JavaScript Fly-Out Textbox

0/5 0 votes / 5,240 previews / 0 comment 26/09/2007 Use this JavaScript to display several sections of text in a small area. Degrades nicely....JavaScript Fly-Out Textbox - Fly-Out Textbox

Let's be first member to do this

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web

Fly-Out Textbox

Label: Fly-Out Textbox (adsbygoogle = window.adsbygoogle || []).push({});

Generate your business videos by AI with voice or just text

Write your comment

Label: Fly-Out Textbox