Choose from our various pricing plans. There is a package for everyone!


Tutorial: Small, but helpfull, forumotion JavaScripts

View previous topic View next topic Go down

Tutorial Tutorial: Small, but helpfull, forumotion JavaScripts

Post by Unknown Data on Wed Jun 20, 2012 5:19 pm

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.


Last edited by Unknown Data on Sat Jun 30, 2012 7:18 pm; edited 1 time in total
avatar
Unknown Data
Premium Member


Age : 21
Posts : 119
Join date : 2012-04-24
Reputation : 8

View user profile http://woops.dk

Back to top Go down

Tutorial Re: Tutorial: Small, but helpfull, forumotion JavaScripts

Post by Mati™ on Sat Jun 23, 2012 12:56 pm

Very helpfull shank you for shearing. Smile

Your Tutorial has been accepted, congratulations!
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Tutorial: Small, but helpfull, forumotion JavaScripts

Post by tommycoo on Thu Aug 23, 2012 2:17 pm

i'm not understand what exaclty that functiion for ?
avatar
tommycoo
Member
Member

Age : 21
Posts : 60
Join date : 2012-08-20
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Tutorial: Small, but helpfull, forumotion JavaScripts

Post by Unknown Data on Thu Aug 23, 2012 4:11 pm

Which function? You have to be more specific.
avatar
Unknown Data
Premium Member


Age : 21
Posts : 119
Join date : 2012-04-24
Reputation : 8

View user profile http://woops.dk

Back to top Go down

Tutorial Re: Tutorial: Small, but helpfull, forumotion JavaScripts

Post by tommycoo on Thu Aug 23, 2012 9:42 pm

how do u used in my forum ?
avatar
tommycoo
Member
Member

Age : 21
Posts : 60
Join date : 2012-08-20
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Tutorial: Small, but helpfull, forumotion JavaScripts

Post by Unknown Data on Thu Aug 23, 2012 11:10 pm

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.
avatar
Unknown Data
Premium Member


Age : 21
Posts : 119
Join date : 2012-04-24
Reputation : 8

View user profile http://woops.dk

Back to top Go down

Tutorial Re: Tutorial: Small, but helpfull, forumotion JavaScripts

Post by Nathan Adhitya on Fri Aug 31, 2012 4:57 am

What is a DOM?
avatar
Nathan Adhitya
Member
Member

Age : 17
Posts : 35
Join date : 2012-07-08
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Tutorial: Small, but helpfull, forumotion JavaScripts

Post by J0k3R^ on Thu Apr 25, 2013 5:29 pm

Good Work, im using the last one up thanks
avatar
J0k3R^
Member
Member

Age : 24
Posts : 25
Join date : 2013-04-25
Forum Version : PunBB
Reputation : 1

View user profile http://fmplanet.forumgreek.com/

Back to top Go down

Tutorial Re: Tutorial: Small, but helpfull, forumotion JavaScripts

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum