CSS positioning question

I am relativly new to css positioning and have a question regarding the
display of a DHTML pop-up

Here is the basic HTML I am using:

<html>
<head>
<script language="JavaScript">

</script>
<style>
..ratePopup {
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
..rateHeader {
width: 100%;
padding: 5px 5px 5px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #514541;
}
..rateTitle {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
..rateText {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
color: #000000;
}
</style>

</head>
<body>
<p>Test the DHTML <a href="javascript:showObject();">pop-up</a> link.
<div id="showpopup" style="z-index:1; visibility:hidden;">
<div class="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="javascript:hideObject();">Close</a> </p>
</div>
</div>
</body>
</html>

My problem is that the pop-up link and a short list to follow will be
created in a loop on a .jsp thus creating several links/lists on the
page

How can I use .css positioning to display the pop-up next to the link
rather than a fixed position at the top.

Thanks in advance.

Jul 21 '05 #1

Follow Post Reply

2492

"NS" <ne************@gmail.com> wrote in message
news:11**********************@o13g2000cwo.googlegr oups.com...

I am relativly new to css positioning and have a question regarding the
display of a DHTML pop-up

Here is the basic HTML I am using:

<html>
<head>
<script language="JavaScript">

</script>
<style>
.ratePopup {
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.rateHeader {
width: 100%;
padding: 5px 5px 5px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #514541;
}
.rateTitle {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.rateText {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
color: #000000;
}
</style>

</head>
<body>
<p>Test the DHTML <a href="javascript:showObject();">pop-up</a> link.
<div id="showpopup" style="z-index:1; visibility:hidden;">
<div class="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="javascript:hideObject();">Close</a> </p>
</div>
</div>
</body>
</html>

My problem is that the pop-up link and a short list to follow will be
created in a loop on a .jsp thus creating several links/lists on the
page

How can I use .css positioning to display the pop-up next to the link
rather than a fixed position at the top.
Thanks in advance.

The position of the popup is controlled by JavaScript therefore IMO it
cannot be controlled by CSS.

I believe this is the source of the script:
http://www.mattkruse.com/javascript/...ow/source.html
Look at the x and y properties for a possible method to control the position
of the popup

Look here for a possible alternative using CSS:
http://www.seoconsultants.com/css/menus/vertical/

Good Luck,
me

Jul 21 '05 #2

Ståle Sæbøe

me wrote:

"NS" <ne************@gmail.com> wrote in message
news:11**********************@o13g2000cwo.googlegr oups.com...
I am relativly new to css positioning and have a question regarding the
display of a DHTML pop-up

Here is the basic HTML I am using:

<html>
<head>
<script language="JavaScript">

</script>
<style>
.ratePopup {
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.rateHeader {
width: 100%;
padding: 5px 5px 5px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #514541;
}
.rateTitle {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.rateText {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
color: #000000;
}
</style>

</head>
<body>
<p>Test the DHTML <a href="javascript:showObject();">pop-up</a> link.
<div id="showpopup" style="z-index:1; visibility:hidden;">
<div class="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="javascript:hideObject();">Close</a> </p>
</div>
</div>
</body>
</html>

My problem is that the pop-up link and a short list to follow will be
created in a loop on a .jsp thus creating several links/lists on the
page

How can I use .css positioning to display the pop-up next to the link
rather than a fixed position at the top.
Thanks in advance.
The position of the popup is controlled by JavaScript therefore IMO it
cannot be controlled by CSS. No, it is controlled by the html or the script that generates the html
along with any positioning properties set with an inline style or with CSS.
I believe this is the source of the script:
http://www.mattkruse.com/javascript/...ow/source.html
Look at the x and y properties for a possible method to control the position
of the popup

This is not the source.

"me" seems to believe this is a popup window, but all the script does is
to change the display property of the <div> tag that has the
id="showpopup". attribute.

However, he is right about the problem being in the javascript. The
script only works on elements with the id="showpopup". You need to make
the script more flexible. I do not know javascript so I cannot tell you
how. I only answered because "me" was way off target.

regards,
steel

Jul 21 '05 #3

"Ståle Sæbøe" <ot*****@tdz.no> wrote in message
news:42******@news.broadpark.no...

me wrote:
"NS" <ne************@gmail.com> wrote in message
news:11**********************@o13g2000cwo.googlegr oups.com...
I am relativly new to css positioning and have a question regarding the
display of a DHTML pop-up

Here is the basic HTML I am using:

<html>
<head>
<script language="JavaScript">

</script>
<style>
.ratePopup {
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.rateHeader {
width: 100%;
padding: 5px 5px 5px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #514541;
}
.rateTitle {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.rateText {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
color: #000000;
}
</style>

</head>
<body>
<p>Test the DHTML <a href="javascript:showObject();">pop-up</a> link.
<div id="showpopup" style="z-index:1; visibility:hidden;">
<div class="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="javascript:hideObject();">Close</a> </p>
</div>
</div>
</body>
</html>

My problem is that the pop-up link and a short list to follow will be
created in a loop on a .jsp thus creating several links/lists on the
page

How can I use .css positioning to display the pop-up next to the link
rather than a fixed position at the top.
Thanks in advance.
The position of the popup is controlled by JavaScript therefore IMO it
cannot be controlled by CSS.
No, it is controlled by the html or the script that generates the html
along with any positioning properties set with an inline style or with

CSS.

I see no CSS in the script that sets the position that the OP is asking
about.
I believe this is the source of the script:
http://www.mattkruse.com/javascript/...ow/source.html
Look at the x and y properties for a possible method to control the position of the popup

This is not the source.

If it's not the source then it serves the same purpose. Perhaps the OP found
a modified version. Even if it isn't the exact same script it is available
for free. I believe it may be possible for the OP to use the positioning
properties the author cites in his script, if not then he will at least know
if the script is capable of meeting his needs.
"me" seems to believe this is a popup window, but all the script does is
to change the display property of the <div> tag that has the
id="showpopup". attribute.

However, he is right about the problem being in the javascript. The
script only works on elements with the id="showpopup". You need to make
the script more flexible. I do not know javascript so I cannot tell you
how. I only answered because "me" was way off target.

If anyone believes that last sentence then I have some fool's gold I'd like
to sell them.
Signed,
me

Jul 21 '05 #4

Ståle Sæbøe

me wrote:

The position of the popup is controlled by JavaScript therefore IMO it
cannot be controlled by CSS.
No, it is controlled by the html or the script that generates the html
along with any positioning properties set with an inline style or with
CSS.

I see no CSS in the script that sets the position that the OP is asking
about.

First: There is no script that sets the position at all. You
misunderstand the whole concept even after I spoon fed you the basics.
The script only affects the display property of a <div> element.
Positioning is not the issue.

Second: You said that in your opinion the position could not be
controlled by CSS. This is not a matter of opinion. CSS can affect the
position of the <div> element in question.

Third: I did not say that the CSS was present.

Are you willfully attempting to mislead people seeking guidance?
If it's not the source then it serves the same purpose. Perhaps the OP found
a modified version.

What do you think the purpose of the script is?

The issue: The script hides/shows the <div> element with the
id="showpopup". If the element is repeated the same script will either
show/hide all of them at the same time, or the entire page will fail
because the id property must be unique.

Solution: Create unique id properties for each repeated <div> and modify
the script so it can be passed a variable id value. I have no idea how
to do this

Perhaps you just change the
function hideObject() to function hideObject(id)
getElementById('showpopup') to getElementById(id) where *id* is a variable?

Jul 21 '05 #5

Gus Richter

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">

</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>

<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>

<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>

Jul 21 '05 #6

"Ståle Sæbøe" <ot*****@tdz.no> wrote in message
news:42********@news.broadpark.no...

Are you willfully attempting to mislead people seeking guidance?

You sir have nobly defeated me and I surrender to your superior logic.
Please forgive my unpardonable transgression. If you spare me I promise to
never again spread what you may consider to be misleading information. You
are most amusing. Have a nice day.
Signed,
me

Jul 21 '05 #7

Jan Roland Eriksson

On Wed, 30 Mar 2005 07:57:26 +0200, Ståle Sæbøe <ot*****@tdz.no> wrote:

[...]

The issue: The script hides/shows the <div> element with the
id="showpopup". If the element is repeated...

If the element is repeated within the doc instance with the same
id="showpopup" attribute markup, the doc instance markup has invalid
syntax.

--
Rex

Jul 21 '05 #8

Ståle Sæbøe

Jan Roland Eriksson wrote:

On Wed, 30 Mar 2005 07:57:26 +0200, Ståle Sæbøe <ot*****@tdz.no> wrote:

[...]

The issue: The script hides/shows the <div> element with the
id="showpopup". If the element is repeated...

If the element is repeated within the doc instance with the same
id="showpopup" attribute markup, the doc instance markup has invalid
syntax.

Really? invalid syntax? In which context? HTML4, XHTML?

Ståle Sæbøe wrote:
If the element is repeated the same script will either show/hide all of
them at the same time, or the entire page will fail because the id
property must be unique.

....

And your point is?

Jul 21 '05 #9

Jan Roland Eriksson

On Fri, 01 Apr 2005 00:08:46 +0200, Ståle Sæbøe <ot*****@tdz.no> wrote:

Jan Roland Eriksson wrote:
On Wed, 30 Mar 2005 07:57:26 +0200, Ståle Sæbøe <ot*****@tdz.no> wrote:
[...]
The issue: The script hides/shows the <div> element with the
id="showpopup". If the element is repeated...
If the element is repeated within the doc instance with the same
id="showpopup" attribute markup, the doc instance markup has invalid
syntax.

Really? invalid syntax? In which context? HTML4, XHTML?
Both.

My local installations of (o)nsgmls flags any entry of 'id' with
duplicated values as a syntax error. I'm pretty sure that your mileage
is the same here.
Ståle Sæbøe wrote:
If the element is repeated the same script will either show/hide all of
them at the same time, or the entire page will fail because the id
property must be unique.
I know what you wrote.
And your point is?

That only the latter half of what you wrote is true; a script that
appears to "work" on several identical entries of 'id' has been started
in error in the first place.

--
Rex

Jul 21 '05 #10

Ståle Sæbøe

Jan Roland Eriksson wrote:

That only the latter half of what you wrote is true; a script that
appears to "work" on several identical entries of 'id' has been started
in error in the first place.

True, but I did not think HTML401 technically required id to be unique
so even if the script failed the HTML could still be valid. But I know
its splitting hairs. Using nonunique id would be silly in the first place :p

Jul 21 '05 #11

Martin Bialasinski

Ståle Sæbøe <ot*****@tdz.no> wrote:

True, but I did not think HTML401 technically required id to be
unique

It does.

http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

Bye,
Martin

Jul 21 '05 #12

CSS positioning question

This discussion thread is closed

Similar topics