RB_redbox {

Hi Craig,

I’m seeing two things that are odd when I try to use RB in my project.

1) When I hit the site from my desktop, it shows the loading .gif and just sits there. Not sure why, but I can’t see the RB contents (project/site is running in a Linux virtual machine).....

2) When I hit the site from another PC, I see the RB content just fine. Thing is, the RB is skewed over to the right side of the screen; is there a way to position the RB somehow? How is it being positioned?

Great plugin!

Chris

OK, , I figured out BOTH of these myself…

1) IE on the local desktop was opening at a small window size than the RB I was trying to display. So it was never displaying. Might want to check that in the setWindowPosition or setOverlaySize methods.

2) I had set the size of the page I was using as the source of the RB ajax call to be width:100%. When set the underlying size of that page to a specific number (800px), it worked.

Thanks again for a great plugin.

Chris

David Svensson

Thanks a lot for this!

Smithy

One minor nit: redbox now seems to cause the page to scroll to the top before showing the dialog. This breaks the ui for large data tables that are many screens tall. Redbox should save it’s last scroll position and return there, or not reset the scroll position at all when it opens.

Smithy

To fix the scroll issue:

Comment out both calls to:

Element.scrollTo('RB_window');

Then in SetWindowPosition(), change the last line to:

$("RB_window").style['top'] = (window.pageYOffset + ((pagesize[1] - height)/2)) + "px";

Craig

Thanks Smithy, that’s a good point. I wacked in the scroll up code because I wasn’t happy that the redbox was being well positioned across all browsers.

The SetWindowPosition change you mention might fix this, although I’d probably rather see something a bit more like Fixed positioning. The problem there seems to be that “position: fixed” doesn’t work in IE, and there are javascript issues related to capturing scroll events performed with the mouse wheel.

Your solution might be the best of a bad lot, although I’d be interested to hear from anyone who has a good cross-browser fixed positioning implimentation.

cheers,

Craig

Smithy

Being ‘well positioned’ in this case is equivalent to being equally broken across all platforms, no? Check the Yahoo UI lib and dojotoolkit.org to see how they do dialogs that center properly at the current scroll position. It’s a well solved problem, no need to reinvent. ‘position: fixed’ would be overkill.

Leonardo

hi Craig , can you explain me how to submit a form using redbox y have been traying but a i can’t get it

Thanks

jm

It works great for me but i dont understand how to add a “close” link. I use more than one redbox on one page.

jm

Please ignore my last post.
Is there a way to close the redbox when i click outside of it ?

Craig

Hi jm,

I decided not to put in that “close on click outside” behaviour because I was worried about people doing it by accident, and closing important forms. However, it’s easy to add that in your own apps. Just use javascript to attatch an event handler to the RB_overlay div, and on it’s click event, call RedBox.close(). I’ve never tried it, but that’s the same thing that the close button does, so it should work fine. If you want this to apply to all redboxes, you could pop the change into redbox.js, although you would have to remember that change if you were upgrading to a subsequent redbox version.

jm

Thanks Craig for this info. I’ll give it a try this afternoon.

And many thanks for this great piece of software :-)
I will implement it in some pages of the next version of www.scoopeo.com, the first digg-like in french :-)

Yonatan

Hi Great stuff, I had a minor problem with the set position,
it got a negative value, so the top was out of the screen. just added a brute force check :
$(“RB_window”).style[‘top’] = ((pagesize¹ – height)/2) + “px”;
//make sure top is positive
if ( ((pagesize¹ – height)/2)
RB_window”).style[‘top’] = “10px” ;
}

BazScott

Hi, good plugin, just one thing though I have tried Smithys fix above to stop scrolling but it doesnt work for me I still get the page scrolling back to the top. Any other things to check for to see what is going wrong?

Craig

Hi Baz,

The line of javascript that does the scrolling looks like this:
Element.scrollTo('RB_window');

It occurs in two places. If you don’t want it to scroll, you’ll need to remove those two lines as well as applying Smithy’s fix.

Neeraj Kumar

It seems that the third demo in the demo page needs improvement. On firefox it works like a charm.

On IE, it scrolls all the way down and there is nothing in the screen. I need to scroll up to see the box. I’m not sure why the screen scrolled all the way down when I clicked the third link which is right in the front page.

Redbox looks promising though.

- Neeraj

Craig

You’re quite right Neeraj. I’ve had a couple of submissions on this and haven’t had time to incorporate them yet. If you look at the code in the comment by Smithy, above, that will help a little. I hope to have another minor release of redbox out within the week to fix these problems.

