[1.8.x/1.6.x] Automatic messages

[eNvy]

First of all... I'm not a programmer, so, if you find a bug or you find a better way to achieve this, you can share your opinion here.

This is a very short and simple tutorial on how to display automatic messages, with fade in and out, and a custom time to "change".

First: jQuery (If you're on 1.6.x, you need to load jQuery first)

This code goes on headerinclude template

​<script type="text/javascript">
jQuery(function() {

    var quotes = jQuery(".quotes"); // Here you define the class you want to use in your messages
    var quoteIndex = -1;
    
    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(500) // This is the time for the fade in effect
            .delay(12000) // This is the time for the change between each message
            .fadeOut(500, showNextQuote); // This is the time for the fade out effect
    }
    
    showNextQuote();

});
</script>

Now, the HTML (Put wherever you want, I recommend the header template, so this will be displayed in all the forum)

​<div class="news">
    <div class="announcements">Announcements:</div>
    <div class="automsg">
        <ul>
            <li class="quotes">Welcome to our community. Hope you like it.</li>
            <li class="quotes">If you read this, ignore this message.</li>
        </ul>
    </div>
</div>

And finally, the CSS (You can put this on global.css or in a custom one)

​.news {
    line-height: 40px;
    font-family: Tahoma;
}

.announcements {
    width: 130px;
    text-align: left;
    float: left;
    margin: 0 2px 0 0;
    padding: 5px 0;
    color: #FFFFFF;
    font-weight: bold;
}

.automsg {
    width: 852px;
    float: left;
    padding: 5px 0;
}

.automsj ul {
    padding: 0;
    margin: 0;
}

.quotes {
    color: #b4d3e2;
    list-style: none;
    display: none;
    text-align: left;
}

This is defined by:

.announcements class > 130px of width, it's only the word "announcements", I put 130px because I add a custom icon, you can modify this by your liking.

.automsj class > The class defines the width of the messages displayed, I put 852px because I personally use a total of 984px of width and 20px of padding in the size of my own forum, you can change this and put more pixels or even percentaje / ems.

.quotes class > It's the class that's used by the jQuery. This applies to every <li> tag, and format the text. Also this have "display: none" to hide ALL the messages, because our jQuery code is gonna display only one <li> tag at time, and then switch to the next, and do that cicle infinitely.

And that's all ^^

Hope you like it and if you know any way to improve this, share with MyBB.

Greetings and sorry for my bad english, I'm really trying this.

[Oblacic]

eNvy, can you please tell me how I can access to file to change jQuery. I want to change delay value.
I can see that code in page source, but i can't figure out how to access to it and change it.

Thank you!

[eNvy]

Read again the tutorial, the code I give you for the headerinclude it's the jquery and you have the comments in orange there...

.delay(12000) // This is the time for the change between each message

That's the delay between each message, you can put more or less.

[ElectricShock]

Do we have a demo? Or can I see it at http://xstyled.com?

[Ammy]

edit: got it xd

[eNvy]

Do we have a demo? Or can I see it at http://xstyled.com?

Yep, the announcements bar on xstyled it's the same as here (A bit modify the style but the same code) ^^.

[Ammy]

works great besidethat announcments are changing the width of the members informations on their profile page

[eNvy]

O.o, that can't be possible... only if you use the same class on the profile page, in the members information :|

Can you give me your forum url so I can check that?