SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    438
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Vertical scrolling div onclick

    Is there a free version of this anywhere (The section named Scrolling Images Vertically Onclick)?

    http://www.dyn-web.com/code/scroll/images.php

    I know the above is only $40 but thought I'd check if there was an freeware one first.

    Thanks.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Well, here's the images and some links that point to them.

    Code javascript:
    <ul class="gallery">
        <li><img id="sunset" src="http://www.dyn-web.com/images/common/sunset.gif" width="150" height="150" alt=""></li>
    	<li><img id="deco" src="http://www.dyn-web.com/images/common/deco.gif" width="150" height="150" alt=""></li>
    	<li><img id="caveart" src="http://www.dyn-web.com/images/common/cave-art.gif" width="150" height="150" alt=""></li>
    	<li><img id="swans" src="http://www.dyn-web.com/images/common/swans.gif" width="150" height="150" alt=""></li>
    	<li><img id="astro" src="http://www.dyn-web.com/images/common/astro.gif" width="150" height="150" alt=""></li>
    	<li><img id="design1" src="http://www.dyn-web.com/images/common/design1.gif" width="150" height="150" alt=""></li>
    	<li><img id="mandala2" src="http://www.dyn-web.com/images/common/mandala2.gif" width="150" height="150" alt=""></li>
    	<li><img id="turtle" src="http://www.dyn-web.com/images/common/turtle.gif" width="150" height="150" alt=""></li>
    	<li><img id="mexsun" src="http://www.dyn-web.com/images/common/mex-sun.gif" width="150" height="150" alt=""></li>
    	<li><img id="cranes" src="http://www.dyn-web.com/images/common/cranes.gif" width="150" height="150" alt=""></li>
    	<li><img id="crystal" src="http://www.dyn-web.com/images/common/crystal.gif" width="150" height="150" alt=""></li>
    	<li><img id="mandala1" src="http://www.dyn-web.com/images/common/mandala1.gif" width="150" height="150" alt=""></li>
    </ul>
    <ul class="galleryLinks">
    	<li><a href="#sunset">Sunset</a></li>
    	<li><a href="#deco">Deco</a></li>
    	<li><a href="#caveart">Sunset</a></li>
    	<li><a href="#swans">Swans</a></li>
    	<li><a href="#astro">Astro</a></li>
    	<li><a href="#design1">Design1</a></li>
    	<li><a href="#mandala2">Mandala2</a></li>
    	<li><a href="#turtle">Turtle</a></li>
    	<li><a href="#mexsun">Mexsun</a></li>
    	<li><a href="#cranes">Cranes</a></li>
    	<li><a href="#crystal">Crystal</a></li>
    	<li><a href="#mandala1">Mandala1</a></li>
    </ul>

    And we can use some css so that the images are shown in only a 150x150 block

    Code css:
    ul.gallery {
    	float: left;
        height: 150px;
        list-style-type: none;
        margin: 0;
        overflow: hidden;
        padding: 0;
        width: 150px;
    }
    ul.gallery img {
        border: none;
    }
    ul.galleryLinks {
        margin-left: 150px;
    	width: 10em;
    }
    ul.galleryLinks li {
        display: inline;
    }

    And that sample code works as is.

    If you want a smooth scrolling effect, then I'm pretty sure that someone can come up with a jquery solution to add to the above.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •