1
#1
Example 1: Post Profile Toggle (phpBB3 and Invision)
Posted December 28th 2010, 11:58pm
Now that you know how to create javascript files on forumotion, let's put one to good use.

One of the decisions you must make when setting up a forum is the location of the post profile. Do you want it on the left or the right? It's a tough decision because no matter what you choose, some members will be unhappy.

Well no more! This example will create a simple script that lets your users select the location of the post profile. The script will add a button on the post page to the left of the Share link. When the button is clicked, the post profile will toggle between the left and right sides of the display.

To install the script, choose the one for your board type (phpBB3 or Invision), paste/save it into a HTML file (I've already shown you how to do this!), and add a SCRIPT tag in the Site Description. That's all you need to do!

Here is the script for phpBB3:

var CopyrightNotice = 'Post profile toggle for forumotion phpBB3 boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';

var prloc='left';

function setprofile(loc) {
prloc=loc;
if (loc=='left') {
$('.postprofile').css({'float':'left','border-left':'none','border-right':'1px solid #c8c8c8'});
$('.postbody').css('float','right');
}
else {
$('.postprofile').css({'float':'right','border-left':'1px solid #c8c8c8','border-right':'none'});
$('.postbody').css('float','left');
}
}

function toggleprofile() {
var x = prloc;
if (x=='left') {x='right';}
else {x='left';}
setprofile(x);
}

$(function() {
if ($('.addthis_button')[0]) {
$('.addthis_button').eq(0).before('<button class="button2" title="Toggle post profile location" onclick="toggleprofile();"><img style="padding:0px 2px;" src="http://illiweb.com/fa/edit.png" /></button> • ');
setprofile(prloc);
}
});

And here is the script for Invision:

var CopyrightNotice = 'Post profile toggle for forumotion Invision boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';

var prloc='left';

function setprofile(loc) {
prloc=loc;
if (loc=='left') {
$('.postprofile').css({'float':'left','margin':'0px 0px 0px -18em'});
$('.post-container').css('margin','0px 0px 0px 18em');
}
else {
$('.postprofile').css({'float':'right','margin':'0px -18em 0px 0px'});
$('.post-container').css('margin','0px 18em 0px 0px');
}
}

function toggleprofile() {
var x = prloc;
if (x=='left') {x='right';}
else {x='left';}
setprofile(x);
}

$(function() {
if ($('.addthis_button')[0]) {
$('.addthis_button').eq(0).before('<button class="button2" title="Toggle post profile location" onclick="toggleprofile();"><img style="margin:0px 2px;" src="http://illiweb.com/fa/edit.png" /></button>');
setprofile(prloc);
}
});


Here's how this script works. The variable prloc is the post profile location. Its default setting is 'left', so if you want the default post profile location on the right, change prloc to 'right'. Once the page loads, the script checks to see if the AddThis "Share" link is on the page. If it is, the new button is inserted to the left of the Share link, and the setprofile() function is called to set the default post profile location. The setprofile() function does nothing more than alter the CSS of the elements that set the location of the post profile. You can add or remove CSS from the function depending on your needs.

When you press the new button, the toggleprofile() function is called, which toggles the value of the prloc variable. The setprofile() function is then called to change the post profile location.

This is a very simple script that gives you the basic ability to toggle the location of the post profile. The setting is not "sticky", meaning that it must be set every time you view a post display page. In addition, there may be other elements that require modification when the profile location changes -- such as button locations, borders, margins, and even text alignment. We will address one of these issues in the next example.

The next example will add functions to these scripts that set/retrieve a post profile location cookie. This greatly enhances the scripts because the post profile location will stay in the same place every time a user visits your site! You will also learn how to use the forumotion system functions to set/retrieve cookies.

So stay tuned, and I hope you enjoy this script!
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 1: Post Profile Toggle (phpBB3 and Invision)
Posted August 4th 2011, 8:16am
Wait, can you tell me the "Script" tag in the Site Description??

Lol I sound like such a n00b -_-



But I did take the time to read how the Toggle script works ^.^
φ
Posts: 122
Joined: July 23rd 2011, 11:00pm
Likes Received: 1
Example 1: Post Profile Toggle (phpBB3 and Invision)
Posted August 4th 2011, 8:19am
you dont need to do anything with the site description, simply make a new JS file and make sure 'in all pages' is ticked. ;)
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
Example 1: Post Profile Toggle (phpBB3 and Invision)
Posted August 4th 2011, 8:25am
Beautiful!

