Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old July 22nd, 2003, 02:06 AM
Authorized User
 
Join Date: Jul 2003
Location: Kolkata, West Bengal, India.
Posts: 51
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to sankar
Default Popup image loader[?]

Hi,
I have a small problem. I am providing a link to open image in a popup window,if anyone clicks on the icon-size image. My problem is I want to show a status of image loading till the image is fully loaded in the new window. Once the image is fully loaded, the status bar should disappear from the window and the complete image gets displayed.Can it be done? Thx in advance for any help.

__________________
Sankar Sengupta
Striving for the BEST
 
Old July 22nd, 2003, 06:43 AM
Registered User
 
Join Date: Jul 2003
Location: Budapest, , Hungary.
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to lillu
Default

Hi,

It's quite simple. You have two files.

One with the image icon. I named it open_image.htm

(Make sure you place all newWin properties on one single line or you may get errors from some older browsers about it.)

What the function does:

Sets the status property to this user defined string when the function is invoked (the window opening)
<html>
<head>
<script language="javascript">
function showWindow()
{
status = "Loading image...";

newWin=window.open('show_image.htm','newWin','tool bar=no,location=no,directories=no,status=no,menuba r=no,scrollbars=no,resizable=no,width=156,height=1 67,top=100,left=100')
}
</script>
<head>
<body>
<a href="javascript:showWindow()"><img src="lillu_tn.jpg" border=0 /></a>
</body>
</html>

There you go. Then you have what I name show_image.htm. A very simple page with the image on it, but we show it as a popup here. So until now you have 'Loading image...' in the status bar.

We know from the show_image.htm onload event handler when the page has fully loaded. Then we set the status property in the open_image window to an empty string.

<html>
<head>
</head>
<body onload="javascript:opener.window.status=''">
<img src="lillu.jpg" border=0 alt="lillu" />
</body>
</html>

(opener is the window that opened the popup and the status bar is also there not in the popup)

HTH,

Lillu





The Purple Couch
http://www.geocities.com/lillamarta
 
Old July 22nd, 2003, 06:56 AM
Registered User
 
Join Date: Jul 2003
Location: Budapest, , Hungary.
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to lillu
Default

Hi again,

I added a tiny bit of pizzaz to the script:

Now you don't have the ugly path displayed when you hover above the image but rather a nice 'alt' message.
When you move off from the icon, the status bar is set to empty.

<a href="javascript:showWindow()" onMouseOver="window.status='Click on image to enlarge it in new window'; return true" onMouseOut="window.status=''"><img src="lillu_tn.jpg" border=0 /></a>

The Purple Couch
http://www.geocities.com/lillamarta




Similar Threads
Thread Thread Starter Forum Replies Last Post
onMouseOver expand image in popup sanjeev jha Javascript 2 June 4th, 2008 03:11 PM
Help in mouseover and popup enlarge image kumiko Javascript 0 March 28th, 2008 03:04 AM
Gallery Image display in popup Window caitydev ASP.NET 1.0 and 1.1 Basics 3 April 3rd, 2006 10:23 AM
data loader for controls paranthaman .NET Framework 2.0 1 March 3rd, 2006 04:07 PM
increamental data loader paranthaman .NET Framework 2.0 1 February 27th, 2006 02:14 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.