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

Making text etc clickable

Scheduled Pinned Locked Moved Development
14 Posts 3 Posters 9.8k 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.
  • B Offline
    broberg Project Sponsor @strawberry 3.141
    last edited by Dec 20, 2016, 9:55 PM

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

    S 1 Reply Last reply Dec 20, 2016, 9:56 PM Reply Quote 0
    • S Offline
      strawberry 3.141 Project Sponsor Module Developer @broberg
      last edited by Dec 20, 2016, 9:56 PM

      @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

      B 1 Reply Last reply Dec 20, 2016, 10:06 PM Reply Quote 1
      • B Offline
        broberg Project Sponsor @strawberry 3.141
        last edited by Dec 20, 2016, 10:06 PM

        @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
        • B Offline
          broberg Project Sponsor
          last edited by broberg Dec 20, 2016, 11:29 PM Dec 20, 2016, 11:25 PM

          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
          • B Offline
            broberg Project Sponsor
            last edited by broberg Dec 20, 2016, 11:41 PM Dec 20, 2016, 11:27 PM

            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
            • B Offline
              broberg Project Sponsor
              last edited by Dec 20, 2016, 11:43 PM

              Next up, adding a timer to the description that doesn’t mess with the news items that is next in line,
              Tried one version, but it couldn’t handle multiple start/stop clicks.

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