J a v a S c r i p t s

JavaScripts.com

Come and get your free JavaScripts here. We at javaScripts.com are committed to bringing you the best JavaScripts for use on your site. Have fun coding! http://javascripts.com

Thanks for stopping by.

W D V L O p e n S o u r c e

WDVL

Web Developers Virtual Library your open source reference library. WDVL encompasses the whole open source spectrum. Articles, tutorials, forums and more. http://wdvl.internet.com

H T M L G o o d i e s

HTMLGoodies

http://htmlgoodies.com. 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.

Tristique erat euismod justo. Proin nec odio. Sed quam eros, vestibulum.

P H P B u i l d e r

PHPBuilder

http://phpbuilder.com. 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.

Download the images in this Zip file

Paste this code into an external JavaScript file named: flyoutText.js

  /* 
  JavaScripts.com :: http://javascripts.com
  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;
  

Add this to the <head> tag

  <style type="text/css">
  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>
  <script type="text/javascript" src="flyoutText.js"></script>

Add this to your <body> tag:

  <div id="flyout">
     <div class="section" >
        <h2 onclick="show(this);" class="showfirst">J a v a S c r i p t s</h2>
        <div>
           <h3>JavaScripts.com</h3>
           <p> Come and get your free JavaScripts here. We at javaScripts.com are committed to bringing you the best JavaScripts for use on your site. Have fun coding! <A HREF="http://javascripts.com">http://javascripts.com</A></p>
           <p>
           Thanks for stopping by.</p>
        </div>
     </div> <!-- section -->
     <div class="section">
        <h2 onclick="show(this);">W D V L   O p e n   S o u r c e</h2>
        <div>
  
           <h3>WDVL</h3>
           <p>Web Developers Virtual Library your open source reference library. WDVL encompasses the whole open source spectrum. Articles, tutorials, forums and more. <A HREF="http://wdvl.internet.com">http://wdvl.internet.com</A></p>
        </div>
     </div> <!-- section -->
  
     <div class="section">
        <h2 onclick="show(this);">H T M L G o o d i e s</h2>
        <div>
           <h3>HTMLGoodies</h3>
        <p><A HREF="http://htmlgoodies.com">http://htmlgoodies.com</A>. 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);">P H P B u i l d e r</h2>
        <div>
           <h3>PHPBuilder</h3>
  
        <p><A HREF="http://phpbuilder.com">http://phpbuilder.com</A>. 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> 
  </div>