My knowledge of Javascript is rudimentary at best (I'm not a coder by trade), but I'm trying to cobble a page together such that there are two divs sitting on top of a jQuery image carousel. This page is the example of what I'm talking about, with this screen grab showing how it should look in proper fighting form: jtroll.com/chd/web/properform.png (as a first-time poster, stackoverflow won't let me attach more than one proper link. Sorry).
My first problem was trying to figure out how to do some sort of positioning trickery so that I could throw both the div #cta_imgbox_learnmore and #img_boxout on top of the jQuery carousel, #slideblock. I made a silly additional wrapper div, called box1_home, thinking this would help in that effort (because when I tried to put those divs inside of #slideblock, it screwed up the image cycle in the carousel).
I did some position:relative tomfoolery, only to realize it was pushing the entire #slideblock down the page according to the height of #cta_imgbox_learnmore. Bad news. So of course, I thought giving #slideblock a negative top margin might be a decent way to hack around this.
Once I added the second div #img_boxout though, it all went to hell. The text I'm trying to flow into that div is being pushed to the side, and I had to add even more ridiculous negative margin to the top of #slideblock. Not cool.
So I guess my question is: what's a better, cleaner, smarter way to do this, that won't screw up the jQuery carousel?
The best way is to get the position of the element you want to use as reference.
Supposing #carrousel as the slider element and #block as the element you want above it (using jQuery) :
var ob = $('#carrousel').offset();
$('#block').css({ 'top': ob.top, 'left': ob.left }).show();
This is just an example. You may have to work those values out to get exacly what you want. Note that you should create #block but hiding it with css, so that it would not show untill it's "his time to shine".
EDIT : The working example :
css
#carrousel_text
{
position: absolute;
display: none;
z-index: 2000; // might need to be changed if you can't see it
top: 0;
left: 0;
width: 200px; // change to whatever you need
height: 100px; // change to whatever you need
background: red; // so that you can see what you're doing
}
js
// the one you already have, do not creae another instance of jquery
jQuery(document).ready(function() {
// gets the top and left position of the #slideblock
var ob = $('#slideblock').offset();
// adds the top and left position to the #carrousel_text and shows it where you want it
// note that you'll have to sum or substract to ob.top and ob.left accordingly to what you visually need, e.g. untill it's in the right place.
$('#carrousel_text').css({ 'top': ob.top+50, 'left': ob.left+50 }).show();
Lastly, you can just insert your #carrousel_text on the markup, anywhere you want (it's irrelevant) and place the other divs inside it, like :
<div id="carrousel_text">
<div id="cta_imgbox_learnmore">
<a id="cta_img_learnmore" href="#" title="Learn More"><span>Learn More</span></a>
</div>
<div id="img_boxout">
<p>Read our story and our methodology in crafting your custom home</p>
</div>
</div>