jQuery function not working when placed on .js separate file

Question

I have a php file with this jQuery function working properly (basically it identifies every '.limitCharacters' elements, calculates its width and height and makes some stuff on them):

$('.tableContent').find('.limitCharacters').each(function(){

    var percent = ((($(this).width()) / ( $(this).closest('div').width()))*100);
        if (percent > 95 || $(this).height() > 40){
         $(this).css('white-space','nowrap').css('color','red');
         $(this).parent().css('width', '85%').css('display','inline-block').css('overflow','hidden'); 
         $(this).parents().eq(1).css('height','36px');
         }      
  })

But when I try to move it to my separate .js file (which has already many functions inside being called from this php file, and works properfly), in order to call it from my php file whenever I need it, it does not work. This is how I've created it on my separate .js file:

function limitCharactersWidth(actualWidth, actualHeight, maxSpace, newSpace){
    if (actualWidth > maxSpace || actualHeight > 40){
         $(this).css('white-space','nowrap').css('color', 'red');
         $(this).parent().css('width', newSpace).css('display','inline-block').css('overflow','hidden'); 
         $(this).parents().eq(1).css('height','36px');}}

And this is the way I call it from my php file:

$('.tableContent').find('.limitCharacters').each(function(){

    var actualWidth = ((($(this).width()) / ( $(this).closest('div').width()))*100);
    var height = $(this).height();
    limitCharactersWidth(actualWidth,height,'90','80');
  })

Theorically it is the same, just that in the second case I pass variables to my .js separate file and it should react the same. What am I missing?

What do you mean by consuming? I fistrly thought it would be the (this), but goot many other functions there identifyig where to act based on (this). Please explain me what does consuming mean to answer you. — Biomehanika
– Biomehanika, Commented Apr 21, 2014 at 10:07

Satpal · Accepted Answer · 2014-04-21 10:07:26Z

3

Your problem is $(this), In your original code $(this) refers to the element .limitCharacters, As you have separated the function to separate JS file you have to pass the reference of $(this) to your function

Try this, Here I have added new parameter obj

function limitCharactersWidth(obj, actualWidth, actualHeight, maxSpace, newSpace){
    if (actualWidth > maxSpace || actualHeight > 40){
        $(obj).css('white-space','nowrap').css('color', 'red');
        $(obj).parent().css('width', newSpace).css('display','inline-block').css('overflow','hidden'); 
        $(obj).parents().eq(1).css('height','36px');}}

Usage

$('.tableContent').find('.limitCharacters').each(function(){
    var actualWidth = ((($(this).width()) / ( $(this).closest('div').width()))*100);
    var height = $(this).height();
    limitCharactersWidth(this, actualWidth,height,'90','80'); //Passed this
  })

answered Apr 21, 2014 at 10:07

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

2 Comments

Biomehanika Over a year ago

I am about to ty, I'll tell you then.

Biomehanika Over a year ago

This worked perfectly. Very grateful, I'll tick in 7 minutes (system does not accept any tickling before 9 minutes fro reply). Thank you.

Collectives™ on Stack Overflow

jQuery function not working when placed on .js separate file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related