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.

    Making text etc clickable

    Scheduled Pinned Locked Moved Development
    14 Posts 3 Posters 10.2k 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.
    • brobergB Offline
      broberg Project Sponsor
      last edited by

      I can report yes, it was a z-index issue.
      setting the region.fullscreen to z-index -1 made everything clickable.

      But I’ll probably just change the newsfeed to z-index 1
      I used a eventlistener to register the click and change the contents of this.innerhtml from title to description.

      Next up, make it draw a new div and pause the timer for the headlines.

      1 Reply Last reply Reply Quote 0
      • brobergB Offline
        broberg Project Sponsor
        last edited by

        Any suggestions on how I pause the updateInterval ?

        I’ve tried just to change the var to another value when clicked, but it doesn’t change the current item interval.

        strawberry 3.141S 1 Reply Last reply Reply Quote 0
        • strawberry 3.141S Offline
          strawberry 3.141 Project Sponsor Module Developer @broberg
          last edited by

          @broberg when you save the interval into a variabke you can stop/clear the interval

          this.interval = setInterval(...);
          
          clearInterval(this.interval);
          

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

          brobergB 1 Reply Last reply Reply Quote 0
          • brobergB Offline
            broberg Project Sponsor @strawberry 3.141
            last edited by

            @strawberry-3.141 Sorry to bother you with the poking stick, but, I’m having no luck in getting it to work.

            this is the code that updates the newsfeed item

            	scheduleUpdateInterval: function() {
            		var self = this;
            
            		self.updateDom(self.config.animationSpeed);
            
            		setInterval(function() {
            			self.activeItem++;
            			self.updateDom(self.config.animationSpeed);
            		}, this.config.updateInterval);
            	},
            

            This also loads the first feed item when the page loads for the first time.

            how should I implement this in another function to pause/reset the scheduleUpdateInterval function?

            strawberry 3.141S 1 Reply Last reply Reply Quote 0
            • strawberry 3.141S Offline
              strawberry 3.141 Project Sponsor Module Developer @broberg
              last edited by

              @broberg

              scheduleUpdateInterval: function() {
                var self = this;
              
                self.updateDom(self.config.animationSpeed);
              
                self.interval = setInterval(function() {
                  self.activeItem++;
                  self.updateDom(self.config.animationSpeed);
                }, this.config.updateInterval);
              },
              
              pause: function(){
                clearInterval(this.interval);
              },
              
              resume: function(){
                this.scheduleUpdateInterval();
              },
              

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

              brobergB 1 Reply Last reply Reply Quote 0
              • brobergB Offline
                broberg Project Sponsor @strawberry 3.141
                last edited by

                @strawberry-3.141

                No go on that either, this.interval is undefined it says.
                I have to research this some more, it’s giving me a headache.

                Could it have something to do with the fact that the interval is set in the scheduleUpdateInterval function and it can’t be reached from another function outside that?

                this.scheduleUpdateInterval(); works, I think. (I get more updates on top of each other if I click several times)

                strawberry 3.141S 1 Reply Last reply Reply Quote 0
                • strawberry 3.141S Offline
                  strawberry 3.141 Project Sponsor Module Developer @broberg
                  last edited by

                  @broberg what about this?

                  this.interval = setInterval(function() {
                      self.activeItem++;
                      self.updateDom(self.config.animationSpeed);
                    }, this.config.updateInterval);
                  

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

                  brobergB 1 Reply Last reply Reply Quote 1
                  • brobergB Offline
                    broberg Project Sponsor @strawberry 3.141
                    last edited by

                    @strawberry-3.141

                    using that code snippet in the pause function just adds a new item with the updateInterval time,

                    So I can change the interval on the next loaded news item, but not the current :(

                    1 Reply Last reply Reply Quote 0
                    • brobergB Offline
                      broberg Project Sponsor
                      last edited by broberg

                      so after strawberry-pi explained the last snippet of code I got it to work,
                      Big thanks for the patience!

                      These are the changes I’ve made so far, please consider that the code is probably not optimal, at all.

                       			var title = document.createElement("div");
                      			title.className = "bright medium regular fed";
                      			title.innerHTML = this.newsItems[this.activeItem].title;
                      			title.addEventListener("click", () => showdesc(this)); //Show description on click
                      			wrapper.appendChild(title);
                      			
                      
                      			//below is the function to show description and hide title
                      			function showdesc(thisdesc) {
                      				
                      				thisdesc.intpause();	//pause the interval			
                      				title.style.display="none";
                      				description = document.createElement("div");
                      				description.className = "medium light infoCenter";
                      				description.innerHTML = thisdesc.newsItems[thisdesc.activeItem].description;
                      				description.addEventListener("click", () => hidedesc(thisdesc));  //Hide description on click 
                      				wrapper.appendChild(description);
                      			};
                      
                      			//and to close the description and return to title
                      			function hidedesc(thisdesc) {
                      				thisdesc.intresume();	//resume the interval
                      				description.style.display="none";
                      				title.style.display="block";
                      				
                      			};
                      1 Reply Last reply Reply Quote 0
                      • brobergB Offline
                        broberg Project Sponsor
                        last edited by broberg

                        Changes to the scheduleUpdateInterval

                        	scheduleUpdateInterval: function() {
                        		var self = this;
                        
                        		self.updateDom(self.config.animationSpeed);
                        
                        		// setInterval placed within a variable so you can clear it
                        		this.interval = setInterval(function() {
                        			self.activeItem++;
                        			self.updateDom(self.config.animationSpeed);
                        		}, this.config.updateInterval);
                        	},
                        
                        

                        And some functions to start and stop the interval

                        	intpause: function(){
                        		clearInterval(this.interval);
                        
                        	},
                        
                        	intresume: function(){
                        		this.scheduleUpdateInterval();
                        	},
                        
                        
                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • 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