• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

MM-Navbar - Navigation Bar for Touchscreens to hide/show modules

Scheduled Pinned Locked Moved System
47 Posts 11 Posters 41.0k Views 15 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • T Offline
    tidus5 @chrisyy
    last edited by Dec 6, 2016, 2:44 PM

    @chrisyy yes of course :-)

    1 Reply Last reply Reply Quote 0
    • C Offline
      cowboysdude Module Developer @tidus5
      last edited by Dec 6, 2016, 9:58 PM

      @tidus5 VERY excellent!! Thank you… I can use that :)

      1 Reply Last reply Reply Quote 0
      • C Offline
        chrisyy
        last edited by Dec 7, 2016, 8:17 PM

        i added the code to hide all modules on startup :)

        T 1 Reply Last reply Dec 8, 2016, 7:08 PM Reply Quote 0
        • T Offline
          tidus5 @chrisyy
          last edited by Dec 8, 2016, 7:08 PM

          @chrisyy

          pretty cool

          im using your code

          MM.getModules().exceptModule(this).exceptWithClass(‘clock’).enumerate(function(module){
          module.hide(1000, function(){
          });

          to create an icon to hide or show all
          for now i can only show all - cant hide all after.

          did you plan to work on that ?

          1 Reply Last reply Reply Quote 0
          • C Offline
            chrisyy
            last edited by Dec 9, 2016, 12:14 PM

            Its a possibility.
            Think u are missing a toggle there, i can build u one later and update it.

            1 Reply Last reply Reply Quote 0
            • C Offline
              chrisyy
              last edited by Dec 10, 2016, 3:34 PM

              @tidus5
              Can u try this?

              var hideallmodules = true;
              var hideallmodulesbutton = document.createElement(“span”);
              hideallmodulesbutton.className = “wi wi-day-rain-mix navbar”; // change icon here
              wrapper.appendChild(hideallmodulesbutton);

              $(hideallmodulesbutton).on(“click”, function(){
              if(hideallmodules){
              MM.getModules().exceptModule(this).exceptWithClass(‘clock’).enumerate(function(module){
              module.show(1000, function(){
              });
              });
              hideallmodules = false;
              }else{
              MM.getModules().exceptModule(this).exceptWithClass(‘clock’).enumerate(function(module){
              module.hide(1000, function(){
              });
              });
              hideallmodules = true;
              }
              });

              this is a bit messy, but should work as the rest of the buttons. will publish it to git, when i got time.

              T 1 Reply Last reply Dec 12, 2016, 11:42 AM Reply Quote 0
              • T Offline
                tidus5 @chrisyy
                last edited by Dec 12, 2016, 11:42 AM

                @chrisyy Hello

                amazing!!! thank you

                just small error added exceptWithClass(‘MM-navbar’) (exceptmodule(this)) didnt work (the nav itself was hidden)
                thank you so much

                	$(hideallmodulesbutton).on("click", function(){
                		if(hideallmodules){
                			MM.getModules().exceptWithClass('MM-navbar').exceptWithClass('clock').enumerate(function(module){
                			module.show(1000, function(){
                					});
                				});
                			hideallmodules = false;
                		}else{
                			MM.getModules().exceptWithClass('MM-navbar').exceptWithClass('clock').enumerate(function(module){
                			module.hide(1000, function(){
                					});
                				});
                			hideallmodules = true;
                			}
                		});
                
                1 Reply Last reply Reply Quote 0
                • T Offline
                  tidus5
                  last edited by Dec 13, 2016, 10:05 PM

                  @chrisyy yop everything is working perfectly

                  i added a timing of 1000 on every hide/show
                  without i had a little ugly mouvement sometimes :-)
                  again thanks you !!!

                  1 Reply Last reply Reply Quote 0
                  • T Offline
                    TheHyp3
                    last edited by Dec 29, 2016, 9:19 PM

                    What a great module! Is there a way to get the icons centerd? I´m using a 7" touchscreen display and it looks like the picture below:

                    0_1483046096077_navbar.JPG

                    If I would add more icons they go in a line below.

                    T 1 Reply Last reply Dec 29, 2016, 9:49 PM Reply Quote 0
                    • T Offline
                      tidus5 @TheHyp3
                      last edited by tidus5 Dec 29, 2016, 9:50 PM Dec 29, 2016, 9:49 PM

                      @TheHyp3

                      Hello
                      in navbar.css you can play with

                      .center{
                      position: fixed;
                      left: 45%;
                      }

                      • personnaly i removed this class
                      S 1 Reply Last reply Dec 29, 2016, 10:09 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 2 / 5
                      • First post
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy