$(window).load(function() not always working

Question

I'm trying to implement a scrollbar plugin on a div on my website but I'm facing a few issues with it. first of all it was supposed to be working like this:

jQuery(document).ready(function ($) {
    "use strict";
    $('.chat-messages').perfectScrollbar({suppressScrollX: true});
  });

But I could only make it work like this:

$(window).load(function() {
    "use strict";
    $('.chat-messages').perfectScrollbar({suppressScrollX: true});
});

But with window.load the script doesn't seems to be working all the time, or at least the scroll bar doesn't always appear.

I'm not very familiar with js or jquery but I inserted the src file perfect-scrollbar.js in a folder and I'm calling it normally like this: <script src="http://domain.com/javascript/perfect-scrollbar.js"></script> on the header and puting the code that I described above with the window.load right after it between <script></script>. I'm assuming that this is a conflict with another document ready so I searched online for solutions and other ways to load it and I found the no conflict thingy and tried to implement like this:

$.noConflict();
jQuery( document ).ready(function( $ ) {
     "use strict";
   $('.chat-messages').perfectScrollbar({suppressScrollX: true});
   });
});

but still no results, the only thing that this does is to stop all jquery of the website from working. Can anyone help me with this? thanks in advance

`noConflict` is to deal with conflicts between multiple versions of jQuery, not calls to it. — Quentin, Mar 01 '15 at 20:23
What does the HTML for the element you are targeting look like? Is it actually HTML or are you adding it with JS? — Quentin, Mar 01 '15 at 20:23
What does the JavaScript console say? Are there any errors? What if you add `alert($('.chat-messages').length);`? Does it find the element? — Quentin, Mar 01 '15 at 20:28
yeah, like I said with the window.load it works fine, but I think it is supposed to be with the document ready for this reason. because window load not always get it to work right — Chun, Mar 01 '15 at 20:33
I've done a test with document ready to display an alert and the alert appears, but the scroll bar still nothing so I think it must be on the code inside of it... — Chun, Mar 02 '15 at 05:57

EternalHour · Answer 1 · 2015-03-01T23:32:08.437

1

I've tested, and document.ready should work fine.

CSS

.chat-messages {
    position: fixed;
    height: 300px;
    overflow: hidden;
}

EDIT :

Since you are combing this with other scripts, possibly try declaring your selector as a variable at the very top.

JQuery

$(function () {
    var $chat = $('.chat-messages');

    ...other scripts/functions... 

    $chat.perfectScrollbar({suppressScrollX: true});
});

Here is a Fiddle.

edited Mar 01 '15 at 23:32

answered Mar 01 '15 at 23:09

EternalHour

8,308
6
38
57

:\ maybe it's a problem somewhere in my script. maybe some lost JS on the script which is in conflict with it. Oh well.. I've tried so many things that I think I'm gonna give up of trying to make it work :\ – Chun Mar 01 '15 at 23:19
can this be a problem of naming the function? how can I name it to try it out? – Chun Mar 01 '15 at 23:20
Are you combining this with another script or do you have it by itself? If you are combining it you probably have a traveral issue and `.chat-messages` can't be found in the DOM. – EternalHour Mar 01 '15 at 23:21
Yes I have it with another scripts, it's not by itself, that's why I thought the noConflict would solve the problem but no. I had tried to remove all the other script calls and left only the perfect scroll and still nothing.. :\ – Chun Mar 01 '15 at 23:26
still nothing :/ I've done a test with document ready to display an alert and the alert seems to appear, but the scroll bar still nothing, so I think it must be on the code inside of it... I also tried some workaround ways and with this one it works well but the user will always have to scroll a bit for the scrollbar appear: `$(document).scroll(function() {` – Chun Mar 02 '15 at 05:58

score 0 · Answer 2 · answered Mar 01 '15 at 22:28

The problem with

jQuery(document).ready(function ($) {
    "use strict";
    $('.chat-messages').perfectScrollbar({suppressScrollX:    true});
});

is that you are leaving $ undefined in your local scope by naming a parameter of your anonymous function with that identifier. jQuery passes no arguments to that function, but your declaration of the parameter masks the global definition of $. If you are not using no conflict mode, then $ will already be available in the global scope, so the following should work:

$(document).ready(function () {
    "use strict";
    $('.chat-messages').perfectScrollbar({suppressScrollX: true});
});

As an aside, the point of noConflict is to avoid clashes with other code which may be relying on a global definition of $ which differs from jQuery's use of $ as an alias for jQuery.

it´s still not working tho.. :\ How do I name the function with a random name? maybe that would fix the problem — Chun, Mar 01 '15 at 22:57

score 0 · Accepted Answer · edited May 23 '17 at 10:09

Thanks a lot for your help guys, I've found this workaround solution here: [src]

var visible = true;
setInterval(
function()
{
    if(visible)
        if($('#element').not(':hidden'))
        {
            visible = false;
            "use strict";
            $('.chat-messages').perfectScrollbar({suppressScrollX: true});
        }
    else
        if($('#element').is(':hidden'))
        {
            visible = true;
            // do something
        }
}, 1000);

$(window).load(function() not always working

3 Answers3