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
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!
0
Comments
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
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.
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.
@r0obert
this is kind of fun to if you run it on this page in your console.
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.
@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):
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
grep is your friend.
@x00 I already have that:
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
newsfader.js
newsfader.css
Demo of what I'm trying to accomplish:
http://jsfiddle.net/jfriend00/n4mKw/
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.
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">
:When I try to enable the plugin I get this error:
"There was an error getting the class methods."
<head>
element, not the header.$Sender->AddJsFile($this->GetResource('js/newsfader.js', FALSE, FALSE));
).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.
@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.
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:
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.
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.
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.
@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?
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.
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!