For the slide down, wouldn't setting your area to position: absolute,
then positioning it, hiding it, and finally calling .slideDown() on it
do the trick?
It would seem to me that your difficulties here are more CSS based than
jQuery based (I'm dealing with this type of issue myself regarding
tables). So, the CSS way to have your area appear over the images
without moving the images is to use a position:absolute, and maybe a
z-index : XXX (where XXX is greater than the level of the images).
Maybe something like this? (warning totally off the top of my head, not
run in a browser, or tested in any way...)
<style>
.trigger { font-weight: bold; }
img { border : none; }
.detail {
position : absolute;
display: none;
}
</style>
<div class="trigger">Show Area</div>
<img src="me.gif">
<div class="detail">
<ul>
<li>This is</li>
<li>a detail</li>
<li>area.</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".trigger").click( function () {
//Code would go here to set the top/left of the detail div
//to match the trigger area.
// - Remembering you'd need the .offest().top of the trigger
// AND the offsetHeight of the trigger as well to determine
// the "top" of your div.
$(".detail").slideDown();
});
});
</script>
I *think* that'll get you going. I think the core is that you will be
dealing with absolutely positioned elements.
Hope that helps.
Shawn
Rick Faircloth wrote:
> Hi, all, (especially Klaus, if you’re around)…
>
> Can the Tab 3 plug-in be used to do the following?
>
> - I want to have an area at the top of a page showing photos
> rotating via the Innerfade plug-in
>
> - When I mouseover a tab created by Tab 3, I’d like for the
> information display to slide in from the top “over” the photos rather
> than forcing the rotating photo area to slide down.
>
> - The “information display” that would slide down would be a large
> panel that would contain further navigation or information
>
> The only part of the above that is not obvious is getting the tabs
> content to slide down “over” the images, while they
>
> stay in place.
>
> What I want to simulate is what _www.AtlantaFalcons.com_
> <http://www.AtlantaFalcons.com> is doing with their menu at the top of
> their pages.
>
> Thanks,
>
> Rick
>
