Background Animations in Script.Aculo.Us

Posted on November 12, 2008 by Anthony

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.

RSS take-up peaks at 11pc

Posted on October 21, 2008 by Anthony

I won’t be spending $279 to find out the details:

Nearly half of interactive marketers use RSS, but consumer adoption has only reached 11%. Of the consumers who haven’t adopted RSS, most don’t understand how RSS is relevant to their lives and the way they seek information. If marketers expect to reach a critical mass of consumers by using content syndication, then they must take on the burden of education.

[source: forrester.com...150,00.html]

So I wonder how many people knew they were using RSS, and how many accessed syndicated material without realising the nature of it’s origin. Yahoo Pipes for instance, mashups etc.

Were Podcasts included or excluded?

Hard found gains in Symfony

Posted on September 2, 2008 by Anthony

My first production Symfony application is a newletter manager and sender. This gave me a few headaches that I couldn’t easily find solutions for in the Docs. In the end trial, error and other sources came up with some gems that kept things moving.

Assigning complete module output to a variable

sfContext::getInstance()->getController()->Â»
getPresentationFor('module','action');

This is pretty useful, dropped into your Action this retrieves the fully rendered (layout, template, content) output of another Action/Module. Many of the email examples recommend putting the content you wish to send out into a partial or component and show how to grab it for variable assignment, but this will take a whole page you might want to email ‘as is’. I use it retrieve a current newsletter page as it is would be rendered for the web so I can drop it into an email.

Flexible but full Absolute URLs to assets

mymodule:
  stylesheets:    [main , 'http://mysiteDotCoDotUK/path/to/this.css']
  javascripts:    ['http://mysiteDotCoDotUK/path/to/that.js']

The books don’t seem to mention it, but you can use absolute URLs in your view.yml for embedding stylesheets and javascripts. So you can set granular stylesheet and script settings down to the module while still producing absolute links to them. When your assets also use the absolute=>true boolean options in Link and Asset Helpers, then you have dynamically generated fully standalone output. I’ll be using this to make sure email newsletters find their supporting content.

With this, I can provide the editor interface, management and preview options, a live copy of the current newsletter and archive of old ones on the web, and share the very same content in mails to subscribers.

Mixing Object and Form Helpers in Symfony

Posted on August 21, 2008 by Anthony

Being new to Symfony I’m still getting my head around some of its paradigms. Two months with the manual before embarking on any development taught me that it was worth pursuing, but there’re always areas you need to see working.

The Object form helpers looked particularly useful, so for my first production development I aim to use them wherever possible. These helpers allow you edit objects directly, simplifying the update process back in your actions.

sample form in editformSuccess.php template:

<?php echo form_tag('editform/updatetitle'); ?>
<?php echo object_input_hidden_tag($newsletter, 'getID') ;?>
Title: <?php echo object_input_tag($newsletter, 'getTitle') ;?>
<?php echo submit_tag('update'); ?>

and in actions.class.php:

<?php
public function executeEditform($request)
{
$this->newsletter = Â»
NewsletterPeer::retrieveByPk($request->getParameter('id'));
$this->forward404Unless($this->newsletter);
}
 
public function executeUpdatetitle($request)
{
$nltoupdate = NewsletterPeer::retrieveByPk($request->getParameter('id'));
$this->forward404Unless($nltoupdate );
$nltoupdate->fromArray(Â»
$this->getRequest()->getParameterHolder()->getAll(),BasePeer::TYPE_FIELDNAME);
$nltoupdate->save();
return $this->redirect(Â»
'newsletters/view?id='.$request->getParameter('id'));
}

The update code uses the fromArray method to update any properties of your object it holds data for, received from your form. Adding fields to your form doesn’t require changes to the action.

I got into difficulties when it came to setting a boolean field for my object, called “IsPublished”. Wishing to stick with the Object form helpers I investigated the Object_select_tag, however this has a different use altogether – allowing you to grab properties of other objects to match with your current object. The classic example being choosing an author from the authors object to match up to a post object.

I still wanted to save a property for my object, but I didn’t want to have it select from the object, or grab values from other objects. Further searches revealed I wasn’t alone in wondering how to set default selected values and generally get to grips with object_select_tag.

Mixing Object and Form helpers seemed the best solution, using select_tag for my boolean field. However this meant I wasn’t using the Object helper exclusively, so would it still work with fromArray?

The form code generated looked promisingly simple, so I tried a mix of object_input_tag and select_tag in my editformSuccess.php template:

<?php
$defaultOption = Â»
$newsletter->getIsPublished() == 1?1:0; # get current, set default
echo select_tag('in_published', options_for_select(array(Â»
0, 1),
$defaultOption));
?>

Note the highlighted property in select_tag. My Object Property is called “IsPublished”. To object-generate a plain text input field I’d have used:

