<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Making text etc clickable]]></title><description><![CDATA[<p dir="auto">Hi,</p>
<p dir="auto">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.</p>
<p dir="auto">Whats the most basic way to make a block of text clickable within the MM2 borders?<br />
I guess it really doesn’t work as a normal browser since I can’t even click on <a> links?</a></p>
<p dir="auto">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.</p>
<p dir="auto">and in the long run I will probably need to modify more modules to be clickable, but first things first, learning basics.</p>
]]></description><link>https://forum.magicmirror.builders/topic/1073/making-text-etc-clickable</link><generator>RSS for Node</generator><lastBuildDate>Sat, 06 Jun 2026 02:24:13 GMT</lastBuildDate><atom:link href="https://forum.magicmirror.builders/topic/1073.rss" rel="self" type="application/rss+xml"/><pubDate>Sun, 27 Nov 2016 15:46:40 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to Making text etc clickable on Tue, 20 Dec 2016 23:43:25 GMT]]></title><description><![CDATA[<p dir="auto">Next up, adding a timer to the description that doesn’t mess with the news items that is next in line,<br />
Tried one version, but it couldn’t handle multiple start/stop clicks.</p>
]]></description><link>https://forum.magicmirror.builders/post/9630</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/9630</guid><dc:creator><![CDATA[broberg]]></dc:creator><pubDate>Tue, 20 Dec 2016 23:43:25 GMT</pubDate></item><item><title><![CDATA[Reply to Making text etc clickable on Tue, 20 Dec 2016 23:41:10 GMT]]></title><description><![CDATA[<p dir="auto">Changes to the scheduleUpdateInterval</p>
<pre><code>	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);
	},

</code></pre>
<p dir="auto">And some functions to start and stop the interval</p>
<pre><code>	intpause: function(){
		clearInterval(this.interval);

	},

	intresume: function(){
		this.scheduleUpdateInterval();
	},

</code></pre>
]]></description><link>https://forum.magicmirror.builders/post/9629</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/9629</guid><dc:creator><![CDATA[broberg]]></dc:creator><pubDate>Tue, 20 Dec 2016 23:41:10 GMT</pubDate></item><item><title><![CDATA[Reply to Making text etc clickable on Tue, 20 Dec 2016 23:29:18 GMT]]></title><description><![CDATA[<p dir="auto">so after strawberry-pi explained the last snippet of code I got it to work,<br />
Big thanks for the patience!</p>
<p dir="auto">These are the changes I’ve made so far, please consider that the code is probably not optimal, at all.</p>
<pre><code> 			var title = document.createElement("div");
			title.className = "bright medium regular fed";
			title.innerHTML = this.newsItems[this.activeItem].title;
			title.addEventListener("click", () =&gt; 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", () =&gt; 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";
				
			};</code></pre>
]]></description><link>https://forum.magicmirror.builders/post/9628</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/9628</guid><dc:creator><![CDATA[broberg]]></dc:creator><pubDate>Tue, 20 Dec 2016 23:29:18 GMT</pubDate></item><item><title><![CDATA[Reply to Making text etc clickable on Tue, 20 Dec 2016 22:06:48 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/strawberry-3.141" aria-label="Profile: strawberry-3.141">@<bdi>strawberry-3.141</bdi></a></p>
<p dir="auto">using that code snippet in the pause function just adds a new item with the updateInterval time,</p>
<p dir="auto">So I can change the interval on the next loaded news item, but not the current :(</p>
]]></description><link>https://forum.magicmirror.builders/post/9623</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/9623</guid><dc:creator><![CDATA[broberg]]></dc:creator><pubDate>Tue, 20 Dec 2016 22:06:48 GMT</pubDate></item><item><title><![CDATA[Reply to Making text etc clickable on Tue, 20 Dec 2016 21:56:52 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/broberg" aria-label="Profile: broberg">@<bdi>broberg</bdi></a> what about this?</p>
<pre><code>this.interval = setInterval(function() {
    self.activeItem++;
    self.updateDom(self.config.animationSpeed);
  }, this.config.updateInterval);
</code></pre>
]]></description><link>https://forum.magicmirror.builders/post/9622</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/9622</guid><dc:creator><![CDATA[strawberry 3.141]]></dc:creator><pubDate>Tue, 20 Dec 2016 21:56:52 GMT</pubDate></item><item><title><![CDATA[Reply to Making text etc clickable on Tue, 20 Dec 2016 21:55:09 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/strawberry-3.141" aria-label="Profile: strawberry-3.141">@<bdi>strawberry-3.141</bdi></a></p>
<p dir="auto">No go on that either, <code>this.interval</code> is undefined it says.<br />
I have to research this some more, it’s giving me a headache.</p>
<p dir="auto">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?</p>
<p dir="auto">this.scheduleUpdateInterval(); works, I think. (I get more updates on top of each other if I click several times)</p>
]]></description><link>https://forum.magicmirror.builders/post/9621</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/9621</guid><dc:creator><![CDATA[broberg]]></dc:creator><pubDate>Tue, 20 Dec 2016 21:55:09 GMT</pubDate></item><item><title><![CDATA[Reply to Making text etc clickable on Tue, 20 Dec 2016 19:57:56 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/broberg" aria-label="Profile: broberg">@<bdi>broberg</bdi></a></p>
<pre><code>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();
},
</code></pre>
]]></description><link>https://forum.magicmirror.builders/post/9615</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/9615</guid><dc:creator><![CDATA[strawberry 3.141]]></dc:creator><pubDate>Tue, 20 Dec 2016 19:57:56 GMT</pubDate></item><item><title><![CDATA[Reply to Making text etc clickable on Tue, 20 Dec 2016 19:37:46 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/strawberry-3.141" aria-label="Profile: strawberry-3.141">@<bdi>strawberry-3.141</bdi></a> Sorry to bother you with the poking stick, but, I’m having no luck in getting it to work.</p>
<p dir="auto">this is the code that updates the newsfeed item</p>
<pre><code>	scheduleUpdateInterval: function() {
		var self = this;

		self.updateDom(self.config.animationSpeed);

		setInterval(function() {
			self.activeItem++;
			self.updateDom(self.config.animationSpeed);
		}, this.config.updateInterval);
	},
