Blog » Greybox Redux
Posted February 10th, 2006 by John ResigAnother popular DOM/CSS/Javascript project popped up today: Greybox. It’s a lot like the popular lightbox, but is used to display web sites on top of your current page.
I saw this as another great opportunity to demonstrate how easy it is to make great code with jQuery. I modified greybox in two phases.
- First step was to make greybox work unobtrusively (they embeded javascript into the page to make it work) and to fix the broken back-button (you’d have to hit back twice after visiting a site).
- The next step was to completely overhaul the library itself and remove the need for Amir’s personal Javascript library - leaving it to run completely using jQuery. The resulting code is only about 1.2kb (compared to the original 12kb of the original).
A demo and a download are available if you’re interested in seeing some more examples of how jQuery works in a practical application. Enjoy!
February 11th, 2006 at 4:01 am
It looks like a simple way to add small context related tutorials to a site: add a “help” button, and have it display a - sequence of - page(s) in a greybox.
Great.
February 11th, 2006 at 5:17 am
I only just had had the time to notice the broken back button in the original greybox that you already come up with this.
I am impressed.
One question. Wouldn’t you prefer, as a general rule, to use e.preventDefault() rather than returning false (which I understand also cancels the bubbling up of the event) in the $(”a.greybox”).click()? I believe this would ensure you don’t break other behaviours of the page relying, say, on a $(”body”).click() - or am I missing a point somewhere?
That’s how I’m using jQuery’s event handling, and I wonder whether there is any specific reason why you opted for cancelling all further event handling rather than only the default execution.
Kudos again, jquery is the first js library I couldn’t resist using for real. Working with JS has just become so much quicker, and the code has become a lot more auto-documenting and easy to review.
February 11th, 2006 at 8:44 am
it doesn’t work if Prototype - 1.4 - is present.
February 11th, 2006 at 12:14 pm
Alain Do you have an example page running with the two, together? I’d like to see what the problem is.
Andrea I probably should make the preventDefault explicit - but I’m having a hard time deciding if that’s what I should do. I’m finding that, more often than not, I can preventDefault and have it continue to work like I want it to. I guess the best example is:
$("a").click(function(e){ alert("hello!"); e.preventDefault(); return false; });Some very simple code just became much longer and hard to understand. There’s gotta be a better meeting point for this. Please let me know what you think about this, because it’s obviously still a point of confusion.
February 11th, 2006 at 1:30 pm
From the ‘base events’ documentation I understand that writing e.preventDefault() is redundant if your event handling code also returns false, so to me the alternatives seem to be the following:
1. make use of the event argument (e) and finish the routine with e.preventDefault();
2. simply return false;
Version 2 is so much simpler but prevents the click from being handled by ancestor elements, possibly interfering with other active scripts.
To make the code both do only what it must do and be more understandable by visitors looking for examples they can undestand at the first glance, maybe you should rather use more self-explanatory argument names and a short comment:
$("a").click(function(clickEvent){ alert("Hi There!"); clickEvent.preventDefault(); // don't follow the link });But it’s really only a detail…
February 11th, 2006 at 6:45 pm
John,
>> does not work with prototype
>Do you have an example page..
Easy to reproduce
1/ in , add prototype.js
2/ in test.html, add “” after .. greybox.js
problem: when you click, no more greybox, just a standard link following.
note: tested on a Mac
February 12th, 2006 at 6:49 pm
Andrea & John,
Just FYI, I wasn’t understanding what exactly you meant by preventDefault() until I read Andrea’s post and the comment associated with it. It makes perfect sense in the more explicit manner (which Andrea wrote up a snippet of code to demonstrate) what the function does.
February 20th, 2006 at 7:16 pm
WRT to Alain’s note (”Doesn’t work with Prototype”), here’s some JS Console bits from FF 1.5:
note the only change I’ve made is to add the Prototype import, and to pull jquery locally:
On Load
=====
Error: $ is not defined
Source File: http://cirqe/js/jquery.js
Line: 18
On Click
=====
Error: Selector expected. Ruleset ignored due to bad selector.
Source File: http://www.google.com/
Line: 5
Error: Unexpected end of file while searching for closing } of invalid rule set.
Source File: http://www.google.com/
Line: 6
February 28th, 2006 at 6:30 pm
Is it me or is this script not working?
I’m getting “TypeError: o.SetAttribute is not a Function” on FireFox 1.0.7
works in IE 6 but the animation is strange and every window has scrollbars bot vert and horiz.
WinXP pro sp2
This script needs more work.
Keep it up
February 28th, 2006 at 7:08 pm
Allan: Sorry about the bug, it was due to a fix that I rolled into the code last night. I just fixed it and pushed the code live. Sorry about that.
March 12th, 2006 at 5:35 am
Wow, great job :]!
Kind regards
amix
April 28th, 2006 at 8:39 am
This is great! Well done.
It seems to have issues in Safari? Instead of popping up a greybox it just goes straight to the webpage. Am I doing something wrong, or is this not compatiable?
Bravo!
May 12th, 2006 at 10:34 am
Having problems getting this to work, even though I downloaded the same set of files, I get half baked items - the div does not completely cover the page, it looks like a 40px horizontal div on the top. Also, it sometimes goes directly to the page - I’m using IE 6.
May 21st, 2006 at 3:30 am
Great job with this! I’m impressed by how lightweight jQuery is.
This would be perfect solution for a project I’m developing except for one thing: It would be great if it were possible to set the script up so that all links inside the box (or even specific links inside the box) would open up back in the primary browser window instead of the greybox.
Does anyone have a suggestion for what I might change to accomplish this?
July 10th, 2006 at 3:57 pm
[…] GreyBox Redux [Descargar][Demo][Plugin Wordpress] […]
July 29th, 2006 at 5:13 am
Hi,
great code,
just one issue, when i have a greybox link in a 1 screen webpage alls good, but when i have the greybox link say 3 screens down a page - once the link is pressed nothing noticable happens on screen until you scroll back upto the top of the page - the top of the page has the greybox window displaying the linked page and the rest of the screen greyed out - its like only the top ’screen’ section of the page gets ‘greyboxed’
Does anyone know a workaround for this?
Cheers
Justin
August 6th, 2006 at 2:54 pm
Regarding Justin’s remark above, I have a few changes that you can use to have the box be centered in the screen, and remain centered even on window scroll events.
Add this after $(window).resize(GB_position);:
$(window).scroll(GB_position);
Change GB_position to:
function GB_position()
{
var de = document.documentElement;
var h = self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var iebody=(document.compatMode && document.compatMode != “BackCompat”)? document.documentElement : document.body;
var dsocleft=document.all? iebody.scrollLeft : pageXOffset;
var dsoctop=document.all? iebody.scrollTop : pageYOffset;
var height = h
I hope that all formatted properly.
-Tom
August 6th, 2006 at 2:59 pm
Looks like that was not formatted well. You can download the updated greybox.js file here: http://swampfoot.googlepages.com/greybox.js
The only changes are an updated GB_position function, and listening for window scroll events.
-Tom
August 10th, 2006 at 11:32 pm
Thanks Tom.
just tested the new version, it now works great with multi screen pages (http://jquery.com/blog/2006/02/10/greybox-redux/#comment-1030)
Cheers
Justin
August 15th, 2006 at 1:54 am
[…] Here is another version of GreyBox. GreyBox - Redux http://jquery.com/blog/2006/02/10/greybox-redux/ […]
October 2nd, 2006 at 11:04 pm
[…] I’ve been using SlideShowPro for awhile now–it’s a really great customizable photo slideshow flash component. Recently I was working on a project that needed to extend the possibilities of this component beyond what was offered. So, here we go again tweaking the hell out of the software to get it working with Lightbox v2.0, Thickbox, Greybox, and Greybox Redux. I’ve managed to get everything working properly and I’m currently in the process of writing a tutorial on how to integrate these projects together. Check back within the next day or two to nab the tutorial. […]
October 9th, 2006 at 9:01 pm
Here’s a patch so GB_ANIMATION doesn’t have to be set externally. Also, added a feature to disable the overlay’s click action… (for cases where you want them to only close via the close button).
— greybox.js 2006-02-10 19:30:52.000000000 -0800
+++ new/greybox.js 2006-10-09 18:52:22.000000000 -0700
@@ -8,16 +8,26 @@
var GB_DONE = false;
var GB_HEIGHT = 400;
var GB_WIDTH = 400;
+var GB_ANIMATION = true;
+var GB_OVERLAY_CLICKABLE = true;
-function GB_show(caption, url, height, width) {
+function GB_show(caption, url, height, width, animate, overlay_clickable) {
GB_HEIGHT = height || 400;
GB_WIDTH = width || 400;
+ if(typeof(overlay_clickable) == ‘undefined’) {
+ overlay_clickable = GB_OVERLAY_CLICKABLE;
+ }
+ if(typeof(animate) == ‘undefined’) {
+ animate = GB_ANIMATION;
+ }
if(!GB_DONE) {
$(document.body)
.append(”"
+ “”);
$(”#GB_window img”).click(GB_hide);
- $(”#GB_overlay”).click(GB_hide);
+ if(overlay_clickable) {
+ $(”#GB_overlay”).click(GB_hide);
+ }
$(window).resize(GB_position);
GB_DONE = true;
}
@@ -29,7 +39,7 @@
$(”#GB_overlay”).show();
GB_position();
- if(GB_ANIMATION)
+ if(animate)
$(”#GB_window”).slideDown(”slow”);
else
$(”#GB_window”).show();
October 10th, 2006 at 6:27 am
Hi,
Is it possible to link to within a specific page, i tried using (see below) and linking to that but it doesn’t seem to work. it just opens up at the top of the page and not where its supposed to
ie
the greybox link
Note
which links to the middle this page
Ugrading info
Cheers
Justin
October 11th, 2006 at 5:31 am
sorry the post didnt turn out as i mean
1. in your webpage have a greybox “a href” to “a name” in the moddle of your traget file, and have greybox go to that “a name:
hope that makes sense
cheers
justin
October 16th, 2006 at 1:57 am
[…] Here is another version of GreyBox. GreyBox - Redux http://jquery.com/blog/2006/02/10/greybox-redux/ […]
October 19th, 2006 at 4:29 am
it works great froma link but how can i call a greybox redux from a form (on submit to open the page in a greybox redux) ?
October 31st, 2006 at 7:10 am
Hello Guys,
This js looks like a great gem.
I am encountering a problem being able to use it.
If i put it as first element after starts it will run ok.
However, if i put it on the position where I want it displayed it won’r work.
This position is after the following DIVs open (they all close after the greybox):
how shall I format the 3rd line below:
var GB_ANIMATION = true;
$(document).ready(function(){
$(”a.greybox”).click(function(){
var t = this.title || $(this).text() || this.href;
GB_show(t,this.href,590,765);
return false;
});
});
i’ve tried with:
$(”#main .column a.greybox”).click(function(){
but it didn’t work
keep up the good work
many thanks,
Mihai
November 9th, 2006 at 7:16 pm
Great simple plug-in!
Does anyone know how to remove the space at the bottom of the greybox (below the horizontal scrollbar)? In GB_position, I see that it is subtracting 32 pixels off the iframe height. This appears to be causing the gap, but if you change the value to zero you get two scrollbars.
Any ideas?
January 15th, 2007 at 8:08 pm
In Firefox I get 2 vertical scrollbars. In IE I have to scroll to the right to get the 2nd scroll bar, which I need to scroll down the page. I’ve checked out your demo and you seem to behaving the same trouble.
February 9th, 2007 at 5:15 pm
i want to make greybox redux launch when body onLoads…
how do i go about doing this?
March 15th, 2007 at 8:09 am
[…] So, I’m just going though the source code of Javascript Toolkit and I come to know that Greybox Redux is pretty good toolkit and has very sample implementation. […]
April 8th, 2007 at 5:42 pm
Am I missing something or does this script not allow dynamic sizing? If I want to use it in an image gallery, and not all images are the same size, if it can’t auto-detect the image size, maybe it can allow us to specify the size manually in the anchor tag itself?
I was all set to jump on this script for my band site, but this one-size-for-all limitation is pushing me towards lightbox/thickbox.
April 21st, 2007 at 9:48 am
[…] Lightbox JS | Lightbox JS v2.0 | iBox | ThickBox Multifaceted | Lightbox | LightWindow v1.1 | Greybox | HoverLightbox Redux | Slightly ThickerBox 1.7 | Lightbox with moo.fx | Leightbox | Prototype | Lightbox Plus | Lightbox Plugin for WordPress | GreyBox Plugin for WordPress | Litebox | LITBox | Slimbox | Highslide JS | subModal | Greybox Redux | Suckerfish HoverLightbox | JonDesigns SmoothGallery […]
June 20th, 2007 at 8:11 pm
Hello! Good Site! Thanks you! qxfecuheswy
June 26th, 2007 at 9:22 pm
If you want to add a loading image that hides once the iframe is loaded, just change the document.body.append to the following:
$(document.body)
.append(”" +
“” +
“”);
Then in your iframe, hide the loading image when the document is loaded:
$(document).ready(function() {
parent.parent.$(’#GB_loader’).hide();
});
Hope that all pasted in ok
June 26th, 2007 at 9:29 pm
Apparently it didn’t… think the comment board needs a little htmlentities love
At any rate it’s not too difficult but if you need the code for the loading animation drop me an email isawufall at yahoo
July 28th, 2007 at 1:11 pm
interesting thank you…
breast augmentation southern california san diego breast augmentation
August 4th, 2007 at 11:28 pm
Any way to make it so that when I open a Greybox window (a one page, like an image) clicking the back button on the browser will actually close the greybox window instead of going back ?
September 19th, 2007 at 1:11 pm
big book guest pizza sausage
big book guest pizza sausage
October 5th, 2007 at 2:39 pm
buy cialis link
buy cialis link
October 8th, 2007 at 2:11 pm
Hi,
My wish list make the window movable, and fix the 2 scrollers issue (2 vertical scoller bar).
Thanks
October 13th, 2007 at 2:13 pm
[…] So, I’m just going though the source code of Javascript Toolkit and I come to know that Greybox Redux is pretty good toolkit and has very sample implementation. […]
October 13th, 2007 at 3:44 pm
[…] Source and Demo ~ http://jquery.com/blog/2006/02/10/greybox-redux/ […]
October 23rd, 2007 at 12:02 am
car costa del enterprise rent sol
car costa del enterprise rent sol
October 25th, 2007 at 9:11 am
I’ve got two problems with Greybox, hopefully someone can help
1) If the page requires vertical scrolling because the content is too much, then kicking off the greybox on a link “down” in the page doesn’t cover the whole entire page and places the box itself up on the “first page”… this behaivor is both on IE7 and FF2… for an example of what i mean, check out (http://www.morningz.com/linked/greybox/test.htm), scroll all the way to the bottom and click the click
2) In firefox, the “window close” link doesn’t work, it’s kind of like some of my header area is “above” it and the overlay , but there is no z-index set on any my existing code/css
thanks in advance
October 25th, 2007 at 9:47 am
Ooops.. i misred what the fix that Tom Zellman posted… that took care of #1…… still poking around in the CSS to try to get #2 to behave in FF
October 30th, 2007 at 5:17 pm
holiday
holiday
November 4th, 2007 at 5:12 pm
buy-phentermine-on-line-no-prescriptions
buy-phentermine-on-line-no-prescriptions
November 10th, 2007 at 12:26 am
sint maarten car rental
sint maarten car rental
November 12th, 2007 at 10:25 pm
a
a
November 15th, 2007 at 8:04 pm
coupon for budget car rental
coupon for budget car rental
November 29th, 2007 at 1:22 am
Anyone know how to prevent the box from going away by pressing the esc button or clicking outside of the box?
thanks
March 22nd, 2008 at 12:25 pm
Greetings! Today
completely changed system and all links which were in bookmarks were lost. Including the link on
jquery.com ! 6 hours searched for a site on the Internet also has just now found through http://google.com/
X-rum, I can not find your number ICQ write to me please!!!
March 23rd, 2008 at 4:34 am
I am displaying flash videos in a Greybox Redux and am using “the updated greybox.js file here: http://swampfoot.googlepages.com/greybox.js” from above…
I have a problem that I need someone’s help on…
When I close the modal window the flash video keeps playing even though it is no longer visible…
However if I use another modal script called “videoBox” it does not have that problem.
Any suggestions?
March 25th, 2008 at 6:30 am
Hello,
I like the “Greybox Redux”. But I miss the fullscreen feature, which is a feature of the original Greybox implementation.
So I tried to implement it by myself. What do you think about it?
— greybox_old.js 2006-02-11 04:30:52.000000000 +0100
+++ greybox.js 2008-03-25 12:21:20.000000000 +0100
@@ -5,13 +5,20 @@
* License: LGPL (read more in LGPL.txt)
*/
+var WinHeight = self.innerHeight ||
+ jQuery.boxModel && document.documentElement.clientHeight ||
+ document.body.clientHeight || 440;
+var WinWidth = self.innerWidth ||
+ jQuery.boxModel && document.documentElement.clientWidth ||
+ document.body.clientWidth || 440;
+
var GB_DONE = false;
-var GB_HEIGHT = 400;
-var GB_WIDTH = 400;
+var GB_HEIGHT = Math.round(WinHeight - (WinHeight/100)*10);
+var GB_WIDTH = Math.round(WinWidth - (WinWidth/100)*10);
function GB_show(caption, url, height, width) {
- GB_HEIGHT = height || 400;
- GB_WIDTH = width || 400;
+ GB_HEIGHT = height || GB_HEIGHT;
+ GB_WIDTH = width || GB_WIDTH;
if(!GB_DONE) {
$(document.body)
.append(”"
~Bernd
May 9th, 2008 at 5:18 pm
Hi all, I’m relatively new to jQuery and am trying to learn as much as i can.
I have written a function called GetComments() and which does a $.get() to retrieve the data entered in the greybox window.
what is the best way to get a function to be called after the greybox window is closed?
I modified the greybox.js as follows:
function GB_hide() {
$(”#GB_window,#GB_overlay”).hide();
GetComments(); //