User Tag List

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16

Thread: Run the HTML5 application in own webpage

  1. #1
    Clicker

    Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export ModuleXNA Export ModuleUnicode Add-on
    Fusion 2.5 (Steam)
    ASD's Avatar
    Join Date
    Feb 2007
    Location
    Japan
    Posts
    1,764
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)

    Question Run the HTML5 application in own webpage

    I want to run the HTML5 application in own webpage.
    But, I don't know which code to copy from generated html file.
    Anyone know any tutorials?

  2. #2
    Clicker Fusion 2.5 DeveloperFusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export ModuleMac Export Module

    Join Date
    Sep 2006
    Location
    UK
    Posts
    842
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From the HEAD section: (all below isnt needed but recommended)

    Code:
    <script>
    		if (!window.HTMLCanvasElement)
    		{
    			window.open("http://html5-fallback.html", "_self");
    		}
    	</script>
    	
    	<!-- Javascript Paths-->
      	<script src="src/Runtime.js"></script>
      	
      <script>
    
    	if (window.location.protocol == "file:")
    	{
    		document.write('<div id="bloctxt">');
    		document.write('<h1>The application cannot be run...</h1>');
    		document.write('</div>');
    		throw new error("Cannot run application");
    	}
    
    	window.addEventListener("load", windowLoaded, false);
    	function windowLoaded()
    	{
    		new Runtime("Canvas", "resources/YOURFILE.cch");
    	}
      </script>
    And then where ever you want you application to be (inside the BODY section)

    Code:
    <div id="canvas">
        <canvas id="Canvas" width="800" height="800">
           <p>Your browser does not support Canvas.</p>
        </canvas>   
    </div>
    Andy

  3. #3
    Clicker

    Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export ModuleXNA Export ModuleUnicode Add-on
    Fusion 2.5 (Steam)
    ASD's Avatar
    Join Date
    Feb 2007
    Location
    Japan
    Posts
    1,764
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    I did it! Thanks!
    More question. How to show the scrollbar of browser? It doesn't show even if screen size of the application larger than the monitor.

  4. #4
    Clicker Fusion 2.5 DeveloperFusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export ModuleMac Export Module

    Join Date
    Sep 2006
    Location
    UK
    Posts
    842
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried changing this line to match your application size in MMF?

    Code:
    <canvas id="Canvas" width="800" height="800">
    Thanks
    Andy

  5. #5
    Clicker

    Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export ModuleXNA Export ModuleUnicode Add-on
    Fusion 2.5 (Steam)
    ASD's Avatar
    Join Date
    Feb 2007
    Location
    Japan
    Posts
    1,764
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    I said mean I want to show the scrollbar if the screen size of the HTML5 application larger then client area of the browser.
    And, this code will ignore if "Resize display to fill window size" option was enabled.

  6. #6
    Clicker Fusion 2.5 DeveloperFusion 2.5+ DLCAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export Module
    Kimera's Avatar
    Join Date
    Feb 2007
    Location
    Houston, TX
    Posts
    718
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    There seems to be some form of issue with the HTML5 exporter where the scrollbars do not show up even if the page is large than the screen. I understand it's being worked on but I do not know any information for sure other than I have tried everything to get them to come back. I have a site I did that has some HTML5 in it and it scrolls but I don't want to touch that for fear that it will never scroll again. lol

  7. #7
    Clicker Fusion 2.5 MacFusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleInstall Creator Pro

    Join Date
    Dec 2010
    Location
    United Kingdom
    Posts
    960
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've only just bumped into this issue as well. The scrollbar appears but quickly disappears in Chrome.

    I have found a solution for Firefox, but sadly this doesn't work for Chrome. I haven't tested other browsers.

    I inserted this line into the <style> body{} tags which did the trick for Firefox.
    Code:
    overflow: scroll;
    I hope there is a solution/fix to this soon. There's a thread about it here.

  8. #8
    Clicker Fusion 2.5 DeveloperFusion 2.5+ DLCAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export Module
    Kimera's Avatar
    Join Date
    Feb 2007
    Location
    Houston, TX
    Posts
    718
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @ih37, cant believe I did not think to try that. I am in a Microsoft class this week but when I get home I will try this. Thanks!

  9. #9
    Clicker Multimedia Fusion 2 DeveloperiOS Export ModuleSWF Export Module
    Francois's Avatar
    Join Date
    Jul 2006
    Location
    Montpellier, France
    Posts
    6,920
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    The fact is the runtime code manually does the following code :
    document.documentElement.style.overflow = 'hidden';
    document.body.scroll = "no";


    ... which is a bad design from me, as it enforces a scrolling mode. i will remove it from the code of the runtime so that only the HTML code changes it.
    EDIT : I still enforce these values when you build the application in full-screen mode, as the Javascript code depends on the HTML code to work. But in normal windowed mode, the runtime does not affect the display properties anymore : you can do everything from the CSS.

    For next beta.

  10. #10
    Clicker

    Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export ModuleXNA Export ModuleUnicode Add-on
    Fusion 2.5 (Steam)
    ASD's Avatar
    Join Date
    Feb 2007
    Location
    Japan
    Posts
    1,764
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Thanks for answer Francois.

    But, I don't know where to insert this code in HTML file.

    Will you add this code and new property for allow scroll in HTML page?

Page 1 of 2 1 2 LastLast

Similar Threads

  1. embedding html5 in webpage problems
    By brett in forum HTML5 Export Module 2.5
    Replies: 14
    Last Post: 25th July 2014, 10:26 PM
  2. Question: html5 application change to size in mobile browser?
    By fernandolt in forum HTML5 Export Module 2.5
    Replies: 1
    Last Post: 2nd April 2013, 06:03 AM
  3. Open a webpage within application?
    By RickyRombo in forum Multimedia Fusion 2 - Technical Support
    Replies: 9
    Last Post: 19th June 2009, 10:59 PM
  4. Webpage
    By Rabagast in forum Multimedia Fusion 2 - Technical Support
    Replies: 4
    Last Post: 27th January 2009, 07:41 PM
  5. Networking an application to a webpage
    By mechadude in forum Multimedia Fusion 2 - Technical Support
    Replies: 2
    Last Post: 23rd August 2007, 04:14 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •