Unobtrusive jQuery and script.aculo.us function includes?
Posted: Fri Apr 13, 2007 3:13 am
I've decided that after testing jQuery and script.aculo.us that instead of choosing between them I'm going to give my users a choice (where both are supported of course) between the two libraries. This while initially being a pain to code will be great as it will allow me to add other JavaScript libraries at a later time.
So I want to move all JavaScript events (onmouseover, onclick, onfocus, onblur, etc) out of the XHTML code and in to a separate JavaScript "includes file" to be included after it's associated script library.
That way whether a DHTML library is not included, is included, and regardless of which one is included it's associated functions includes will execute the scripts. All the elements will have id attributes and unique values of course.
My first question: can one call a function from one script includes file from another or will I have to merge all of the script functions for my page on to the main DHTML engines themselves?
Secondly I've obviously have to remove the code from my XHTML. So here are a couple examples I'm trying to figure out...
jQuery - H1 Element (id="h1")
script.aculo.us - H2 Element (id="whats_new")
I tried the following without any success...
I want to of course check for the existence of the element/ID to avoid creating any console error messages.
So I want to move all JavaScript events (onmouseover, onclick, onfocus, onblur, etc) out of the XHTML code and in to a separate JavaScript "includes file" to be included after it's associated script library.
That way whether a DHTML library is not included, is included, and regardless of which one is included it's associated functions includes will execute the scripts. All the elements will have id attributes and unique values of course.
My first question: can one call a function from one script includes file from another or will I have to merge all of the script functions for my page on to the main DHTML engines themselves?
Secondly I've obviously have to remove the code from my XHTML. So here are a couple examples I'm trying to figure out...
jQuery - H1 Element (id="h1")
Code: Select all
<h1 onclick="$('#div01').BlindToggleVertically(1000, null, 'bounceout');return false;"Code: Select all
<h2 onclick="new Effect.toggle($('div02'),'blind');"Code: Select all
function h1()
{
if(h1.getElementsByTagName("header1"))
{
$('#div01').BlindToggleVertically(1000, null, 'bounceout');
}
}