• 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, 7:37 PM

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

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

      @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

      B 1 Reply Last reply Dec 20, 2016, 9:55 PM Reply Quote 0
      • 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
                    11/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