Web Pop-Up

I have a screen with a web-pop up. When I hit my back button to go back to my menu screen, it causes my animations to freeze on that screen and then none of the buttons work. What do I need in the code on my web-pop up screen to keep it from doing that?

module(..., package.seeall)
 
function new()
local localGroup = display.newGroup()
--> This is how we start every single file or "screen" in our folder, except for main.lua
        -- and director.lua
        --> director.lua is NEVER modified, while only one line in main.lua changes, described in that file
------------------------------------------------------------------------------
------------------------------------------------------------------------------
local ui = require("ui")
 
local aboutbackground = display.newImage ("aboutbackground.png")
localGroup:insert(aboutbackground)
--> This sets the background
        
local backbutton = display.newImage ("backbutton.png")
backbutton.x = 160
backbutton.y = 425
backbutton.xScale = .5
backbutton.yScale = .5
localGroup:insert(backbutton)
 
local function touchedBackbutton (event)
    if ("ended" == event.phase) then
        -- close the web popup
                native.cancelWebPopup()
        director:changeScene("menu") 
        media.playEventSound( "click_x.caf" )
        
    end
end
 
backbutton:addEventListener ("touch", touchedBackbutton)
 
 
--***************************************************
 
        -- showHelpPopup()
        
        --***************************************************
        
        local showHelpPopup = function()
                local topLoc = 73
                
                if system.getInfo("model") == "iPad" then
                        topLoc = 73 + 34
                end
                
                native.showWebPopup( 25, 100, 280, 305, "help.html", {baseUrl=system.ResourceDirectory, hasBackground=false } ) 
                
        end
        
        local cleanUp = function()
 
    backbutton:removeEventListener("touch", touchedBackbutton)
        
        --***************************************************
 
        -- init()
        
        --***************************************************
        
        local init = function()
                
                        
                showHelpPopup() --> display local help.html file
                
        end
                
        init()
        
    
end     
                                        
                        
-->MUST return a display.newGroup()
------------------------------------------------------------------------------
------------------------------------------------------------------------------
--> This is how we end every file except for director and main, as mentioned in my first comment
        
        
return localGroup
 
end

Hey,

I am a little confused about your logic here - cleanUp and showHelpPopup are in one function?

Is init being called when the page loads? It's within another function as well and I can't see it being called.

I haven't used web popups in a little while so I'm a bit rusty but I'm just not seeing the logic.

If you want to upload your project somewhere I'll take a look, though.

Peach :)

Peach,

I was trying to follow Jon Beebe's code he used but I changed the draw functions. This is Jon's code below that I was trying to follow.

-- 
-- Abstract: Tilt Monster sample project 
-- Designed and created by Jonathan and Biffy Beebe of Beebe Games exclusively for Ansca, Inc.
-- http://jonbeebe.net/
-- 
-- Version: 2.0.1
-- 
-- Sample code is MIT licensed, see http://developer.anscamobile.com/code/license
-- Copyright (C) 2010 ANSCA Inc. All Rights Reserved.
 
module(..., package.seeall)
 
-- Main function - MUST return a display.newGroup()
function new()
        local helpGroup = display.newGroup()
        
        local ui = require("ui")
        
        -- OPTIONS
        --local soundsOn = true; local soundsData
        
        -- OBJECTS
        local menuBtn
        
        --***************************************************
 
        -- drawBackground()
        
        --***************************************************
        
        local drawBackground = function()
                local helpBackground = display.newImageRect( "helpScreen.png", 480, 320 )
                helpBackground.x = 240; helpBackground.y = 160
                
                helpGroup:insert( helpBackground )
        end
        
        --***************************************************
 
        -- drawButtons()
        
        --***************************************************
        
        local drawButtons = function()
                -- Setup "Menu" Button
                local touchMenuBtn = function( event )
                        if event.phase == "release" then
                                
                                -- close the web popup
                                native.cancelWebPopup()
                                
                                -- main menu call
                                director:changeScene( "gotomainmenu" )
                        end
                end
                
                menuBtn = ui.newButton{
                        defaultSrc = "menubtn.png",
                        defaultX = 125,
                        defaultY = 42,
                        overSrc = "menubtn-over.png",
                        overX = 125,
                        overY = 42,
                        onEvent = touchMenuBtn,
                        id = "menuButton",
                        text = "",
                        font = "Helvetica",
                        textColor = { 255, 255, 255, 255 },
                        size = 16,
                        emboss = false
                }
                
                menuBtn:setReferencePoint( display.BottomLeftReferencePoint )
                menuBtn.xOrigin = 0; menuBtn.yOrigin = 450
                menuBtn.isVisible = false
                
                helpGroup:insert( menuBtn )
                
                -- Show "Menu" Button
                menuBtn.isVisible = true
                menuBtn:setReferencePoint( display.BottomLeftReferencePoint )
                menuBtn.x = 0
                transition.to( menuBtn, { time=1000, y=320, transition=easing.inOutExpo } )
                
        end
        
        --***************************************************
 
        -- showHelpPopup()
        
        --***************************************************
        
        local showHelpPopup = function()
                local topLoc = 73
                
                if system.getInfo("model") == "iPad" then
                        topLoc = 73 + 34
                end
                
                native.showWebPopup( 58, topLoc, 389, 223, "help.html", {baseUrl=system.ResourceDirectory, hasBackground=false } ) 
                
        end
        
        --***************************************************
 
        -- init()
        
        --***************************************************
        
        local init = function()
                
                drawBackground()
                drawButtons()
                
                showHelpPopup() --> display local help.html file
                
        end
                
        init()
        
        -- MUST return a display.newGroup()
        return helpGroup
