Hi folks,

Thanks for the feeback regarding IE. I’m currently fiddling round with getting IE on my mac using parallels, so I’ll able to start testing that out this week. Anyone who is using redbox for production use and needs a fix before then would do well to invistigate it yourself and submit a patch. The code is very simple, the issues are mainly ones of CSS and javascript browser compatibility.

I’ll post a new blog article with the next redbox release (hopefully within a week). If you keep an eye on this feed, I’ll be sure to let you know when it’s ready.

cheers

Craig

Interesting is there a demo anwhere

There is now:
http://www.craigambrose.com/redbox_demo

theres an error in link_to_remote_redbox. it just takes 3 arguments:

link_to_remote_redbox(name, url_options = {}, html_options = {})

sorry to bug you once more.

in the link_to_remote_redbox method: why is the html_options there at all? the html_options aren’t used in the method?

i tried to use html_options to tell it to make a get-link (rather than the standard post-link link_to_remote is generating) but i could’t make it work. shouldn’t there be a possibility to pass this kind of options to the method?

Thanks Niko. I’ve found and fixed that problem, and with post a new release today, however, I’m just dealing with a few javascript issues which I need to resolve first (don’t we all just love javascript). I’ll update this blog entry in a few hours when I’ve made the update.

Redbox has been updated. The html_options hash now works as expected, and I’ve removed the options hash, as there are now no options (such as width or height). I compute everything based on what you put inside the redbox. This makes it much easier to use. If you want it to be a fixed size, put a fixed size div inside it.

It’s still fairly untested in IE, so use in production sites at your own risk.

uhm… no. thank you, actually. :) redbox is NICE!

hm… still no luck with passing options to the link_to_remote function. it works if i hard-code it like this:

