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>

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;
}

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

in onclick or elsewhere place:

scroll.top();

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”.