WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / experts / dhtml / column23

Scrollbars for Navigator 4 LAYERs, Part I
a hard-coded example

The following scrolling layer has been hard-coded, using the HTML below it, again only for instruction purposes:

<LAYER ID=elCont TOP=30 LEFT=30 WIDTH=400 BGCOLOR=black CLIP=400,200>
  <LAYER ID=elMain SRC="raven.html" onLoad="initScroll()" TOP=2 LEFT=4
   WIDTH=376 BGCOLOR=white CLIP=-2,0,394,196></LAYER>
  <LAYER ID=elScroll LEFT=382 TOP=2 WIDTH=16 CLIP=16,196 VISIBILITY=HIDE>
    <IMG SRC="butTu.gif" WIDTH=16 HEIGHT=16 BORDER=0 HSPACE=0 VSPACE=0>
    <LAYER ID=elBGcol LEFT=0 TOP=16 CLIP=16,250 BACKGROUND="barBgBl.gif"></LAYER>
    <LAYER ID=elBG LEFT=0 TOP=16 CLIP=16,250 BACKGROUND="barBg.gif"></LAYER>
    <LAYER ID=elThumb LEFT=0 TOP=16 WIDTH=16 CLIP=16,100 BACKGROUND="tmbBg.gif">
      <IMG SRC="tmbTop.gif" WIDTH=16 HEIGHT=2 BORDER=0 HSPACE=0 VSPACE=0 ALIGN=RIGHT>
      <LAYER ID=elThumbBot LEFT=0 TOP=98 WIDTH=16 CLIP=16,2>
        <IMG SRC="tmbBot.gif" WIDTH=16 HEIGHT=2 BORDER=0 HSPACE=0 VSPACE=0 ALIGN=RIGHT>
      </LAYER>
    </LAYER>
    <LAYER ID=elButtonBot LEFT=0 TOP=180 WIDTH=16 CLIP=16,16>
      <IMG SRC="butBu.gif" WIDTH=16 HEIGHT=16 HSPACE=0 BORDER=0>
    </LAYER>
  </LAYER>
</LAYER>

We have created a super containing layer, elCont, in which we have placed a content layer, elMain, and our scrollbar, elScroll. elScroll has been positioned to the right of the content layer, within the containing layer.

Notice that elMain has an SRC attribute set to load a default external file, raven.html. We have also specified a value for the layer's onLoad handler. Whenever the layer is updated with an external file, the initScroll() function is called. This function, as we shall see, will initiatiate sizing of the scrollbar thumb according to the content length, and set up event capturing.

We have also added VISIBILITY=HIDE to elScroll. Our script will show the scrollbar only if necessary.

Never forget that all this hard-coding is just to introduce us to the script, which we are now finally ready to discuss.

Produced by Peter Belesis and

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

Solutions

Whitepapers and eBooks

Microsoft Articles: Visual Studio 2010 Adobe Article: Adobe Helps PHP Developers Create Rich Internet Applications Microsoft Whitepaper: How Windows Server 2008 R2 Helps Optimize IT and Save You Money Adobe Article: Java Developers Finding a Home at Adobe Flex IBM Articles: A Smarter Business Needs Smarter Technology Intel Xeon Processor Increases Server Efficiency and Capabilities Intel Tech Brief: Automated Energy Efficiency for the Intelligent Enterprise Oracle Whitepapers - Innovation for IT Leaders Avaya Article: Communication-Enabled Mashups--Empowering Both Business Owners and IT

Internet.com eBook: IT Manager's Guide to Social Networking Internet.com eBook: Get Ready for Windows 7 Microsoft Article: Expression Web 3--New Features for PHP Developers Whitepapers: Manage Your Business Infrastracture with IBM Whitepaper: Maximize Your Storage Investment with HP Internet.com eBook: Becoming a Better Project Manager Microsoft Article: Stress Free and Efficient Designer/Developer Collaboration MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Webcast: Connecting PHP to Microsoft Technologies Video: Microsoft Partner Program Benefits Video: Windows Azure Debugging Tips SAP BusinessObjects Webcast: Unlock the Power of Reporting with Crystal Reports

IBM Webcast: Speed Business Innovation with Reduced Cost and Risk Video: Deploy Applications on Windows Azure MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Download: Microsoft Visual Studio 2010 Beta 2 Downloads & Free Trials: Microsoft's New Efficiency Resource Center Get the Windows 7 SDK

Free Trial: Red Gate SQL Backup Pro 6 Iron Speed Designer Application Generator MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Internet.com Hot List: Get the Inside Scoop on the Hottest IT and Developer Products All About Botnets

MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business

All Rights Reserved. Legal Notices.
Created: Jan 12, 1999
Revised: Jan 12, 1999

URL: http://www.webreference.com/dhtml/column23/NSscrLayers.html