return hidden_content + link_to_remote(name, {:update => hidden_content_id, :url => url_options, :loading => “RB_show_loading_redbox()”, :complete => “RB_move_window_contents_from_id(’#{hidden_content_id}’)”, :method=>”get”}, html_options)

notice the :method=>”get” option near the end. i need this because i determine by the http-method if content is edited or saved by my controller-method.

i guess if you want DHH to like you, you should add the possibility to at least choose the method so ppl are able to stay RESTful with their redbox AJAX-calls. ;)

i tried to add this capability but i can’t get it working. :(

for me it works hard-coded like this but i hate to change code of plugins and overriding this within my app seems to be overkill just for this one change.

anyway: i enjoy rebox bigtimes the way it is.

kind regards, niko.

Ah, you’re quite right there niko. I thought you were referring to html_options, but you are in fact referring to the general options array, and as you say, I’m only currently letting the user pass in the hash used for the :url option.

I could put in a method parameter, but there may be other options that they want to supply. Perhaps it’s better if I accept an options hash, and simply add the options redbox needs into it. It’d be even better if in doing so I could preserver any javascript that people added to the :loading and :complete options, and just add my own on the end.

I’ll probably have time to do this in a day or two. If it’s something you need for your work, perhaps you’d like to take a shot at it? (I’m more than happy to pop you into the credits).

If you want to try sending me any code example or anything. You can find my email address by clicking on “Contact” in the header for this website.

Any chance of setting up a Subversion server for this plugin? Being able to add plugins via svn:externals entries makes deployment and keeping up-to-date way easier. Thanks either way!

Yep, got one of those. You can access it via anonymous subversion using the url:

http://svn2.cvsdude.com/craigambrose/plugins/redbox/

I didn’t publish it above because the web output of my subversion host is not compatible with the interesting pile of hacks that we like to lovingly call the rails plugin system. :)

The version that you would get using svn:externals is exactly the same as if you did a normal plugin install, as the web link above directly reads the subversion repository and reformats it into a way that the rails plugin system expects.

Hey Craig,

Thanks for the plugin!

Just threw it up on http://railsworkshops.com and it works like a charm. Actually, I found a bug with the documentation above where you mentioned the use of the link_to_close_redbox. Not sure if the @ sign is intended, but it didn’t work. Nor did the function itself when I removed it. I simply created my own link_to ‘Close’, :onclick => ‘RB_close()’ and it worked great.

-NSHB

Thanks Nathaniel.

Well spotted. It looks like that @ sign was a typo in the blog article (obviously getting a bit excited about textile markup there). Just removing it now. It should be removed. However, aside from that the link_to_close_redbox helper looks correct to me, and appears to work in my demo.

Unlike your implementation above, I’m using link_to_function, which does a similar thing to your link to, except that it also returns false in the onclick event. Perhaps you’re using a version of rails which doesn’t have this method? I’m not sure when it was introduced. I’m testing with rails 1.1.6.

Craig

I need popup dialog forms in rails, and am comparing Redbox with the YUI Container Dialog (example at http://developer.yahoo.com/yui/examples/container/dialog.html )

My app will deployed on very underpowered Wyse WinTerms, running AMD Geode CPUs, so cpu cost is very important. But even on my 2.2GHz P4 dev box, the Redbox click-response is slow compared to YUI.

The YUI implementation consumes about 10% as much cpu as Redbox, according the the perf statistics. Why? Is it because the CSS ‘dimming’ of the rest of the page forces a very expensive re-rendering of the whole page? Is there a way to leave the rest of the page alone?

I’ll experiment with the css myself in an attempt to get a faster low-cpu option.

The code required to implement Redbox is far simpler than the YUI analog, and at an aggregate download size of only 4k (uncompressed, without the spinner), 20x lighter weight as well !

Hi,

Could some one please help me here.

I am using a partial to display the form

'form' %>

and within this partial (_form.rhtm), I have to use the redbox plugin.

Please help.

Thank you
-Paddy

The cpu consumption can be cut to YUI levels by changing “redbox.js” so that each of the four lines starting with “new Effect” have the durations set to 0 instead of 0.4 (seconds).

I also reduced the amount of page fade by changing
Effect.Appear(... to: 0.1, ...)
from it’s prior value of 0.6.

In other words, the page response speed and cpu cost are controlled by the amount of Scriptaculous animation you like.
I guess I’m pretty ‘plain’. :-)

It doesn’t work at all in ie. as usual …

Terrific work but unfortunatly not working in Internet Explorer either here. Even worse it prevents the page from loading…

Would it be possible to fix it ?

Thanks

Hi I’m getting the following errors when trying to install redbox. Any idea how to fix it? Thanks in advance for any help.
Regard
c

Hi I’m getting the following errors when trying to install redbox. Any idea how to fix it? Thanks in advance for any help.
Regard
c

h:~/user/redboxtest$ ruby script/plugin install—force http://www.tinboxsoftware.com/plugins/show/redbox
svn: ’/home/ghost/user/redboxtest/vendor/plugins’ is not a working copy
+ ./redbox/README
+ ./redbox/Rakefile
+ ./redbox/init.rb
+ ./redbox/install.rb
/usr/lib/ruby/1.8/ftools.rb:62:in `stat’: No such file or directory – /home/ghost/user/redboxtest/vendor/plugins/redbox/javascripts/redbox.js (Errno::ENOENT)
from /usr/lib/ruby/1.8/ftools.rb:62:in `syscopy’
from /usr/lib/ruby/1.8/ftools.rb:92:in `copy’
from /home/ghost/user/redboxtest/vendor/plugins/redbox/install.rb:9
from /usr/lib/ruby/gems/1.8/gems/activesupport-1.3.1/lib/active_support/dependencies.rb:140:in `load’
from /usr/lib/ruby/gems/1.8/gems/rails-1.1.6/lib/commands/plugin.rb:194:in `run_install_hook’
from /usr/lib/ruby/gems/1.8/gems/rails-1.1.6/lib/commands/plugin.rb:170:in `install’
from /usr/lib/ruby/gems/1.8/gems/rails-1.1.6/lib/commands/plugin.rb:734:in `parse!’
from /usr/lib/ruby/gems/1.8/gems/rails-1.1.6/lib/commands/plugin.rb:732:in `parse!’
from /usr/lib/ruby/gems/1.8/gems/rails-1.1.6/lib/commands/plugin.rb:447:in `parse!’
from /usr/lib/ruby/gems/1.8/gems/rails-1.1.6/lib/commands/plugin.rb:463:in `parse!’
from /usr/lib/ruby/gems/1.8/gems/rails-1.1.6/lib/commands/plugin.rb:871
from /usr/local/lib/site_ruby/1.8/rubygems/custom_require.rb:27:in `require’
from /usr/lib/ruby/gems/1.8/gems/activesupport-1.3.1/lib/active_support/dependencies.rb:147:in `require’ from script/plugin:3

Hi Caspar

That error ”... is not a working copy” is the sort of message that subversion gives you when you try and do a “svn update” on a folder that wasn’t checked out from subversion. I see you’re doing a force. I suggest deleting your vendor/plgins/redbox directory completelly and trying again.

I also suggest adding a trailing slash to the redbox repository URL, so that it is:

http://www.tinboxsoftware.com/plugins/show/redbox/

My repository is a little fragile in that way. Hopefully we’ll come up with a better way to host plugins soon. Anyway, give that a whirl, and let me know if it still doesn’t work.

Great work, very light and easy to implement !
I started to use it when I realized it seems not to work with internet explorer. Will a IE compatible version be released ?

Thanks a lot

Julien

Please ignore my last post, for some reason I didn’t see your answer Craig. Thanks for working on it. Would like to help but my knowledge of JS is very limited…

Julien

No probs Julien. The IE version is actually working in me development code today. I’ll release that in a couple of days when I’m confident that it’s been tested. Anyone who needs it right this minute and is happy to test it themselves can drop me an email(see the contact section of this website).

Redbox is broken if you scroll the page down.

To re-create the error: Make a page that’s 3 screens tall full of clickable redbox links, scroll all the way down and activate one of the links. The screen will go dark but no dialog window will appear.

The box ends up beneath/below the bottom of the view panel. So technically it’s there, it’s just impossible to see.

Fix:

In RB_get_page_scroll_top I force ‘yScrolltop = 0’.

Then the dialog works on long pages.

function RB_get_page_scroll_top()
{
var yScrolltop;
if (self.pageYOffset) {
yScrolltop = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ //
yScrolltop = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScrolltop = document.body.scrollTop;
}
yScrolltop = 0; // XXX disable scrolltop calculations
arrayPageScroll = new Array(’’,yScrolltop)
return arrayPageScroll;
}

Inline javascript is broken in the redbox. You can’t call any func you’ve defined in ‘script’ tags from the redbox helpers.

In search of a modal dialog solution I found your plugin. Looks nice. How could I use it, to e.g. select some sort of data in the dialog and enter it in a text field or hidden field to process it further? Sorry.. I am too lazy to experiment it out for myself g

Sorry Carsten, you don’t seem to be asking a very specific question, or even a question related to Redbox. I’m busy working through the serious questions and bug reports posted here, so I’m afraid I have little to offer you until you have decided you aren’t too lazy to experiment for yourself and come back with a specific question. :)

hey

the plugin seems to generate some invalid code.
the <script> tag should be <script type=”text/javascript”>, though might be better using the javascript_tag helper, which also adds all the cdata commenting.

here’s the change i did to link_to_remote_redbox:
line #19:

hidden_content = javascript_tag “RB_insert_hidden_content_container(’#{hidden_content_id}’)”

thanks ;)

I am having trouble debugging an issue with using form_remote_for within a page loaded via the redbox.

I have the redbox html and javascript code being created with the following ruby code

‘redbox’,:action=>’settings’ %>

In the partial that is being rendered in the settings method I have

{:action=>'settings_save'},:html=>{:id=>'RB_window'} do |f| -%>

When this code is present the redbox does not load the content. It finds itself in an endless showing the loading image.

When I change the previous line to

everything seems to work as expected (it does not save but the redbox displays form).

I can browse to the action directly, viewing and saving data with no problems. It is only when trying to pull the data in via redbox that I am experiencing issues.

Firebug is not being all that useful in debugging, any hints you might offer in figuring out this issue would be appreciated.

Thanks,
Dan

After a bunch more hours, I found it was my fault. The problem was the id that I was supplying for the form conflicted with the id used for the redbox.

I just installed the plugin, but I’m getting an undefined method for any of the methods (like link_to_redbox). Any ideas? Thanks!

I was pulling my hair out for an hour today wondering why my calendar code (from dynarch.com) wasn’t working with Redbox. I sifted through the Redbox.js file and found out it’s not actually showing the Redbox DIV, but rather cloning it through a call to cloneNode().

Somehow it seems like this would mess up any HTML element within the Redbox with an ID parameter, but especially so with the Dynarch calendar because it’s generated when the page loads, not when the element is clicked.

It’s either that or maybe cloneNode() doesn’t parse JavaScript. Doh.

Hi Adam,

I’d never really considered people putting such complex things inside a redbox. :) The logic behind the cloning is that the redbox should be able to be opened and closed as many times as you like, without refreshing the page, and you should still the contents “fresh” each time. For example, it might be a form, and you don’t want to see what was entered last time you used the form.

