Forum ‹ Sitebox ‹ Layout Bug on the Seedling Facebook app?

[mrgreen]

Hiya

It looks like there is a layout bug in your SiteBox html template, which results in unnecessary scrollbars added to the iFrame. (Which could be a result of facebook perhaps having changed their layout since you have done the tutorials).
Which persist even after removing the Debug panel.

PS: Also I have a question about the whole iFrame setup? if you look at the facebook game CityVille: http://apps.facebook.com/cityville/
If you navigate the game through its tabs on the top, then when you leave the main game page, and maybe visit the help page, and then go back to the game, the game does not reload ? It just reappears like if it was running in the background, Like if its not a separate html page, but they are just pushing it off screen with CSS or javascript or iFrame magic? Any ideas ?

Firefox 3.6 - scrollbars at the bottom

siteboxFirefox.jpg (136.47 KiB) Viewed 26323 times

IE7 - scrollbars on the right side ( these actually cut off part of the site )

siteboxIE7.jpg (121.77 KiB) Viewed 26323 times

[mrgreen]

Also, if you invite a friend to the game, it will correctly display the Facebook user's photo down where the "invite friend" boxes are, but if you click his image the Sitebox site will try to take you to the "show.html" which does not exist?

and that will result in the error message:
Couldn't find file: /-----------/show.html

facebookError.jpg (19.17 KiB) Viewed 26321 times

sorry guys, i really love PlayerIO by the way, so this is just constructive criticism

[Oliver]

Noted. Thanks for reporting it. We'll get it looked at.

[mrgreen]

Great, however would you mind looking into my other question:

PS: Also I have a question about the whole iFrame setup? if you look at the facebook game CityVille: http://apps.facebook.com/cityville/
If you navigate the game through its tabs on the top, then when you leave the main game page, and maybe visit the help page, and then go back to the game, the game does not reload ? It just reappears like if it was running in the background, Like if its not a separate html page, but they are just pushing it off screen with CSS or javascript or iFrame magic? Any ideas ?

- This would be quite important, as I dont think I will be able to save away the entire game World Data, but rather it would be semi-randomly re-created upon each visit. However still it would be great if the user could make a purchase and return to the same session exactly where he left off. ( as he didnt come back the next day, but just made a purchase so it makes sense if the game didn't change at all )

[cjcenizal]

Mrgreen, your ideas regarding pushing the Flash with CSS and or JS sound pretty good to me. Have you tried them? If they work, then I'd say you've got a good solution on your hands. I'll probably do something similar for my game.

[mrgreen]

I could have pulled it off if it was a straight .php site of my own.
But Sitebox uses a template system, which isn't php and not even close to it, so we will need help from PlayerIO staff i think.

My idea would be to have a 2 iFrames within one big iFrame. That is 1 for the .SWF, which is always on the page and never changes, the other would be for the HTML content that changes on which page we are viewing (inviting, buying coins etc ).
The iFrame containing the .SWF file would simply be pushed offscreen/hidden by CSS or Javascript on pages that arent meant to show the game, but it would always stay loaded in the background.

Again this sounds easier than it is done, as the top URL address bar needs to communicate with whats happening with the Canvas application, so there would need to be an extra layer of Javascript possibly, so I am really just giving ideas for the PlayerIO devs

( Another bonus would be that the game .SWF would only need to be downloaded once/facebook visit. ( i know if the .SWF hasnt changed then the browser should cache it, but sometimes it doesnt . )

[cjcenizal]

I might not fully grasp the details of what we're trying to do, but it seems like we don't need to use iFrames (or php) at all. We can just write our index.html page with two divs: one to contain our game content (i.e. the SWF), and another to contain all of our help content. When the user clicks a nav button, call some JS logic to make the appropriate divs visible or invisible. Each div acts as a "page". We can add as many divs as we need. Does that make sense? Am I missing something?

[mrgreen]

Its similar, but you are overlooking a 3 things

1) With one HTML page and no iFrames, ALL content is rendered in the background, which on a larger Facebook app ( think about all the payment pages, and Help docs ) could put quite a bit of strain on the initial load time, as well as all of that stuff needs to be rendered by the browser. ( where as if there were two iFrames then the iFrame containing the rest of the HTML site could be reloaded/emptied each time a new page would be visited )

2) Facebook needs to be able to communicate with the page, the .SWF and vica versa.
IE if you click on "invite friends" within the .SWF that will change the address bar on Facebook ( which is outside of the iFrame) which will then load in a new iFrame page. But if we are on the same page all the time(when everything is loaded into that page, except hidden ), you may need a very specific setup like the Dynamic Deep linking stuff that is around for flash, except that it needs to work with not only links coming from the .SWF but when the user clicks on an HTML button within the iFrame.
So there are quite a few things to consider there, not something you could just pull off in half an hour.

3) Sitebox uses that template system I mentioned, which is specific to PlayerIO, im not sure how much we could alter that and have it still working.

This is why it would be best if PlayerIO would look into this. I think it would be a great addition, again if you want to look at a working example just look at Cityville, a 100 million players/month cant be wrong.

[Oliver]

What Zynga is doing in Farmville is simply to use javascript and ajax requests to dynamically load in the other tabs.

There is nothing preventing you from doing the same with Sitebox. You can either load in the content for the other tabs with javascript and ajax and use jquery or simliar to hide/flip the actual contents OR simply show overlay iframes when the user clicks on another tab.

- Oliver

[mrgreen]

Yes but how would this work with the existing in .SWF Navigation? IE right now your seedlings example uses this:

navigateToURL(new URLRequest(parameters.fb_app_root + "invite"), "_top")

Would this not work anymore? would we need to rewrite the entire navigation logic?

[Benjaminsen]

Yes but how would this work with the existing in .SWF Navigation? IE right now your seedlings example uses this:

navigateToURL(new URLRequest(parameters.fb_app_root + "invite"), "_top")

Would this not work anymore? would we need to rewrite the entire navigation logic?

You will have to write your own logic. Sitebox is a framework, Seedlings is an example. Thus this is not a CMS where you can create what you want without coding. We fully expect people who use Facebook to be familiar with working with flash and HTML.

If development is not your thing, there are much better suited solutions for you such as Mochi Medias API's which targets less skilled developers.