NS wrote:
How can I use .css positioning to display the pop-up next to the link
rather than a fixed position at the top.
I have reworked your sample. Below is the full thing. Run it for a demo
and explanations.
--
Gus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hide/Show Demo with Javascript</title>
<script type="text/javascript">
<!--
function hideObject(id) {
document.getElementById(id).style.visibility = "hidden";
}
// Show/Hide functions for pointer objects
function showObject(id) {
document.getElementById(id).style.visibility = "visible";
}
//-->
</script>
<style type="text/css">
..showpopup {position:relative;}
#ratePopup {visibility:hidden;position:absolute;left:200px;to p:-30px;
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0;
padding: 0;
}
#whatever {visibility:hidden;position:absolute;left:350px;to p:150px;
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0;
padding: 0;
}
..rateHeader {
padding: 5px 5px 5px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #514541;
}
..rateTitle {
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
..rateText {
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
color: #000000;
}
</style>
</head>
<body>
<!-- ***** FIRST LINK AND ITS POPUP ***** -->
<p>Test the DHTML <a href="#" onclick="showObject('ratePopup');return
false;">pop-up</a> link.</p>
<div class="showpopup">
<div id="ratePopup">
<div class="rateHeader">Rate Information</div>
<h1 class="rateTitle">Advance Purchase Rate</h1>
<p class="rateText">Significant savings for purchasing your rate in
advance.</p>
<p><a href="#" onclick="hideObject('ratePopup');return
false;">Close</a></p>
</div>
</div>
<!-- ***** SECOND LINK AND ITS POPUP ***** -->
<p>Test the DHTML <a href="#" onclick="showObject('whatever');return
false;">pop-up</a> link.</p>
<div class="showpopup">
<div id="whatever">
<div class="rateHeader">Rate (WHATEVER) Information</div>
<h1 class="rateTitle">Advance Purchase Rate</h1>
<p class="rateText">Significant savings for purchasing your rate in
advance.</p>
<p><a href="#" onclick="hideObject('whatever');return
false;">Close</a> </p>
</div>
</div>
<p>I won't address any issues regarding merit of using CSS method
vis-a-vis Javascript or any Javascript issues, since I'm a novice,
except to say that:<br>
Use <strong>type="text/javascript"</strong> instead of
<strong>language="JavaScript"</strong> - (you should also use
<strong>type="text/css"</strong>).</p>
<p>I have made some HTML, CSS and Javascript changes - see the source
(the popup was messed up because you used unnecessary
<strong>width:100%;</strong>).
I have only changed the obvious and what I felt was necessary.</p>
<p>As an explanation of the meat (positioning of the popup), note the
following:</p>
<p>I have changed the "showpopup" DIV to be classed and I set the
Position Property to Relative.<br>
I have changed the "ratePopup" DIV to an ID Attribute, since it will be
the one to hide/show and I set the Position Property to Absolute.<br>
This permits positioning of "ratePopup" with TOP/LEFT relative to
"showpopup" and it won't take up any real estate since it is out of the
normal flow.<br>
This is also useful if you plan to use other popups where you will then
want to be able to position them relative to their own wrapper. To
demonstrate this,
I have added a second popup (whatever) to demonstrate.</p>
</body>
</html>
