Welcome!

[3zzy]

Hi,

I'm using several jQuery plugins for my website and each page requires different functions, for example:

page1 has:

Code: Select all

   // navbar initialization
   $('#navbar').nav({ pathClass: 'current'   });
   $("#navbar li").find("a span").parent().addClass("l1");
   
   // dropdown
   $("ul.dropdown li").hover(function(){
      $(this).addClass("hover");
      $('ul:first',this).css('visibility', 'visible');
   }, function(){
      $(this).removeClass("hover");
      $('ul:first',this).css('visibility', 'hidden');
   });
   $("ul.dropdown li").find("a span").parent().addClass("l1");

page2 has:

Code: Select all

// tabs
   $('.tabs').each(function() {
    $(this).siblings('div').children('div:gt(0)').hide();
    $(this).children('a:first').addClass('active');
    $(this).children('a').click(function() {
      var current_content_div = '#' + $(this).attr('rel');
      $(this).siblings().removeClass('active');
      $(this).addClass('active');
      $(current_content_div).siblings().hide();
      $(current_content_div).show();
      return false;       
    });
  });

..can I do something to keep those initialization functions out from the html, at least until page load?

Thanks

[Andy]

Straight from the manual:

Code: Select all

$(document).ready(function(){
   // Your code here
});


[3zzy]

Ofcourse I have those functions inside $(document).ready(function(). Let me explain it more clearly:

Page1 has:

Code: Select all

<script type="text/javascript">
//<![CDATA[
$(function() {
   // navbar
   $('#navbar').nav({ pathClass: 'current'   });
   $("#navbar li").find("a span").parent().addClass("l1");
   
   // dropdown
   $("ul.dropdown li").hover(function(){
      $(this).addClass("hover");
      $('ul:first',this).css('visibility', 'visible');
   }, function(){
      $(this).removeClass("hover");
      $('ul:first',this).css('visibility', 'hidden');
   });
   $("ul.dropdown li").find("a span").parent().addClass("l1");
});
//]]>
</script>

Page2 has:

Code: Select all

<script type="text/javascript">
//<![CDATA[
$(function() {
   // tabs
   $('.tabs').each(function() {
    $(this).siblings('div').children('div:gt(0)').hide();
    $(this).children('a:first').addClass('active');
    $(this).children('a').click(function() {
      var current_content_div = '#' + $(this).attr('rel');
      $(this).siblings().removeClass('active');
      $(this).addClass('active');
      $(current_content_div).siblings().hide();
      $(current_content_div).show();
      return false;       
    });
  });

});
//]]>
</script>

How can I merge all those callback functions into one single init.js?

[Tarvalon]

That didn't explain things any more clearly at all. You want your functions within the document.ready function as Andy mentioned. What aren't you understanding here?

[3zzy]

I want to store all those functions (pasted above) in a single, external init.js so I can keep my html clean, hope I'm making sense now?

[Andy]

I want to store all those functions (pasted above) in a single, external init.js so I can keep my html clean, hope I'm making sense now?

So cut the code out, paste it in init.js and load it with

Code: Select all

<script type="text/javascript" src="init.js"></script>

What's the problem, exactly?

[3zzy]

Right, but then ALL (there will be 'many') functions all be loaded for each page, some also might conflict.

[Andy]

Right, but then ALL (there will be 'many') functions all be loaded for each page, some also might conflict.

... You are scripting with CSS selector engine. Utilize it.
Identify the markup and load things accordingly.

[3zzy]

Thats what I don't understand and would like help with. How can I identify the page and appropriate load functions? Any examples?

Thanks

[Andy]

Thats what I don't understand and would like help with. How can I identify the page and appropriate load functions?

There are several ways of doing it.
You could identify individual elements in the source code using a CSS selector string. Remember, if it doesn't exist, the selection won't return anything. You could also identify pages as a whole by assigning IDs to the body tag and so forth.