Friday, April 27, 2012

Spend an hour trying to get window.resize, scrollWidth, Height, etc. to work. Then, jQuery light went off - $(window) cured all.

Once again, I was looking for a solution that jQuery plugins didn't seem to easily solve. I needed popup window in the "lightbox" style that would contain content of different types, and that lightbox layer could be called directly from another function. It was easy as pie to call it from an event (click,load, etc.). Well, to be clear, it was the removal of the layer that needed to be called from another function. The creation of the layer would be called by a click, but the lightbox would need to show a "loading" animation until a certain AJAX function was complete, and then the layer would need to go away.

I started to write it from scratch and got real far with it, but "lightbox" had already done all the dirty work. I just didn't know how to call the "_finish()" function without using some kind of a click type of event. Just calling that function directly didn't work.

I then tried to just removed all the layers created by the lightbox script by dynamically changing of the DIVs to "display:none". This worked as far as removing the layers, but when I clicked to show the layers again, then were all jacked up.

I went by to my home-grown script. First I was having trouble with Safari. It didn't want to extend my popup background layer. I had go through a series of browser specific checks to get the right code for FF, IE, Sarari, etc. Finally, it was working in all browsers. But wait....

I noticed that if I resized the window, it didn't reposition the content and the background did not fill in if I extended the height of the browser window.

First off, jQuery took care of the getting the browser dimensions: $(window).width();, $(window).height();.

Then, it took care of the reizing issue: $(window).resize.

So I created a function that on the resizing of the window, it removed the layers, then recreated them off of the new dimensions. Pretty slick.


No comments:

Post a Comment