Lightbox: Loading dock when link is clicked

programming web dev
1

Hello, I’m looking for the script they use on netrasofttech.com, when a link on that site is clicked, a lightbox appears in the far right hand corner saying loading, I’ve tried getting the js file and using it for myself but it doesn’t work. I’ve tried searching for this script, but I couldn’t find one.

Any ideas?

2

This is the easiest example I could come up with. The authors used the AJAX controls kit for ASP.NET though to accomplish this. My version does not. Let me know if you have questions.

<html>
	<head>
		<title>Loading</title>
		<style type="text/css">
			.dockclass{
				margin-top:5px;
				width:100px;
				height:40px;
				border:1px solid #ccc;
				padding:15px;
				padding-bottom:8px;
				position:absolute;
				right: 10px;
				top: 0px;
				z-index: 111;
			}
		</style>
		<script type="text/javascript">
			var load;
			var timer;
			function loader()
			{
				//Show the element
				load = document.getElementById('UpdateProgress1');
				load.style.display = "block";
				//Just sets a timer for how long to show the element
				setTimeout("remLoader()", 2000);
			}

			function remLoader()
			{
				//Load the content and remove the element
				document.getElementById('more').innerHTML = "<strong>Some fake, ajax seeming content</strong>";
				load.style.display = "none";
			}
		</script>
	</head>
	<body>
		<!--Begin Loading Box -->
		<div id="UpdateProgress1" style="display:none;">
		    <div id="loader" class="dockclass" style="opacity:0.4;filter:alpha(opacity=40)"> 
		        <img src="http://netrasofttech.com/images/loading3.gif" alt=" " />&nbsp; <strong>Loading...</strong>
		    </div>
		</div>
		<!-- End of Loading Box -->
		<br />
		<h2>This is my title</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio. Morbi eu nisl. Praesent feugiat, dui vel fermentum condimentum, neque ipsum tincidunt eros, sed euismod velit lectus in metus. Quisque in diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
		<a href="#" onclick="loader();">Load More Content...</a>
		<h2>Additional content to be loaded</h2>
		<div id="more"></div>
	</body>
</html>
3

That is excellent, thank you very much.

4

No problem Stewart,

I forgot to mention that this is not lightbox, or even lightbox-ish. Lightbox creates a modal window by appending divs to a document and setting attributes to them to make them fit the lightbox css. My method simply is hiding and showing a div (this is the method the site you referenced uses). Just thought it was worth mentioning for clarity’s sake.

peace.