• 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.

Module Position

Scheduled Pinned Locked Moved Development
34 Posts 5 Posters 15.5k Views 4 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.
  • S Offline
    strawberry 3.141 Project Sponsor Module Developer @maxbachmann
    last edited by May 17, 2018, 5:38 AM

    @maxbachmann

    // get the module to move with it's identifier
    var clock = document.getElementById('module_0_clock');
    
    // append it to the region you like
    document.querySelector('div.region.top.left div.container').appendChild(clock);    
    

    it will work only if you already have a module in that position, otherwise you need to ovverride the style to display block

    document.querySelector('div.region.top.left div.container').style.display = 'block';
    

    that’s it

    Please create a github issue if you need help, so I can keep track

    1 Reply Last reply Reply Quote 1
    • M Offline
      maxbachmann
      last edited by maxbachmann May 17, 2018, 8:43 AM May 17, 2018, 8:41 AM

      @strawberry-3-141 So I always have to know wether there is already a element in that region? Is there a way to check all modules and return the ID’s of the elements that are in this position?

      J 1 Reply Last reply May 17, 2018, 9:30 PM Reply Quote 0
      • M Offline
        maxbachmann
        last edited by May 17, 2018, 5:25 PM

        @strawberry-3-141 and where to add that? is that already the “end code”? I tried in the domupdate function and it did not work, so I guess that was wrong

        1 Reply Last reply Reply Quote 0
        • S Offline
          strawberry 3.141 Project Sponsor Module Developer
          last edited by May 17, 2018, 6:12 PM

          it is safe to always run the code so you don’t need to check if there is a module necessarily.

          it is not related to the get dom function, you can put it where ever you want except node_helper (because its not executed in the browser)

          can you post the code of your module or upload it to github, then i can have a look

          Please create a github issue if you need help, so I can keep track

          1 Reply Last reply Reply Quote 0
          • M Offline
            maxbachmann
            last edited by May 17, 2018, 6:14 PM

            In general I want to add it to all kind of modules so I can change the position when sending them a socketmessage to do so

            S 1 Reply Last reply May 17, 2018, 6:22 PM Reply Quote 0
            • S Offline
              strawberry 3.141 Project Sponsor Module Developer @maxbachmann
              last edited by May 17, 2018, 6:22 PM

              @maxbachmann i wouldn’t place that code in other modules, you can perform that from your module for every module, this isn’t magicmirror related. its pure dom manipulation.

              Please create a github issue if you need help, so I can keep track

              1 Reply Last reply Reply Quote 0
              • M Offline
                maxbachmann
                last edited by May 17, 2018, 6:26 PM

                Ah did not know that ;) well yes then it’s definetly in my program. All my program does so far is subscribe to a mqtt broker, load some data and according to this show/hide modules. Now I want to add the possibility to move modules to different positions.
                Can send the current code later

                M 1 Reply Last reply May 17, 2018, 6:32 PM Reply Quote 0
                • M Offline
                  maxbachmann @maxbachmann
                  last edited by May 17, 2018, 6:32 PM

                  @strawberry-3-141 so in general use all 3 commands and then it works in both senarios? where can I find the right ID for each module?

                  S 1 Reply Last reply May 17, 2018, 6:46 PM Reply Quote 0
                  • S Offline
                    strawberry 3.141 Project Sponsor Module Developer @maxbachmann
                    last edited by May 17, 2018, 6:46 PM

                    @maxbachmann you can get all modules https://github.com/MichMich/MagicMirror/tree/master/modules#module-selection then iterate over them and when you find the module execute the cmds

                    const moduleToMove = 'clock';
                    const targetRegion = 'top.left';
                    
                    MM.getModules().enumerate((module) => {
                        if (module.name === moduleToMove) {
                            const instance = document.getElementById(module.identifier);
                            const region = document.querySelector(`div.region.${targetRegion} div.container`);
                            region.appendChild(instance);
                            region.style.display = 'block';
                        }
                    });
                    

                    something similar to this

                    Please create a github issue if you need help, so I can keep track

                    1 Reply Last reply Reply Quote 0
                    • M Offline
                      maxbachmann
                      last edited by May 17, 2018, 9:16 PM

                      @strawberry-3-141 ty that works.

                      Added the possibility

                      region.insertBefore(instance, region.childNodes[0])
                      

                      so I can prepend and append the module

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 2 / 4
                      2 / 4
                      • First post
                        13/34
                        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