• 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.2k 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, 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