CODEWITHSUNDEEP
javascriptjquery
GPayne
GPayne

Reputation: 13

Calling multiple functions with jQuery on.('click'...)

I have two divs side by side. The left (methods) div contains links which, when clicked, load some text into the right (descriptions) div from an external html file using '.load'. I also have some script to match the height of the 'methods' div to the 'descriptions' div, which I have placed into a function.

My problem is that I can't get the height-matching function to run on the same click as the text-loading script. At the moment, clicking a link loads the text as I want, but the height-matching doesn't happen until a link is clicked again.

I am new to javascript/jQuery so open to any and all resolutions including total rewrites of the code if that's what it takes.

Code can be seen "functioning" here: http://plnkr.co/edit/1CW1a7XNu73Kyo4xPMyg?p=preview

$(document).ready(function() {
    
    function matchDesc() {
        var hh = document.getElementById("descriptions").offsetHeight;         
        document.getElementById("methods").style.height = hh + "px";
    }

     $("#content").on('click', '#link', function(){
        var str = $(this).attr('class');
        var sect = str.slice(-1);
        $("#descriptions").load("descriptions.html #description-" + sect);
        $("#methods li a").css('color','#3164BE');
        $(this).css('color','red');

        matchDesc();
    });                     
                      
    window.onload = function() {
    matchDesc();
        }
});

Upvotes: 1

Views: 75

Answers (2)

zer00ne
zer00ne

Reputation: 43910

See this fork: http://plnkr.co/edit/x4Ge7Xy3DRuQWlM9McxD?p=preview

Followed Arun's advice and changed matchDesc(); When using window.onload don't use matchDesc(); that makes the function call as soon as it's read. Using window.onload = matchDesc will allow it to load after everything else has loaded.

$(document).ready(function() {

    function matchDesc() {
        var hh = $('#descriptions').outerHeight()        
        return $('#methods').outerHeight(hh);
    }

     $("#content").on('click', '.link', function(){
        var str = $(this).attr('id');
        var sect = str.slice(-1);

        $("#descriptions").load("descriptions.html #description-" + sect, function() { 
            $("#methods li a").css('color','#3164BE');
            $(this).css('color','red');
            matchDesc();
        });
    });                     

    window.onload = matchDesc;

});

Upvotes: 0

Abhijit Annaldas
Abhijit Annaldas

Reputation: 667

Fixed code here: http://plnkr.co/edit/lcAmQ9wcIGLJ9JjDi3HD?p=preview

$(document).ready(function() {

  function matchDesc() {
    var hh = document.getElementById("descriptions").offsetHeight;
    document.getElementById("methods").style.height = hh + "px";
  }

  $("#content").on('click', '.link', function() {
    var str = $(this).attr('id');
    var sect = str.slice(-1);
    $("#descriptions").load("descriptions.html #description-" + sect,
      function() {
        $("#methods li a").css('color', '#3164BE');
        $(this).css('color', 'red');
        matchDesc();
      });

  });

  window.onload = function() {
    matchDesc();
  }
});

As arun said, you need to call to do matchDesc after the load event is complete

Upvotes: 1

Related Questions