Lol, you were right Jordan, I can learn some stuff. Though it's bits and pieces right now. I hope I can catch up soon :P
φ
Posts: 122
Joined: July 23rd 2011, 11:00pm
Likes Received: 1
Example 1: Post Profile Toggle (phpBB3 and Invision)
Posted August 4th 2011, 9:20am
Pretty cool huh? thank Dion though not me! haha
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
Example 1: Post Profile Toggle (phpBB3 and Invision)
Posted August 4th 2011, 12:32pm
The first few tutorials were written before the new Javascript Files feature was introduced. I suppose I should update those tutorials. :P
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 1: Post Profile Toggle (phpBB3 and Invision)
Posted August 14th 2011, 7:21am
Just to note- it doesnt work in Chrome, but works in Firefox
φ
Posts:
Avatar
Guest
Example 1: Post Profile Toggle (phpBB3 and Invision)
Posted August 29th 2011, 4:28pm
Is there a code for punBB? I've been trying to experiment, but no results. The only thing I can't change on punBB would be the ".pun .topic" class.
φ
Posts:
Avatar
Guest
Example 1: Post Profile Toggle (phpBB3 and Invision)
Posted August 29th 2011, 8:58pm
I just did a quick test, and the profile toggle script works fine in PunBB once you modify the setprofile() function to the following:

function setprofile(loc) {
if (loc=='left') {
$('.pun .postmain').css({'margin-left':'17em','margin-right':'0px','border-right':'none','border-left':'1px solid #ddd'});
$('.pun .post .user').css({'float':'left','margin-right':'0px','margin-left':'-16em'});
$('.pun .postfoot').css({'margin-right':'0px','margin-left':'-17em','text-align':'right'});
$('.pun .postfoot .user-contact').css('float','left');
}
else {
$('.pun .postmain').css({'margin-left':'0px','margin-right':'17em','border-left':'none','border-right':'1px solid #ddd'});
$('.pun .post .user').css({'float':'right','margin-left':'0px','margin-right':'-16em'});
$('.pun .postfoot').css({'margin-left':'0px','margin-right':'-17em','text-align':'left'});
$('.pun .postfoot .user-contact').css('float','right');
}
}
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 1: Post Profile Toggle (phpBB3 and Invision)
Posted October 19th 2011, 11:26am
My profile toggle button has a very dark background, which I want NOT to be, so I changed this but nothing occurred?
@phpbb3 code
.......
<img style="padding:0px 2px;background-image:none;" src="http://illiweb.com/fa/edit.png" /></button> • ');

have changed background-color as well nothing?
φ
Posts:
Avatar
Guest
Example 1: Post Profile Toggle (phpBB3 and Invision)
Posted October 19th 2011, 12:11pm
The background for the button is controlled by the button class="button2" tag, not by the IMG tag.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 1: Post Profile Toggle (phpBB3 and Invision)
Posted December 1st 2011, 5:38pm
¡Thanks!

But how do I get him to stay forever once you are done click on the same side. That is if you press and go right to stay on the right until you delete cookies?
φ
Posts: 15
Joined: September 22nd 2011, 11:00pm
Location: Yoshi's Island
Example 1: Post Profile Toggle (phpBB3 and Invision)
Posted December 1st 2011, 7:35pm
That's Example 2. ;)

viewtopic.php?t=93
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 1: Post Profile Toggle (phpBB3 and Invision)
Posted December 2nd 2011, 6:45am
Nice work Dion! Thank you! :)
φ
Posts:
Avatar
Guest
Topic locked
14 posts

Who is online

Users browsing this forum: No registered users and 1 guest