CSS positioning question

me · Jul 21 '05, 01:37 AM

Re: CSS positioning question

"NS" <neil.santaanna @gmail.com> wrote in message
news:1112117606 .756410.182540@ o13g2000cwo.goo glegroups.com.. .[color=blue]
> 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="JavaS cript">
> 
> </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="javascrip t:showObject(); ">pop-up</a> link.
> <div id="showpopup" style="z-index:1; visibility:hidd en;">
> <div class="ratePopu p">
> <div class="rateHead er">Rate Information</div>
> <h1 class="rateTitl e">Advance Purchase Rate</h1>
> <p class="rateText ">Significa nt savings for purchasing your rate in
> advance.</p>
> <p><a href="javascrip t: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.[/color]

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:

Page not found · GitHub Pages

http://www.mattkruse.com/javascript/popupwindow/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:

Page not found - SEO Consultants

http://www.seoconsultants.com/css/menus/vertical/

Good Luck,
me

**Ståle Sæbøe** · Jul 21 '05, 01:37 AM

Re: CSS positioning question

me wrote:[color=blue]
> "NS" <neil.santaanna @gmail.com> wrote in message
> news:1112117606 .756410.182540@ o13g2000cwo.goo glegroups.com.. .
>[color=green]
>>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="JavaS cript">
>>
>></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="javascrip t:showObject(); ">pop-up</a> link.
>><div id="showpopup" style="z-index:1; visibility:hidd en;">
>><div class="ratePopu p">
>><div class="rateHead er">Rate Information</div>
>><h1 class="rateTitl e">Advance Purchase Rate</h1>
>><p class="rateText ">Significa nt savings for purchasing your rate in
>>advance.</p>
>><p><a href="javascrip t: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.[/color][/color]
[color=blue]
> The position of the popup is controlled by JavaScript therefore IMO it
> cannot be controlled by CSS.[/color]
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.
[color=blue]
> 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[/color]
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

me · Jul 21 '05, 01:37 AM

Re: CSS positioning question

"Ståle Sæbøe" <othmaar@tdz.no > wrote in message
news:4249f9f7@n ews.broadpark.n o...[color=blue]
> me wrote:[color=green]
> > "NS" <neil.santaanna @gmail.com> wrote in message
> > news:1112117606 .756410.182540@ o13g2000cwo.goo glegroups.com.. .
> >[color=darkred]
> >>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="JavaS cript">
> >>
> >></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="javascrip t:showObject(); ">pop-up</a> link.
> >><div id="showpopup" style="z-index:1; visibility:hidd en;">
> >><div class="ratePopu p">
> >><div class="rateHead er">Rate Information</div>
> >><h1 class="rateTitl e">Advance Purchase Rate</h1>
> >><p class="rateText ">Significa nt savings for purchasing your rate in
> >>advance.</p>
> >><p><a href="javascrip t: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.[/color][/color]
>[color=green]
> > The position of the popup is controlled by JavaScript therefore IMO it
> > cannot be controlled by CSS.[/color]
>
> 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[/color]
CSS.

I see no CSS in the script that sets the position that the OP is asking
about.
[color=blue][color=green]
> > 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[/color][/color]
position[color=blue][color=green]
> > of the popup[/color]
>
> This is not the source.[/color]

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.
[color=blue]
> "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.[/color]

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

**Ståle Sæbøe** · Jul 21 '05, 01:37 AM

Re: CSS positioning question

me wrote:[color=blue][color=green][color=darkred]
>>>The position of the popup is controlled by JavaScript therefore IMO it
>>>cannot be controlled by CSS.[/color]
>>
>>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.[/color]
>
> I see no CSS in the script that sets the position that the OP is asking
> about.[/color]
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?
[color=blue]
> If it's not the source then it serves the same purpose. Perhaps the OP found
> a modified version.[/color]
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?

**Gus Richter** · Jul 21 '05, 01:37 AM

Re: CSS positioning question

NS wrote:[color=blue]
> How can I use .css positioning to display the pop-up next to the link
> rather than a fixed position at the top.
>[/color]

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:relat ive;}
#ratePopup {visibility:hid den;position:ab solute;left:200 px;top:-30px;
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0;
padding: 0;
}
#whatever {visibility:hid den;position:ab solute;left:350 px;top: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="showOb ject('ratePopup ');return
false;">pop-up</a> link.</p>
<div class="showpopu p">
<div id="ratePopup" >
<div class="rateHead er">Rate Information</div>
<h1 class="rateTitl e">Advance Purchase Rate</h1>
<p class="rateText ">Significa nt savings for purchasing your rate in
advance.</p>
<p><a href="#" onclick="hideOb ject('ratePopup ');return
false;">Close</a></p>
</div>
</div>

<p>Test the DHTML <a href="#" onclick="showOb ject('whatever' );return
false;">pop-up</a> link.</p>
<div class="showpopu p">
<div id="whatever">
<div class="rateHead er">Rate (WHATEVER) Information</div>
<h1 class="rateTitl e">Advance Purchase Rate</h1>
<p class="rateText ">Significa nt savings for purchasing your rate in
advance.</p>
<p><a href="#" onclick="hideOb ject('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="t ext/javascript"</strong> instead of
<strong>languag e="JavaScript "</strong> - (you should also use
<strong>type="t ext/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:1 00%;</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>

me · Jul 21 '05, 01:37 AM

Re: CSS positioning question

"Ståle Sæbøe" <othmaar@tdz.no > wrote in message
news:424a411e$1 @news.broadpark .no...[color=blue]
>
> Are you willfully attempting to mislead people seeking guidance?[/color]

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

**Jan Roland Eriksson** · Jul 21 '05, 01:37 AM

Re: CSS positioning question

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

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

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

--
Rex

**Ståle Sæbøe** · Jul 21 '05, 01:37 AM

Re: CSS positioning question

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

**Jan Roland Eriksson** · Jul 21 '05, 01:37 AM

Re: CSS positioning question

On Fri, 01 Apr 2005 00:08:46 +0200, Ståle Sæbøe <othmaar@tdz.no > wrote:
[color=blue]
>Jan Roland Eriksson wrote:[/color]
[color=blue][color=green]
>> On Wed, 30 Mar 2005 07:57:26 +0200, Ståle Sæbøe <othmaar@tdz.no > wrote:
>> [...][color=darkred]
>>>The issue: The script hides/shows the <div> element with the
>>>id="showpopu p". If the element is repeated...[/color][/color][/color]
[color=blue][color=green]
>> If the element is repeated within the doc instance with the same
>> id="showpopup" attribute markup, the doc instance markup has invalid
>> syntax.[/color][/color]
[color=blue]
>Really? invalid syntax? In which context? HTML4, XHTML?[/color]

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.
[color=blue]
>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.[/color]

I know what you wrote.
[color=blue]
>And your point is?[/color]

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

**Ståle Sæbøe** · Jul 21 '05, 01:38 AM

Re: CSS positioning question

Jan Roland Eriksson wrote:
[color=blue]
> 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.
>[/color]
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

**Martin Bialasinski** · Jul 21 '05, 01:38 AM

Re: CSS positioning question

Ståle Sæbøe <othmaar@tdz.no > wrote:
[color=blue]
> True, but I did not think HTML401 technically required id to be
> unique[/color]

It does.

The global structure of an HTML document

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

Bye,
Martin

CSS positioning question

CSS positioning question

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment