link_to helper, popup option and IE window.open

Ah, the amount of time spent on this could have really been well spent elsewhere!

If you trying to use link_to as below:

  link_to "View Image", { :action => "view" }, :popup => ['new_window_name', 'height=300,width=600']
  # => View Image

Be very careful when you specify 'new_window_name'.

It shouldn't have any embedded spaces in the string.

Else IE will barf and throw a runtime exception! Firefox works fine though.

(re)Positionable Modalbox 1.5.5.1 updates

Download :
modalbox.js
modalbox.css
(let me know if the above links don't work. I am still trying to figure out the best way to allow file downloads from blogspot).

A quick post to describe my changes to modalbox.js:

- (re)Positionable
A user can position Modalbox by specifying the CSS position properties (top, left, right, bottom)
as
Modalbox.show(content, {title: 'my positioned modalbox', top: '200px', left: '100px'});
and then ...
Modalbox.show(content, {title:'my re-positioned modalbox', top: '100px', right: '100px'});

If the CSS position properties are not specified, modalbox pops up in the default position.
If the left and right properties are not specified, the modalbox pops up in the horizontal center.

- enable_rjs
Modalbox treats any content returned by a http request to be html + script. However this craps out with Rails rjs. enable_rjs enables the rjs support so you can do (a bit contrived, but you get the idea)

respond_to do |format|
format.html {
...
}
format.js {
new_form = render_to_string(:partial => 'new', :layout => false)
render :update do |page|
page.call 'Modalbox._insertContent', new_form, { :top => '50px', :right => '100px'}.to_json
page.call 'Modalbox._putContent'
end
}
end

The invocation is
Modalbox.show(content, { enable_rjs: true});


- scroll bars disappear in IE 6
This is described in detail here


Please note that Modalbox behaves like a singleton class. So if you set an option for a content, you need to explicitly reset that option to disable it for subsequent content.
For e.g.
Modalbox.show('/some_rjs_action', {enable_rjs: true});
and then ...
Modalbox.show('/some_action_that_returns_html', {enable_rjs: false});

Let me know if you find any issues.

Njoy!

IE 6 issues with Modalbox 1.5.5 + Protoculous 1.0.2

Update

I had two issues with Modalbox 1.5.5. on IE-6, and this post describes how I fixed them.
a) IE 6 hangs - page related issue
b) IE 6 vertical scrollbar dissappears when Modalbox is displayed - Modalbox issue

I wanted to use Ajax popus for a user signin-signup flow on a website I am building. Since I was already using prototype and effects from prototculous 1.0.2, I looked around for prototype powered popups. I found Modalbox and immediately liked its capabilities. The effects are configurable, and the content to be displayed can be specified as a url, plain html, a dom node or a javascript html object. The Interface api is elegant in its simplicity.
Thanks to Wildbit's team for releasing such a useful product to open source.

The integration with my code was a snap. I fired up the server and tested the code in Firefox. It worked beautifully.
But IE 6/SP2 was another story.
As soon as I clicked on the link to show the Modalbox popup, IE 6 froze.

IE 6/SP2 had worked fine (except that it complains about a js error on page load) on modalbox's home page, so the problem must be my website's page.
If I turned off modalbox transitions, the popup worked, so I figured effects.js was having some problem with the page css.

On digging through, I zeroed in on the padding property that was defined on the body element. It seemed to be causing the IE 6 hang:

body {
margin: auto;
padding: 15px 0px 25px 0px;
}

On removing this property, IE 6 worked fine. Weird huhn!

But another nagging problem remained.
On IE 6, whenever the modalbox overlay appeared, the vertical scrollbar on my web page would disappear. On canceling the popup, the scrollbar would reappear. If you visit modalbox's home page, you will see what I am talking about. It was distracting to me, so I set out to fix it.

On digging through, I found the following function in modalbox.js:

// For IE browsers -- IE requires height to 100% and overflow hidden (taken from lightbox)
_prepareIE: function(height, overflow){
var body = document.getElementsByTagName('body')[0];
body.style.height = height;
body.style.overflow = overflow;

var html = document.getElementsByTagName('html')[0];
html.style.height = height;
html.style.overflow = overflow;
},

The code is setting the body height to 100% which caused the scrollbar to disappear.

I commented out the function, but then found that the MB_overlay div didn't cover the entire screen height.
So I wrote up some code to calculate the screen height and width in pixels and set the div size explictly.

To summarize, I removed all references which set height (and width) to 100% on the body, html and MB_overlay elements. Instead I calculate the screen size and set MB_overlay size accordingly.

The files can be downloaded from here

modalbox.js
modalbox.css

This fixed the scrollbar issue for me.
Hope this is of help to others.