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

Subscribe Post Reply

2614

"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

by: Bryan R. Meyer | last post by:

Hello Everyone, I am in the process of redesigning my web page and I ran into a problem while using CSS. I have laid out my web page with auto margins so that the content is centered. I assume...

HTML / CSS

Footer css positioning problem

by: Tim Charles | last post by:

Hello I am close to finishing my first properly css-friendly site (at least I hope it is), and am looking for some general feedback, plus a specific question answered, if possible. ...

HTML / CSS

Positioning context - does it work?

by: rajek | last post by:

I posted a similar question yesterday, but didn't get an answer that resolved the issue. (Thanks to those who tried though.) The background: I've read in books and online that if you have one...

HTML / CSS

radio/Checkbox absolute positioning

by: Mr.Clean | last post by:

I'm having trouble with this. The checkbox is no where near where it is supposed to be and the radio button is not at 206 px away from the left of the window. Looks bad in IE6, even worse in...

HTML / CSS

Positioning of the control at runtime....

by: Johnson Smith | last post by:

Question is related to ASP.Net and controlling the position of these controls. I am using html table to placce my web controls. I am displaying same datagrid and calendar controls at clicks of...

ASP.NET

What's so terrible about absolute positioning?

by: Alan Silver | last post by:

Hello, Having been a light reader of this ng for a few months now (after several years absence), I have noticed that absolute positioning seems to be considered a Very Bad Thing around here....

HTML / CSS

Mixing floats, positioning and offsets

by: Bill Norton | last post by:

I've been experimenting with floats, positioning and offsets (top, left, etc.) to see what happens when you mix the properties together. All this may be old news to most of you, but it was...

HTML / CSS

Help Positioning Images alternative to Tables

by: Howard | last post by:

I have seen a lot of examples of 2 & 3 Collumn layout schemes. But I have not yet found any examples for positioning images and centering them by the browser. I notice that there are CSS...

HTML / CSS

Absolute Positioning / Relative Positioning

by: Froggluver | last post by:

I have some experience with CSS. Just enough to be dangerous in fact. :) I had a general question about positioning. Is it possible create a box that is absolutely positioned on a page, and then...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

CSS positioning question

Similar topics