Example 5: Widgets as Pop-Ups!
Posted January 21st 2011, 1:24am
I don't know about you, but I think the display of widgets makes a forum look cluttered at best, and ugly at worst. Widgets take away from what's important on a forum...the content. But widgets do have the ability to display useful information.

So what's the solution? Advanced javascript, and the ability to think outside the box! :D

This tutorial will show you how to create a "Widget Bar" with clickable tabs for the Latest Topics, Calendar, and Log In widgets. When a tab is clicked, the corresponding widget will be displayed as a pop-up. This method of displaying widgets lets the user display the widget information when THEY want to see it, and no screen space is taken up by widgets.

So how is it done? You set up a widget display like you normally would, with widgets only on the left and with the minimum 180px width. Make sure to set the "Use a table type" option to NO, and turn off the HTML editor. But then comes the secret! You will then create a custom widget that contains the following script:

<script type="text/javascript">
var CopyrightNotice = 'Pop-up widgets for forumotion phpBB3 and IPB2/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 curpop=false;

function togglemenu(elem) {
if (elem!=curpop && elem.style.display=='none') {
if (curpop) {jQuery(curpop).fadeOut();}
curpop=elem;
jQuery(elem).fadeIn();
}
else {
jQuery(elem).fadeOut();
curpop=false;
}
}

jQuery(function() {
var x=document.getElementById('content-container');
var y=document.getElementById('main-content');
var z=document.getElementById('widgetbar');
x.parentNode.insertBefore(y,x);
x.parentNode.removeChild(x);
y.insertBefore(z,y.firstChild);
});

var x=document.createElement('DIV');
x.id='widgetbar';
x.className='clearfix';
document.body.insertBefore(x,document.body.firstChild);

var y=jQuery('#left .module');
jQuery(y).css('display','none');
if (jQuery(y[2]).find('.box-content img')[0]) {
jQuery(x).prepend(jQuery(y)[2]);
jQuery(x).prepend('<div class="wmenu" onclick="togglemenu(this.nextSibling)">All About Me!</div>');
y[2].style.left='250px';
}
jQuery(x).prepend(jQuery(y)[1]);
jQuery(x).prepend('<div class="wmenu" onclick="togglemenu(this.nextSibling)">Calendar</div>');
y[1].style.left='125px';
jQuery(x).prepend(jQuery(y)[0]);
jQuery(x).prepend('<div class="wmenu" onclick="togglemenu(this.nextSibling)">Latest Topics</div>');
</script>

This script will find the widgets, create the widget bar, put the widget bar in the correct location, and then remove all the garbage that is left after the widgets have been moved from their old location. Because forumotion sets up widgets in the exact same way on phpBB3 and IPB2/Invision boards, the same script can be used on both boards.

The script resides in a widget, so it must be enclosed with SCRIPT tags. In addition, you'll note that "jQuery" is spelled out instead of its more common "$" tag. This is because forumotion strips out the "$" character in widgets.

The togglemenu() function is what is called when a user clicks on a tab. If a widget is being displayed, it will turn off the displayed widget before it displays the widget associated with the clicked tab.

You'll note that each widget is moved separately to the widget bar element. This is to insure each widget is placed next to its corresponding tab. The demo boards are set up with three widgets: Latest Topics, Calendar, and Log In. The Log In widget is configured to NOT show for guests, so it is actually a profile widget. The script checks for the Log In widget before it writes out the corresponding tab...if the widget is found, the tab is added.

Adding additional widgets is as simple as duplicating this block:

jQuery(x).prepend(jQuery(y)[1]);
jQuery(x).prepend('<div class="wmenu" onclick="togglemenu(this.nextSibling)">Calendar</div>');
y[1].style.left='125px';

and changing the (y)[i] index, and the "left" style. The space between each tab is 125px, so make sure to keep each "left" style in a multiple of 125px.

This script widget MUST be added BELOW every other widget, or it will not work properly. Also, if you use the Latest Topics widget, you MUST turn off scrolling. Since the widget is in a pop-up, scrolling is actually a hindrance to its display, so turning off scrolling should not pose any problems.

The widget bar and widgets also need some CSS in order to look and work properly. Here is the CSS for phpBB3:

#widgetbar {padding: 15px 0px; position: relative;}
#widgetbar .wmenu {cursor: pointer; float: left; margin-right: 10px; width: 115px; height: 24px; line-height: 22px; background: #dcdee2; color: #105299; font-family: Tahoma,Arial; font-size: 13px; font-weight: bold; text-align: center; -moz-border-radius: 6px; border-radius: 6px;}
#widgetbar .wmenu:hover {color: #d31141;}
#widgetbar .module {z-index: 999; position: absolute; top: 50px; min-width: 200px; background: #e0e0e0; color: #000000;}
#widgetbar #calendar th, #widgetbar #calendar td {color: #000000 !important;}

And here is the CSS for IPB2/Invision:

#widgetbar {padding: 15px 0px; position: relative;}
#widgetbar .wmenu {cursor: pointer; float: left; margin-right: 10px; width: 115px; height: 30px; line-height: 28px; background: #9098a0; color: #000000; font-family: Tahoma,Arial; font-size: 13px; text-align: center;}
#widgetbar .wmenu:hover {background:#c5c7ca;}
#widgetbar .module {z-index: 999; position: absolute; top: 50px; min-width: 200px;}
#widgetbar div.avatar, #widgetbar div.avatar img {background: transparent; border: none; width: auto;}

Having a widget bar opens the door to some interesting possibilities. The next tutorial will add a new tab to the widget bar, and that tab happens to be one of the most requested features on forumotion!

That's it! If you have any questions, ask away...
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 5: Widgets as Pop-Ups!
Posted January 22nd 2011, 8:43pm
Interesting! :) I'm curious as to how this would look/work. I wonder if I could ever make use of something like this.
φ
Posts:
Avatar
Guest
Example 5: Widgets as Pop-Ups!
Posted January 22nd 2011, 11:51pm
Brad38 said:
I wonder if I could ever make use of something like this.

The only way to know for sure is to try it! :D
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 5: Widgets as Pop-Ups!
Posted February 1st 2011, 2:16am
This topic is great, thanks for this! It took some time for me to understand how the script was working but I wanted to try and understand it first before I asked any questions. Here are just some tips for anyone to benefit from that I learned.

This is the script i set up with this method:
<script type="text/javascript">
var CopyrightNotice = 'Pop-up widgets for forumotion phpBB3 and IPB2/Invision boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use, modification, and/or distribution of this script is allowed, provided this entire copyright notice remains in the original, copied, or modified script.';

var curpop=false;

function togglemenu(elem) {
if (elem!=curpop && elem.style.display=='none') {
if (curpop) {jQuery(curpop).fadeOut();}
curpop=elem;
jQuery(elem).fadeIn();
}
else {
jQuery(elem).fadeOut();
curpop=false;
}
}

jQuery(function() {
var x=document.getElementById('content-container');
var y=document.getElementById('main-content');
var z=document.getElementById('widgetbar');
x.parentNode.insertBefore(y,x);
x.parentNode.removeChild(x);
y.insertBefore(z,y.firstChild);
});

var x=document.createElement('DIV');
x.id='widgetbar';
x.className='clearfix';
document.body.insertBefore(x,document.body.firstChild);

var y=jQuery('#left .module');
jQuery(y).css('display','none');
if (jQuery(y[2]).find('.box-content img')[0]) {
jQuery(x).prepend(jQuery(y)[2]);
jQuery(x).prepend('<div class="wmenu" onclick="togglemenu(this.nextSibling)">All About Me!</div>');
y[2].style.left='250px';
}
jQuery(x).prepend(jQuery(y)[4]);
jQuery(x).prepend('<div class="wmenu" onclick="togglemenu(this.nextSibling)">Top Posters</div>');
jQuery(x).prepend(jQuery(y)[3]);
jQuery(x).prepend('<div class="wmenu" onclick="togglemenu(this.nextSibling)">Polls</div>');
jQuery(x).prepend(jQuery(y)[2]);
jQuery(x).prepend('<div class="wmenu" onclick="togglemenu(this.nextSibling)">Calendar</div>');
jQuery(x).prepend(jQuery(y)[1]);
jQuery(x).prepend('<div class="wmenu" onclick="togglemenu(this.nextSibling)">Latest Topics</div>');
jQuery(x).prepend(jQuery(y)[0]);
jQuery(x).prepend('<div class="wmenu" onclick="togglemenu(this.nextSibling)">Navigation</div>');
y[1].style.left='128px';
y[2].style.left='260px';
y[3].style.left='390px';
y[4].style.left='520px';
</script></center>


and this is how my forum widgets are set up:

Image

Note how the widgets are set up in opposite direction from the script. It must be in the opposite direction otherwise it will not work correctly. My first widget is "Navigation". The last tab on my script is "Navigation". In other words, your first widget, is your last script block (the one you are duplicating for each widget as mentioned in the OP).

You will also noticed these lines here
y[1].style.left='128px';
y[2].style.left='260px';
y[3].style.left='390px';
y[4].style.left='520px';


I have blocked them all together to easily keep track of them. The y[x] (x = number) match the corresponding tab number with the widget. All multiples of 128px.

I noticed the multiple of about 128px - 130px makes the menu more accurately pop out under the tab widget button more evenly. 125px is good but when I added about 5 tabs I noticed I had to adjust the pixel multiples up with the more tabs I added so that the pop out widget was accurately even below the tab.




So now that I understand that much... My question is... Is it possible to replace the navigation bar with these pop out widgets instead? It would save a ton of space on the forum making it look less cluttered. Also, how would I go about centering these tabs?
φ
Posts:
Avatar
Guest
Example 5: Widgets as Pop-Ups!
Posted February 1st 2011, 12:28pm
I believe Example 8 will answer your question about replacing the navbar with the tabs. :D

If you want the pop-ups to display underneath their respective tab, centering the tabs would require a lot of work -- well beyond the scope of this tutorial. If you want some tips/advice on how to do it, just ask.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 5: Widgets as Pop-Ups!
Posted February 1st 2011, 4:25pm
Thanks for example 8 :)

Before I get started on the centering and what not, I noticed that images do not display inside these tabs. When I tried to Example 8, it only worked with I had the navbar buttons display without images. Also, the statistics pop up doesnt show the images for each assigned statistics.

Any way around this?
φ
Posts:
Avatar
Guest
Example 5: Widgets as Pop-Ups!
Posted February 1st 2011, 4:47pm
The stats images are easy. Find this line of CSS in the example:

#fo_stat thead th, #fo_stat td.row1, #fo_stat div.expand, #fo_stat div.contract {display: none;}

and change it to this:

#fo_stat div.expand, #fo_stat div.contract {display: none;}

For images in the navbar, this is what I said in example 8:
You can modify the script to support images in the pop-up by removing the "jQuery('a.mainmenu img').remove();" line, but the pop-up will require custom CSS that is beyond the scope of this example.
What you'll basically need to add to the CSS is a top and bottom margin on the navbar images to keep them from overlapping vertically.

I hope this helps!
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 5: Widgets as Pop-Ups!
Posted July 17th 2011, 5:05pm
I have implemented this into my forum since I really wanted to clean up the right hand side and it worked great.

The problem I have now are the forumotion ads. All forums created after October 2010 cannot disable ads for members. These pop up widgets are placed above the ads and when clicked on, will sit under the displayed ad obscuring the contents of the pop-up.

I'm not that great at coding at all and was wondering if you know any fixes that could move the widget pop up tabs below the ads rather than above them?

Cheers,
Paul
φ
Posts:
Avatar
Guest
Example 5: Widgets as Pop-Ups!
Posted July 17th 2011, 5:33pm
There isn't any way to move the widget bar below the ads. However, there IS a way to have the pop-ups display over the ads.

If you are using the code from the first post in this topic, find this line:

jQuery(y).css('display','none');

and add the following line right after it:

jQuery(y).css('z-index','50000');

That will make the pop-ups display over the ads.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 5: Widgets as Pop-Ups!
Posted July 17th 2011, 5:39pm
Perfect.

Really digging this site, glad I stumbled across it. Its making me be able to do a load more than I could. '

Thanks again Dion.
φ
Posts:
Avatar
Guest
Example 5: Widgets as Pop-Ups!
Posted August 4th 2011, 9:08am
Is it possible to use this script on some widgets i place in a right hand sidebar. When i also have a left hand sidebar?

