Making text etc clickable

broberg

Hi,

Since I’ve only graced the surface of Javascripting and it was at least 7 years since I last actively worked with html/css and php I find it a little bit frustrating trying to make something clickable.

Whats the most basic way to make a block of text clickable within the MM2 borders?
I guess it really doesn’t work as a normal browser since I can’t even click on links?

My aim is to modify the Newsfeed module to display the description when the title is clicked and then hide the description again when you click on the description.

and in the long run I will probably need to modify more modules to be clickable, but first things first, learning basics.

bhepler

You’ll probably want to create a customized version of the Newsfeed module. The part of the code that actually puts the text on the screen is in the newsfeed.js file, specifically in the getDom: function() {...} portion of the code.

If you look at it, it’s already creating a <div> element and changing the innerHTML to the value of the title from the newsfeed (line 149) title.innerHTML = this.newsItems[this.activeItem].title; It should be relatively easy to modify this area of the code to add the anchor tag & url.

broberg

@bhepler said in Making text etc clickable:

If you look at it, it’s already creating a <div> element and changing the innerHTML to the value of the title from the newsfeed (line 149) title.innerHTML = this.newsItems[this.activeItem].title; It should be relatively easy to modify this area of the code to add the anchor tag & url.

I’ve found the part where it creates the actual content, I’ve tried adding onclick to text, to buttons, tried making functions to act on the onclick event etc. maybe it’s a z-index issue and something is in the way. because it doesn’t react at all to any clicks. I tried the anchor tag just to see if it would react, but no. Something is blocking the “clickability” of the MM module

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