However, I can see how this approach would mess up ids, and some javascript stuff.

As an alternative, I think the link_to_remote_redbox should work, because it loads the box each time via ajax, rather than copying it. Does that work ok with your calendar?

Also, I’m happy to have a stab at fixing this problem in general, if you can help me think of what the solution might be to meet both your criteria, and mine. :)

cheers,

Craig

Hi Ben,

Did you try resetting your web server (webrick or whatever)? The redbox plugin adds methods to your helpers in it’s init.rb file. This gets called every time the server process starts.

ActionView::Base.send(:include, RedboxHelper)

I’ve never heard of any problems with this before, but if it doesn’t work at all, and you have no other solution, you could always copy these methods directly to your application helper.

cheers,

Craig

Craig – just wanted to drop you a quick message and say THANKS for this great plug-in!

Is there a way to prevent the RB_window from having inline style? I would like to be able to override it in my stylesheet.

Sorry Ehren. I’m not sure what you mean. The div RB_window contains only one style tag directly in the JS, which is to hide it until it displays. After than, anything you put in your stylesheet should be applied to it as normal. Could you explain your particular problem a little more for me?

Hi Craig can you please explain me how to create a summit form with redbox??? tanks

Hi Leonardo,

You shouldn’t need to do anything unusual for this. However, you’ll need to use ajax for your form. Basically, the form goes inside the redbox. I suggest using link_to_remote_redbox, and loading an action, such as “new”, which renders a rhtml template containing a form.

