<a href="https://bytes.com/topic/html-css/answers/100749-css-positioning-question">CSS positioning question

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

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

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

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

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

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

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

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

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

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

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

React to native button blinking effect

by: lllomh | last post by:

Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{

Software Development

How to find best mobile app development company in usa

by: Aliciasmith | last post by:

In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...

Mobile Development

Energy Model code modification to account for year dependent interest rate

by: giovanniandrean | last post by:

The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...

Python

Send Current Object to PDF

by: NeoPa | last post by:

Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...

VBA Class Basics

by: NeoPa | last post by:

Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...

Report value list

by: Teri B | last post by:

Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...

Finding a record, and then saving a new record after the record has been amended.

by: nia12 | last post by:

Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...

Access Europe Meeting - Wed 6 Dec - Streamline Your Import/Export Spec Workflow with VBA Classes

by: isladogs | last post by:

The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...

Take a Database to the Next Level

by: GKJR | last post by:

Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...