Making text etc clickable



  • Module Developer

    @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


  • Module Developer

    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.


  • Module Developer

    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.



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

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

  • Module Developer

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



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

  • Module Developer

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



  • @broberg what about this?

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

  • Log in to reply
     

    Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.