Adding Fade I/O Text Loop (jQuery) to Main Forum Page

r0obert

HTML:

<h1 class="quotes">Announcement #1</h2>
<h1 class="quotes">Announcement #2</h2>

CSS:

.quotes {display: none;}

JS:

(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();

I tried editing default.master.tpl, but I didn't manage to get it working. Any tips would be appreciated, thanks guys!

R_J

Let's hope you have tried that on a custom theme
http://vanillawiki.homebrewforums.net/index.php/Themes

I'm bad at JS but I would assume your code is executed when the DOM is not yet loaded.

http://learn.jquery.com/using-jquery-core/document-ready/
http://stackoverflow.com/questions/6026645/document-readyfunction-vs-script-at-the-bottom-of-page

peregrine

if you run this on the main page in this forum in your firebug console, you can watch the h1 announcement fade in and out in slightly different colors.

you had syntax errors primarily e.g.})(); it wouldn't run anyway.

left some debugging comments in to give you tips on how to debug things when they don't work as you want.

jQuery(document).ready(function($) {
var quotes = $("h1");
var quoteIndex = 0;
var color =  509 ;
function showNextQuote() {
++quoteIndex;
//alert(quoteIndex);
var x = quotes.eq(quoteIndex % quotes.length);
//console.log(x);
var newcolor =  color * Math.random(1999) ;
x.css("color","#" + newcolor).fadeIn(100)
.delay(100)
.fadeOut(200, showNextQuote);
}
showNextQuote();
});

you can make a plugin like this

http://vanillaforums.org/discussion/comment/209112/#Comment_209112

peregrine

@r0obert
this is kind of fun to if you run it on this page in your console.

jQuery(document).ready(function($) {
var quotes = $("p");
var quoteIndex = 0;
var color = 509 ;
function showNextQuote() {
++quoteIndex;
//alert(quoteIndex);
var x = quotes.eq(quoteIndex % quotes.length);
//console.log(x);
var newcolor = color * Math.random(1999) ;
x.css("color","#" + newcolor).fadeIn(100)
.delay(100)
.fadeOut(200, showNextQuote);
}
showNextQuote();
});

Although most blinking is pretty irritating after a while, even if its a slow fade in and out.

r0obert

@peregrine nothing happens when I enable the plugin.

I've included the js code above into script.js (in myplugin/js folder) and the following code inside default.php (in myplugin dir):

class MyPluginPlugin extends Gdn_Plugin {
     public function DiscussionsController_Render_Before($Sender) {
          $this->AC_Attach_Resources($Sender); 
        }
     public function CategoriesController_Render_Before($Sender) {
            $this->AC_Attach_Resources($Sender); 
        } 
     public function AC_Attach_Resources($Sender) {
     $Sender->AddJsFile($this->GetResource('js/script.js', FALSE, FALSE));
        } 
   }

Sorry for being a n00b, still learning.. Thanks for your assistance!

x00

@r0obert in a plugin you need $PluginInfo block. You need to name like so

