views:

850

answers:

5

Hi there.

I'm creating a little iphone webapp for my school using the iWebkit (fancy css/javascript for making the interface for iphone / ipod touch web sites / webapps.

There is a feature called Popup which simulates a popup that you get in settings on your iPhone when you reset all settings (i.e. confirmation popup).

How can I make the popup appear AUTOMATICALLY when a HTML page is displayed - rather than having to click on the link per example of the user guide? (Page 22). I've tried doing a onload in the body tag and even header tag but it doesn't work.

I don't want to use a javascript alert as it's not sexy.

This is what the code currently looks like based on Doug's suggestion below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<title>Popup Test</title>

<script src="javascript/functions.js" type="text/javascript"></script>

<script type="text/javascript">
    document.addEventListener('load', function(){
    window.setTimeout(function(){
    iWebkit.popup('popup1'); // Adjust this line to have the correct popup id
    }, 5000); // This is in milliseconds. Keep the number as low as possible so it still works
    }, false);
</script>

123 Are you sure you want to do this? Stop Server Cancel

A: 

Have you tried the onload event?

Justin Johnson
I did try the onload event - I tried adding it in the body tag, header tag too. Didn't work.
Simon
A: 

Have you tried the Javascript alert? On iPhone, it is shown with a nice native UI style.

Jaanus
I did try the javascript alert - doesn't look sexy with the http://address at the top of that dialog box. Is there a way to remove it?
Simon
+1  A: 

Well, first the library (iWebkit) you are using is doing a "bad thing" by taking the entire onload event to itself instead of using the proper addEventListener function to attach itself to the onload function.

onload is the proper place to put it, but here is how you will need to call the popup on page load (add this after the script src='/js/functions.js' line)

<script type="text/javascript">
  window.addEventListener('load', function(){
     iWebkit.popup('foodpopup'); // Adjust this line to have the correct popup id
  }, false);
</script>

If that doesn't work, it might be because both your function and their onload stuff is running at the same time. You can then try this:

<script type="text/javascript">
  window.addEventListener('load', function(){
     window.setTimeout(function(){
        iWebkit.popup('foodpopup'); // Adjust this line to have the correct popup id
     }, 300); // This is in milliseconds. Keep the number as low as possible so it still works
  }, false);
</script>
Doug Neiner
Hi Doug. I tried your suggestions, it didn't work. I even tried increasing the timeout to 5000 - nope either. :(
Simon
@Simon, sorry! I needed to be `window.addEventListener` not `document...`. I downloaded the latest copy of iWebkit and tested my first block of code (timeout not needed) and it worked once I changed it to `window`.
Doug Neiner
A: 

try this::

<script type="text/javascript"> 
window.onload = function() {
            document.addEventListener('load', function(){  
    window.setTimeout(function(){  
    iWebkit.popup('popup1'); // Adjust this line to have the correct popup id  
    }, 100); // This is in milliseconds. Keep the number as low as possible so it still works  
    }, false);      
            }
</script>
jjj
A: 

Hi Simon - is this the same question from the iWebkit forum? if not, check out http://community.iwebkit.net/viewtopic.php?f=17&amp;t=503 :)

crmunro