Archive for the ‘script.aculo.us’ Category

Support Prototype script.aculo.us and jQuery, page built with Prototype now being pulled into page that uses jQuery

Tuesday, November 2nd, 2010

So I developed a handful of sites several years ago using Prototype and script.aculo.us,

but now they’re being pulled into/included/required by pages, a site, that is strictly jQuery,

so I need to amend the Prototype site’s functions to check which library is loaded and then act accordingly.

It begs the question, if I were doing this completely fresh, which pattern (see Design Pattern posts) would I attempt to employ…? For example, I’d love to have the option right now to simply write an adapter pattern function instead of burying this conditional within each function…

Aside from Namespacing either or both libraries of course…

Example:

<script>
accordianing = false;
function comments_cabinet()
{
if(accordianing == true)
{
setTimeout( function() { accordian(); }, 25);
}
else
{
accordianing = true;
/* scriptaculous */
if(window.Prototype)
{

if($(‘comments_button’).style.display == ‘none’) // notice the Prototype standard $(”)
{
new Effect.BlindDown(‘comments_button’, {
duration: 0.5,
afterFinish: function(){
accordianing = false;
}
});
}
else
{
new Effect.BlindUp(‘comments_button’, {
duration: 0.5,
afterFinish: function(){
accordianing = false;
}
});
}
}
else
{

$(‘#comments_button’).toggle(‘slow’); // otherwise, use the jQuery version $(‘#’)
accordianing = false;
}
return false;
}
}
</script>

Prototype script.aculo.us form simple handling

Tuesday, April 13th, 2010

I’ve pretty much left script.aculo.us for jQuery for the most part, but sometimes I’m still animating with it, thought it would be good to make this easily and quickly reference-able just in case:

The Form:

<form id=”enewsform” name=”enewsform”>
<input name=”first_name” id=”first_name” type=”text” value=”First Name”/>
<input name=”last_name” id=”last_name” type=”text” value=”Last Name”/>
<input name=”email” id=”email” type=”text” value=”Email” onFocus=”if(this.value == ‘Email’) this.value = ”;” onBlur=”if(this.value == ”) this.value = ‘Email’;”/>
<div id=”hp_email_loading” style=”font-size:11px;display:none;”>Loading… please wait.</div><br />
<span style=”font-size:11px;”>Your email address will be kept strictly confidential.</span><br /><br />
<img style=”cursor:pointer;” onClick=”enewsSubscribe(); return false” onMouseOver=”this.src=’images/submit-over.gif'” onmouseout=”this.src=’images/submit.gif'” src=”images/submit.gif” alt=”Submit”>
</form>

The Javascript:

function enewsSubscribe()
{
var email = document.getElementById(’email’).value;
var first_name = document.getElementById(‘first_name’).value;
var last_name = document.getElementById(‘last_name’).value;
new Ajax.Updater(‘hp_email_box’, ‘filter.php?email=’ + email + ‘&first_name=’ + first_name + ‘&last_name=’ + last_name //);
, { onCreate: show_subscribe_loader, onComplete: hide_subscribe_loader });
}

function show_subscribe_loader()
{
document.getElementById(‘hp_email_loading’).style.display = ‘block’;
return false;
}

function hide_subscribe_loader()
{
document.getElementById(‘hp_email_loading’).style.display = ‘none’;
return false;
}

script.aculo.us Scroll to top of page

Monday, March 8th, 2010

/* Scroll to Top of Page Functino */
var scroll = { top: function(event) { new Effect.ScrollTo(‘top’, {duration: 1.0}); } }

in html place something like:

<div id=”top” style=”visibility:hidden;”></div>

in onclick or elsewhere place:

scroll.top();

JavaScript script.aculo.us Fade & Appear + IE Internet Explorer FIX

Monday, March 8th, 2010

new Effect.Fade(‘left_block3’, { duration: 0.5 });
new Effect.Appear(‘left_block4′, { duration: 0.5, queue:’end’ });

FULL CODE:

Blocks that fade and appear look like this:

<div id=”block1″ style=”display:none;”>
<div id=”header3″>
<div style=”position:absolute;top:0px;”><img border=”0″ align=”left” alt=”blah” src=”images/blah.gif”></div>
<div style=”position:absolute;top:110px;right:0px;”><img border=”0″ align=”right” alt=”blah” src=”images/blah.gif”/></div>
<div style=”position:absolute;top:25px;left:50px;margin-right:30px;width:290px;color:#2A5041;”>
<em>copy<div style=”text-align:right;”>&mdash;P.R.</div>
</em>
</div>
</div>
</div>

CSS for blocks:

#block1, #block2, #block3, #block4, #block5, #block6, #block7, #block8, #block9 {
float: left;
position: absolute;
left: 635px;
top: 225px;
height: 375px;
width: 375px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
padding-left: 0px;
display: inline;
line-height:1.5em;
text-align:left;
}

.smooth_it {
width: 68px;
height: 50px;
}

Full Javascript function:

/* ROTATING BLOCK */
var spot = 0;
var how_many = 7;
var current_rotator = ‘block1’;

function swap_block()
{
new Effect.Fade(current_rotator, { duration: 0.5, queue: ‘end’ });
spot++;
if(spot == 8){ spot = 1; }
current_rotator = ‘block’ + spot;
new Effect.Appear(current_rotator, { delay: 1.0, duration: 0.5, queue: ‘end’ });
rotatorer = setTimeout(“swap_block()”, 10000);
}

The keys, things to remember:

CSS defines the outermost block div, NOT the inner div, but DO note that it has an inner wrapping div (header3) that is NOT CSS defined.

The Internet Explorer IE fix is that if these things aren’t all perfectly done as described, IE simply won’t fade but will show/hide without transition, and furthermore, if the block’s background isn’t defined it may also granulate text rather than treat it as “has layout”.