$PluginInfo['MyPlugin'] = array(
   'Name' => 'MyPlugin',
[snip]

class MyPlugin extends Gdn_Plugin {
[snip]

r0obert

@x00‌ I already have that:

 $PluginInfo['NewsFader'] = array(
        'Name' => 'News Fader',
        'Description' => 'Display News/Text/Announcement Fader on Index Page',
        'Version' => '1.0',
        'Author' => "r0obert"
    );

x00

make sure you plugin class is called NewsFader and the folder newsfader. Then enable it.

r0obert

I have /plugins/NewsFader folder, /plugin/NewsFader/js/newsfader.js, /plugin/NewsFader/design/newsfader.css.

default.php

<?php
if(!defined('APPLICATION')) { exit(); }
    // Define the plugin:
    $PluginInfo['NewsFader'] = array(
        'Name' => 'News Fader',
        'Description' => 'Display Fading In & Out News/Quotes/Announcements/Text on your Forum Index Page.',
        'Version' => '1.0',
        'Author' => "r0obert"
    );

    class NewsFaderPlugin extends Gdn_Plugin {
          // where you put your code logic
          public function DiscussionsController_Render_Before($Sender) {
          $this->AC_Attach_Resources($Sender); 
        }
     public function CategoriesController_Render_Before($Sender) {
            $this->AC_Attach_Resources($Sender); 
        } 
     public function AC_Attach_Resources($Sender) {
     $Sender->AddJsFile($this->GetResource('js/newsfader.js', FALSE, FALSE));
        } 
     // this allows you to enable and disable plugin
        public function Setup() {
        }
    }

newsfader.js

(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();

newsfader.css

.quotes {
display: none;
}

r0obert

Demo of what I'm trying to accomplish:
http://jsfiddle.net/jfriend00/n4mKw/

hgtonight

Have you verified your js file is included on the page you are looking at?

Have you delayed your js exection to when the DOM is fully loaded?

r0obert

@hgtonight said:
Have you verified your js file is included on the page you are looking at?

Have you delayed your js exection to when the DOM is fully loaded?

I included this code in default.master.tpl (custom bootstrap theme) inside the <head>:

<script src="../../../plugins/NewsFader/js/newsfader.js"></script>

I also have included these two lines into the above file under <section class="container">:

   <h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>

When I try to enable the plugin I get this error:

"There was an error getting the class methods."

hgtonight

1. Scripts should be loaded in the <head> element, not the header.
2. You should be adding the script via a plugin, ($Sender->AddJsFile($this->GetResource('js/newsfader.js', FALSE, FALSE));).
3. Even if you go the hardcoded way, the path is wrong. It should be '/plugins/NewsFader/js/newsfader.js`.

I have a little testing ground plugin that I clone whenever I want to try something out quickly. I tried to comment the hell out of it to help new devs. You can check it out here: https://github.com/hgtonight/Plugin-TestingGround

r0obert

@hgtonight sorry, I meant Head not Header; also I do have that line of code inside my plugin so 1. & 2. are fine.

Fixed path, still not working. I can only see the text "first quote" and "second quote", no fade.

hgtonight

@r0obert said:
hgtonight sorry, I meant Head not Header.

No big deal, HTML 5 introduced some new elements that I am sure Bootstrap takes advantage of. For more info, check it out here: http://www.w3schools.com/tags/tag_header.asp

r0obert

@hgtonight‌ I've tested using your Plugin-TestingGround and it works!!

Here is the correct(ed) js:

jQuery(document).ready(function($) {
var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();
});

I think the error was in the js syntax.

One thing though, I cannot Disable your plugin from the Dashboard, I had to do it manually. Maybe you want to take a look at that, although it's not a big deal.

Thanks again!

Do you think I should upload it to the Vanilla addons?

peregrine

@r0obert

along the way you modifed things that broke the plugin.

• 1 the reason you cannot disable plugins is because this

  $PluginInfo['NewsFader'] = array(

must match your folder name exactly. that is NewsFader

so if your is $PluginInfo['NewsFaDeR']

your folder must be exactly upper and lower-cased the same plugins/NewsFaDeR

if you cannot disable a plugin - nine times out of 10 your folder name doesn't match the name in the brackets.

-2

the reason the fader.js didn't work

http://vanillaforums.org/discussion/comment/209724/#Comment_209724

is because you left out the code I gave you.

jQuery(document).ready(function($) {

...


..
});

always start with jQuery and put a $ in the function($) at the top

and end with a });

and you will never go wrong, if the code inside is correct.

hgtonight

@r0obert said:
Do you think I should upload it to the Vanilla addons?

If you think others will find it useful, sure!

I am not seeing the disable issue on my local dev server.

r0obert

@peregrine thanks, that actually makes a lot of sense!

@hgtonight - it works now, thanks!

One more thing: Is it possible to create a few custom fields in the dashboard (addon options) where users can input the text that they want to show in the default.master.tpl, so they don't have to edit that file every time they wish to add/update text/announcements/news/whatever?

   <h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>

hgtonight

I didn't realize you had hardcoded your quotes into the master template file. This is a bad approach if you want your plugin to be useful to others.

Normally you just hook into an event during the render function and spit out your needed markup.

Where on the page are you adding the quotes?

r0obert

@hgtonight said:
I didn't realize you had hardcoded your quotes into the master template file. This is a bad approach if you want your plugin to be useful to others.

Normally you just hook into an event during the render function and spit out your needed markup.

Where on the page are you adding the quotes?

Inside <section class="container">

I knew that hardcoding this into the master tpl file wasn't a good idea, but what's the bet way to do it? Could you assist me in that process?

Thanks!