Click here to Skip to main content
15,895,777 members
Articles / Web Development / HTML

Modeling a Draggable Layer and Loading Dynamic Content to it via XML HTTP

Rate me:
Please Sign up or sign in to vote.
4.95/5 (23 votes)
28 May 20058 min read 142.5K   947   57  
In this article, we will try to generate a draggable DHTML layer that loads data from an external URL via XMLHTTP connection. The code will be object oriented, cross-browser compatible, and relatively cutting-edge.
<?xml version="1.0" encoding="iso-8859-9"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="TR">
	<head>
		<title>Pseudo Pop Up - Step 4</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<style type="text/css" media="all">
			@import url("style/master.css");
		</style>
		<script type="text/javascript" src="lib/sardalyaDrag.js"></script>
		<script type="text/javascript" src="lib/DOMManager.js"></script>
		<script type="text/javascript" src="lib/XHRequest.js"></script>
		<script type="text/javascript" src="lib/PopupLayer_Step5.js"></script>
		<script type="text/javascript" src="lib/inc_Step5.js"></script>
	</head>
<body>


<div id="PopupMasterContainer">
	<div id="PopupTopHandle" class="popupDragBar">
		<div id="PopupTopButtons" class="popupButtonContainer"><img src="images/close.gif" class="popupCloseIcon" id="IcnClose" alt="closes the pop-up" /></div>
		<div id="PopupTopTitle" class="popupWindowTitle">Title Goes Here</div>
	</div>
	<div id="PopupContent" class="popupConsole">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum augue. Cras vel erat sit amet urna ornare porta. Aenean accumsan sem id nunc. Morbi cursus ullamcorper ligula. Etiam lobortis. Sed laoreet accumsan nibh. Morbi nulla ligula, viverra eu, lacinia aliquam, tempor quis, lorem. In hac habitasse platea dictumst. Integer ultrices. Donec vel nunc. Nunc congue, dolor a condimentum dapibus, urna libero pulvinar sapien, at sodales leo augue eget ante.</p>
	</div>
</div>

<p>
	<br />
	<select>
	<option>This nasty select will go on top of my lovely popup</option>
	<option>This nasty select will go on top of my lovely popup</option>
	<option>This nasty select will go on top of my lovely popup</option>
	</select>
	<select>
	<option>This nasty select will go on top of my lovely popup</option>
	<option>This nasty select will go on top of my lovely popup</option>
	<option>This nasty select will go on top of my lovely popup</option>
	</select>
	<select>
	<option>This nasty select will go on top of my lovely popup</option>
	<option>This nasty select will go on top of my lovely popup</option>
	<option>This nasty select will go on top of my lovely popup</option>
	</select>
</p>

</body>
<html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Turkey Turkey
Volkan is a java enterprise architect who left his full-time senior developer position to venture his ideas and dreams. He codes C# as a hobby, trying to combine the .Net concept with his Java and J2EE know-how. He also works as a freelance web application developer/designer.

Volkan is especially interested in database oriented content management systems, web design and development, web standards, usability and accessibility.

He was born on May '79. He has graduated from one of the most reputable universities of his country (i.e. Bogazici University) in 2003 as a Communication Engineer. He also has earned his Master of Business Administration degree from a second university in 2006.

Comments and Discussions