MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

Making text etc clickable


  • Project Sponsor

    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.


  • Project Sponsor

    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.


  • Project Sponsor

    @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


  • Project Sponsor

    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.


  • Project Sponsor

    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.


  • Project Sponsor Module Developer

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

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

  • Project Sponsor

    @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?


  • Project Sponsor Module Developer

    @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();
    },
    

  • Project Sponsor

    @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)


  • Project Sponsor Module Developer

    @broberg what about this?

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

Log in to reply