How to center a prompt box??

P

Petesman

I am trying to make a prompt that will ask the user for some input...
If I just use var input = prompt("dafa") everything works fine but the
box is put in the top left corner of the window. I need it to be
centered so... I was doing some research on the net (never really used
much JavaScript before) and was reading the only way to do this is by
making your own custom prompt. In my attempts of doing so I came up
with this code below. The problem I am having now is that when
onMaxLoad_Click() occurs the prompt appears for a split second and then
it goes back to being hidden. Please can someone help me??

1) why is the custom prompt disappearing??

2) is there a better solution than the way i am going about it??


IN HEAD........
<script>
function onMaxLoad_click()
{
document.getElementById("PromptBox").style.visibility = "visible";
}

function jsProcessPromptBox(selection)
{
if (selection == "true")
{
var maxLoad = document.getElementById("PromptBoxInput").value;
document.all.maxLoadBox.value = maxLoad;
}
document.all.PromptBox.style.visibility = "hidden";
}
</script>

..
..
..

in BODY.... Form1........
<div id="PromptBox" style="LEFT: 240px; POSITION: absolute; visibility:
hidden; TOP: 496px">
<div id="PromptBoxHead">What is the max load?</div>
<input id="PromptBoxInput" type="text"><button
onclick="jsProcessPromptBox('true')" type="button">OK</button><button
onclick="jsProcessPromptBox('false')" type="button">CANCEL</button>
</div>
 
F

Fred Oz

Petesman said:
I am trying to make a prompt that will ask the user for some input...

Given that you appear to be using a form with an input text field, why
not just let the user type the value into the text input?
If I just use var input = prompt("dafa") everything works fine but the
box is put in the top left corner of the window. I need it to be
centered so... I was doing some research on the net (never really used
much JavaScript before) and was reading the only way to do this is by
making your own custom prompt. In my attempts of doing so I came up
with this code below. The problem I am having now is that when
onMaxLoad_Click() occurs the prompt appears for a split second and then
it goes back to being hidden. Please can someone help me??

Rather than try to "fix" what you have posted, I've posted an
alternative. It is just an example of what you are trying to do, some
comments and caveats first.

[...]

Use: said:
function onMaxLoad_click()
{
document.getElementById("PromptBox").style.visibility = "visible";

It is usual to test for whether the browser supports getElementsById
and styles on elements before trying to use them. Always allow for the
fact that both may fail.
}

