Couple of months back, one of our clients requested an enhancement - To show some parts of the application in pop ups. I told him it would be pretty easy. I gave him the link of Redbox and said we have done this many times, it should be easy. His reply was… “Scroll up and down the pages, the pop up doesn’t seem to be moving with the page” . I said “Yes, it doesn’t”. He said he wants that to happen.
After looking around for next couple of hours, I came across Thickbox. Now how could I miss this at the first place. It was what I exactly wanted for sometime now. And it had support for iframe also. So I went ahead and downloaded the required files namely jquery-latest.js, thickbox.js and thickbox.css. For those who don’t know about jquery – Jquery is a Javascript library to handle browser events, add AJAX features to your application etc. In next 15 minutes I was ready with the sample code to check if things really work and to my disappointment it didn’t work and moreover my existing AJAX features broke. When I opened the jquery library I found that it also uses ‘$’ like prototype.js, hence a conflict.
The solution for this problem is described here.
After making the required changes it worked. I was happy, client was happy until one fine day SSL came into picture. I use nginx as my web server and had done SSL setup before. I could setup the SSL but when I clicked one of the links which use thickbox to open up the popup, it just opened the content of the popup on a new page. After playing with the code from sometime I found that the j-query file gets truncated because its too big and also the page takes lot of time to download.
Jquery provides a compact version of its library. Using this file solved my problem.