Applying Javascript before page loads?

Fiasst - September 5, 2007 - 12:28

Hi,

I'm using MooTools and a curvedcorners.js file in my theme. It all works fine on my local machine and even as a static site show here:

www.realworksmedia.com/themes/realworks07/productboxes.htm

The above example uses the MooTools and 'round.js' and displays curved corners on the 3 gray boxes smoothly on page load.

But, when Drupal uses these Javascript files my rounded corners only come into affect after the page has finished loading. Example:

www.realworksmedia.com

I don't know what Drupal is doing with the Javascript or even how it handles the 'domready' event handler but I really need certain Javascript functions to execute before the page has displayed.

I'm using: (in template.php)

<?php
drupal_add_js
('themes/realworks07/js/mootools.svn.js', 'core');
drupal_add_js('themes/realworks07/js/round.js', 'core');

// also tried:

drupal_add_js('themes/realworks07/js/mootools.svn.js', 'theme');
drupal_add_js('themes/realworks07/js/round.js', 'theme');
?>

I've also tried linking to the javascript files in my page template with the same, delayed results.

Thanks for your time. Any help is appreciated!

Dom Ready Event Handler

mpare - September 5, 2007 - 13:42

if (Drupal.jsEnabled) {
  $(function() {

  });
};

Is what I typically use to initiate java as soon as the DOM is ready. If you are not concerned with the dom and want it to execute immediately just leave the Drupal.jsEnabled. I'm not aware of drupal automatically entering the document ready without manually specifying it so one of the two solutions should work for you if everything else is good. Note the above code is for using jQuery. But from what I understand this DOM execution is kindof unique to jQuery though other libraries have similar equivalents. I suppose you could use jQuery to initiate another library as it is already loaded with calling drupal_add_js I believe. Also in regards to your module path I usually us drupal_get_path. So your code may be like...

<?php
  drupal_add_js
(drupal_get_path('theme', 'realworks07'). /js/mootools.svn.js);
?>

Well I hope some of that helps, sorry I don't have a more direct answer.

Peace,
-mpare
--
Pare Technologies
Drupal Consulting, Themeing, and Module Development
806.781.8324 | 806.733.3025
www.paretech.com

Figure Something Out? Document Your Success!

Hi mpare, thanks for your

Fiasst - September 7, 2007 - 16:15

Hi mpare,

thanks for your reply. It has certainly made a difference to how soon the functions executed.

However, The page still loads before the changes take affect. I believe this is because the script is in the /themes folder.

Is it possible to make a module that loads the javascript before the theme has been called and possibly applies the changes before finishing loading the page?

Thanks!

if you have to do this way

litwol - September 7, 2007 - 16:26

if you have to do this way before the changes take place, why dont you write a regular module that does the changes on the server side before anything is sent to the browser?

I'm crap at PHP hehe.. I'm

Fiasst - September 9, 2007 - 11:45

I'm crap at PHP hehe.. I'm ok a JavaScript.

 
 

Drupal is a registered trademark of Dries Buytaert.