James Stewart

I’ve been working with redbox for a project and finding it very useful. Thanks. I’m using it in a few places along with our permissions system to intercept ajax requests and display the login form in a redbox. To do that I initiate the redbox in my RJS template and then trigger another AJAX request (equivalent to link_to_remote_redbox) to load its content.

But yesterday another of our developers switched prototype to version 1.5.0_rc1 and redbox stopped working. It may be that there’s an unrelated problem, but before I pour too many hours into tracking it down, is there a dependency on a specific version of prototype?

James Stewart

Ah, I found the problem. We’d also lost the hidden div that was supposed to hold the content temporarily.

Fatih Orhan

Thank you for this handy plugin.

joe

does anyone have a hello world example? The examples on this blog don’t have the actual code used to generate them. When I try it I get the entire browser window turning grey… (tried both the link_to and the link_to_remote)

joe

also, I don’t see how the close link works…

Bryan

Joe – the close link “just works” in my experience. Put it in the view you are loading into the redbox, and when you are finished & you click it, it should just close the div and leave you back where you started.

Craig, or anyone else -

does anyone have a good suggestion for how to “update” the page the redbox started on? For example, I list out a bunch of users. Click edit on one, and the edit form pops up in redbox. On AJAX submission, i return a message like “Your edit was successful”. When someone hits the ‘Close this window’ link, I’d like to have the “loading” page refresh, with the changes that were made in the redbox.

In psuedocode, I’m looking for:

when Red Box Window Gets Closed
refresh Beginning Page To Show Changes Done In RedBox();

I suppose I could make my “close this window” link actually just a link_to the original page.. any better suggestions? Thanks in advance.

Randy Walker

I just installed redbox and threw together a quick little div for displaying. It works, except that I have a flash player on the page and redbox doesn’t cover it? It looks like the darkened redbox area is happening behind the flash player. Almost every page of my site has this player on it.

Any ideas how to cover flash elements?

Also, I would like redbox to appear automatically based on criteria in my database. All I see for triggering it are ‘link_to’ commands. Is there another way, or is there a way to call a ‘link_to’ without actually clicking on a link?

Craig

Sorry Randy, I have no idea how to cover flash elements. If you can figure it out, I’ll incorporate it. My plugins are basically code factored out of my own projects, and I don’t have any flash in my sites at present, so it’s not really on my todo list.

As for making it appear automatically, I’ve snuck in a new helper for that, which didn’t appear in the documentation on my blog. It’s called launch_remote_redbox. That helper launches a redbox “right now”, so it’s exactly what you want.

Randy

Hmmm… The flash (9.0) poking through is a weird thing. It fades down with the rest of the page and then ‘pops’ back through full brightness when my hidden div appears. If I resize the window, the flash object ‘clicks’ back to dark, except for one tiny square where I have a dynamic text box. If I can’t make the flash element darken, I’ll try having my form display directly over it. Now, how to change the placement of my form in redbox…

Thank you for the launch_remote_redbox!!! I look forward to checking that out. (it is included in what I already downloaded yesterday, right?)

Milan

I’ve been trying to get a link__redbox with side effects. I thought the launch_remote_redbox was the way (by sneaking it in the onClick, etc. actions of anothe link, together with the side effect), but that … errr… backfired.

Is there a way to include side effects in the link_ helpers (i.e. support the Rails :onclick => param and insert it before JS for redbox (or do you plan on writing one in:)), or any suggestions related to the above?

Thanks for RedBox, Craig! And thanks for supporting it!

Randy

I am new to all of this. I keep getting “you have a nil object where you didn’t expect it” when calling from my view. I have link_to_redbox working fine using same name/id.

What am I missing here?

Randy

nevermind, I found it! I was using the format of link_to_redbox instead of using the format of link_to_remote_redbox.

- VIEW:
”/my_controller/basic_form”}) %>

- The id of my hidden is “hidden_content_basic_form”
- Added a basic_form method to my controller that only contains ‘render :layout => false’
- Put my form in /views/my_controller/basic_form.rhtml.

This is very cool!
Thanks again Craig.

Vann

Has anyone had issues using Redbox with the UJS plugin ? The link_to_redbox helper works fine, but the it won’t close for some reason, firebug doesn’t report any JS errors, so I was wondering if anyone had any ideas as to why this might happen..

It’s a great plugin by the way, thanks Craig.

Craig

Hi Vann,

