code and effect » js http://www.codeandeffect.co.uk/blog It's quite deliberate Mon, 08 Mar 2010 14:28:40 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Background Animations in Script.Aculo.Us http://www.codeandeffect.co.uk/blog/2008/programming/js/background-animations-in-scriptaculous/ http://www.codeandeffect.co.uk/blog/2008/programming/js/background-animations-in-scriptaculous/#comments Wed, 12 Nov 2008 20:14:24 +0000 Anthony http://www.codeandeffect.co.uk/blog/?p=302 Inspired by Jonathan Snook’s article on animating backgrounds using Jquery, I had a snoop around in Script.aculo.us for the equivalent methods to create moving background images. It wasn’t long before I hit a wall with the Effect.Morph method and its inability to parse the CSS values for background-position.



Effect.Morph simply examines current CSS values and calculates new ones, iterating through a number of transforms according to the duration of the morph. Colour values are handled appropriately, but for positioning only a single value is anticipated. As the second value of background-position is never parsed, you’re limited to horizontal animation.

see a demo of the problem.

So I’ve created an extension, similar to Alexander Farkas’ for JQuery, to manipulate background-position both vertically and horizontally using the same syntax as Effect.Morph.

See it in action on Horizontal and Vertical background animations and Vertical only.

Using the Effect.Morphbgpos extension

Include in the <head> the Prototype and Script.aculo.us libraries as usual. Download the extension and include it after the main libraries:

<script src="bgposeffect.js" type="text/javascript"></script>

Jonathan did a great job describing his HTML and CSS markup (including how to show the final states of the animation using CSS just in case Javascript is not present) so I won’t repeat it all here. Suffice to say this is very similar: an unordered list with an id, containing three items, containing only links.

<body>
...
<ul id="a">
	<li><a href="#">Rivera</a></li>
	<li><a href="#">Miro</a></li>
	<li><a href="#">Varo</a></li>
</ul>
...

Then (somewhere after the list) include the code observers that restyle your links on mouseover and mouseout:

<script type="text/javascript">
$$('#tabs a').each(
	function(s) {
		s.observe('mouseover', function(s){
			this.setStyle( {backgroundPosition: "0px 5px"});
			new Effect.Morphbgpos(this, {
			  style: 'background-position:0px -40px;color:#cc0000',
			  duration: 4.3
			});
		});
	 	s.observe('mouseout', function(s) {
			this.setStyle( {backgroundPosition: "0px -40px"});
			new Effect.Morphbgpos(this, {
			style: 'background-position:0px 5px;color:#c0c0c0',
			duration: 4.3
			});
		});
	});
</script>

Note that in the example each of the observer methods sets the state directly before animating it. Mouseover begins from the original state set in the CSS while Mouseout sets the finished state (as in the CSS link hover state ) before animating back to the original state.

How it works

Very simple. Effect.Morphbgpos is a modified version of Effect.Morph that anticipates having to handle two sets of pixel values. It reads the current states into x and y variables, manipulates them and writes out the appropriate CSS, repeating until the final state is reached.

Handling Other Effect.Morph CSS properties

The extension will pass any CSS that isn’t a background-position property to a new instance of Effect.Morph.

You should be able to replace all Effect.Morph calls with Effect.Morphbgpos, and then simply find+replace them when this functionality becomes available in a future version of the framework.

Limitations

This first version only handles explicit background-position statements, using pixel values, and duration is the only supported option.

As it’s only extending Script.aculo.us by a fraction it seems to be robust across the browsers I’ve tested.

Download & usage

Download the js file here (or here as text). Use just as you would Effect.Morph by settings CSS property-value pairs, and a duration.

]]> http://www.codeandeffect.co.uk/blog/2008/programming/js/background-animations-in-scriptaculous/feed/ 2 Safari Beta for Windows http://www.codeandeffect.co.uk/blog/2007/programming/js/safari-beta-for-windows/ http://www.codeandeffect.co.uk/blog/2007/programming/js/safari-beta-for-windows/#comments Tue, 12 Jun 2007 09:26:59 +0000 Anthony http://www.codeandeffect.co.uk/blog/2007/programming/js/safari-beta-for-windows/ Safari (beta, and for Windows), a bit of a damp squib this, I have a site in development for a client (and friend of old) with a strong Macintosh background. The site makes good use of the script.aculo.us library to animate items to the screen. I’d hoped this would allow me to stop switching machines quite so often for testing.

Loading the site up, I get no body text where I would expect it to load. The beta doesn’t seem to contain a Script debugger either. Reading through the docs for Safari I have to add the debug menu via terminal window (so no Win specific help then!).

I’m stuck now with a site I need to be exceptionally Safari friendly, but can’t debug. So am also stuck with a browser beta I can’t test any further.

]]> http://www.codeandeffect.co.uk/blog/2007/programming/js/safari-beta-for-windows/feed/ 0 Simple returns http://www.codeandeffect.co.uk/blog/2006/work-stuff/simple-returns/ http://www.codeandeffect.co.uk/blog/2006/work-stuff/simple-returns/#comments Fri, 22 Sep 2006 09:51:31 +0000 Anthony http://www.codeandeffect.co.uk/blog/?p=35 Simple Back Button generator (opens in a new window)

It’s not rocket science, in fact it’s probably not even breadmaker science, but it’s useful. Detects if there’s a history to return to before adding a back button to a menu of your choosing.

Our CMS generated breadcrumb trail reflects the site structure, not an individual user’s path into the site – this was one possible solution to the loss of adequate return navigation when you go from one site area (say a school) to another (a service team perhaps).

]]> http://www.codeandeffect.co.uk/blog/2006/work-stuff/simple-returns/feed/ 0 Drag n’ Drop CAPTCHA puzzle http://www.codeandeffect.co.uk/blog/2006/programming/php/dragndrop-captcha/ http://www.codeandeffect.co.uk/blog/2006/programming/php/dragndrop-captcha/#comments Fri, 08 Sep 2006 13:33:09 +0000 Anthony http://www.codeandeffect.co.uk/blog/?p=28 Drag n Drop CAPTCHA mechanism screenie

Simply re-arrange the images to make a visible key before clicking submit.

Fiddling with Scriptaculous earlier today I had an idea for a CAPTCHA mechanism. Cycling through the $_POST array in PHP gives you the form data, in order of submission.Scriptaculous’ sortable feature allows you to change order of items in a List, so adding an image with corresponding hidden input field gives you a basic puzzle to satisfy the CAPTCHA requirement.

Simple Drag n’ Drop CAPTCHA (written 8th September, 2006, code available on request).

Still comes with all the same accessibility problems most mechanisms have (with the added JS requirement), but saves the need for image generation.This version *can* use any naming convention for the images and input field names, they’re generated and checked by an array so don’t need to be numerically ordered – which could be a giveaway.

]]> http://www.codeandeffect.co.uk/blog/2006/programming/php/dragndrop-captcha/feed/ 1