Example 2: Saving Settings With Cookies
Posted January 1st 2011, 1:37am
In Example 1, I showed you how to toggle the post profile location on phpBB3 and IPB2/Invision boards. While a great idea, it's not that useful on its own because the setting is not saved. This example will extend Example 1 so the profile location is saved in a cookie, and every time a post display page is loaded, the cookie is read and the saved location will be automatically set.

If you need refreshing, the original example is HERE. Let's take that code and add support for cookies. We'll use the my_getcookie() and my_setcookie() functions built into forumotion's system script to read and write out a cookie. The descriptions for these functions are HERE.

Here's the new 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.';

function setprofile(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 = my_getcookie('prloc');
if (x=='left') {
x='right';
}
else {
x='left';
}
my_setcookie('prloc',x,true);
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> • ');
var x = my_getcookie('prloc');
if (x == null) {x = 'left';}
my_setcookie('prloc',x,true);
setprofile(x);
}
});

And here's the new script for IPB2/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.';

function setprofile(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 = my_getcookie('prloc');
if (x=='left') {
x='right';
}
else {
x='left';
}
my_setcookie('prloc',x,true);
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>');
var x = my_getcookie('prloc');
if (x == null) {x = 'left';}
my_setcookie('prloc',x,true);
setprofile(x);
}
});

Now, what has been added? The first thing to notice is that after the button is inserted to the left of the Share link, we are now accessing a cookie with the name prloc. In the previous example, prloc was a variable that would default to "left" every time the page loaded. Now, we are reading the saved location. If the cookie hasn't been set yet, it defaults to "left" -- and you can change this to "right" if you want the default post profile location on the right. Once the cookie is read, it is reset as a permanent cookie, and the post profile location is set based on the value of the cookie.

When the button is clicked, the cookie is read, its value is toggled, the new value is written back into the cookie, and finally, the new post profile location is set.

This fairly simple script is now worth adding to any phpBB3 or IPB2/Invision board. Please note that the script does not take into account anything you might have done to the .postprofile and .postbody elements in the CSS. If you have changed the float, margin, and/or border properties, you will probably need to adjust the values in the setprofile() function.

I want to mention here that the IPB2/Invision script can be modified fairly easily to work on a PunBB board. But if you're using a phpBB2 board...haven't you listened to anything I've said? Switch to another board type and move into the 21st Century! :)

Next up: Templates? Who needs them! :D I'll show you how to do THIS in phpBB3 and IPB2/Invision with a simple script. And I'll show you how to add it to the script we just created in this example!
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 2: Saving Settings With Cookies
Posted July 26th 2011, 3:35am
Whoa! Really cool feature, would it be possible that you tell us how to toggle it to a vBulltin like profile.
φ
Posts: 81
Joined: July 15th 2011, 11:00pm
Likes Received: 1
Example 2: Saving Settings With Cookies
Posted July 26th 2011, 12:27pm
If you're looking for the post profile above the post body, that is beyond the scope of this free forum. It requires making extensive changes to the post DOM using advanced javascript techniques. This is a rare example of where PunBB boards are better than phpBB3 or IPB2/Invision boards -- it is easier to create the vBulletin "look" in templates than it is through javascript.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 2: Saving Settings With Cookies
Posted July 26th 2011, 2:15pm
Dion said:
If you're looking for the post profile above the post body, that is beyond the scope of this free forum. It requires making extensive changes to the post DOM using advanced javascript techniques. This is a rare example of where PunBB boards are better than phpBB3 or IPB2/Invision boards -- it is easier to create the vBulletin "look" in templates than it is through javascript.


I have done it with templates in PUNBB but what you have done here is simply amazing.
φ
Posts: 81
Joined: July 15th 2011, 11:00pm
Likes Received: 1
Example 2: Saving Settings With Cookies
Posted October 3rd 2011, 5:11pm
Hello Dion!

I want to use the code listed above on my forum, but I want it to default to the right and not the left, and I can't figure out how to do it! Would you mind telling me (or editing the code for me and telling what you changed)?
φ
Posts: 280
Joined: October 2nd 2011, 11:00pm
Likes Given: 27
Likes Received: 4
Example 2: Saving Settings With Cookies
Posted October 3rd 2011, 6:09pm
Never mind...I got it to work.

(I am sorry about the double posts. I tried editing my other post, but the edit box didn't work.)
φ
Posts: 280
Joined: October 2nd 2011, 11:00pm
Likes Given: 27
Likes Received: 4
Example 2: Saving Settings With Cookies
Posted October 3rd 2011, 6:46pm
I'm glad you got it to work.

What was your problem with editing? I know the time to edit a post is set fairly short here compared to most boards (2 hours), but your second post was within an hour of the first.

Besides, double-posting isn't a big deal to me, so don't worry about it!
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357

Who is online

Users browsing this forum: No registered users and 1 guest