That’s the second report of that bug (unless they were both you). However, I do have one example of it working. I’ll be looking into this further, as I do like UJS, but certainly dont make any promises with regard to timeline. You might want to carry out further investigation of your own. Does the JS Console report any errors that firebug misses? The close button is not ajax, just pure JS.

Vann

Hey Craig,

Do you think that you can point me to the example with UJS working? I’ll make sure and check the JS console, but firebug seems to do a pretty good job of catching standard JS errors, so I haven’t had to use it in a long time. I’ll keep looking for what the problem seems to be and keep you posted if I find anything….

Craig

Sorry Vann, it’s not web facing. I’ll see if I can deploy it somewhere, or at least post a code snippet.

Marcus Oblak

Hi.
About the scrolling issue, i have added a few code lines to redbox.js so the window will scroll to the redbox viewport, and then after it’s closed, it will scroll back to the position before.
It works on IE 7 (but it should also on 6), and Firefox.

Here are the 2 functions i changed:

showInline: function(id)
{
  this.showOverlay();
  new Effect.Appear('RB_window', {duration: 0.4, queue: 'end'});
},

// changes by mrqzzz
if (navigator.appName == "Microsoft Internet Explorer"){
  _scx_pos = document.body.scrollLeft;
  _scy_pos = document.body.scrollTop;
  }
else{
  _scx_pos = window.pageXOffset;
  _scy_pos = window.pageYOffset;
  }
Element.scrollTo('RB_window');
// end changes

this.cloneWindowContents(id);

and

close: function()
{
  new Effect.Fade('RB_window', {duration: 0.4});
  new Effect.Fade('RB_overlay', {duration: 0.4});
  this.showSelectBoxes();
  // changes by mrqzzz
  window.scrollTo(_scx_pos,_scy_pos);
  // end changes
},

Btw, thanks Craig for the great work!

Marcus Oblak

Adam Roth

Works well in Safari, but in Firefox 2… I get a grayed out box about two inches tall… instead of the whole window graying out. Any ideas?

Adam Roth

{ // Explorer Mac…would also work in Explorer 6 Strict, Mozilla and Safari
yScroll = document.body.offsetHeight;
}
alert( yScroll );

Simply put, yScroll is coming back incorrectly.

Adam Roth

Setting the DTD to strict works…. any way to get this to work in transitional?

Adam Roth

Actually, I take that back. A strict DTD acts the same as the transitional. yScroll is still coming back at 116px when I alert() the value.

Adam Roth

Modifying: if (window.innerHeight && ( window.scrollMaxY >= 0 ) )

does the job.

Alex

I just noticed I have been submitting to an old thread so perhaps I should post here instead…

Has anyone else experienced problems importing forms with “link_to_remote_redbox” and/or “link_to_component_redbox” ?

My form is being created using “remote_form_for” because, when the form is submitted, I am updating the main page that RedBox is sat on top of using RJS.

This is not a problem using “remote_form_for” or RJS. I know this because the identical form is being used with “link_to_redbox” and it works fine.

If I use “link_to_redbox” and embed my form in the main page then it is shown in the RedBox window just fine and functions correctly. Additionally, when inspecting the RedBox window with FireBug I can see the form tags have been imported in to the RedBox window as you would expect.

If I use “link_to_component_redbox” and “view source” then I can see the form I imported using “link_to_component_redbox”. The form that has been imported is correct and includes the form open and close tags as you would expect. When the RedBox window is active however and I inspect it using FireBug then for some reason the form open and close tags have been stripped from the copy inside the RedBox window. Everything inside of the form remains so the form displays however it can not be submitted due to the lack of form tags.

If I use “link_to_remote_redbox” then my form is sent to the browser correctly (I can see this by watching the response using FireBug). When I inspect the form that ends up embedded in the RedBox window however, the form open and close tags have been stripped leaving all of the elements inside and outside of the form.

Am I going crazy, can anybody recreate this problem?

I am using Edge Rails and RedBox installed as a plugin (i.e. RedBox was not installed via svn) and everything seems to be up to date.

Any and all help will be appreciated.

Craig

Hi Alex,

There are a couple of open bugs for redbox, but the one you mention isn’t something that I’ve heard from anyone other than yourself. It seems to be getting you fairly stuck though, so I’m willing to take a look at it for your.

Can you send me a minimal example? That might mean giving me read access to a subversion repository, or mailing me a project in a tarball, or producing a couple of templates that I can drop into a default rails app.

