Question

I’m trying to recreate the ‘Overlay and Shadow Classes’ effect used here: http://jqueryui.com/themeroller/ with some difficulty. I’d like to apply it to one element (only overlay that element, center the content on that element, etc) like they did; and I can’t find anything suggesting they used some jQuery function to do it. It seems like they just used css classes. Should I learn all about their css classes and use those? or is there a quick jqueryui solution out there?

Answer 1

Well, you can achieve the effect with either CSS or JQuery. But really, it’s just some simple CSS classes. It uses a very simple concept of positioning. The container that holds your element needs to have relative positioning, and the element inside will have absolute positioning. When an element is absolute positioned inside a relative container, the top: 0px and left: 0px of the inside container will be in the top left corner of the outer container. Check out this fiddle for a very simple example.

Now the reason you might use JQuery in this case is if you need to do some calculation. In my fiddle, the width of my container is some static value, but if that container will change it’s size dynamically, you need to add some event handling! Good luck.