Making text etc clickable

[broberg]

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.

[broberg]

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.

[strawberry 3.141]

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

this.interval = setInterval(...);

clearInterval(this.interval);

[broberg]

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

[strawberry 3.141]

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

[broberg]

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

[strawberry 3.141]

@broberg what about this?

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

[broberg]

@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 :(

[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";
				
			};

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

[broberg]

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.