Providing your example runs out of the box, with not setup required other than creating a database, filling out database.yml, and running rake db:migrate, then I’m happy to investigate for you (although it will take a few days). See the “contact” tab at the top of this page for my email address.

Alex

Thanks Craig.

On creating a minimal example, I found the exact circumstance that is causing my problem.

I have emailed you the full source code so you can easily recreate it however I thought I should also post here for anybody else following this thread.

My problem ONLY occurs if I place the “link_to_remote_redbox” inside a HTML form on my main page. You would want to do this for example if the RedBox is specific to a form input element so the link is placed directly next to the input element.

The problem appears to be that “link_to_remote_redbox” imports the content that is to be shown in the RedBox window into a hidden div directly next to the link. If “link_to_remote_redbox” is sat inside a form and the content to be shown in the RedBox window includes a form then we end up with a form inside a form.

This is what is causing my problems.

The same problem occurs with “link_to_component_redbox” for the same reasons.

If “link_to_remote_redbox” and “link_to_component_redbox” imported the content in to a hidden div elsewhere on my page (outside of the form that the link sits in) then I am fairly sure this would fix the problem.

If it is not possible to do this seamlessly, then being able to specify the ID of a hidden div to import to for “link_to_remote_redbox” and “link_to_component_redbox” I think would be a suitable solution.

Craig

Thanks Alex, and well spotted. I might be able to address this at the same time that I look at one of my other problems, being the fact that inlined redboxes are cloned from elsewhere in the page and thus cause duplicate ids. I have far too much to do for clients at the moment, but I really will try and find time to crank out a few redbox fixes within the week.

Eric Hansen

I came across a problem in the redbox plugin. If you display a local DIV in a redbox window, redbox will clone the DIV you specify and put it in a redbox. The problem is that now you have two DIVs with the same ID in your HTML document. See the code below from redbox.js:

showInline: function(id)
{
  this.showOverlay();
  new Effect.Appear('RB_window', {duration: 0.4, queue: 'end'});        
  Element.scrollTo('RB_window');
  this.cloneWindowContents(id);
},
cloneWindowContents: function(id)
{
  var content = $(id).cloneNode(true);
  content.style['display'] = 'block';
  $('RB_window').appendChild(content);  
}

this.setWindowPosition();

I would propose that we change this to:

1.) Grab the string from the original DIV
2.) Store the string in a global variable map indexed by the ID name
3.) Remove the original DIV node from the HTML document
4.) Use the string to create a new DIV and splice that in to the RB_window node

On subsequent invocations, we would skip 1 & 2 and instead pull the string from the global variable map. This would eliminate the problem of having multiple nodes with the same ID on a page.

Eric Hansen

I came across a problem in the redbox plugin. If you display a local DIV in a redbox window, redbox will clone the DIV you specify and put it in a redbox. The problem is that now you have two DIVs with the same ID in your HTML document. See the code below from redbox.js:

showInline: function(id)
{
  this.showOverlay();
  new Effect.Appear('RB_window', {duration: 0.4, queue: 'end'});        
  Element.scrollTo('RB_window');
  this.cloneWindowContents(id);
},
cloneWindowContents: function(id)
{
  var content = $(id).cloneNode(true);
  content.style['display'] = 'block';
  $('RB_window').appendChild(content);  
}

this.setWindowPosition();

I would propose that we change this to:

1.) Grab the string from the original DIV
2.) Store the string in a global variable map indexed by the ID name
3.) Remove the original DIV node from the HTML document
4.) Use the string to create a new DIV and splice that in to the RB_window node

On subsequent invocations, we would skip 1 & 2 and instead pull the string from the global variable map. This would eliminate the problem of having multiple nodes with the same ID on a page.

Craig

Hi Eric,

That cloning issue is currently the biggest bugbear in redbox. It needs to be easy for people to use with an inline hidden block of code. Perhaps we should change the way that people setup an inline redbox, so that they can provide the html within a block. Something like:

Since I'm within a block, I could put HTML here, or render a partial, or whatever.

I’m really swamped with client work. There are a lot of people throwing round ideas for this, and I’d like to see someone take a shot at it. I’m happy to incorporate any patches, and test before releasing, and to give loud and effusive credit for other people’s work. I don’t currently have a project that is suffering from the effects of this bug, so if left to my own devices I might not fix it as fast as some of you.

If you’re planning to work on this, to save duplication of effort, post a note here so that others know.

cheers,

Craig

Smithy

Alex, you’re not the only one. I’m looking at the exact same bug right now. (and I thought I was going insane too ;)

