Unobtrusive jQuery and script.aculo.us function includes?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Unobtrusive jQuery and script.aculo.us function includes?

Post by JAB Creations »

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")

Code: Select all

<h1 onclick="$('#div01').BlindToggleVertically(1000, null, 'bounceout');return false;"
script.aculo.us - H2 Element (id="whats_new")

Code: Select all

<h2 onclick="new Effect.toggle($('div02'),'blind');"
I tried the following without any success...

Code: Select all

function h1()
{
 if(h1.getElementsByTagName("header1"))
 {
  $('#div01').BlindToggleVertically(1000, null, 'bounceout');
 }	
}
I want to of course check for the existence of the element/ID to avoid creating any console error messages.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

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?
Like below?

File1.js

Code: Select all

function blah() {
   alert('blah');
}
File2.js

Code: Select all

blah();

Code: Select all

<html>
<head>
  <script type='text/javascript' src='File1.js'></script>
  <script type='text/javascript' src='File2.js'></script>
</head>
<body>
  .......
</body>
</html>
Yes.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

Code: Select all

if(document.getElementById("header1")) {alert ("This is a Javascript
Alert")}
...does not work (in an attempt to detect the object's ID before executing the function).

Plus I still have no clue how to call the function on a specific action. I've done a little research and addEventListener seems like it may be useful but I'm not finding any tutorials (especially in regards to the DHTML libraries) period much less one I can understand. :?:
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

JAB Creations wrote:

Code: Select all

if(document.getElementById("header1")) {alert ("This is a Javascript
Alert")}
...does not work (in an attempt to detect the object's ID before executing the function).
Most probably that code is executed before the element it references is loaded. You need to move it to window.onload event (which is triggered when entire page is loaded and all elements are accessible).
JAB Creations wrote: Plus I still have no clue how to call the function on a specific action.

Code: Select all

// In Prototype:
Event.observe(window, 'load', function() {
   alert('triggered when the window is loaded');
});

Event.observe($('element'), 'click', function() {
   alert('triggered when element clicked');
});

// In mozilla, ff, opera etc.
document.getElementById('element').addEventListener('click', function() {
   alert('triggered when element clicked');
}, false);

// in IE
document.getElementById('element').attachEvent('onclick', function() {
   alert('triggered when element clicked');
});
jQuery perhaps provide the functionality similar to Prototype, despite being different in syntax.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

You might want to go with window.onload = function() { //blah blah}. That would make it a ton easier to reference items that are already loaded on the page.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

The onload part was what I needed! *dances* This WORKS!

Code: Select all

function init() {
$("#header1").click(function(){
$("#div01").BlindToggleVertically(1000,null, 'bounceout');
return false;})
}
window.onload = init;
Post Reply