mastubbs
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">
<head>
<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>
<style>
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
</style>
<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
***********************************************/
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<!--Example #1: -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="1000" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><p>Demo #1: <a href="open dropdown menu" id="searchlink" rel="subcontent"> OSCE</a></p>
<p> </p>
<p> hihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihi hihihih</p> </td>
</tr>
</table></td>
</tr>
</table>
<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>
</div>
</div></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")
</script>
<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>
</ul>
<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</body>
</html>
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.
Thanks
Matt
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">
<head>
<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>
<style>
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
</style>
<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
***********************************************/
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<!--Example #1: -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="1000" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><p>Demo #1: <a href="open dropdown menu" id="searchlink" rel="subcontent"> OSCE</a></p>
<p> </p>
<p> hihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihi hihihih</p> </td>
</tr>
</table></td>
</tr>
</table>
<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>
</div>
</div></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")
</script>
<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>
</ul>
<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</body>
</html>
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.
Thanks
Matt