DHTML/JavaScript help...

[Spinal]

AAAAAAAAAAHHHH!

Good, now that it's out of my system, I need to ask for some help... I've been awake all night working away at this, and still don't have it "right"!

I need to create a popup using DHTML/JavaScript; the idea being that it's a popup that is "unblockable" (like some of those VERY annoying averts) but at the same time takes a username and password and submits it via POST to the parent page AND doesn't have the standard submit button.

I've gotten most of it bashed out.... but have a few gripes...

I KNOW I shouldn't "show" the questionnaire before it is live and tested and whatnot, but this is driving me insane...

sample.css:

div.sample_popup div.menu_form_header
{
  border: 0px solid black;
  border-bottom: none;

  width: 435px;

  height:      23px;
  line-height: 22px;
  vertical-align: middle;

  background: url('images/auth_01.png') no-repeat;

  text-decoration: none;
  font-family: Times New Roman, Serif;
  font-weight: 900;
  font-size:  13px;
  color:   #206040;
  cursor:  default;
}

div.sample_popup div.menu_form_body
{
  width: 435px;
  border: 0px solid black;
  background: url('images/auth_02.png') no-repeat;
  border-bottom: none;

}

div.sample_popup div.menu_form_footer
{
	border: 0px solid black;
  border-bottom: none;

  width: 435px;

  height:      76px;
  line-height: 75px;
  vertical-align: top;

  background: url('images/auth_03.png') no-repeat;

  text-decoration: none;
  font-family: Times New Roman, Serif;
  font-weight: 900;
  font-size:  13px;
  color:   #206040;
  cursor:  default;

}

testfile.php

<div class="sample_popup"     id="popup" style="display: none;">

<div class="menu_form_header" id="popup_drag">
<img class="menu_form_exit"   id="popup_exit" src="form_exit.png" alt="" /> 

&nbsp;&nbsp;&nbsp;
</div>

<div class="menu_form_body">
<form action="some-submit-page.php">
  
<table border="0"  height="135 cellpadding="0" cellspacing="0">
	<tr><th>Name:</th><td><input class="field" type="text"     onfocus="select();" name="username" /></td></tr>
  	<tr><th>Password:</th><td><input class="field" type="password" onfocus="select();" name="password" /></td></tr>
  	<tr><th>         </th><td><input class="btn"   type="submit"   value="Submit" /></td></tr>    
</table>
</form>
</div>

<div class="menu_form_footer">
</div>

So essentially, by calling those three I have the formating for a window. A draggable header (which works), a body with a form (which needs some serious reformatting, but otherwise works) and a footer, which included the "submit" and "cancel" buttons...

Now the problem:
- I usually use a hotspot on images to make buttons as it's so easy... but as you can see above, the footer (which needs two clickable areas) is in the background... and all my attempts to move it to the foreground seem to throw formatting out the window of everything else... any ideas as to how to make two "custom" buttons without filling that areas with 1x1 pixel transparent gifs and making some clickable?

Thanks (especially if you bothered reading this far!)
M

EDIT: I feel a bit stupid now; got the image in the "foreground" (I was missing a bracket, so it closed something else and threw the formatting totally out before)

Problem is, the only way I can see the "popup" in dreamweaver is in LiveView mode- and I can't use the HotSpot tool in LiveView... Ideas?

REDIT: Ended up making the maps manually instad of using the tool - that worked (even though the maps aren't accurate... I used a rectangle map as doing the polygon would be near impossible in code!)

Problem now is that when viewed from safari/firefox on the Mac it doesn't "click"... will investigate!

 

[columb]

Why pop-up? What's happened to old good NEXT ---> ?
You have to keep in mind that most browsers will block pop-ups one way or another (like NoScript for FF )

Cheers
Chris

 

[Spinal]

Ended up getting it sorted... mostly...


It needs to be a popup/overlay... it's for my thesis and the whole deal kind of relies on that

All will be explained in due time (if the admin team lets me )

M.