Smithy

Craig I’ll glady buy a pint or two for a fix.

mark

Thanks for the great plugin! In case anyone is having the scrolling problem, I just wanted to point out that Marcus’ fix did work for me (thanks Marcus). However, his example was only for an inline redbox call… if you are doing an ajax call (link_to_remote_redbox) you have to put his code into the ‘loading’ function.

Sebastian

@Adam: I had the same problem – false size of the RB_overlay – in Firefox 2 on Mac, but only with Firebug closed. If I tried it with the Firebug-Console open everything worked fine. Strange…
The fix for the setOverlaySize-Function worked.

@Craig: Thanks a lot for your work!

pascal

This is a great plugin.I made a couple changes to get this working for me on longer pages. Taking code from Lightbox and integrating it into the RedBox Object:

getYScroll: function(){

var yScroll;
},

if (self.pageYOffset) {
    yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){     // Explorer 6 Strict
    yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
    yScroll = document.body.scrollTop;
}

return yScroll;

getPageSize: function(){
},

var xScroll, yScroll;

...See Lightbox Code...

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
return arrayPageSize;

And then updating setOverlaySize and setWindowPosition :

setOverlaySize: function()
{
   var sz = this.getPageSize();
  var pageScroll = this.getYScroll();
  $("RB_overlay").style['height'] = sz[1] +"px";
  $("RB_overlay").style['top'] = pageScroll +"px";
},

setWindowPosition: function()
{
  ...Begining of Func Remove...
  var arrayPageSize = this.getPageSize();
  var pageScroll = this.getYScroll();
  $("RB_window").style['top'] = (pageScroll + (pagesize[1] - height)/2) + "px";
},

Seems to move the overlay to the correct position without scrolling the page.

pascal

Also, for a hack to prevent the page from being scrolled off of the overlay (it will still jitter annoyingly), try this (Ignores horizontal scrolling and overwrites any existing onscroll functions):

close: function()
 {
   document.onscroll = null;

new Effect.Fade('RB_window', {duration: 0.4});
  new Effect.Fade('RB_overlay', {duration: 0.4});
  this.showSelectBoxes();
},

showOverlay: function()
{
  ...Beginning of Func Removed...
  this.yScroll = this.getYScroll();
  document.onscroll = RedBox.scrollStop;
},

scrollStop: function() {
    window.scrollTo(0,RedBox.yScroll);
},

lindt

thanks for those tips Pascal! Has anyone ran into the problem of displaying a div that has rjs functions and/or Observor methods in it? I present the user with a search form that has live results meant to display below it. it works fine when the div is on a standalone page, but when i try to call it within the redbox, the form displays, but when one starts to type, nothing is populated in the search results (right below it)...

Any help would be appreciated

Carl Youngblood

I’m having problems with this in IE 6 and 7. After applying Adam’s suggestion of window.scrollMaxY >= 0 everything worked well on Firefox. However, on IE 6&7, all sorts of divs on my page are not being covered by the overlay, and they also show through the redbox content itself. If anyone has a solution to this, I would really appreciate some advice.

Carl Youngblood

I also forgot to mention that the overlay is not flush with the left edge of the window on IE.

Johan Bouveng

Carl Youngblood: We have implemented the redbox on a very large project and I had the same issues with that matter and found that it had to do with position:relative’d elements. If you set a negative z-index in a ie specific stylesheet, the error is gone. Be aware that any href’s with negative z-index will be non clickable, u might need to fiddle a little with the order of the elements.

Ivan Asen

Hi Johan Bouveng, what do you mean with “ie specific stylesheet”? I have the same problem – the content from the background is shown in the redbox window even if I change z-index values.

Olle Jonsson

Learn more about effect queues

I found that in redbox.js, you really want to change all the Effects declarations to live in their own scope, instead of hogging the global scope.

To achieve this, rewrite stuff like this:

new Effect.Appear('RB_window', {duration: 1, queue: 'end'});

into the scoped variant (here using the scope name “redboxscope”):

new Effect.Appear('RB_window', {duration: 1, queue: {position:'end', scope:'redboxscope'}});

This made Redbox play nice with my effect-laden website. Ciao.

Johan Bouveng

Ivan Asen: I mean that this only occurs in IE, and you could move out that style overrides to a specific IE one.

Another thing we found out, that much of the problem with the RB_overlay could be fixed by just wrap the RB_overlay in another div that is positioned relative.

Courtney

