Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

JavaScript Help with setting up code folding in NetBeans 8.1

  1. Sep 30, 2016 #1
    Hi guys,

    I understand there is a way to "fold" the function lines of my HTML/Javascript code into single lines "function" blocks like I can do in notepad++.

    I tried setting up code-folding in Netbeans using Tools/Options/Editor/Folding and enabled code folding and restarted Netbeans but it's not working in my code. I'm also familiar with keyboard short cuts:


    and in that reference it states that Ctrl + "-" should fold a block of code. However, that's not working too.

    So I was wondering if I'm not doing something correctly and if someone could help me with this?

  2. jcsd
  3. Sep 30, 2016 #2


    User Avatar
    Science Advisor
    Gold Member

    There were some known issues in the past with Javascript, HTML and PHP code. One of them was that when adding code to a file, folding was not working and you had to close and reopen the file in order to work. As I use mostly Eclipse in the last five years, I don't know the status of bug fixing for Netbeans, but it is good to check it, if you are regularly using it. Now, if you have set up and enabled code folding properly - by the way Ctrl + minus performs the action of collapse fold, take a look at this https://ui.netbeans.org/docs/ui/code_folding/cf_uispec.html.
  4. Sep 30, 2016 #3
    Hi Quantum,

    My code has grown to 1500 lines of pure HTML5/ WebGL Javascript code containing about 30 functions. But that link you posted shows pure Java classes. My code however is just a bunch of Javascript functions. Would you know if Netbeans can still collapse just functions? Here is for example three functions in my code and that is basically what I have in the entire file just more functions. Would you know of a better way to code a WebGL application other than THREE.js as I'd like to keep it native WegGL for now.

    Code (Javascript):
     function handleMouseDown(event) {
            mouseDown = true;
            lastMouseX = event.clientX;
            lastMouseY = event.clientY;

        function handleMouseUp(event) {
            mouseDown = false;

        function handleMouseMove(event) {
            if (!mouseDown) {
            var newX = event.clientX;
            var newY = event.clientY;

            var deltaX = newX - lastMouseX;
            var newRotationMatrix = mat4.create();
            mat4.rotate(newRotationMatrix, degToRad(deltaX / 2), [0, 1, 0]);

            var deltaY = newY - lastMouseY;
            mat4.rotate(newRotationMatrix, degToRad(deltaY / 2), [1, 0, 0]);

            mat4.multiply(newRotationMatrix, moonRotationMatrix, moonRotationMatrix);

            lastMouseX = newX;
            lastMouseY = newY;
  5. Sep 30, 2016 #4


    User Avatar
    Science Advisor
    Gold Member

    I pointed you to that link to see the general specs of folding.

    I saw that your OP was about JavaScript, so that's why I told you about the known issues. My point is that if everything for code folding is set up and working correctly and you can't make it work in your functions, according to the usage instructions, then it could be a bug.
    Also, take a look here about SurroundWithCodeFolding: http://wiki.netbeans.org/SurroundWithCodeFolding
  6. Sep 30, 2016 #5
    Ok. I tried custom code-folding blocks in my code and then restarted Netbeans. I do not get the plus and minus boxes though in the left margin to collapse and expand the block though. I do get a large bracket showing the code block though. I'll keep working on it.
  7. Sep 30, 2016 #6
    Ok, this is what I did: I created a brand-new HTML5/Javascript project then inserted a function into it and then followed the steps "SurroundWithCodeFolding" described in the link above. Then I highlight the text of the function and press the lightbulb and it give me a list of options. I choose "surround with code folding" and it surrounds the code with the custom template but then does not give the plus and minus code blocks for the function. This is the entire file I'm using with the custom code block inserted:

    Code (Text):
    <!DOCTYPE html>
    To change this license header, choose License Headers in Project Properties.
    To change this template file, choose Tools | Templates
    and open the template in the editor.
            <title>TODO supply a title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <script type="text/javascript">
    // <editor-fold defaultstate="collapsed" desc="Code Folding">
    function initGL(canvas) {
            try {
                gl = canvas.getContext("experimental-webgl");
                gl.viewportWidth = canvas.width;
                gl.viewportHeight = canvas.height;
             } catch (e) {
            if (!gl) {
                alert("Could not initialise WebGL, sorry :-(");
             return gl;
    // </editor-fold>


            <div>TODO write content</div>
  8. Sep 30, 2016 #7


    User Avatar
    Science Advisor
    Gold Member

    Another question: Have you tried Ctrl + Shift + - (minus sign) in the original folding fashion to fold all of the code in any file?
  9. Sep 30, 2016 #8
    When I first created the new project, Netbeans included folding for the HTML code. And then I added the function above and tried to set up custom folding but could not get the plus and minus signs in the folding tab to show up around the function. However, when I closed the project and Netbeans and then opened the project, the folding tabs for the HTML were removed and pressing Ctrl+Shift+(minus sign) does nothing.
  10. Sep 30, 2016 #9


    User Avatar
    Science Advisor
    Gold Member

    Custom code folding is an option to override normal folding. As I saw, it has given too some issues with javascript code - passing the configuration code as comments, so if it does not work, delete the configurations you did in Tools> Options> Editor> Code templates for custom folding, so Netbeans will return to its normal state after closing and restarting. Then, try Ctrl + Shift + - (minus sign) when you open your file. As is stated in the official Netbeans documentation, this folds any kind of file.
  11. Sep 30, 2016 #10
    Ok this is what I got: I have been creating the projects in Netbeans as a HTML/JS project. But there is another option, "NodeJSWebApplication" and when I create this type of project, I found folding seemed to work without adding any special template: Just block-out a few blank lines in the new project, get the light bulb icon at the left, and choose "surround with editor fold default state" and then just copy all my functions in this block. Seems to be working and I think maybe will be a better interface for me to work with my functions as my code is getting larger.
  12. Oct 1, 2016 #11


    User Avatar
    Science Advisor
    Gold Member

    As I said in #2 I use mostly Eclipse in the last five years, but I have briefly overview the UI's of Netbeans 8.1 - it is quite good by the way. It is very often the case to do our tweaks in any IDE, in order to do the job. If it works well then it's fine.
  13. Oct 1, 2016 #12
    Hi Quantum,

    It's still not working the way I wish it to work: If I leave functions collapsed and close then reopen Netbeans then all of them are shown open again and then the collapse and expand don't seem to work as expected as well.

    I checked wikipedia for eclipse. Is eclipse a good IDE for writing HTML5/Javascript code and does the editor allow function collapsing?
  14. Oct 1, 2016 #13


    User Avatar
    Science Advisor
    Gold Member

    I use Eclipse for Java code and Android development - now I use Android Studio too. For web development, after a lot of years in Dreamweaver, the last 7 -8 years I mostly use WebStorm and Aptana Studio 3. But I have worked out some web projects in Eclipse (up to Kepler edition) and yes code folding is working. It is generally an excellent IDE, but the same goes for Netbeans, as it also has an extremely powerful community and development behind it. It is really a matter to do the job smoothly with whatever this entails for each developer.
    Last edited: Oct 1, 2016
  15. Oct 1, 2016 #14
    Thanks. I like Netbeans and believe I'm just not setting up things right for the folding to work properly. basically I just want for example to start with all the functions folded so that I have a for example just a 2 page list of them, then I can pick and choose which ones to work on, open them, leave some closed, some open and then when I close Netbeans and then reopen it, my code is left just the way I left it. Surely that is doable just don't quite have it yet. :)
Share this great discussion with others via Reddit, Google+, Twitter, or Facebook

Have something to add?
Draft saved Draft deleted