Plugin crashes when js files are called from html's head tag instead of body

noum commented 7 years ago

All in the title. Although, I only tested the jQuery version, not the simple JS version

This doesn't work and return the following error: Uncaught TypeError: Cannot read property 'style' of null jQueryColorPicker.min.js:3:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="jqColor.css" media="all" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="jQueryColorPicker.min.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body>
    </body>
</html>

main.js is where I do cp_picker = new ColorPicker({...}) on DOM ready.

On the other hand, this works great:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="jqColor.css" media="all" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    </head>
    <body>
        <script type="text/javascript" src="jQueryColorPicker.min.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

Where could be the problem please ?

PitPik commented 7 years ago

Hi @nomentsoa-andrianjatovo ,

well, this seems to be an error in main.js. You describe that you call the picker on DOM-ready but I think that there is something going wrong: Maybe wrap your code in main.js in a $(function() { ... }); wrapper and try again.

Let me know if it works. Cheers

noum commented 7 years ago

@PitPik Already contained it in a (function($) { ... })(jQuery);. But since putting js files before </body> is good for me too, then it's no longer an issue, also I just wanted to be sure it doesn't come from the plugin. So I guess we can close this.

Thanks BTW, sorry for the trouble.

PitPik / colorPicker

Plugin crashes when js files are called from html's head tag instead of body #50