On Click

#1
Ricardo-san

Posted 13 April 2009 - 07:13 PM

Learning Programmer

Members
53 posts

Anyone have a snippet for making an image popup after clicking a button?
I have a "Submit" button on a form and I want an loading image to popup while the data is submitted and the results page load.
Thanks in advance.

#2
PythonPower

Posted 14 April 2009 - 12:31 PM

Programming Professional

Members
230 posts

You can use the button's onclick property. I expect that using the form's onsubmit property is more appropriate though. I've pieced together a minimal example on how to do this:

<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        
        <script type="text/javascript">
            
            function showPopup()
            {
                popup = window.open('', 'popupWindow', 'height=400,width=600')
                popup.document.write('<img src="/image.png" />')
                popup.document.close()
            }
            
        </script>
        
        <form onsubmit="showPopup()">
            <input type="submit" value="Submit" />
            
        </form>
        
    </body>
</html>

You will still need to tweak the code to make everything look "right". I suggest you take a look at Mozzila's reference for window.open.

With all that said, I actually would generally advise against using any popups any more. Even if they deliver content that a user wants, there are usually better ways.

#3
xXHalfSliceXx

Posted 14 April 2009 - 12:36 PM

Speaks fluent binary

Moderators
1,694 posts

Here is the page example and the code is below.

http://tsz.codecall....st/replace.html

<HTML>
<head>
</head>
<body>
<script language="javascript">
function ReplaceCell(cell,content) {
document.getElementById(cell).innerHTML = content;
}
</script>
<table border="0">
<tr>
<td id="A1">
<a href="javascript:ReplaceCell('A1','<img src=http://www.codecall.net/templates/gk_themoment/images/cc.png>')">Replace A1 with an image.</a>
</td>
</tr>
</table>
</body>
</html>

Posted Image

#4
Ricardo-san

Posted 17 April 2009 - 12:46 PM

Learning Programmer

Members
53 posts

Fantastic, thanks...
Ok something similar to this. I can get a button text to display "Loading..." after a click, but can I get the text to animate, like:
"Loading."
"Loading.."
"Loading..."
In a loop?

#5
Xav

Posted 19 April 2009 - 04:28 AM

Writes binary right handed and hex left handed

Members
13,118 posts

It would be easiest to achieve that with an animated GIF.

Instead of a progressing ellipsis, try a rotating circle or a similar graphic instead.

There is a super generator here: Ajaxload - Ajax loading gif generator

Jordan said:

Good members, like yourself, stick around and post for ages to come!
Mr. Xav | Blog | Forums

#6
Ricardo-san

Posted 19 April 2009 - 06:40 AM

Learning Programmer

Members
53 posts

Thanks, but I had already thought of that and I don't think it's the best solution for my situation...
And I have seen it done before. I'll try to find that page...