function jsProcessPromptBox(selection)
{
if (selection == "true")

If you pass a boolean, you can test it as one too

if (selsection == true)
{
var maxLoad = document.getElementById("PromptBoxInput").value;
document.all.maxLoadBox.value = maxLoad;

Here you use a combination of getElementsById and document.all without
testing either. IE, and maybe Opera, will work with both but that's
it. The standard is to use getElemetnsById and allow for older IE's
that use document.all. If you have some Netscape 4 visitors, then
you'll need document.layers too. I've included a fix for older IE's
(courtesty of Dr. J).

[...]
<div id="PromptBox" style="LEFT: 240px; POSITION: absolute; visibility:
hidden; TOP: 496px">

If you hide the input from the outset with CSS and then only reveal it
with JavaScript, then anyone without JS (perhaps 10% of surfers) will
never see the prompt. Far better to have the prompt shown, then hide
it with an onload function.

Absolute positioning using hard-coded pixel values is bad. If the user
changes the size of their font, your page elements will be rendered in
different places but the prompt will appear in the same place. Not to
mention if the user has a different font. Guessing where the prompt
should appear is bound to put it in a bad place a good percentage of
the time. For me, your values put the prompt off the bottom of the
window (I rarely use a full screen browser window).

It is possible to detect the size and postion of the browser window,
but not very reliably for all browsers.
<div id="PromptBoxHead">What is the max load?</div>

Does the load have a value? kg? lbs? Newtons?
<input id="PromptBoxInput" type="text"><button
onclick="jsProcessPromptBox('true')" type="button">OK</button><button

Pass a boolean:

onclick="jsProcessPromptBox(true)"

[...]

You have also mixed up buttons and form elements, I think you're better
off just sticking to form elements and using input type="button".

You also need to validate whatever input is put into the prompt, and be
aware that users may circumvent it anyway, so you have to validate
again on the server.

Essentially, what you are trying to do is pointless. Why use a prompt
when a text input will do the job, without any JavaScript or additional
user clicks? You just end up with two inputs holding the same value.
When the form is submitted, you'll have to ignore one of them.

Anyhow, the code below shows how to show/hide a div and its content,
and copy a value from one text input to another. But it is an example
only, it doesn't do anything useful.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Demo page</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

<style type="text/css">
..promptBox
{LEFT: 40px; POSITION: absolute; TOP: 60px; z-index: 100;
width: 100px; height: 100px; background-color: blue;}
</style>

<script type="text/javascript">
function togglePrompt(b,c) {

// Substitute doc.all function to allow for older IEs
if (document.all && !document.getElementById) {
document.getElementById = function(id) {
return document.all[id] }
}
var ele = document.getElementById(b);
if (ele.style.visibility && ele.style.visibility == 'hidden') {
ele.style.visibility = '';
c.focus();
} else {
ele.style.visibility = 'hidden'
}
}

function jsProcessPromptBox(a,b,c,selection) {
/*
validate the input
deal with invalid stuff
at present, whatever is put into PromptBoxInput
is simply transferred to MaxLoad
*/
if (selection == true) b.value = c.value;
togglePrompt(a);
}

</script>
</head>
<body onload="togglePrompt('PromptBox');">

<form action=""><p>
<label for="MaxLoad">Max load (kg) is:<input type="text"
name="MaxLoad" id="MaxLoad" size="10" value="" disabled></label>
<input type="button" value="Edit" onclick="
togglePrompt('PromptBox',this.form.PromptBoxInput);"
<div id="PromptBox" class="promptBox">
<input type="text" name="PromptBoxInput" size="10" value=""><br>
<input type="button" value="OK" onclick="
jsProcessPromptBox('PromptBox',
this.form.MaxLoad,
this.form.PromptBoxInput,
true);
">
<input type="button" value="Cancel" onclick="
jsProcessPromptBox('PromptBox',
this.form.MaxLoad,
this.form.PromptBoxInput,
false);
">
</div>
</form>
</body>
</html>
 
M

Michael Winter

[snip]
It is possible to detect the size and postion of the browser
window, but not very reliably for all browsers.

It's unnecessary, anyway.

[snip]
You have also mixed up buttons and form elements,

Umm, what's that supposed to mean?

[snip]
<style type="text/css">
.promptBox
{LEFT: 40px; POSITION: absolute; TOP: 60px; z-index: 100;
width: 100px; height: 100px; background-color: blue;}

If you want to centre the element, use something like:

.promptBox {
position: absolute;
height: ?em;
width: ?em;
left: 50%;
top: 50%;
margin-left: -(width/2)em;
margin-top: -(height/2)em;
z-index: 100;
}

So if you set the height to 4em and width to 15em, the left margin should
be -7.5em and the top margin should be -2em.

Finally, don't forget that if you set a one colour (foreground or
background) you must set the other colour for that element.

[snip]

Mike
 
P

Petesman

Thanks for replying Fred. The application i am making is on a much
larger scale than what i posted. I need to have a prompt come up
because it is necessary to the client. What it does is simply add the
maxLoad (lbs...but it wont matter to the engineers..they know this
already) to the end of a label already on the page with a part number
in it. I posted a watered down version of what I am trying to do for
simplicity. I understand I need to validate but I haven't even reached
that point yet. For some reason or other the PromptBox is
disappearing. The prompt is only needed on a unique event of a
specific part series. The process goes as follows.

The user selects the specific series for this event to occur.
The user then is presented with another page to create this part..
The user clicks a link that fires the onMaxLoad_Click function...
** as of right now the PromptBox appears for 1 sec and then disappears
before the other function has a chance to fire

All I am asking is why does this happen? and is there an easier way to
go about this..

I tried VBScripts inputbox and it works great. But for some reason it
is conflicting with my JavaScript menu and erroring on mouseover,
onclick,ect. If you know of a way to fix this then this will work too.

** For the custom prompt box my thinking is that after the fact that
the onMaxLoad_click fires the page is then resubmitted and the old
visibility value of PromptBox (hidden) is reloaded and used for the
page.

Also thank you Michael for the tips.. they should be of much help when
I get this stupid thing fixed.
 
F

Fred Oz

Petesman said:
Thanks for replying Fred. The application i am making is on a much
larger scale than what i posted. I need to have a prompt come up
because it is necessary to the client. What it does is simply add the
maxLoad (lbs...but it wont matter to the engineers..they know this
already) to the end of a label already on the page with a part number

If they are real engineers, the should insist that the units be
specified. Even accountants put ($) on every column that deals with
dollars, or (hrs) on every column dealing with hours, etc. Any lurking
engineers care to comment?
in it. I posted a watered down version of what I am trying to do for
simplicity. I understand I need to validate but I haven't even reached
that point yet.

That point should be very early in the process, you should validate
from the very outset. Specify what you want, there are lots of
previous posts to show how to validate for say a float with three
significant digits. It takes perhaps 5 lines to test the input and
respond appropriately if required. And done once, you can make a "test
input" function that tests all inputs with a sinlge call.
For some reason or other the PromptBox is disappearing.

I suspect that the button you are using does not have type="button"
specified. By default, all buttons are submit buttons unless you
specify otherwise using "type". So when your "show the prompt" button
is clicked, the js runs then the form is submitted, which will cause
the page to re-load and hide the prompt again. Look in the address bar
after clicking the "reveal" button.

<URL:http://www.w3.org/TR/html4/interact/forms.html#edef-BUTTON>

So check the button type="button" in the HTML.

[...]
Also thank you Michael for the tips.. they should be of much help when
I get this stupid thing fixed.

I included Mike's method to position the prompt, but as you can see it
puts the top left corner in the centre of the page, you'll have to allow
for the width/height of the box to get it centered.

As for Mike's comment:
Umm, what's that supposed to mean?

What I meant to write was that it's better (to me) to use input buttons
rather than button buttons. Input buttons tend to look better, unless
you are using the extra capability of button buttons (mmm, don't think
that's much clearer, but what the heck).

Included below is code as close as possible to your original. Note you
may want to make the document.all substitution global, or ditch
document.all altogether if this is an intranet app and you don't expect
any old IE browsers to use it.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Copy Text & Values</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<style type="text/css">
..promptBox {
text-align: center;
position: absolute;
height: 4em;
width: 12em;
left: 50%;
top: 50%;
margin-left: -(width/2)em;
margin-top: -(height/2)em;
z-index: 100;
foreground-color: black;
background-color: #ddddee;
border-top: 1px solid #333366;
border-left: 1px solid #333366;
border-right: 3px solid #333366;
border-bottom: 3px solid #333366;
}
body {
font-family: sans-serif;
}
</style>

<script type="text/javascript">

function onMaxLoad_click() {
if (document.all && !document.getElementById) {
document.getElementById = function(id) {
return document.all[id] }
}
document.getElementById("PromptBox").style.display = '';
}

function jsProcessPromptBox(selection) {
if (document.all && !document.getElementById) {
document.getElementById = function(id) {
return document.all[id] }
}

if (selection == true) {
document.getElementById('MaxLoadBox').value =
document.getElementById('PromptBoxInput').value
} else {
document.getElementById('PromptBoxInput').value =
document.getElementById('MaxLoadBox').value;
}
document.getElementById("PromptBox").style.display = 'none';
}
</script>


</head><body onload="jsProcessPromptBox(false);">

<form action=""><p>

<!-- this makes the prompt appear -->
<button type="button" onclick="
onMaxLoad_click();
">Make the prompt appear"</button>

<!-- a text input to show that the input value went somewhere -->
<input type="text" name="MaxLoadBox" id="MaxLoadBox"
size="10" readonly>Max&nbsp;Load&nbsp;(lbs)
</p>


<div id="PromptBox" class="promptBox">
<div id="PromptBoxHead">Enter max load (lbs)</div>
<input name="PromptBoxInput" id="PromptBoxInput" type="text"><br>
<input type="button" value="Ok" onclick="
jsProcessPromptBox(true)
">
<input type="button" value="Cancel" onclick="
jsProcessPromptBox(false)
">
</div>
</form>

</body></html>
 
M

Michael Winter

[snip]
By default, all buttons are submit buttons unless you specify
otherwise using "type".

Except in IE: the default is button. Despite the potential advantages of
the BUTTON element, it should be avoided. Old browsers don't recognise it,
and IE doesn't implement it properly.

[snip]
Also thank you Michael for the tips.. they should be of much help when
I get this stupid thing fixed.

I included Mike's method to position the prompt, but as you can
see it puts the top left corner in the centre of the page, [...]

You were actually supposed to enter values for the margin properties. If
my comments didn't imply that, your knowledge of CSS should have.
As for Mike's comment:


What I meant to write was that it's better (to me) to use input
buttons rather than button buttons.

OK. I thought you were saying something entirely different that didn't
make any sense.

[snip]
.promptBox {
text-align: center;
position: absolute;
height: 4em;
width: 12em;
left: 50%;
top: 50%;
margin-left: -(width/2)em;
margin-top: -(height/2)em;

margin-left: -6em;
margin-top: -2em;
z-index: 100;
foreground-color: black;

color: black;
background-color: #ddddee;
border-top: 1px solid #333366;
border-left: 1px solid #333366;
border-right: 3px solid #333366;
border-bottom: 3px solid #333366;

Use the outset border style:

border: 2px outset #444477;

Lighter colours are easier to distinguish as they're altered (the
bottom/right colour is darker).

You might also want to add a little bit of padding. Just my preference.

[snip]
<button type="button" onclick="
onMaxLoad_click();
">Make the prompt appear"</button>
^
Remove that quote.
<input type="text" name="MaxLoadBox" id="MaxLoadBox"
size="10" readonly>Max&nbsp;Load&nbsp;(lbs)

You should use a LABEL there.

[snip]

Mike
 
M

Michael Winter

[ <input type="button"> ]

I was referring to the BUTTON element. As far as I know, IE's
implementation of INPUT button elements is fine.
Can you elaborate on this, please?

- Instead of submitting the value attribute, IE sends the content of
the element.

<button type="submit" name="operation" value="delete"
Delete record</button>

The string, "Delete record", not "delete", would be sent.

- As I said previously, BUTTON elements default to button in IE, not
submit as the specification states.

- IE typically renders BUTTON elements badly, particularly if they
contain images.

- If there's more than one BUTTON element in a form, the name and
content of *all* of them, even the unsuccessful, will be sent.

Mike


I hate IE.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top