Let me explain better, i have a left hand side bar on my forum which all members and guests can see and i wish for it to stay there as it is.

However i want to add just one widget as a pop up like this. Just one of my widgets, now is there a way to accomplish this in my left sidebar, making only one of the widgets a pop up and the rest stay as they are OR i could put the widegt in my right sidebar (which doesn't show up), and this script, so therefore making everything in my right sidebar a pop up but not affecting the left?

i hope you get what i mean haha.
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
Example 5: Widgets as Pop-Ups!
Posted August 4th 2011, 12:30pm
It is much better code-wise to have the pop-up widgets in their own sidebar, so yes, this should go into your right sidebar.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 5: Widgets as Pop-Ups!
Posted August 4th 2011, 12:46pm
I find putting into my right sidebar still affects the left though?

Would it be as simple as changing all the bits in the script which say left to say right? lol
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
Example 5: Widgets as Pop-Ups!
Posted August 4th 2011, 12:56pm
Yup, it would be that simple. :P
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 5: Widgets as Pop-Ups!
Posted August 4th 2011, 1:09pm
hmm i still find it affects both sidebars, rather than JUST the right one.
I seemed to have buggered the script up :roll: lol

When you get some time, can you take a look at the script on my test forum? Or here. Sorry for being so needy haha.
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
Example 5: Widgets as Pop-Ups!
Posted August 4th 2011, 1:40pm
Hmm. Find this portion of the widget bar code:

jQuery(function() {
var x=document.getElementById('content-container');
var y=document.getElementById('main-content');
var z=document.getElementById('widgetbar');
x.parentNode.insertBefore(y,x);
x.parentNode.removeChild(x);
y.insertBefore(z,y.firstChild);
});

and change it to this:

jQuery(function() {
var y=document.getElementById('main-content');
var z=document.getElementById('widgetbar');
y.insertBefore(z,y.firstChild);
$('#right').remove();
});

You might also need to adjust some CSS to reclaim the right sidebar space.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 5: Widgets as Pop-Ups!
Posted August 4th 2011, 2:09pm
Yeah thats definietely made it leave alone the left sidebar.
But it doesnt seem to be turning my right widgets into the pop up button. (and yes i have the CSS added from the original post)

this is my script now

<script type="text/javascript">
var CopyrightNotice = 'Pop-up widgets for forumotion phpBB3 and IPB2/Invision boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use, modification, and/or distribution of this script is allowed, provided this entire copyright notice remains in the original, copied, or modified script.';

var curpop=false;

function togglemenu(elem) {
if (elem!=curpop && elem.style.display=='none') {
if (curpop) {jQuery(curpop).fadeOut();}
curpop=elem;
jQuery(elem).fadeIn(); }

else { jQuery(elem).fadeOut(); curpop=false; }}

jQuery(function() { var y=document.getElementById('main-content'); var z=document.getElementById('widgetbar'); y.insertBefore(z,y.firstChild); jQuery('#right').remove();});

var x=document.createElement('DIV');x.id='widgetbar';x.className='clearfix';document.body.insertBefore(x,document.body.firstChild);var y=jQuery('#right .module');jQuery(y).css('display','none');if (jQuery(y[0]).find('.box-content img')[0]) {
jQuery(x).prepend(jQuery(y)[0]); jQuery(x).prepend('<div class="wmenu" onclick="togglemenu(this.nextSibling)">status change</div>'); y[0].style.right='250px';}</script>


I only have the one widget in my right sidebar, hte one you helped with previously, the iframe thing.
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
Example 5: Widgets as Pop-Ups!
Posted August 9th 2011, 3:09pm
What changes do I need to do to place these bars on the right side instead?
φ
Posts:
Avatar
Guest
Example 5: Widgets as Pop-Ups!
Posted August 15th 2011, 8:45pm
and if i want to use this .slideToggle('slow') ?

thank you)!!!
φ
Posts:
Avatar
Guest
Example 5: Widgets as Pop-Ups!
Posted August 15th 2011, 9:28pm
To place the bars on the right, use style.right instead of style.left in the script above.

And if you want to use $.slideToggle() instead of $.fadeIn() and $.fadeOut(), please do! As long as the display of the widget is toggled, it doesn't matter what you use to accomplish the task...
φ
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