Tab Content Script and DIV's Problem :(

[Moogleberry]

1) Script Title: Tab Content Script (v2.2)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm

3) Describe problem:

Hi all.

Appreciate any help with this as I'm pulling my hair out, and there's not much left of that lol.

I'm using the above ajax script (Tab Content Script) which I think is brilliant and works perfectly so far. The only problem I am having is with the following. If you navigate to the above URL for this script and then scroll down to demo #2. If you click Tab 2 - you will see that two arbitary DIV's open up - which is what I want to happen on my site also. In my arbitary DIV's, I basically want to 'overlay' an image/content over a certain part of my website using a DIV.

The problem that I have come up against, however, is that if you resize your browser window, the DIVS compensate for that and move with the window - which is what I DO NOT want to happen.

I want to be able to place, say, Arbitrary DIV #1 and #2 in a location where they don't move - regardless of whether or not the browser window is resized, and regardless of what resolution the user is running their browser in.

With a little digging, I have read up on the position: attribute - relative, static, absolute, etc. I have tried setting the Arbitrary DIV's in this example to position:relative (my logic in what I've read is that they would then be positioned relative to the primary DIV, not to the actual page itself. The primary DIV, from what I can see, is called flowercontainer looking at the script) but it doesn't seem to work and everything seems to stretch out of proportion and again, moves when i move the browser window - hence shooting my DIV's right off course when I've purposely over-layed them on something.

Any help is really appreciated on this one. I have spent the last few days reading up on positioning and stuff and have tried everything i can think of to stop this from happening so any help is greatly appreciated.

[Moogleberry]

Just to add abit of additional information...

Let's say I have a table with two colums and one row. I have placed the code for this script into colum number 2, which is located on the right hand side of the page. I would like to basically overlay something over colum 1, let's say for this purpose, an image. I don't want that DIV/Image to move when the page is resized, and again, if the user is running their browser in a different resolution - so I'm assuming I need to be able to like tag/fix this DIV so it's glued down - and using the primary DIV in colum 2 to set the coordinates against?

Thanks again.

[ddadmin]

This sounds just like a CSS positioning issue actually. If I understand you correctly, try giving the column you wish to "anchor" the arbitrary DIVs to a position:relative. Then, give the DIVs a position:absolute. The former when defined causes the left/top values of the later to be relative to the upper left corner of the former container, and not the page. So using Demo #2 on the DD script page for example:

<div id="mycolumn" style="position: relative">

<div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">
Arbitrary DIV 1
</div>

<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>

<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>

</div>

[Moogleberry]

Hi DDAdmin,

Thank you very much for your response and you did understand me correctly.

Here's the code I have so far. The flowerdivcontainer i see (if correct) like the "parent" and then the other DIV's are like the "children", or at least, that's how I'm trying to get this to work. So for example, the head tab, I would want to be absolute in respect to the flowerdivcontainers positioning on the page. How would I order it given this is what I have below?

Again, thank you very much for your time in helping me, it is greatly appreciated!

<div id="virtual" style="display:none; position: absolute; width:603px; height:275px; background-color:black; background-image: url(images/banners/sample1.jpg); border:0px">
</div>

<div id="head" style="display:none; position: absolute; left: 0px; width:1259px; height:274px; background-color:black; background-image: url(images/banners/pan1.jpg); border:0px">
</div>

<div id="testdiv" style="display:none; position: absolute; left: 50px; width:500px; height:500px; background-color:black;border:0px">
</div>

<div id="crest" style="display:none; position: absolute; left: 189px; width:467px; height:52px; border:0px">
<img src="images/crest.gif">
</div>

<div id="ice" style="display:none; position: absolute; top: 36px; width:408px; height:102px; border:0px; background-color:black; background-image: url(images/banners/subs/ice.gif);"></div>

<div id="village" style="display:none; position: absolute; top: 36px; width:408px; height:102px; border:0px; background-color:black; background-image: url(images/banners/subs/village.gif);">
</div>

<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>

<div id="newsletter" style="display:none; overflow: hidden; position: absolute; left: 0px; width:1259px; height:274px; background-color:black; background-image: url(images/banners/pan3.jpg); border:0px"></div>

<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>


<div id="flowerdivcontainer" style="border:0px; width:415px; height: 275px; background-color: #000000; padding: 2px">
</div>

<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="includes/main/welcomepage.php" rel="flowerdivcontainer" class="selected">WELCOME</a></li>
<li><a href="external2.htm" rel="flowerdivcontainer" rev="virtual">HEAD</a></li>
<li><a href="external3.htm" rel="flowerdivcontainer" rev="head,ice">NEWSLETTER</a></li>
<li><a href="external4.htm" rel="flowerdivcontainer" rev="newsletter,village">OFSTED</a></li>
<li><a href="#">VACANCIES</a></li>
</ul>
</div>
<br style="clear: left" />

<script type="text/javascript">

var myflowers=new ddajaxtabs("flowertabs", "flowerdivcontainer")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>

[Moogleberry]

*bump* would really appreciate some help on how i need to structure the above code to work!

[ddadmin]

Hmm if you're trying to get the DIVs above the "flowerdivcontainer" DIV to be positioned relative to it, have you tried just following the technique I mentioned earlier? That is, put those DIVs inside the "flowerdivcontainer" DIV container, with the later being position:relative:

<div id="flowerdivcontainer" style="border:0px; width:415px; height: 275px; background-color: #000000; padding: 2px; position:relative">

