Differences

This shows you the differences between two versions of the page.

--- tutorials:zencartmods:blog_ticker.html [2011/08/01 15:41]
daigo created
+++ tutorials:zencartmods:blog_ticker.html [2016/01/28 18:05] (current)
@@ Line 1: / Line 1: @@
 ==== Create a Blog Ticker on your homepage ====
+{{:tutorials:zencartmods:ticker.jpg?|}}
@@ Line 9: / Line 13: @@
 ==== PHP DOM ====
-Add this to your template, wherever you'd like to see the ticker. We chose **includes/templates/YOUR_TEMPLATE/templates/tpl_index_default.php** around line 12 (we have a large image above it).
+Add this to your template, wherever you'd like to see the ticker. We chose **includes/templates/YOUR_TEMPLATE/templates/tpl_index_default.php** around line 1.
 <code php>
@@ Line 41: / Line 45: @@
 ?>
 <script language="javascript">
-tickerFade();
+tickerFade(<?php echo $num_posts; ?>);
 </script>
 </div>
 </code>
-The first **foreach** loop parses out all of the posts from the XML file, the next **for** loop prints them to the page.
+Note that for now, you will have a javascript error since **tickerFade()** hasn't been defined. You could also use jQuery to call **tickerFade()** on page load, but its important that you call it AFTER the **div**s are created
 Upload it and make sure that you're getting all the posts you want displayed in a row.
-==== Javascript/CSS ====
+==== CSS ====
+You'll need to CSS the divs so that they fit in to your own template, but if you want it fading in and out you should add to .tickerText
+<code css>
+opacity: 0;
+display: none;
+</code>
+This way they will all start out on top of each other, and invisible. display:none takes the object out of the css flow, so they'll also all take up 0 space. To combat this, add some height to #ticker
+<code css>
+height: 15px
+</code>
+==== Javascript ====
+We need to make the **tickerFade()** function now, which we can place in a new files called **includes/templates/YOUR_TEMPLATE/jscript/jscript_ticker.js**
+Here's what our (slightly hacky) code looks like
+<code javascript>
+ticker = 0;
+function tickerFade(num_posts)
+{
+	for( i = 0; i < num_posts; i++)	{
+		stringName = 'tickerText' + i ;
+		document.getElementById(stringName).style.display = 'none';
+	}
+	tickerCycle(num_posts);
+}
+function tickerCycle(num_posts)
+{
+	fade(ticker, num_posts);
+	ticker++;
+	ticker = ticker%num_posts;
+	setTimeout("tickerCycle()", 5000);
+}
+function fade(tickerNum, num_posts)
+{
+	fadeIn(tickerNum);
+	if(ticker == 0)	{
+		fadeOut(num_posts-1);
+		outString = "tickerText" + num_posts - 1;
+	}
+	else	{
+		fadeOut(tickerNum-1);
+		outString = "tickerText" + (tickerNum-1);
+	}
+	inString = "tickerText" + tickerNum;
+	document.getElementById(inString).style.display = 'inline';
+}
+alpha = 0;
+beta = 100;
+function fadeIn(tickerNum)
+{
+     if( alpha < 100)	{
+		alpha += 10;
+		thing = "tickerText" + tickerNum;
+		document.getElementById(thing).style.opacity = alpha/100;
+		document.getElementById(thing).style.filter = 'alpha(opacity=' + alpha + ')';
+		setTimeout("fadeIn("+ tickerNum +")", 50);
+	}
+	else	{
+		alpha = 0;
+	}
+}
+function fadeOut(tickerNum)
+{
+	if( beta > 0 )	{
+		beta -= 10;
+		thing = "tickerText" + tickerNum;
+		document.getElementById(thing).style.opacity = beta/100;
+		document.getElementById(thing).style.filter = 'alpha(opacity=' + beta + ')';
+		setTimeout("fadeOut("+ tickerNum +")", 50);
+	}
+	else	{
+		beta = 100;
+		thing = "tickerText" + tickerNum;
+		document.getElementById(thing).style.display = 'none';
+	}
+}
+</code>

AdaWiki

User Tools

Site Tools

Differences

Page Tools