How to return function in document ready?

Question

I don't know if it is possible to do this, like I have 2 js files. The first Js File:

var news_pos, about_pos, services_pos, clients_pos;

function define_pos() {

    var $top_slides=$('#top_slides'), 
        $mid_nav=$('#mid_nav'), 
        $news_section=$('#section-1');

    var fixed_height = $top_slides.height() + $mid_nav.height();

    news_pos = fixed_height - 20;
    about_pos = fixed_height + $news_section.height();
    services_pos = fixed_height + $news_section.height() * 2;
    clients_pos = fixed_height + $news_section.height() * 3;
}

$(document).ready(function() {

    var section_news = $('#section-1'),
        section_about = $('#section-2'),
        section_services = $('#section-3'),
        section_clients = $('#section-4');

    setheight();

    function setheight() {
        var section_height = $(window).height() + 200;
        $section_news.height(section_height);
        $section_about.height(section_height); 
        $section_services.height(section_height);
        $section_clients.height(section_height);
        define_pos();
    }
});

1. The second JS File:

   $(document).ready(function() {

    var nav = { '$btn1': $('#btn1'), '$btn2': $('#btn2'), '$btn3': $('#btn3'), '$btn4': $('#btn4'), '$btn5': $('#btn5'), myclick : function() { myclicked(nav.$btn1, 0); myclicked(nav.$btn2, news_pos); myclicked(nav.$btn3, about_pos); myclicked(nav.$btn4, services_pos); myclicked(nav.$btn5, clients_pos); function myclicked(j,k) { j.click(function(e) { e.preventDefault(); $('html,body').animate({scrollTop: k}, 1000); }); } // Is it right to do return{'myclick':myclick}, // how to call? seems not logical } }; // Here will not work because it say news_pos is undefined. // If I use setTimeout(nav.myclick,1000), it will works but // I want to run it right the when position is caculated. nav.myclick();

   });

How do I pass the nav.myclick() function to the frist js file and put it in setheight() and under define_pos()? By the way writing codes right in stackoverflow is strange,press tab not really give you any spacing.

Answer 1

Right now, function setheight(){ } is an internal function in the first $(document).ready(function(){} . Its "scope" (visibility) is limited to inside that function.

To make it visible to everyone, you need to move it outside of $(document).ready(function(){} .

Then, declare the first file before the second one, and functions in the second file can now use setheight() .

---

To use myClick :

Your function now is myclicked() so you need to change that to myclick() . Then, you can call the functions in the global scope:

function myclick(j,k){            
    j.click(function(e) {   
    e.preventDefault();
    $('html,body').animate({scrollTop: k}, 1000);
    setheight();
    define_pos();
}

Answer 2

Here's one way to namespace your position functions per your "new" question in the comments. It's pure JS, not JQuery, but it's the same anyway:

var POSITIONING = {
    news_pos : 0,
    about_pos : 0,
    services_pos : 0,
    clients_pos : 0,

    define_pos : function() {
         var fixed_height = 100;

         POSITIONING.news_pos     = fixed_height; // + whatever
         POSITIONING.about_pos    = fixed_height; // + whatever
         POSITIONING.services_pos = fixed_height; // + whatever
         POSITIONING.clients_pos  = fixed_height; // + whatever
    },

    set_height : function() {
        alert(this.news_pos)
    }
};

Put this in a JS file, load it before any other files that use it, and call as follows:

// For example, when the window loads...or document is ready, whatever
window.onload = function() {
    POSITIONING.define_pos();
    POSITIONING.set_height();
};

It's also worth noting that it looks like this could be done more efficiently with CSS using a margin or padding or something. Probably a lot easier.