In that form, use form_remote_tag, and use the :update attribute. This is easier than using RJS, although not as powerful. :update takes an id of the object to update. Give it the id RB_window, and it will replace the whole redbox when you reload the form.

Don’t come back to me with any questions about form_remote_tag, there are better places for that, but if you have that working normally, and have trouble with the redbox side of things, drop me a line.

cheers,

Craig

How about being able to have a Redbox on submit from a form_remote_tag. Similiar to the request above but reversed. I’d like to have a form that when submited returns results in a Redbox. How would someone do that?

Thanks and great stuff.

Craig:
The problem is that the div#RB_window has style attributes that set the width and position of the window. When I pull up the page in firebug, I can see the offending attributes in inline style. I can even delete the inline style in firebug and get my desired results.

So, I can’t figure out where the inline style is coming from, and I’d like it to go away.

Craig: OK, I got it.

Craig,

I’m seeing the same issue described by Ben.

undefined method `link_to_redbox’

Mac OS X and Locomotive 2.0.8…seems to install just fine. Restarted rails app—still no love.

Any ideas? Ben, did you solve this issue on your own?

Darrell

I’ll retract my earlier comment. Go figure. I’m good—the only difference I can note is that I turned off my app before running the install script.

I cannot get the scrolling bug fixed on the latest version. Could someone help me? Thanks!

See the comment by Marcus Oblak on
http://blog.craigambrose.com/articles/2006/09/22/redbox-release-2 for the scrolling fix.

And thanks for a sweet plugin!

This is great so thank you so much for releasing it.

I have fund one issue I can’t resolve. This most likely has more to do with me than RedBox but any assistance will be appreciated.

The content I am showing in the RedBox is a form created using remote_form_for. When this form is submitted, the background page faded by RedBox is updated using RJS.

If I have the form included as part of the original page (in a hidden div) and use link_to_redbox then this works perfectly.

If however I use link_to_remote_redbox it does not. The xmlhttp request is not being actioned at all.

The only thing I can think of is that a whole page of HTML is included as part of the link_to_remote_redbox rather than just the form itself.

Is there a way to give Red Box just the form in response to link_to_remote_redbox rather thana whole page with surrounding html?

Does this sound like it would solve my problem?

Hi Alex,

Just like any rails AJAX request, redbox loads the result of the link_to_remote_redbox call by adding it to the DOM of the current page. Thus, as you say, it must be a valid HTML fragment (such as a form or a div), not a full page with html head and body tags.

So yes, at a rough guess it does sound like removing the layout from the HTML that you return would solve your problem.

Hi Craig,

I finally got round to fixing my code so that only the partial is returned rather than a whole page of HTML.

I have looked at what is returned after RedBox makes it’s xmlhttp request, and it now only receives a div containing a form.

The form in question is generated using remote_form_for and the form renders within RedBox correctly.

On submitting the form however, no xmlhttp request is sent. The form has not changed so I know this is correct. Do you have a working example where a remote_form_for is functioning correctly inside of the RedBox view?

Aha! – I have pinpointed the actual problem I am experiencing (although I have not got to the bottom of what is causing it)

I am using link_to_remote_redbox

Using Firebug, I can see that the xmlhttp request made by RedBox is receiving html with the following structure (edited to simplify):

Title

Using Firebug to inspect the contents of the RB_redbox div however, the and lines are not there.

I have recreated this with the most simplistic 1 input form I can create…. Firebug shows the form start and end tags for forms on the main page – but does not show form start and end tags for the content inside the RedBox window.

This explains why my own xmlhttp request is not being carried out. remote_form_for actions the request on submit, but it won;t interpret a click on the button as a submission of the html is not inside its form tags.

Does RedBox manipulate the HTML it receives in some way before displaying and if so, is there a reason form tags are being stripped? Above you imply this should work so I’m assuming this is a result of either me doing something stupid or a bug in the RedBox code and not a feature.

I just tried the install listed at the top of the page. It brought in the folder into my vender/plugins folder, but it didn’t bring in any files. Just an empty folder. Any thoughts. I’m a rails rookie. So it’s possible I missed something, however, I’ve installed plenty of plugins.

Any help would be appreciated.

Hi Brett,

I just tried it now, and it worked for me. The process relies on communication with two different servers, my svn server and my web server. If one of them was having a hickup, it might cause the problem that you describe. Also, be sure that you haven’t missed that final closing slash on the path.

Other than that, all I guess I suggest that you wait a few minutes and try again. If it’s still not working, you can always use the svn repository directly (it allows anonymous access). It’s at:

http://svn2.cvsdude.com/craigambrose/plugins/redbox/

That wont work with script/plugin though, you’ll need to use a svn:external or something.

@Alex -

Did you find any way to fix the problem with closing slashes being removed? we’re seeing that happen to. I read through the ruby and javascript but I don’t see anything in particular that would cause this. It’s making the XHTML we are using invalid, which makes my CSS guru a sad panda (and breaks te views).

Anyone know why the closing slash on tags like input, img, etc. is being stripped?

Thanks Craig. I tried it again it worked. Not sure what I was doing wrong before. Probably left off that last /.

Is it possible to initiate a redbox from a specific selection in a popdown menu instead of a link?

Thanks

Sure. If the link_to_remote_redbox or button_to_remote_redbox don’t fit your needs, have a look at the javascript they generate (it’s pretty simple stuff), and make your own helper. If it’s useful to others, I’m happy to include it in the plugin.

There is also a launch_remote_redbox which spits out javascript to launch the box straight away, which might be of some use to you.

Thanks Craig! So far it is working great! Redbox is my new favorite obsession!
Thanks

Hi craig i did all that you told me but i did not understand the :update attribute. part can you explain me that

Thanks again
Leonardo

Hi Leonardo, I’m happy to help, but this doesn’t sound like a redbox issue, so this isn’t really the appropriate place to discuss it. The :update option is for form_remote_tag, or link_to_remote, so you can find info about it in the rails API documentation for those functions.

Also, if you haven’t already, I’d suggest reading the “Agile Web Development With Rails (2nd ed)” book, to get an overview of this stuff.

If you understand all this, and I’m just missing the point of your question, drop me a line. :)

Hello,

I have the following setup that I can not get working.  Hidden div on an rhtml page contains a form called by link_to_redbox.  form gets submitted via ajax and i want to update the redbox after the form is submitted via RJS but I keep getting a Proxy error.  Is there a trick to doing this right ?  It works if i dont use RJS and just have it render another rhtml file.  Any ideas ?

Thanks
Adam

I’m trying to do something along the lines of displaying an image using link_to_remote_redbox. I would like the image to be loaded at the time the link is clicked. right now I just see the raw data. Anybody have a suggestion.

Redbox returns HTML, so youd need to return an image tag, Not just the image data itself. A better way to do this would probably be to use the Lightbox library. Lightbox is just for images, and works particularly well for it.

Thanks for a GREAT plugin!

I needed both submit and close the box, e.g. login prompt—I put the following javascript code in a separate jba_redboc.js:
..........................................................................
function jba_close_and_submit(theform, controller_action)
{

RedBox.close();
new Ajax.Updater('content', controller_action, {asynchronous:true, evalScripts:true, parameters:Form.serialize(theform)}); return false;

}
..........................................................................
and submit via a form via:

OnClick="jba_close_and_submit(this.form, '/ctlr/action');" VALUE="Call jba_close_and_submit(this.form)">

This may be of use to those struggling with forms in a redbox. If you are using link_to_remote_redbox, you may notice that the form tags seem to get stripped out somewhere alone the way.

Adding a dummy form and then the real form seemed to get it working in Firefox, but not in IE. IE6 does not show the redbox at all if you have a form in it.

However my solution was to just have a div surrounding some form inputs (no form tags!) with a link_to_remote function which creates a link that POSTS back the content of any element you choose (using :submit) which in this case just needs to be the div with input fields.

Then you can set the :success => “RedBox.close()” to close it up after a successful submit.

Just thought this might clear things up a little, mainly for Alex and Bryan.

Great plugin Craig.

Craig,

Do you think there is any harm in changing the content tag for link_to_remote_redbox from a div to a span. This will give you valid xhtml in almost all situations.

It works fine for me, just wondered if you could see any problem with it and whether you would make the change.

Great stuff! And HAML support would be awesome…

The optimizer could be applied to other things such as well! Anyway good position bro, peace:-)

isn’t subethaedit already free for personal use? :/ yay for ad revenue

how to call it with a non “link_to_*” method, directly from a controller?

redbox window does not appear in my application and fire bug give me that error:
RedBox is not defined
onclick(click clientX=0, clientY=0)

i try the same code in a test rails application and it works.

Is there some known plugins confict?

ok, sorry, no conflict problem. On plugin install, *.css, *.js and images weren’t the good respective directories.
And i use javascript function : “RedBox.showInline(‘my_div_id’)” to call it from controller.

... really nice plugin!

Am I correct in assuming that this only works when the helper is called directly from the template, as opposed to being abstracted away by some custom defined helper?

Am I correct in assuming that this only works when the helper is called directly from the template, as opposed to being abstracted away by some custom defined helper?

It’s actually functionally very similar to Ruby blocks, but with an applied assignment (to whatever the function name is). I wonder if Cheetah can do this, or should do this?

Like the look of the demo but the url for the download of redbox doesnt appear to be working

Like the look of the demo but the url for the download of redbox doesnt appear to be working

The optimizer could be applied to other things such as well! Anyway good position bro, peace:-)

Craig , it very cool blog ! Respect)

Craig , it very cool blog ! Respect)

I had to change
if (window.innerHeight && window.scrollMaxY)
to
if (window.innerHeight && window.scrollMaxY != null)
to make it work also when window.scrollMaxY is 0

Free access to BSD – how to grant it to user from a company, by ssh or ftp. That is my question.

Free access to BSD – how to grant it to user from a company, by ssh or ftp. That is my question.

Does anyone know why the Redbox hides select boxes? My Redbox contains a select drop-down and it is hidden. I can remove the hideSelectBoxes function, but I want to know why it is there?

Fantastic article covering some points I really needed some good usability info for.
Best regards from Poland

Posting or comments in this thread about article created above prohibited here or not?

Thanks for the redbox-demo. Very interesting.

Creation from Ruby or from Wordpress is useless from some points of view. IMHO.

tnx for the plugin!

tnx for the plugin!

Captain on the bridge:) kiddin’ around, nice article! :)

Captain on the bridge:) kiddin’ around, nice article! :)

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

Ruby block with link adding in a line seems to be useless, imho.

Hello everyone. Nice to meet you here ;-) interesting article – i’ll put it in bookmarks, i guess will use it any day.

Predicted values in template editing can be done through any PHP script?

redbox is NICE!

Does anyone know why the Redbox hides select boxes? My Redbox contains a select drop-down and it is hidden. I can remove the hideSelectBoxes function, but I want to know why it is there?

It’s actually functionally very similar to Ruby blocks, but with an applied assignment (to whatever the function name is). I wonder if Cheetah can do this, or should do this?

Creation from Ruby or from Wordpress is useless from some points of view. IMHO.

I had to change
if (window.innerHeight && window.scrollMaxY)
to
if (window.innerHeight && window.scrollMaxY != null)
to make it work also when window.scrollMaxY is 0

Posting or comments in this thread about article created above prohibited here or not?

Free access to BSD – how to grant it to user from a company, by ssh or ftp. That is my question.

Thank for this interesting information.

Hey ho

Ruby block with link adding in a line seems to be useless.

It’s actually functionally very similar to Ruby blocks, but with an applied assignment (to whatever the function name is). I wonder if Cheetah can do this, or should do this?

Fantastic article covering some points I really needed some good usability info for.
Best regards from Poland

Fantastic article covering some points I really needed some good usability info for.
Best regards from Poland

Creation from Ruby or from Wordpress is useless from some points of view. IMHO.

Craig , it very cool blog ! Respect)

Thank for this interesting information.

It’s actually functionally very similar to Ruby blocks, but with an applied assignment (to whatever the function name is). I wonder if Cheetah can do this, or should do this?

I had to change
if (window.innerHeight && window.scrollMaxY)
to
if (window.innerHeight && window.scrollMaxY != null)
to make it work also when window.scrollMaxY is 0

Thanks for this Craig. Works like a champ… Except,
I have a date_select and time_select field which don’t show until I cancel redbox. Any idea why?

I think redbox is NICE! Thanks a lot

it’s a very cool blog ! Respect)

Hi Craig,

Did you know
http://www.methods.co.nz/popup/popup_demo.html# ?
Greetings.

Hi, I cant seem to get my images to be consistent when displaying. sometimes they are centered, other times, they fall down to the left. i have firbug and it seems that the left margin goes to 544, i wonder how that is?

thanks.

Creation from Ruby or from Wordpress is useless from some points of view. IMHO

Thank for this interesting information.

As far as I know it’s actually functionally very similar to Ruby blocks, but with an applied assignment.

Fantastic article covering some points I really needed some good usability info for.
Best regards from Poland

Craig , it very cool blog ! Respect)

Craig, thanks for this plugin!
I have a problem: when use link_to_redbox for view the content of an hidden div, select boxes under div is not visibles

Great plugin but I’m having problems in the same way that Andrea is struggling – any help available?

Hi Andrea and cfnm,

The hiding select boxes is something that I did on purpose. The reason is that IE6 doesn’t apply z-index correctly with select boxes, and so they were showing through the redbox. I took the brute force approach, and just hid all select boxes that were on the page before the redbox opened. This is the same thing that the lightbox library does, for example,

If you don’t want to do this, take a look in redbox,js, and you’ll find a method that hides the select boxes. Just comment it out. Or, perhaps someone could come up with a more general solution that works in IE6 while also not being so wacky in the other browsers.

cheers,

Craig

Thanks for this Craig. Works excellent!

I couldn’t be more satisfied with the plugin, thanks a lot!

@Craig, Andrea, cfnm…

Just getting back to using Redbox and ran into the same issue with select boxes. I’m going to give it a go.

Craig—Since you’re prototype compatible, maybe you could explicitly exclude select boxes whose ancestors include the div you’re trying to show?

If you’re interested in my solution, I added one line to cloneWindowContents()...

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

// ARV: 29-Jun-2007
$$('#RB_window select').each(function(elem){elem.style.visibility = "visible";});

this.setWindowPosition();

IE 6 doesn’t work with forms indeed, as mentioned by Adam above. He gives this solution “However my solution was to just have a div surrounding some form inputs (no form tags!) with a link_to_remote function which creates a link that POSTS back the content of any element you choose (using :submit) which in this case just needs to be the div with input fields.

Then you can set the :success => “RedBox.close()” to close it up after a successful submit.” <—? But i can’t really visualize what’s going on. Can someone please give a code example of this method of passing params without using a form helper?

thank you

I have rails code in which i am using redbox. but its not working properly. would be great if anyone could help me. Below are my code.

'magic', :url => {:action => 'log'}) %> | 
'magic', :url => {:action => 'sig'}) %>
  'say', :action => 'log' %>

and i got the following error when i run this on browser

Showing app/views/say/ajaxSample.rhtml where line #14 raised:

undefined method `link_to_remote_redbox’ for #:0xb718c18c>