I am trying to use the launch_remote_redbox, but when it is called it gets stuck on the spinning dial and never renders the view? Any ideas?

Craig

That just means that, at least as far as redbox is aware, the AJAX call never completed successfully. This could be caused by any number of problems. The easiest way to find out is to install the firebug extension for firefox, and examine the result of your ajax request.

Mark

Randy—

You need to set your wmode to opaque or transparent in your flash embed code. That’ll solve your flash poking through issue…

Courtney

Craig I am a bit stumped at what to do. I will attempt to explain what I am trying to do and maybe you can tell me if what I am trying to do is just not possible (although I think anything is possible).

For simplicty sakes I will describe my issue as if it were pretaining to a mp3 player (from a collection of mp3 players), the albums on the mp3 player and the songs that belong to the album.

On one view I am looking at one mp3 player and then rendering in a collection of all the mp3 player’s albums… then from the album partial I am rendering in all the songs that belong to that album.

The album is wrapped around an observe form and the songs are also wrapped around a seperate observe form.

(HERE IS WHERE THE REDBOX COMES IN) Now when I change the rating of a song it runs the action from the observe form. The last part of the action is to check to see if the rating is equal to “awesome”. If it is true then I want it to do a render inline and launch the redbox.

It does launch the redbox but like I mentioned previously it doesn’t get pass the spinning dial. I think it is confused as to where to render in the view.

Any ideas???!!

Thanks

Craig

Hi again,

I haven’t really learnt much there other than that you’re using observe_form. The issues of context aren’t so important. What is important launch_remote_redbox makes an ajax call, and I’m not inclined to waste any more time talking about it until you can tell me that you have seen the ajax call fire of in firebug (or something similar), and that your app has returned a successfull response.

Yes, this could be a redbox problem, but there are a hundred different non-redbox problems that could also cause it, and it’s really easy to elliminate that possibility first by using firebug.

Craig

Sorry folks, that last message sounded grumpy. Capital letters and exclamation marks seem to magically have that effect on me. :)

Courtney

Sorry Craig that my last post was not the most desirable. I did get it fixed. The issue was that my observe form was not updating to anywhere. So it was infact not a redbox issue. Sorry again.

Randy

Thanks for wrapping this up in a plugin. I noticed there was an issue with the overlay when the page content is smaller than the viewport. I messed with the setOverlaySize function and noticed it didn’t use “document.documentElement.clientHeight” so I patched together some modifications from another project (not all of it is mine)

setOverlaySize: function()
{
      if (window.innerHeight && window.scrollMaxY) 
      {    
          yScroll = window.innerHeight + window.scrollMaxY;
      } 
      else if (document.body.scrollHeight &gt; document.body.offsetHeight)
      { // all but Explorer Mac
          yScroll = document.body.scrollHeight;
      } 
      else 
      { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
          yScroll = document.body.offsetHeight;
      }
}

if (self.innerHeight) 
    {    // all except Explorer
        windowHeight = self.innerHeight;
    } 
    else if (document.documentElement && document.documentElement.clientHeight) 
    { // Explorer 6 Strict Mode
        windowHeight = document.documentElement.clientHeight;
    } 
    else if (document.body) 
    { // other Explorers
        windowHeight = document.body.clientHeight;
    }    
$("RB_overlay").style['height'] = yScroll +"px";

// for small pages with total height less then height of the viewport
if(yScroll &lt; windowHeight)
{
    yScroll = windowHeight;
}

Randy

I should have mentioned that I tested it in Firefox, safari, IE6, and IE7. Oh, I liked your podcasts as well :-P.

Ramana

In Internet Explorer (6.x is all I tried), if you have a body with text-align: center; and a fixed-width container div with margin-left: auto; and margin-right: auto; (a central column), then the redbox overlay leaves a gap on the left side of the window, aligning with the left of the central column instead of the left of the window. This is obviously undesirable (it looks awful). I managed to fix it by adding the following to redbox.css:

RB_redbox {

width: 100%;
position: absolute;
top: 0px;
left: 0px; /new/
right: 0px; /new/
}

Note: the redbox is still not vertically positioned properly in Internet Explorer in this situation. Let me know if you can’t recreate the problem – maybe there was something else in my stylesheet causing it.

Ramana

In Safari, if you want to modify elements in the redbox (e.g. disable/enable a submit button based on the value of a checkbox), you must, it appears, hack redbox.js to give the elements of which clones were made for the redbox different ids. Otherwise Safari gets confused about which element to modify. To see what I mean, look at the hack:

