View Full Version : Div reposition help

07-16-2009, 11:24 PM
1) Script Title: Drop down/ Overlapping Content script

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

3) Describe problem:

Hi guys,

this is probably pretty simple but on this script there are 4 preset locations for the div to appear left-bottom, right-bottom, left-top, right-top...

I want to position the div that appears away from the link used to drop it down. Is this poss?

Here is an eg page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />

<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">

* Ajax Tabs Content script v2.2- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code



<script type="text/javascript" src="ajaxtabs/dropdowncontent.js">

* Drop Down/ Overlapping Content- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<!--Example #1: -->

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<td align="center" valign="top"><table width="1000" border="0" cellspacing="0" cellpadding="0">
<td><p>Demo #1: <a href="open dropdown menu" id="searchlink" rel="subcontent"> OSCE</a></p>
<p> hihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihi hihihih</p> </td>
<p><div id="subcontent" align="left" style="position:absolute; visibility: hidden; border: 1px solid orange; width: 900px; background-image: url(../bg2.png); layer-background-image: url(../bg2.png); top: 39px; left: 12px;">

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>

<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:

dropdowncontent.init("searchlink", "", 300, "click")
dropdowncontent.init("contentlink", "", 300, "click")


<p><a href="javascript: countries.loadajaxpage('external4.htm')">Load "external2.htm" into content container via Ajax</a></p>

<ul id="countrytabs">
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setselectedClassTarget("link") //"link" or "linkparent"



See the script page on DD for the js.

What im really trying to do is have the div that opens be centred horizontally in the page with a vertical offset from the top of the page, rather than open to the 'bottom-right' of the link you click to open it (which is what the js is written to make it do).

Any help would be much appreciated.