Hey, Craig. Thanks for a great little plugin. It does just what I need, without a lot of fluff.

I was having a problem where my link to open the redbox was near the bottom of a long page and when I clicked on the link it would open the redbox, but it wouldn’t show up unless I scrolled back up to the top of the page.

Being a javascript novice I did a little investigating and found the following JS function in the “DOM Popup Kit” (http://www.methods.co.nz/popup/popup.html), which according to the comments borrowed it from Lightbox. I dropped it into redbox.js as a replacement for your function of the same name and it fixed the problem I was having. Heres the pasted code:

// This function from Lightbox v2.02 by Lokesh Dhakar
// (http://www.huddletogether.com/projects/lightbox2/).
//
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
getPageSize: function() {
  var xScroll, yScroll;
},

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

var windowWidth, windowHeight;
if (self.innerHeight) {  // all except Explorer
  windowWidth = self.innerWidth;
  windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
  windowWidth = document.documentElement.clientWidth;
  windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
  windowWidth = document.body.clientWidth;
  windowHeight = document.body.clientHeight;
}

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

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){  
  pageWidth = windowWidth;
} else {
  pageWidth = xScroll;
}

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

I founded that in IE a select that had a selected item lost the selection. After hitting my head against a wall a few times I discovered that’s a bug in IE:

