Tutorial: Small, but helpfull, forumotion JavaScripts

A list of some small, but helpfull, forumotion JavaScript, you can use to improve your forum.

I'll be updating this thread with more small JavaScripts over time.

If you got any suggestions of what I could add, then please reply to this thread, so I can add it to it.

If you got any questions, then please reply to this thread.

The current tips, there are available is:

• How to create you own direct log out link
  
• Saving stuff with cookies
  
• Checking if there is a new message in your inbox
  

How to create you own direct log out link
It's a useful trick to duplicate a log out link. Many of us probably know the link "/login?logout". But that link will lead us to the a page, where we should confirm to log out. We'd like to avoid that, and instead log out immediately.

This can be done by JavaScript. What will do is, that we'll copy the URL of the original log out link from the original navigation bar (this means, that we can't remove it. Though it is possible to hide it with CSS).

Let's say that we got this HTML link, that we'll like to make our new log out link:

Code:

<a href="/login?logout" id="newlogoutlink">This is the new log out link</a>

^This will lead us to the confirmation page, but to avoid that, will use this JavaScript:

Code:

var logoutlink = document.getElementById("i_icon_mini_logout").parentNode.href;
document.getElementById("newlogoutlink").href = logoutlink;

What we do is, that we first of all find the url of the original log out link from the navbar. Next, we choose our new log out link (finding it by getElementById) and setting it's href (location value) to the url, which we just have found in the first line. And that's it.

Saving stuff with cookies
Forumotion have actually created a couple of functions for setting and updating a cookie. For setting a cookie can we use my_setcookie(), and for getting a cookie, can we use my_getcookie().
A way to show how these to functions work, could be by creating a welcome message, where the client is able to hide it, if (s)he doesn't like to look at it.

Let's say we got this piece of code:

Code:

<div id="login_popup" style="position: fixed; bottom: 0; left: 0; right: 0; background: #FFFFFF; padding: 5px; border-top: 1px solid black; z-index: 999;">
Would you like to <a href="/login" style="text-decoration: underline;">sign in</a> or <a href="/register" style="text-decoration: underline;">register</a>
</div>

This will keep on being attached to the very bottom of the page. But with some simple use of cookies, can we give the user the opportunity to hide. Here is the JavaScript.

Code:

if (my_getcookie("login") == "hide") {
 document.getElementById("login_popup").style.display = "none";
}

So what does it do? Well. First it searched for a cookie named "login". If this cookie exist and the value is equal to "hide", will the element we created to start with get hidden. But! First we need to set the cookie. This can be done to make a little modification to our element we created to start with.

Code:

<div id="login_popup" style="position: fixed; bottom: 0; left: 0; right: 0; background: #FFFFFF; padding: 5px; border-top: 1px solid black; z-index: 999;">
Would you like to <a href="/login" style="text-decoration: underline;">sign in</a> or <a href="/register" style="text-decoration: underline;">register</a>
<a href="javascript:void(0);" onclick="my_setcookie('login','hide',true); this.parentNode.style.display='none';" style="float: right;">Don't display again</a>
</div>

You've probably noticed, that we added a tag and gave it an inline on click event. This inline onclick event will set a cookie named "login", with the value "hide", and the lifespan of 'permanent' (true. False will make it to a session cookie, which will expire when the user closes the browser).
The inline onclick event will also hide the div element, which is placed in the very bottom. If this wasn't the case, would the div first get hidden, when the user refreshes the page, or go to another location within the same domain. And that should be pretty much it.

Checking if there is a new message in your inbox
There has been a couple of different methods to check if there is a new message. As seen a couple of times, some boards have choosed to do it by Ajax, but that's an ridiculously way of doing it. It can be done by a simple small piece of JavaScript.

Let's start out with taking a look at it:

Code:

if (!document.getElementById("i_icon_mini_message")) {
    //if there is a new message, do something here
}

It's not that much right? The thing we do is, that we are looking for an element, which only shows up, when there isn't a new message, and if this doesn't shows up, can we conclude, that there is a new private message in your inbox.
Between the two curled brackets, can you write you own piece of JavaScript of effect, that should happen, when there is a new message.

*Note! The standard navigation bar must not be deleted. You can hide it with CSS though.

Very helpfull shank you for shearing.

Your Tutorial has been accepted, congratulations!

i'm not understand what exaclty that functiion for ?

Which function? You have to be more specific.

how do u used in my forum ?

The JavaScript in the post hasn't got any copy-paste codes for actual functions. It's just tips on how you can make use of FM JS variables and board DOM.

What is a DOM?

Good Work, im using the last one thanks