end

His init() isn't within another function (beyond director stuff of course) and is called as soon as the scene loads.

Is there a reason you've done yours differently? (As in, putting the init inside another function rather than calling it immediately?)

I didn't notice I did that. LEt me take another look.

I'm looking at it but I don't know what you mean. It looks the same to me with the exception I took the draw functions out.

This is mine

  --***************************************************
 
        -- init()
        
        --***************************************************        
        local init = function()                        
                showHelpPopup() --> display local help.html file
                
        end
                
        init()       
    
end     
                                                               
-->MUST return a display.newGroup()
------------------------------------------------------------------------------
------------------------------------------------------------------------------
--> This is how we end every file except for director and main, as mentioned in my first comment      
        
return localGroup
 
end

module(..., package.seeall)
 
function new()
local localGroup = display.newGroup()
--> This is how we start every single file or "screen" in our folder, except for main.lua
        -- and director.lua
        --> director.lua is NEVER modified, while only one line in main.lua changes, described in that file
------------------------------------------------------------------------------
------------------------------------------------------------------------------
local ui = require("ui")
 
local aboutbackground = display.newImage ("aboutbackground.png")
localGroup:insert(aboutbackground)
--> This sets the background
        
local backbutton = display.newImage ("backbutton.png")
backbutton.x = 160
backbutton.y = 425
backbutton.xScale = .5
backbutton.yScale = .5
localGroup:insert(backbutton)
 
local function touchedBackbutton (event)
    if ("ended" == event.phase) then
        -- close the web popup
                native.cancelWebPopup()
        --director:changeScene("menu") 
      --  media.playEventSound( "click_x.caf" )
        
    end
end
 
backbutton:addEventListener ("touch", touchedBackbutton)
 
 
--***************************************************
 
        -- showHelpPopup()
        
        --***************************************************
        
        local showHelpPopup = function()
                local topLoc = 73
                
                if system.getInfo("model") == "iPad" then
                        topLoc = 73 + 34
                end
                
                native.showWebPopup( 25, 100, 280, 305, "help.html", {baseUrl=system.ResourceDirectory, hasBackground=false } ) 
                
        end
        
        local cleanUp = function()
 
    backbutton:removeEventListener("touch", touchedBackbutton)
        end 
        --***************************************************
 
        -- init()
        
        --***************************************************
        
        local init = function()
                
                        
                showHelpPopup() --> display local help.html file
                
        end
                
        init()
        
     
                                        
                        
-->MUST return a display.newGroup()
------------------------------------------------------------------------------
------------------------------------------------------------------------------
--> This is how we end every file except for director and main, as mentioned in my first comment
        
        
return localGroup
 
end

PS - I commented out the sound and scene change because I don't have your scenes/sound file - but the logic is the same. Init still needs to be called.

Peach,

It worked great! I just have one question. When you look at Beebe's it just scrolls up and down. Mine does that also but I can also shift it a little to the right and left. How do I keep the movement where it is only up and down. And please understand it is not shifting a lot left and right but I can move it that way a little bit.

Michelle

Well Beebe was doing a landscape app and he set his width to 389, so none was hidden off screen on the left or the right.

You're using landscape so at most your width could be 320.

SO - whatever html doc you're displaying, make sure the width wont go over the width of your screen and set it to 320. (or 310 if you want a little space at the edge, which is best.)

Peach :)

Peach,

Yes the width was 320 and I moved it to 300 and the same thing still occurs. I basically have a scroll bar down the side and one across the bottom and I don't want the bottom one. I thought it might be the topLoc code he is using but it's not. I can't figure it out. Everything is working fine though. I need that bottom scroll removed though because it looks funny to be able to shift it a little left to right because it can go off the screen a little bit.

Michelle

What I meant was, I believe the HTML file you are using is too wide for your 320 - check. It should be smaller than Jon's because he was doing landscape so could set the width to around 390 and not have any sideways scrolling. You'd want your width to be more like 300 for a portrait app.

Yes I understood you perfectly. I only see one number that can be changed in the html and I adjusted that and nothing happened. I will look closer because maybe I missed something :-)

Peach,

I don't know what the magic number is but I moved the 320 to 250 and that fixed it completely. Thanks for all your help!

Michelle

Sorry I wasn't here sooner - am very happy you got it sorted :)

For HTML docs (if memory serves) the width and height are usually specified up top.

Anyway, glad it's sorted :)

views:1402 update：2011/10/4 17:12:07


Label: corona android iphone ipad building error inmobi problem display screen View image tableView failed object physics touch button game lua config event listener