Web Ramblings

Facebox is a great jquery plugin for a facebook style pop up window, I use it regularly because the style is neat and suits what I need with a minimum amount of changes. But what if your website is wider than the monitor it is displayed on?

Its not something that is often a problem, most web developers will tell you that horizontal scroll bars are a major ‘no’. There are always exceptions though, and I’m pleased to see more websites breaking away from standard conventions. If you have a page that you have set to 1800px wide or you have horizontal scrolling for whatever reason the default position of facebox will be at the beginning of the page. This is a problem I came across on a recent project and this is how I got around it…

Firstly, download the jQuery facebox plugin from here and upload it to your website. Once you have done that simply follow these steps …

Set up your html document making sure you include the necessary links to jquery and the css needed for facebox. For more information on this follow the documentation included with the plugin.

Add this html between the body tags

<a id="container” rel="facebox" href="#panel"></a>

<div id="panel" style="display:none;">

<p>This is some sample text</p>
</div>

This is your link and the div that facebox is going to display. You can have anything you want within the div, I’ve added one paragraph of text just so you can see some content.

Now, below your javascript for facebox.js lets add the jquery that makes this all work

jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()

})

4, add some basic css for styling,

body {
width: 2500px;
height: 1900px;
}

#container {
display: block;
margin: 10px;
width: 2400px;
height: 1800px;
background-color: #FFFF99;
border: solid 1px #999;
cursor: pointer;
}

Now when you view your page you should see a very large yellow box that when you click on it a facebook style panel should pop up in the center of the screen.

But I want to be able to control where on the x axis this box appears. To do this you have to find the exact co ordinates of where the mouse clicked.

This can done really easily, simply add this  to your jquery above the facebox line.

$('#container').click(function(e){
pos_x = e.pageX;
pos_y = e.pageY;
});

If you use the firebug extension in firefox you can also add

console.log("pos_x = " + pos_x);
console.log("pos_y = " + pos_y);

so that you can see this working in the console. But don’t forget to remove (or at least comment out) these lines when you set your website live as Internet Explorer will say there is an error on the page if you leave them in.

Next you need to be able to pass these co ordinates to the facebox script, do this by defining pos_x and pos_y out side of the click function

var pos_x = 0;
var pos_y = 0;

again add in the console.log lines so that you can check its all working. Your jquery should now look like this:

var pos_x = 0;
var pos_y = 0;

console.log("pos_x = " + pos_x);
console.log("pos_y = " + pos_y);

jQuery(document).ready(function($) {
$('#container').click(function(e){
pos_x = e.pageX;
pos_y = e.pageY;
console.log("pos_x = " + pos_x);
console.log("pos_y = " + pos_y);
});

$('a[rel*=facebox]').facebox()
})

Now you need to modify the facebox script in two places. Open facebox.js in your editor and find this line:

$('#facebox').css({
top:	getPageScroll()[1] + (getPageHeight() / 5),
left:	385.5
}).show()

replace it with this:

if (pos_x - 385.5 < 0) {

$('#facebox').css({
top:	getPageScroll()[1] + (getPageHeight() / 5),
left:	385.5
}).show()

} else {
$('#facebox').css({
top:	getPageScroll()[1] + (getPageHeight() / 5),
left: pos_x - 300
}).show()
}

then find

$('#facebox').css('left', $(window).width() / 2 - ($('#facebox table').width() / 2))

and replace with

if (pos_x - 385.5 < 0) {
$('#facebox').css('left', 385.5)

} else {
$('#facebox').css('left', pos_x - 300)
}

What these lines do is pull through the x coordinate, I want the panel to appear 300px to the left of where I clicked, so I check to make sure that the coordinates – 300px is not a negative number. If it is, the panel will appear off the screen. I don’t want that so if that is the case, I want the script to revert back to the default settings, otherwise position it 300px to the left of the x position.

The only other thing that needs to be done now is to modify one line of facebox.css. Open the file and find this line:

#facebox .popup {

now simply add:

width:385.5px;

and your done! You can view my working example here.

This is great a starting point if you want to find co ordinates in a photo or image (photo tagging), but what if you have a website that scrolls horizontally and you have several links across the page that all pulls different info into the pop up?

There isn’t much you need to change to achieve this.
Firstly, change your jQuery on the page from this

$('#container').click(function(e){

to

$('a.link').click(function(e){

Then change your html so that you have

<div id="container">
<ul>
<li><a class="link" rel="facebox" href="#one">link></a></li>
<li><a class="link" rel="facebox" href="#two">link</a></li>
<li><a class="link" rel="facebox" href="#three">link</a></li>

</ul></div>

place this above your hidden div and then add the extra hidden div tags underneath making sure you change the id’s to match the links. Then add this to your css.

li {
display: inline;
margin-right: 200px;
}

And that is it! Simple really *wink*. You can view my working example here

Anybody that speaks to me will know I love jQuery. Its so easy to implement and gives some great and very impressive results without days and days of work. Have fun with this and if you have any difficulties please comment below and I’ll try to help as best as I can.