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.
    • brobergB Offline
      broberg Project Sponsor @strawberry 3.141
      last edited by

      @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
      • brobergB Offline
        broberg Project Sponsor
        last edited by broberg

        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
        • brobergB Offline
          broberg Project Sponsor
          last edited by broberg

          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
          • brobergB Offline
            broberg Project Sponsor
            last edited by

            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
            • First post
              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