http://support.microsoft.com/kb/829907

That affects RedBox because it clones the container. As a workaround, after the call to cloneNode in cloneWindowContents I iterate in parallel over the selects in the original container and the cloned container to copy selected indices (in my patched redbox content is $(id) and cloned_content is the clone of that one, so variable names are a little different):

if (!!(window.attachEvent && !window.opera)) {
    var selects        = $A(content.getElementsByTagName('SELECT'));
    var cloned_selects = $A(cloned_content.getElementsByTagName('SELECT'));
    selects.zip(cloned_selects).each(function (pair) {
        pair[1].selectedIndex = pair[0].selectedIndex;
    });
}

Hi,

I am using some input text boxes inside the divs,
for which I am using redbox.

But with both, link_to_redbox and link_to_remote_redbox,
I can’t see the cursor position inside the text boxes.

The browser that I am using is Firefox 1.5+

Could you please explain the reason?

Thanks
Vrushali.

Hi Vrushali,

Yep, I get this one too, but I’m afraid I don’t know what is causing it. I’ve seen a similar problem in a few other system, and I suspect that it might have something to do with the browser’s handling of z-index, but I haven’t investigated it properly.

cheers,

Craig

Hi, I’m using Redbox, and it’s really cool.

One thing I can’t figure out is how to control where a popup pops up. It is fixed on my page. If I scroll down a page, then click a redbox link, the popup does not come into view—it’s way up at the top of the page, out of view.

