Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Simple DHTML Cromeless Window

Status
Not open for further replies.
mtorbin

mtorbin

Technical User
Nov 5, 2002
369
US
Hey all,

I'm trying to find some simple (as in NO shorthand code) code that illustrates how to create a simple popUp window such as the one on this site when you first arrive. Any advice? I know JS pretty well, but the shorthand stuff always throws me.

- MT
 
Sort by date Sort by votes
Use a DIV. Position it with CSS. Make it positionable with JavaScript.

An example:


Click the graphic I have at the top with my logo in it. You'll get a div that you can position, drag, and close.

If you view the source of the page, you can see the script and the css behind it.



Thomas D. Greer
 
Upvote 0 Downvote
Thanks Thomas! That's just what I'm looking for.

- MT
 
Upvote 0 Downvote
Thomas (or anyone for that matter), here is a script I tossed together for testing:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#pleaseWait {
	position: absolute;
	top: 50px;
	left 50px;
	width: 400px;
	text-align: left;
	visibility: hidden;
	padding: 5px;
	left: 50px;
}
.pwText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: #000000;
}
.pwBox {
	background-color: #FFFF99;
	padding: 2px;
	height: 30px;
	width: 390px;
}
</style>

<script type="text/javascript">
<!--
function showBox() {
    document.getElementById("pleaseWait").style.visibility = "visible";
}

function hideBox() {
    document.getElementById("pleaseWait").style.visibility = "hidden";
}
//-->
</script>
</head>

<body>
<a href="javascript: showBox();">SHOW MESSAGE</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript: hideBox();">HIDE MESSAGE</a><br>

<div id="pleaseWait">
<table class="pwBox">
 <tr>
  <td><div class="pwText">PLEASE WAIT... PART NUMBER SEARCH PROCESSING</div></td>
 </tr>
</table>
</div>
</body>
</html>

My question is, how do I center the box on ANY screen? Mean, I want it to be 50px from the top and ([screen resolution] / 2)px from the left.

Thanks,

- MT
 
Upvote 0 Downvote
I tried this, but it isn't seeming to work:

Code: 
function showMessage() {
	var width = (screen.width)/2;
	document.getElementById("pleaseWait").style.left = width;
    document.getElementById("pleaseWait").style.visibility = "visible";
}
 
Upvote 0 Downvote
OK, I got it to work on Windows machines, but not my Mac (either browser engine). Wonder why? Oh well, thanks.

- MT
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

dvannoy
  • Locked
  • Question
Simple Layout
Replies
3
Views
157
vacunita
vacunita
marjansayyad
  • Locked
  • Question
How can invisible one hyperlink window 4
2
Replies
20
Views
362
1DMF
1DMF
ember1205
  • Locked
  • Question
Form submit, specific controls needed (3rd party site, blank window, message, etc.)
Replies
1
Views
108
ember1205
ember1205
tshad
  • Locked
  • Question
Window.Print shows URL from link on page
Replies
6
Views
404
Olaf Doschke
Olaf Doschke
Mfho1
  • Locked
  • Question
Horizontal Menu Becomes Distorted with Firefox Window Zoom
Replies
2
Views
70
Mfho1
Mfho1

Part and Inventory Search

Sponsor

Back
Top