cloneWindowContents: function(id)
{
  /* SAFARI HACK FOR CLONING THE FORM ELEMENTS /
  var old_checkbox = $('promise');
  var old_submit   = $('upload');
  var old_file     = $('file');
  / END SAFARI HACK FOR CLONING THE FORM ELEMENTS /
  var content = $(id).cloneNode(true);
  / SAFARI HACK FOR CLONING THE FORM ELEMENTS /
  if (old_checkbox) old_checkbox.id += '_old';
  if (old_submit)   old_submit.id   += '_old';
  if (old_file)     old_file.id     += '_old';
  / END SAFARI HACK FOR CLONING THE FORM ELEMENTS /
  content.style['display'] = 'block';
  $('RB_window').appendChild(content);  
},

this.setWindowPosition();

and

close: function()
{
  new Effect.Fade('RB_window', {duration: 0.4});
  new Effect.Fade('RB_overlay', {duration: 0.4});
  / SAFARI HACK FOR CLONING THE PROMISE CHECKBOX /
  var old_checkbox = $('promise_old');
  var old_submit   = $('upload_old');
  var old_file     = $('file');
  if(old_checkbox) old_checkbox.id = 'promise';
  if(old_submit)   old_submit.id   = 'upload';
  if(old_file)     old_file.id     = 'file';
  / END */
  this.showSelectBoxes();
},

Obviously, if you have elements with variable ids , this will be even more difficult to do. Surely there is a better way! (But I can’t think of it just yet.) The problem, if it’s not clear, is that there are two elements with the same id for each element in the redbox – one hidden on the original page, and one cloned into the redbox. Maybe Safari should pick the one highest up in the tree instead of the buried hidden one? Can you tell it to?

Flashes of ingenuity awaited.

Ramana

My friend Hoan automated and generalized the above hacks and the new code should work in Safari =) Here it is:
New Stuff:

var suffix = ‘RB’;