Is there a way to make a redbox pop up relative to the link the user clicks, rather than relative to the top of the page?

Charlie

Thank for this interesting information.

Great plugin but I’m having problems in the same way that Andrea is struggling – any help available?

Great plugin but I’m having problems in the same way that Andrea is struggling – any help available?

it works!

Thanks much for the plugin. I’m also having problems with positioning and sizing while using link_to_remote_redbox. I’ll start simple using the demo to replicate. Open the demo. Resize the window height so it’s smaller than the lightbox. Click the link to open the lightbox. Result: the lightbox is positioned with a negative “top” value (ie, the top portion of the box is unviewable). The js code should probably be adjusted to avoid this situation.

Don’t know much JS but here’s a quick solution to the problem I stated above:

setWindowPosition: function()
{
  var pagesize = this.getPageSize();  
},

$("RB_window").style['width'] = 'auto';
$("RB_window").style['height'] = 'auto';

var dimensions = Element.getDimensions($("RB_window"));
var width = dimensions.width;
var height = dimensions.height;        

if (height > pagesize[1]) {
    $("RB_window").style['top'] = "10px";
} else {
    $("RB_window").style['top'] = ((pagesize[1] - height)/2) + "px";
} 
if (width > pagesize[1]) {
    $("RB_window").style['left'] = "10px";
} else {
$("RB_window").style['left'] = ((pagesize[0] - width)/2) + "px";
}

