Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

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

r0obertr0obert
edited June 2014 in Vanilla 2.0 - 2.8

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!

«1

Comments

  • R_JR_J Ex-Fanboy Munich Admin

    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

  • peregrineperegrine MVP
    edited June 2014

    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

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • peregrineperegrine MVP
    edited June 2014

    @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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • r0obertr0obert
    edited June 2014

    @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!

  • @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]
    

    grep is your friend.

  • @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"
        );
    
  • make sure you plugin class is called NewsFader and the folder newsfader. Then enable it.

    grep is your friend.

  • 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;
    }
    
  • Demo of what I'm trying to accomplish:
    http://jsfiddle.net/jfriend00/n4mKw/

  • hgtonighthgtonight ∞ · New Moderator

    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?

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • r0obertr0obert
    edited June 2014

    @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."

  • hgtonighthgtonight ∞ · New Moderator
    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

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • r0obertr0obert
    edited June 2014

    @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.

  • hgtonighthgtonight ∞ · New Moderator

    @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

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • @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?

  • @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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • hgtonighthgtonight ∞ · New Moderator

    @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.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • r0obertr0obert
    edited June 2014

    @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>
    
  • hgtonighthgtonight ∞ · New Moderator

    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?

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • @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!

Sign In or Register to comment.