SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member Gizmo2003's Avatar
    Join Date
    Nov 2005
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal DIV scrolling

    Hi all,

    Does anyone know how the owner of HellDesign created his scrolling portfolio? I'm not particularly interested in the icon switching on click, or the changing of the header images, but simply the horizontal scrolling with the arrows.

    Any help would be greatly appreciated.

    cheers!
    Gizmo

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,454
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    prototype and scriptaculous

    The site uses the free open source prototype and scriptaculous javascript libraries. download and enjoy. The sites provide online examples that should get you up and running with it in next to no time. The trick is to maintain site usability for those without javascript.

  3. #3
    SitePoint Member Gizmo2003's Avatar
    Join Date
    Nov 2005
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Mittineague,

    I'd had a look at that before but was still none the wiser. It's more or less what I want to do here , except this only scrolls the background of the div, and not its contents. I'm sure there must be some simple switch to get this done. Anyone familiar with this moo.fx tutorial?

    cheers

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,454
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    moo.fx

    I don't think the page you linked to is using moo.fx (it uses scriptaculous control slider) I thnk that moo.fx uses the prototype library, as does scriptaculous. Prototype is sort of like the "core" that others build on. Other scripts build on Scriptaculous. If you for prototype or scriptaculous you'll get lots of derivatives. You want the main source, http://prototype.conio.net/ http://script.aculo.us/downloads and you should look at Rico too http://openrico.org/
    You could modify moo.fx I suppose, but why modify something that doesn't do what you want when you can use something that does?

  5. #5
    SitePoint Member Gizmo2003's Avatar
    Join Date
    Nov 2005
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks again for the help! It's all a little bit over my head though, so I may have to give it a miss this time

  6. #6
    SitePoint Member
    Join Date
    Jul 2006
    Location
    Bellingham, WA
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    moo.fx horizontal div scrolling

    I just modified an example of a custom effect with moo.fx (http://www.mad4milk.net/entry/moo.fx...-custom-effect)

    to create this working example of a horizontal div scroll much like that used on http://en.helldesign.pl/



    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    
    	<style type="text/css" media="screen">
    		body {
    			background: #fff;
    			text-align: left;
    			font-size: 12px;
    			font-family: Trebuchet Ms, Arial;
    		}
    		h1 {
    			color: #666;
    		}
    		#container {
    			margin:25px;
    			width: 450px;
    			height: 200px;
    			float : left;
    			overflow : hidden;
    			border : 1px solid blue;
    		}
    		
    		#examplescrolling {
    			width : 350%;
    			padding : 10px;
    			height: 100px;		
    			float : left;	
    		}
    	</style>
    	<script type="text/javascript" src="prototype.lite.js"></script>
    	<script type="text/javascript" src="moo.fx.js"></script>
    	<script type="text/javascript">
    	
    	fx.Background = Class.create();
    		fx.Background.prototype = Object.extend(new fx.Base(), {
    			initialize: function(el, options) {
    				this.el = $(el);
    				this.setOptions(options);
    				this.now = 0;
    			},
    			increase: function() {
    				this.el.style.marginLeft = this.now + "px";						
    			},
    			scroll: function(howMuch){
    				this.clearTimer();
    
    				// calculate the width of elements, including padding/border								
    				var scroll_limit = this.el.offsetWidth - this.el.parentNode.offsetWidth;
    				
    				if (((this.now + howMuch) <= 0) && ((this.now + howMuch) >= -(Math.abs(howMuch) + scroll_limit))) {
    					this.custom(this.now, this.now + howMuch);
    				}
    				
    			}
    		});
    
    		window.onload = function() {			
    			myNewEffect = new fx.Background('examplescrolling', {duration: 300});
    		}
    	</script>
    </head>
    <body>
    	<h1>moo.fx background image smooth scrolling tutorial files</h1>
    	<div id="container">
    		<div id="examplescrolling">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc nec leo quis mauris vestibulum euismod. Nunc porttitor tortor vitae libero vehicula gravida. Sed pharetra. Maecenas in nunc. Nam purus elit, sodales in, ultricies ut, pellentesque at, quam. Morbi ut nisl vitae mi sollicitudin mollis. Cras nonummy luctus nibh. Fusce vehicula ligula nec dui vulputate tincidunt. Curabitur eu quam eu orci venenatis facilisis. Donec scelerisque convallis magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ultrices tempus lorem. Fusce pulvinar lacus sit amet nibh. Vivamus elit. Nunc mi felis, vehicula quis, semper in, posuere id, lectus.
    
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eget ante quis metus pretium vehicula. Proin pellentesque blandit est. Aenean neque sapien, viverra vitae, convallis non, imperdiet quis, leo. Fusce velit lacus, viverra in, dapibus nec, placerat vel, neque. Mauris non mi ut erat posuere feugiat. Proin velit lorem, sagittis eget, vehicula nec, dapibus vel, mauris. Etiam ante. Sed pretium hendrerit leo. Pellentesque semper. Vestibulum felis nulla, porttitor sed, auctor sit amet, eleifend ultrices, nulla. Maecenas orci. Vestibulum condimentum sodales sem. Phasellus sed lorem et magna molestie interdum. Ut mi nisi, adipiscing a, sollicitudin at, molestie vel, leo. Ut tempor interdum massa. Curabitur adipiscing nisl sed lacus. Donec dictum magna id enim. Etiam vestibulum sapien ac neque. Nulla id tellus.
    
    Curabitur dolor eros, mollis nec, consequat ac, fringilla ut, lectus. Nullam diam. Quisque vestibulum. Morbi non velit. Nam justo urna, adipiscing sit amet, feugiat eu, varius quis, quam. Praesent ultricies dui id eros. Mauris varius lacus nec felis. Suspendisse euismod, mauris at lacinia hendrerit, odio justo molestie mauris, vitae facilisis purus odio a leo. Suspendisse potenti. Aliquam erat volutpat. Etiam blandit tortor at libero. Nulla viverra tellus vitae erat. Sed quis ligula venenatis eros porta imperdiet. Duis vehicula laoreet massa. Phasellus urna magna, rhoncus condimentum, adipiscing vitae, auctor in, erat. Mauris nisi. Donec volutpat, turpis nec porta semper, erat pede tincidunt eros, eget molestie ante odio non turpis. Curabitur vitae quam non metus rhoncus scelerisque. Nunc eros. Aenean odio ipsum, ultrices sed, mattis sed, ullamcorper non, massa.
    
    Nam aliquet hendrerit diam. In eu nisl sit amet nisl fringilla posuere. In pulvinar. Nam elementum feugiat neque. Pellentesque varius posuere enim. Praesent ligula sem, sollicitudin at, laoreet sed, sollicitudin eu, libero. Duis laoreet bibendum eros. Phasellus tortor. Curabitur feugiat sem sed mi. Praesent condimentum nisi in arcu. 
    		</div>
    </div>
    	
    	<p><a href="javascript:void(0);" onclick="myNewEffect.scroll(100)">Scroll left</a>
    	<a href="javascript:void(0);" onclick="myNewEffect.scroll(-100)">Scroll right</a></p>
    
    	<p>for more info <a href="http://www.mad4milk.net/entry/moo.fx-how-to-create-a-custom-effect">go take a look at the tutorial</a></p>
    </body></html>

  7. #7
    SitePoint Member thePUNCH's Avatar
    Join Date
    Oct 2004
    Location
    pensacola, florida
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is great. I have a question though.

    I'm wanting to use this, but have a grid of images (all same size) of 5 across and 4 down. Anyways, is there a way to perhaps have several <div> tags set up, and when you click forward/backward the next <div> is displayed? Each <div> would contain info of the same size.

    Thanks
    J


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
  •