<div id="virtual" style="display:none; position: absolute; width:603px; height:275px; background-color:black; background-image: url(images/banners/sample1.jpg); border:0px">
</div>

<div id="head" style="display:none; position: absolute; left: 0px; width:1259px; height:274px; background-color:black; background-image: url(images/banners/pan1.jpg); border:0px">
</div>

<div id="testdiv" style="display:none; position: absolute; left: 50px; width:500px; height:500px; background-color:black;border:0px">
</div>

<div id="crest" style="display:none; position: absolute; left: 189px; width:467px; height:52px; border:0px">
<img src="images/crest.gif">
</div>

<div id="ice" style="display:none; position: absolute; top: 36px; width:408px; height:102px; border:0px; background-color:black; background-image: url(images/banners/subs/ice.gif);"></div>

<div id="village" style="display:none; position: absolute; top: 36px; width:408px; height:102px; border:0px; background-color:black; background-image: url(images/banners/subs/village.gif);">
</div>

<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>

<div id="newsletter" style="display:none; overflow: hidden; position: absolute; left: 0px; width:1259px; height:274px; background-color:black; background-image: url(images/banners/pan3.jpg); border:0px"></div>

<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>

</div>

<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="includes/main/welcomepage.php" rel="flowerdivcontainer" class="selected">WELCOME</a></li>
<li><a href="external2.htm" rel="flowerdivcontainer" rev="virtual">HEAD</a></li>
<li><a href="external3.htm" rel="flowerdivcontainer" rev="head,ice">NEWSLETTER</a></li>
<li><a href="external4.htm" rel="flowerdivcontainer" rev="newsletter,village">OFSTED</a></li>
<li><a href="#">VACANCIES</a></li>
</ul>
</div>
<br style="clear: left" />

<script type="text/javascript">

var myflowers=new ddajaxtabs("flowertabs", "flowerdivcontainer")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>

[Moogleberry]

Hey!

Thanks alot for your help, really appreciate it.

Ok, here's what's happening now. I've restructured the code as you've suggested (with a copy and paste just to make sure it's as-is), so the flowerdiv is the top div with position:relative, and the other divs are set to position:absolute with the flowerdiv ended at the end of the others... now what's happening, when I load the page, and I click one of the tabs (other than the default selected) - it basically links through to the page itself...

so for example, if you clicked the head tab, it would load through to the /external2.htm page instead of opening the virtual div :'(

<li><a href="external2.htm" rel="flowerdivcontainer" rev="virtual">HEAD</a></li>

Any ideas?

Many thanks.

[dgathercole]

Hi Forum members.

Can someone help?

I've been trying to get my head round: http://www.dynamicdrive.com/dynamici...tabcontent.htm.

The problem is that i'd like to use a free webspace but can't figure out how to insert the link in order to make the script function.

Any ideas?

Much appreciated.

[Moogleberry]

Just to add to this, In the browser, I'm getting the following error with the revised code (had a look and can't see what's up);

Line: 170
Char: 4
Error: Object required
Code: 0

This is line 170 in the respective page;

      
<a href="#">Application Form </a><br>

Thanks again for your help ddadmin

[ddadmin]

It's hard to tell just based on the line number what the error means. Anyhow, instead of putting the arbitrary DIVs inside the #flowerdivcontainer container itself, try moving them outside and into a different container DIV with position:relative:

<div style="position:relative">

<div id="virtual" style="display:none; position: absolute; width:603px; height:275px; background-color:black; background-image: url(images/banners/sample1.jpg); border:0px">
</div>

<div id="head" style="display:none; position: absolute; left: 0px; width:1259px; height:274px; background-color:black; background-image: url(images/banners/pan1.jpg); border:0px">
</div>

<div id="testdiv" style="display:none; position: absolute; left: 50px; width:500px; height:500px; background-color:black;border:0px">
</div>

<div id="crest" style="display:none; position: absolute; left: 189px; width:467px; height:52px; border:0px">
<img src="images/crest.gif">
</div>

<div id="ice" style="display:none; position: absolute; top: 36px; width:408px; height:102px; border:0px; background-color:black; background-image: url(images/banners/subs/ice.gif);"></div>

<div id="village" style="display:none; position: absolute; top: 36px; width:408px; height:102px; border:0px; background-color:black; background-image: url(images/banners/subs/village.gif);">
</div>

<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>

<div id="newsletter" style="display:none; overflow: hidden; position: absolute; left: 0px; width:1259px; height:274px; background-color:black; background-image: url(images/banners/pan3.jpg); border:0px"></div>

<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>

</div>


<div id="flowerdivcontainer" style="border:0px; width:415px; height: 275px; background-color: #000000; padding: 2px">
</div>

<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="includes/main/welcomepage.php" rel="flowerdivcontainer" class="selected">WELCOME</a></li>
<li><a href="external2.htm" rel="flowerdivcontainer" rev="virtual">HEAD</a></li>
<li><a href="external3.htm" rel="flowerdivcontainer" rev="head,ice">NEWSLETTER</a></li>
<li><a href="external4.htm" rel="flowerdivcontainer" rev="newsletter,village">OFSTED</a></li>
<li><a href="#">VACANCIES</a></li>
</ul>
</div>
<br style="clear: left" />

<script type="text/javascript">

var myflowers=new ddajaxtabs("flowertabs", "flowerdivcontainer")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>