This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
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 ==== | ==== Create a Blog Ticker on your homepage ==== | ||
+ | |||
+ | {{:tutorials:zencartmods:ticker.jpg?|}} | ||
+ | |||
Line 9: | Line 13: | ||
==== PHP DOM ==== | ==== 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> | <code php> | ||
Line 41: | Line 45: | ||
?> | ?> | ||
<script language="javascript"> | <script language="javascript"> | ||
- | tickerFade(); | + | tickerFade(<?php echo $num_posts; ?>); |
</script> | </script> | ||
</div> | </div> | ||
</code> | </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. | 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> | ||