<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="A cross-browser javascript that enables you to style your scroll-bars with CSS" /> <title>fleXcroll example style test page</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="Emrah BASKAYA" /> <link href="tutorsty.css" rel="stylesheet" type="text/css" /> <link href="flexcrollstyles.css" rel="stylesheet" type="text/css" /> <script type='text/javascript' src="flexcroll.js"></script> </head> <body> <div id='content'> <h1>FleXcroll, Flexible Custom Scroll Bars Example Style</h1> <h2>Using horizontal stacks with previously unknown width</h2> <p>When you don't know how big your content will be horizontally, you need to place your content in a specific way, wrapped inside a div with display: inline, so that the wrapped div enlarges with respect to content. Please see the .horizontalwrap style and review styles for img inside the horizontal wrap, in the CSS file</p> <div id='mycustomscroll' class='flexcroll'> <div id='horizontalwrap'> <img src="mypicture.jpg" width="100" height="100" />1<img src="mypicture.jpg" width="100" height="100" />2 <img src="mypicture.jpg" width="100" height="100" />3<img src="mypicture.jpg" width="100" height="100" />4 <img src="mypicture.jpg" width="100" height="100" />5<img src="mypicture.jpg" width="100" height="100" />6 <img src="mypicture.jpg" width="100" height="100" />7<img src="mypicture.jpg" width="100" height="100" />8 <img src="mypicture.jpg" width="100" height="100" />9<img src="mypicture.jpg" width="100" height="100" />10 <img src="mypicture.jpg" width="100" height="100" />11<img src="mypicture.jpg" width="100" height="100" />12 <img src="mypicture.jpg" width="100" height="100" />13<img src="mypicture.jpg" width="100" height="100" />14 <img src="mypicture.jpg" width="100" height="100" />15<img src="mypicture.jpg" width="100" height="100" />16 <img src="mypicture.jpg" width="100" height="100" />17<img src="mypicture.jpg" width="100" height="100" />18 <img src="mypicture.jpg" width="100" height="100" />19<img src="mypicture.jpg" width="100" height="100" />20 <img src="mypicture.jpg" width="100" height="100" />21<img src="mypicture.jpg" width="100" height="100" />22 <img src="mypicture.jpg" width="100" height="100" />23<img src="mypicture.jpg" width="100" height="100" />24 </div> </div> </div> <div id='footer'> <div class="copyrightnotice">Style by Emrah BASKAYA</div> </div> </body> </html>