SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript slidey (on hover) script.

    Hi Peeps,

    I am not too clued up on JavaScript, and would really appreciate any help you guys can offer.

    I am designing a site for a charity, and have seen a (I think JavaScript) effect on the apple site which I would really like to use (or similar effect) to highlight the ways people can help (volunteering, donate etc).

    The effect I am talking about is on this page:

    http://www.apple.com/uk/iphone/

    The effect in the bottom left under the 'Getting Starte' heading.

    If anyone knows of any similar script tutorials, I would be most apreciative

    Thanks yous

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's basically an accordion effect. Mootools has a similar graphical accordion, check out the color blocks on their home page. http://www.mootools.net/

  3. #3
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by magenta placenta View Post
    It's basically an accordion effect. Mootools has a similar graphical accordion, check out the color blocks on their home page. http://www.mootools.net/
    Thanks magenta, I have seen the MooTools site before and you're right that is the effect.

    Do you know if they have that specific code available? Can't seem to find it.

    Also a friend told me that MooTools code can be buggy, and his experice was IE7 constantly crashing on page load up.

    Thanks for your help

  4. #4
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does anyone know of any code around that would create this effect?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    It could be done using scriptaculous effects.

    Code HTML4Strict:
    <script src="prototype.js"></script>
    <script src="effects.js"></script>

    The HTML would be standard stuff, with an identifier and class names to indicate the appropriate sections. This ensure that the content is still visible should there be no javascript.

    I'll use the section from the apple site as an example.

    Code HTML4Strict:
    <h2>Getting Started</h2>
    <div id="gettingStarted">
    	<div>
    		<div class="accord"><img src="easy-setup.jpg" width="140"></div>
    		<h3>Easy Setup</h3>
    		<p>Even the activation process is impressively simple.</p>
    		<a href="gettingstarted/">Learn More</a>
    	</div>
    	<div>
    		<div class="accord"><img src="download-itunes.jpg" width="140"></div>
    		<h3>Download iTunes</h3>
    		<p>iTunes helps you activate and sync your iPhone.</p>
    		<a href="../itunes/download/">Download now</a>
    	</div>
    	<div>
    		<div class="accord"><img src="guided-tours.jpg" width="140"></div>
    		<h3>Using Your iPhone</h3>
    		<p>Learn everything you need to know about your iPhone.</p>
    		<a href="gettingstarted/guidedtour.html">Watch the guided tours</a>
    	</div>
    	<div>
    		<div class="accord"><img src="using-keyboard.jpg" width="140"></div>
    		<h3>Using Your Keyboard</h3>
    		<p>Meet the world's smartest keyboard.</p>
    		<a href="gettingstarted/keyboard.html">Learn More</a>
    	</div>
    </div>

    The following styles will help it to look a bit better.

    Code CSS:
    		#gettingStarted {
    			width: 10em;
    			padding: 0;
    			border: 1px solid black;
    		}
    		#gettingStarted div {
    			margin: 0;
    			padding: 0.5em;
    		}
    		#gettingStarted div div {
    			margin: 0;
    			padding: 0;
    		}
    		#gettingStarted img {
    			margin: 0;
    			padding: 0;
    			vertical-align: top;
    		}
    		#gettingStarted h3, #gettingStarted p {
    			margin: 0.5em 0;
    		}
    		.current {
    			background: #ccc;
    		}

    This script here should do the job.

    At first it was quite fragile, but a couple of issues have been resolved, such as if you've hovering over a section that's already the current one, and preventing the accordion from occurring more than once at the same time.

    Code Javascript:
    function accordian(id, args) {
    	// process arguments
    	if (!args) var args = {};
    	if (!('selected' in args)) args.selected = $(id).select('.accord')[0];
    	if (!('speed' in args)) args.speed = 3;
    	// Check if there's a current selection
    	var isCurrent = false;
    	if ($(id).select('.current').length > 0) {
    		isCurrent = (args.selected.up() === $(id).select('.current')[0]);
    	}
    	// proceed if it's not the current section and the accordian is not active
    	if (!isCurrent && !$(id).active) {
    		$(id).select('.accord').each(function (el) {
    			if (el === args.selected) {
    				// open the selected section
    				Effect.BlindDown(el, {duration: args.speed});
    				el.up().addClassName('current');
    			} else {
    				// close the other sections
    				Effect.BlindUp(el, {duration: args.speed});
    				el.up().removeClassName('current');
    			}
    		});
    		$(id).active = true;
    	}
    	clearActive.delay(args.speed, id);
    }
    function clearActive(id) {
    	$(id).active = false;
    }
    accordian('gettingStarted', {speed: 0});
    $('gettingStarted').select('.accord').each(function (el) {
    	el.up().observe('mouseover', function (event) {
    		var el = Event.element(event);
    		if (el.select('.accord').length > 0) {
    			if (!(el.select('.accord')[0].hasClassName('current'))) {
    				accordian('gettingStarted', {selected: el.select('.accord')[0]});
    			}
    		}
    	});
    });
    Last edited by paul_wilkins; Jan 27, 2008 at 23:09.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like the effect in Yootheme theme for Joomla CMS: demo.yootheme.com
    They also use mootools.


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
  •