</code></pre>
<p dir="auto">This also loads the first feed item when the page loads for the first time.</p>
<p dir="auto">how should I implement this in another function to pause/reset the scheduleUpdateInterval function?</p>
]]></description><link>https://forum.magicmirror.builders/post/9614</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/9614</guid><dc:creator><![CDATA[broberg]]></dc:creator><pubDate>Tue, 20 Dec 2016 19:37:46 GMT</pubDate></item><item><title><![CDATA[Reply to Making text etc clickable on Tue, 29 Nov 2016 22:14:06 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/broberg" aria-label="Profile: broberg">@<bdi>broberg</bdi></a>  when you save the interval into a variabke you can stop/clear the interval</p>
<pre><code>this.interval = setInterval(...);

clearInterval(this.interval);
</code></pre>
]]></description><link>https://forum.magicmirror.builders/post/8693</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/8693</guid><dc:creator><![CDATA[strawberry 3.141]]></dc:creator><pubDate>Tue, 29 Nov 2016 22:14:06 GMT</pubDate></item><item><title><![CDATA[Reply to Making text etc clickable on Tue, 29 Nov 2016 17:38:02 GMT]]></title><description><![CDATA[<p dir="auto">Any suggestions on how I pause the updateInterval ?</p>
<p dir="auto">I’ve tried just to change the var to another value when clicked, but it doesn’t change the current item interval.</p>
]]></description><link>https://forum.magicmirror.builders/post/8682</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/8682</guid><dc:creator><![CDATA[broberg]]></dc:creator><pubDate>Tue, 29 Nov 2016 17:38:02 GMT</pubDate></item><item><title><![CDATA[Reply to Making text etc clickable on Mon, 28 Nov 2016 23:11:31 GMT]]></title><description><![CDATA[<p dir="auto">I can report yes, it was a z-index issue.<br />
setting the region.fullscreen to z-index -1 made everything clickable.</p>
<p dir="auto">But I’ll probably just change the newsfeed to z-index 1<br />
I used a eventlistener to register the click and change the contents of this.innerhtml from title to description.</p>
<p dir="auto">Next up, make it draw a new div and pause the timer for the headlines.</p>
]]></description><link>https://forum.magicmirror.builders/post/8652</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/8652</guid><dc:creator><![CDATA[broberg]]></dc:creator><pubDate>Mon, 28 Nov 2016 23:11:31 GMT</pubDate></item><item><title><![CDATA[Reply to Making text etc clickable on Sun, 27 Nov 2016 22:31:29 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/bhepler" aria-label="Profile: bhepler">@<bdi>bhepler</bdi></a> said in <a href="/post/8600">Making text etc clickable</a>:</p>
<blockquote>
<p dir="auto">If you look at it, it’s already creating a <code>&lt;DIV&gt;</code> element and changing the innerHTML to the value of the title from the newsfeed (line 149) <code>title.innerHTML = this.newsItems[this.activeItem].title;</code> It should be relatively easy to modify this area of the code to add the anchor tag &amp; url.</p>
</blockquote>
<p dir="auto">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</p>
]]></description><link>https://forum.magicmirror.builders/post/8603</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/8603</guid><dc:creator><![CDATA[broberg]]></dc:creator><pubDate>Sun, 27 Nov 2016 22:31:29 GMT</pubDate></item><item><title><![CDATA[Reply to Making text etc clickable on Sun, 27 Nov 2016 21:48:33 GMT]]></title><description><![CDATA[<p dir="auto">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 <code>newsfeed.js</code> file, specifically in the <code>getDom: function() {...}</code> portion of the code.</p>
<p dir="auto">If you look at it, it’s already creating a <code>&lt;DIV&gt;</code> element and changing the innerHTML to the value of the title from the newsfeed (line 149) <code>title.innerHTML = this.newsItems[this.activeItem].title;</code> It should be relatively easy to modify this area of the code to add the anchor tag &amp; url.</p>
]]></description><link>https://forum.magicmirror.builders/post/8600</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/8600</guid><dc:creator><![CDATA[bhepler]]></dc:creator><pubDate>Sun, 27 Nov 2016 21:48:33 GMT</pubDate></item></channel></rss>