jquery function doesn't trigger

Question

My resizeAreas function doesn't trigger in $(document).ready function. Here's the link to the app. I have also tried $(document).load but same result.

This problem is not consistent. But most of the time the page doesn't load correctly. If the list of task have the same height and 4 equal(as height) lists on the row then they are loaded correctly else they're not. To make sure that you see how it must look you can move a task element from one list to another. I don't have the reputation to post images.

Here is most of the javascript code:

function makeDropArea() {
  var widthArea = $(".taskListing").width() / 2 - 55;
  var heightArea = $(".taskListing").height(); 

  $('.dropArea').width(widthArea);
  $('.dropArea').css('margin-left', 5 + 'px');
  $('.generalInfo').css('margin-left', 5 + 'px');
  $('.generalInfo').css('width', widthArea * 2 + 220 - 45);
  $('.subTaskHeader').css('width', widthArea + 25);
}

function makeDropElement(){
  var widthEl = $('.dropArea').width() + 25 ;
  $('.task').width(widthEl);
}

function taskListingSize(){

  var width = getWidth();
  var height = getHeight() * 80 / 100;
  $('.taskListing').css('width', width);
}


function resizeAreas() {
   $('.taskListing').each(function(){  

     var highestBox = 0;
     $('.dropArea', this).each(function(){

       if($(this).height() > highestBox) 
         highestBox = $(this).height(); 
     });  

     $('.dropArea',this).css('min-height', highestBox);  
   });    
}

$(document).ready(function () {
  menu();
  taskListingSize();
  makeDropArea();
  makeDropElement();
  resizeAreas();  //<-- this is the one with the problems

  $(".dropArea").resize(resizeAreas());

  $( window ).resize(function() {
    taskListingSize();
    makeDropArea();
    makeDropElement();
  });
});

Thanks.

Update 1:

I've done some more testing and this bug is only on chrome and firefox but not on IE. The problem appears only on the openshift platform.

resizeAreas() is called in the wrong area. remove the () and it may work — Ibu
– Ibu, Commented May 8, 2014 at 21:38

Praveen Kumar Purushothaman · Accepted Answer · 2014-05-08 21:47:11Z

1

Either change:

$(".dropArea").resize(resizeAreas());

To:

$(".dropArea").resize("resizeAreas");

Or:

$(".dropArea").resize(function(){
  resizeAreas();
});

answered May 8, 2014 at 21:47

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3618198 Over a year ago

Thanks for the code review but the proplem persists. I think that the line of code that is causing it, is the line of code above the one that you suggested me to change. When i use debug it works fine.

fat fantasma · Accepted Answer · 2014-05-09 10:27:41Z

0

I think it should be

 $(".dropArea").resize(resizeAreas);

Or

 $(".dropArea").resize(function(){
       resizeAreas();
  });

answered May 9, 2014 at 10:27

fat fantasma

7,64316 gold badges50 silver badges69 bronze badges

Collectives™ on Stack Overflow

jquery function doesn't trigger

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related