<?php
Published: <?php echo object_input_tag($newsletter, 'getIsPublished') ;
?>

So my current field value would be retrieved, and the Object helper generates form fields using BasePeer::TYPE_FIELDNAME which in turn is used in my fromArray method to update the Db.

Normally one would use select_tag with internal field names (BasePeer:: TYPE:PHP_NAME) and write more action code to marry them up before a save(), however here I have to add my database field name into my view code.

Tethering your templates to your database schema is a route no-one should go down. So the internal name should be converted to the Db name on-the-fly in your template. The Peer classes have a function for this, and its public. The following call converts your usual internal field name for you, ready to drop into your select_tag:

<?php
$IsPublished_translated = BaseNewsletterPeer::translateFieldName(Â»'IsPublished',BasePeer::TYPE_PHPNAME, BasePeer::TYPE_FIELDNAME )
?>

You could assign this in your action, but it works just as well in the template:

<?php
echo select_tag(Â»
'BaseNewsletterPeer::translateFieldName(Â»
'IsPublished',BasePeer::TYPE_PHPNAME, BasePeer::TYPE_FIELDNAME',Â»
options_for_select(array(Â»
0, 1),
$defaultOption));
?>

A final step would be to migrate this into a function higher up that so as to make templates a little prettier when editing.

Your history is your business, not ours

Posted on July 28, 2008 by Anthony

I like the sound of Cuil- all the goodness of their ex-employer without the digital footprint. Their privacy page reads:

Privacy is a hot topic these days, and we want you to feel totally comfortable using our service, so our privacy policy is very simple: when you search with Cuil, we do not collect any personally identifiable information, period. We have no idea who sends queries: not by name, not by IP address, and not by cookies (more on this later). Your search history is your business, not ours.

Right now though I’m waiting a long time for the first few of the 1,682,519,994 results promised on a search of this blog’s title to appear. The first time I tried it I got a rapid response – saying there were no results. But I’m optimistic that this could be my search engine of choice when things settle down. Their claim to examine the context of search queries in order to refine results is interesting and I wonder what it means in practice.

While a good tactic for a launch I don’t imagine the black homepage with centred box will last, not least when they quickly revert to convention for the results; but the results page layout of boxed up summaries is pleasant and readable – not unlike a good news site.

Now I’m waiting for page 2, and the features, privacy and management pages have all gone missing. I’ll come back tomorrow.

Advances in Computer Security and Forensics Conference

Posted on July 22, 2008 by Anthony

I’m really glad I got the opportunity to attend this event. It’s given my own research and writing a bit of a boost, but its also shown me just how important advances in this field are.

On day one we heard from Merseyside High Tech Crimes (HTC) Unit, about their day to day challenges and how they’re overcome. We also heard from a career digital forensic analyst about recovering data from all makes and models of mobile devices: handhelds, phones and the like, and the ways and means of recovering data from the removable media they commonly use.

On day two there was a practitioner talk from Henrik Kiertzner, about the technology’s propensity to nurture self-selecting constituencies, groups of like minded (though possibly geographically dispersed) individuals with ideologies in accelerated development – and how we’re unlikely to even notice them until they make their move.

We heard from Mark Taylor about scoping corporate forensic investigations, which gave me additional avenues of inquiry for my own research.

The keynote speaker Jim Gamble from the Child Exploitation and Online Protection Centre brought us insights – with wit and wisdom – from a truly difficult field and a call to developers to understand the difference their expertise can make to young individuals. Many of the techniques they use in the kind of cybercrime they combat are traditional. Knowing your enemy being one of them.

I’d assumed this would be a dry and technical conference, so its surprising how far social concerns pervaded the discussion sessions and the conference as a whole.

First spam attempt on Drag n’ Drop captcha

Posted on July 14, 2008 by Anthony

As its still in development, I’ve set the drag n’ drop captcha mechanism to report failures in full as well as forwarding legitimate responses.
I’ve had the first (update: two now) such failure notice from a live installation today – subject line: ‘yGAQJUnxHNOw’ and just a few web addresses I won’t repeat here.

Positive so far.

Computer Security and Forensics conference, ACSF 2008

Posted on July 9, 2008 by Anthony

Tomorrow I’ll be at The Third Conference on Advances in Computer Security and Forensics .

Purely for research purposes. Hopefully there’ll be lots of useful insights that will inform my current work. We will see, updates as and when.

Drag n’ Drop captcha updated

Posted on July 7, 2008 by Anthony

I finally have this released into production environments which will no doubt help me to improve it. There’ve been some updates to the mechanism to dissociate image filenames from the puzzle fields.

Next I need to make the names more variable, and perhaps cache them and generate random permutations. Accessibility remains a concern.

dragndrop-captcha

code and effect

@AM_Doherty

Category Archives: Web Computing