»
EnglishFrenchVietnamese

Print - Glide-Scroll to Specified Locations Onclick - JavaScriptBank.com

Full version: jsB@nk » Image » Image viewer » Glide-Scroll to Specified Locations Onclick
URL: http://www.javascriptbank.com/glide-scroll-glide-scroll-to-specified-locations-in-a-scrolling-layer-onclick.html

Glide-Scroll to Specified Locations Onclick © JavaScriptBank.comThe image below is one in a series of images laid out in a grid pattern. Click the links beside the image to glide-scroll to specific locations in the grid.

Full version: jsB@nk » Image » Image viewer » Glide-Scroll to Specified Locations Onclick
URL: http://www.javascriptbank.com/glide-scroll-glide-scroll-to-specified-locations-in-a-scrolling-layer-onclick.html



JavaScript
<script type="text/javascript">var wndo = [];// Necessary to avoid errors before page loaded function dw_glideScrollTo(num, x, y) {  if ( wndo[num] && wndo[num].glideScrollTo )     wndo[num].glideScrollTo(x,y)}function initScrollLayer() {  // hide loading gif  var load_lyr = document.getElementById? document.getElementById("loading"): document.all? document.all["loading"]: null;  if (load_lyr) load_lyr.style.visibility = "hidden";    // arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll,   // if horizontal scrolling, id of element containing scrolling content (table?)  wndo[0] = new dw_scrollLayer('wn', 'lyr1', 'imgTbl');  // Read instructions if your scrolling layers are inside tables }</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<LINK href="css/glide_grid.css" type=text/css rel=stylesheet><script src="js/dw_glidescroll.js" type="text/javascript"></script><body onload="initScrollLayer()"><div id="hold">  <div id="wn">     <!-- loading gif layer, hidden onload -->    <div id="loading" class="content"><img src="images/loading.gif" width="99" height="16" alt="" /></div>      <!-- scrolling layer here -->  <div id="lyr1" class="content">      <table id="imgTbl" border="0" cellpadding="0" cellspacing="0">        <tr>        <td><img src="../logojs.gif" width="150" height="150" alt="" /></td>        <td><img src="../logojs.gif" width="150" height="150" alt="" /></td>        <td><img src="../logojs.gif" width="150" height="150" alt="" /></td>        <td><img src="../logojs.gif" width="150" height="150" alt="" /></td>        </tr>        <tr>        <td><img src="../logojs.gif" width="150" height="150" alt="" /></td>        <td><img src="../logojs.gif" width="150" height="150" alt="" /></td>        <td><img src="../logojs.gif" width="150" height="150" alt="" /></td>        <td><img src="../logojs.gif" width="150" height="150" alt="" /></td>        </tr>        <tr>        <td><img src="../logojs.gif" width="150" height="150" alt="" /></td>        <td><img src="../logojs.gif" width="150" height="150" alt="" /></td>        <td><img src="../logojs.gif" width="150" height="150" alt="" /></td>        <td><img src="../logojs.gif" width="106" height="131" alt="" /></td>        </tr>        <tr>        <td><img src="../logojs.gif" width="150" height="150" alt="" /></td>        <td><img src="../logojs.gif" width="150" height="150" alt="" /></td>        <td><img src="../logojs.gif" width="150" height="150" alt="" /></td>        <td><img src="../logojs.gif" width="100" height="100" alt="" /></td>        </tr>      </table>  </div>  </div> <!-- end wn -->    <div id="linksLyr">    <table id="lnks" border="0" cellpadding="12" cellspacing="0">    <tr>    <!-- dw_glideScrollTo arguments: wndo number, destination on x, y axes,          (optional, not included here) duration of glide          Height and width of images and table cells determine location to glide to -->    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,0,0); return false">1</a></td>    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,180,0); return false">2</a></td>    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,360,0); return false">3</a></td>    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,540,0); return false">4</a></td>    </tr>    <tr>    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,0,180); return false">5</a></td>    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,180,180); return false">6</a></td>    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,360,180); return false">7</a></td>    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,540,180); return false">8</a></td>    </tr>    <tr>    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,0,360); return false">9</a></td>    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,180,360); return false">10</a></td>    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,360,360); return false">11</a></td>    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,540,360); return false">12</a></td>    </tr>    <tr>    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,0,540); return false">13</a></td>    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,180,540); return false">14</a></td>    <td><a href="javascript:;" onclick="dw_glideScrollTo(0,360,540); return false">15</a></td>    <td><a href="javascript:;" onclick="dw_glideScrollTo(0, 540,540); return false">16</a></td>    </tr>    </table>  </div>  </div><!-- end hold --></body><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


Files
http://javascriptbank.com/javascript/image/Glide_Scroll/css/glide_grid.csshttp://javascriptbank.com/javascript/image/Glide_Scroll/js/dw_glidescroll.js