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 9.6k 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

      Hi,

      Since I’ve only graced the surface of Javascripting and it was at least 7 years since I last actively worked with html/css and php I find it a little bit frustrating trying to make something clickable.

      Whats the most basic way to make a block of text clickable within the MM2 borders?
      I guess it really doesn’t work as a normal browser since I can’t even click on links?

      My aim is to modify the Newsfeed module to display the description when the title is clicked and then hide the description again when you click on the description.

      and in the long run I will probably need to modify more modules to be clickable, but first things first, learning basics.

      1 Reply Last reply Reply Quote 0
      • bheplerB Offline
        bhepler Module Developer
        last edited by

        You’ll probably want to create a customized version of the Newsfeed module. The part of the code that actually puts the text on the screen is in the newsfeed.js file, specifically in the getDom: function() {...} portion of the code.

        If you look at it, it’s already creating a <DIV> element and changing the innerHTML to the value of the title from the newsfeed (line 149) title.innerHTML = this.newsItems[this.activeItem].title; It should be relatively easy to modify this area of the code to add the anchor tag & url.

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

          @bhepler said in Making text etc clickable:

          If you look at it, it’s already creating a <DIV> element and changing the innerHTML to the value of the title from the newsfeed (line 149) title.innerHTML = this.newsItems[this.activeItem].title; It should be relatively easy to modify this area of the code to add the anchor tag & url.

          I’ve found the part where it creates the actual content, I’ve tried adding onclick to text, to buttons, tried making functions to act on the onclick event etc. maybe it’s a z-index issue and something is in the way. because it doesn’t react at all to any clicks. I tried the anchor tag just to see if it would react, but no. Something is blocking the “clickability” of the MM module

          1 Reply Last reply Reply Quote 0
          • 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
                        • 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