I am using some input text boxes inside the divs,
for which I am using redbox.

thanks a lot!!!

Yep, I get this one too, but I’m afraid I don’t know what is causing it. I’ve seen a similar problem in a few other system, and I suspect that it might have something to do with the browser’s handling of z-index, but I haven’t investigated it properly.

thanks!

Great plugin but I’m having problems in the same way that Andrea is struggling – any help available?

I am using some input text boxes inside the divs,
for which I am using redbox.

Great plugin but I’m having problems in the same way that Andrea is struggling – any help available?

yes! because no problem

thank you very much!

Great plugin but I’m having problems in the same way that Andrea is struggling – any help available?

Great plugin but I’m having problems in the same way that Andrea is struggling – any help available?

why do you think so?!

One thing I can’t figure out is how to control where a popup pops up. It is fixed on my page. If I scroll down a page, then click a redbox link, the popup does not come into view—it’s way up at the top of the page, out of view.

Hi,
In one of my HTML pages, I am using two divs,
one is displayed using link_to_redbox and other is with link_to_remote_redbox.
Now, in both of the divs I am using a javascript calendar
which can be used to fill up the date, in a text input type.

I need to initialize the calendar object on page load
as below

var cal1 = new calendar3(document.getElementById(‘idofthetextfield’))

and
can be used on as follows,

In this way when you click the canlendar link and select a date, it will fill up the date in the specified text box.

this works fine with link_to_redbox as its just an hidden div inside the my parent(main) html page.
But in case of link_to_remote_redbox,
the above thing doesn’t work.
As in,
I am intializing the calendar object same as above
and it actually creates the object for an input text box which is present in that specific div.
but when i click on the calendar link which is present inside the div, with link_to_remote_redbox,
it searches for the same element in the parent (main html page) and says

“cal1 is not defined”, which is not true.

My question is while cloning the div containts for link_to_remote_redbox, why doesn’t it recoginse
the script tag which is present in that specific div?
Or is it removed while cloning the contains of the div to the main html page?

Any comments / suggessions on this problem are
always welcome.

Thanks,
Vrushali.

i unable to install redbox plugin .please help me

Hi Craig. Redbox is sweet.

It gives me all the functionality I need and is a small js file (I think minimalist simplicity is a sign of good code). I plan to write a blog post about Redbox with some suggested implementation ideas. Watch this space. :)

P.S. I haven’t tried it on IE yet. ;)

Please read my blog post on RedBox:

http://richtextblog.blogspot.com/2007/09/redbox-rules.html

how to save redbox content in database

In this way when you click the canlendar link and select a date, it will fill up the date in the specified text box.

is it removed while cloning the contains of the div to the main html page?

It gives me all the functionality I need and is a small js file (I think minimalist simplicity is a sign of good code). I plan to write a blog post about Redbox with some suggested implementation ideas. Watch this space. :)

i unable to install redbox plugin .please help me

Not sure if this is an error on my part, but I get an error ‘to much recursion – return value.apply(null, [this].concat($A(arguments)));’ when i try and use this with prototype 1.5.1.1. Works great with 1.5.0 though. Anyone else having this issue?

ta for the plugin – was having endless hassles with the remote function even though the generated source code looked fine; turns out the .js & .css wasn’t copied to the public folder DUH

Locomotive users:

If anyone gets a NoMethodError, restart Locomotive. Works fine for me!

Thanks for this fantastic plugin.

http://railsforum.com/viewtopic.php?id=7298

If anyone else has problems installing – see the link above.

hoho!It gives me all the functionality I need and is a small js file (I think minimalist simplicity is a sign of good code). I plan to write a blog post about Redbox with some suggested implementation ideas. Watch this space. :)

i unable to install redbox plugin .please help me