function walk_tree(func, root) {
func(root);
var children = root.childNodes;
for (var i = 0; i
Redbox2 Stuff:

cloneWindowContents: function(id)
{
  var content = $(id).cloneNode(true);
  add_id_suffixes($(id)); // SAFARI HACK FOR CLONING THE FORM ELEMENTS
  content.style['display'] = 'block';
  $('RB_window').appendChild(content);
},

this.setWindowPosition();

close: function()
{
  /* SAFARI HACK FOR CLONING THE FORM ELEMENTS /
  var root = $('RB_window').childNodes[0];
  del_id_suffixes($(root.id+suffix));
  $('RB_window').removeChild(root);
  / END SAFARI HACK FOR CLONING THE FORM ELEMENTS */
  new Effect.Fade('RB_window', {duration: 0.4});
  new Effect.Fade('RB_overlay', {duration: 0.4});
  this.showSelectBoxes();
},

Naveen

Newb question: Here’s what I’m trying to do. I initiate a redbox from a link on my page. The redbox contains an ajax form, the action of which is linked to a .rjs template. I want to be able to call Redbox.close() from inside the .rjs template, conditional on the form submission being satisfactory – am unable to figure out how.

Basically – my redbox contains a form, and I want to be able to close the redbox on form submission, if the form contents satisfy some conditions.

Highly appreciate any clues.. TIA.

RJ

I have found a bug with Redboc and our favourite browser Internet Explorer.

If you use a centered wrapper div like so

Lots of content goodness here

With the following CSS

div#wrapper {
width: 750px;
margin: auto;
background: #555555;
}

Then when you try and open a remove_redbox “window” the centering of the background shader and the window is off to the right. It looks like the JavaScript is seeing the “Left” side of the screen as the center. I can provide an example page but my JavaScript-fu isn’t good enough to fix it. This works finein Firefox but breaks in Internet Explorer.

ponomar

Very nice site. Please keep updating it. Your site is exactly the kind of sites which make the net surfing so intresting.
adipex alprazolam ambien ativan bontril cialis clonazepam diazepam didrex hydrocodone lorazepam online pharmacy phentermine tramadol valium viagra xanax levitra propecia

David

I encountered the problem (described above by Eric Hansen on Wednesday, November 29, 2006) with RedBox cloning the div it displays. This causes two divs with the same ID to be on the page. Thus when I try to manipulate the div, it changes the clone and not the original. To fix this I added this line:

content.id = 'RB_window_contents'

In the redbox.js file :

cloneWindowContents: function(id)
{
  var content = $(id).cloneNode(true);
  content.id = 'RB_window_contents'
  content.style['display'] = 'block';
  $('RB_window').appendChild(content);  
  this.setWindowPosition();
},

I have not studied the code carefully to determine if this will have bad side-effects, but it certainly fixed my immediate problem

brian@yamabe.net

Is there a way to pass HTML attributes?

brian@yamabe.net

I could add attributes to link_to_redbox, but not link_to_remote_redbox.

Tom

I’ve been trying to use a lightbox as a login for users. If the user successfully logs in, an RJS should be rendered to close the lightbox and update some elements on the page. If the login fails, the lightbox is updated with a login message and forgot password button. I haven’t been able to accomplish this with the Lightbox from Particle Tree. Would Redbox allow me to do this?

Brad

Hi Craig,
Thank you for your contribution. I’d love to use it to be able to create ‘categories on-the-fly’ similar to this Rails Talk post. Is there any way for this to work with RedBox that you’ve come across?

Brad

Hi Craig,
Thank you for your contribution. I’d love to use it to be able to create ‘categories on-the-fly’ similar to this Rails Talk post… http://groups.google.ca/group/rubyonrails-talk/browse_thread/thread/8c1002f17809b6f9/bc7805d6a54418f5?lnk=gst&q=form+inside+a+form&rnum=2. Is there any way for this to work with RedBox that you’ve come across?

Mike

Craig, I’ve used the older version in the past and love it… I want to grab your new version, but I’m getting a rails app error.

tim.jaeger@gmail.com

I am using Redbox and it works fine except on Safari. I am passing variables via Prototype’s $(‘name’).value method into form fields, but they are not passing through properly (even though an alert() shows that they are stored in the variable. Has anyone encountered this problem or have a workaround for it?

Rushabh

Craig – Thanks for making this great plugin and sharing it with us!
Like a few others I had problems while trying to install the plugin and I ended up pasting the code in application helper.

I wrote the following functions to make the redbox close before a link_to_remote function call:

def close_redbox_and_link_to_remote(name, link_to_remote_options = {}, html_options = {})
       link_to_remote_options = redbox_remote_options_v2(link_to_remote_options)
       link_to_remote(name, link_to_remote_options, html_options)
     end

def redbox_remote_options_v2(remote_options)
       remote_options[:loading] = "RedBox.close(); " + remote_options[:loading].to_s
      remote_options
     end

Hope this helps someone else trying to figure out how to do it.

Thomas

First: thanks for providing redbox.

I’ve got a major problem using it: When opening a form within the RedBox and using the validation-mechanisms of Rails, all the flash-error-Messages will return a redirected page displaying the flash rather than just exchanging the DIV-content. Any idea how to easily work around that?

kvs

Thomas, one easy way is to check for @errors in the controller. If any – render :action => ‘errors.rjs’; return; And in this action:

put page.replace_html ‘errors’, errors_format(@errors)

where ‘errors’ is a hidden div element at the top of RedBox windows.

kvs

Thomas, one easy way is to check for @errors in the controller. If any – render :action => ‘errors.rjs’; return; And in this action:

put page.replace_html ‘errors’, errors_format(@errors)

where ‘errors’ is a hidden div element at the top of RedBox windows.

kvs

Rushabh, what about this: (call and action and RedBoxclose())(.rjs template content):

page.delay(1) do
page.visual_effect :fade, ‘RB_overlay’, :duration=>2
page.visual_effect :fade, ‘RB_window’, :duration=>2
end

Z

install link doesnt work!

trying : script/plugin install svn://rubyforge.org/var/svn/ambroseplugins/redbox

Z

install link doesnt work!

trying : script/plugin install svn://rubyforge.org/var/svn/ambroseplugins/redbox

Z

install link doesnt work!

trying : script/plugin install svn://rubyforge.org/var/svn/ambroseplugins/redbox

ThomasS

Hi Craig and everybody,

I get a wrong pageWidth-value for pages with a greater width than roughly 640px. (On a 1280px browser window – is there a connection?) This naturally leads to wrongly positioned redboxes which sucks. I have no idea why the calculation goes wrong for these sizes and if there is a bug having to do with maybe half of the screen width. Has anybody encountered the same problem? Craig? I’m using Firefox.

Thanks,
Thomas

Jim Morris

has anyone rolled up a fix for redbox on ie7 on Vista? the two problems I have are mentioned here but it is hard to see if any of the proposed fixes work.

1. ajax version is squished over to the right
2. it is transparent and text underneath shows through the redbox content.

thanks

kalyan