[SOLVED] The scrolling bars issue

-AAG- · July 28, 2016

I am having this issue with a client where when he embeds the game on his page it appears with annoying scrolling bars on the right and bottom. I suggested the problem might be a scrolling parameter on his embed code might be set to yes instead of no but he says there is no scrolling parameter on his embed code.

Any idea of what could cause scrolling bars to appear on an embedded game from the game itself and not the embed code fault?

I have already sold a game to this client before and I cross referenced my scaling, address bar removal, index file, and positioning codes and there is no difference at all whatsoever.

Any help would be much appreciated.

BobF · July 28, 2016

It's a little hard to say without seeing some of the relevant HTML, and knowing how your game handles resizing... but it sounds like maybe the game is being stuffed into a DIV that 's too small to hold it. If properly sizing the containing DIV does not resolve the issue then he should be able to apply style

overflow: hidden

to the DIV to get rid of the scrollbars.

-AAG- · July 28, 2016

Thank you. I will pass this info on to my client. My html5 file looks like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- AAG 2016 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="pragma" content="no-cache"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta charset="utf-8"/>
        
        <!-- Set the title bar of the page -->
        <title>Money Land</title>

        <!-- Set the background colour of the document -->
        <style>
		{
			user-select: none;
			touch-select:   none;
			touch-action:   none;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			-ms-touch-select:   none;
			-ms-touch-action:   none;
		}

            body {
              background: #222;
              color:#cccccc;
              margin: 0px;
              padding: 0px;
              border: 0px;
            }
            canvas {
                      image-rendering: optimizeSpeed;
                      margin: 0px;
                      padding: 0px;
                      border: 0px;
            }
            :-webkit-full-screen #canvas {
                 width: 100%;
                 height: 100%;
            }
            div.gm4html5_div_class
            {
              margin: 0px;
              padding: 0px;
              border: 0px;
            }
            /* START - Login Dialog Box */
            div.gm4html5_login
            {
                 padding: 20px;
                 position: absolute;
                 border: solid 2px #000000;
                 background-color: #404040;
                 color:#00ff00;
                 border-radius: 15px;
                 box-shadow: #101010 20px 20px 40px;
            }
            div.gm4html5_cancel_button
            {
                 float: right;
            }
            div.gm4html5_login_button
            {
                 float: left;
            }
            div.gm4html5_login_header
            {
                 text-align: center;
            }
            /* END - Login Dialog Box */
            :-webkit-full-screen {
               width: 100%;
               height: 100%;
            }
        </style>
    </head>

    <body>
        <div class="gm4html5_div_class" id="gm4html5_div_id">
            <!-- Create the canvas element the game draws to -->
            <canvas id="canvas" width="512" height="288">
               <p>Your browser doesn't support HTML5 canvas.</p>
            </canvas>
        </div>

        <!-- Run the game code -->
        <script type="text/javascript" src="html5game/Money Land.js?RDSAC=880005314"></script>
    </body>
</html>

I am on GameMaker: Studio here an that is automatically generated after I compile the game. I only do some minor modifications to it.As for scaling, I simply scale my canvas to best fit the available space on the browser.

Thanks again.

BobF · July 29, 2016

It would be interesting to see your client's HTML since I'm guessing something is squeezing the containing DIV to less than the 512x288 needed by your game. If he explicitly sets his DIV to 512x288 then that should get rid of the scrollbars, and hopefully won't cause any consequential issues with his page layout.

-AAG- · July 30, 2016

I passed your previous reply on to them and they are looking into it and think you might be right. I really hope they get this sorted out soon but will probably not hear from them until Monday. I don't think they will just show me their html files but I could ask. I do think they want the game to show a little larger than the original size thou, and the game is set to scale to any size maintaining the aspect ratio.

I thank you again since, after the info you gave me, they said we might be in the correct path to getting this solved.

mattstyles · July 31, 2016

There are loads of styling tweaks to get rid of the scrollbars issue, unfortunately overflow:hidden does not always solve it on every platform, and technically its a hack anyway as the iframe size should match your content size so you shouldn't need it. The only thing you can do your end is to ensure the content you supply them is bang on the dimensions they want, awkward if they want multiple dimensions.

Are you sure that scrollbars are appearing in your content? Doesn't look like it would be.

You have access to their staging site? If you're going to diagnose and treat the issue you need access to the problem, otherwise you're both going to a waste a load of time.

-AAG- · August 1, 2016

Finally got permission to post the link to the game if you guys want to look into the html: http://abcya.com/moneyland.htm

mattstyles · August 2, 2016

Your game element gets set to a height of 1100, no idea why, either someone has manually appended it to the element or JS is doing it, I'm going to assume the latter so, have you got complete single control over what gets served from '//media.abcya.com/games/moneyland/html/index.html'? Looks like maybe a no as there are 2 vendor scripts in there, first off I would suggest removing those (hidebar and loadingbar scripts) and having a look. I suspect this will solve it and works out where the problem lies i.e not with your code (if the problem persists it could still be something in your code, but, I know that you know what you're doing and if you'd cocked up somewhere you would have fixed it by now).

The quick fire hack to fix it is to add a `height: 620px !important` to the html, but, really, if it turns out the problem is with their scripts then it needs to be fixed in there although it could get interesting if yours is the only game they have this issue with. Either they are new scripts or they're seeing this issue elsewhere, I just had a quick look through a couple of other games on their site and they don't include those scripts.

-AAG- · August 2, 2016

I have no control at all whatsoever over what they do at their site, I simply deliver my game files and they take it from there. Here is another one of my games on their site, no scrollbars: http://abcya.com/robot_islands.htm

See that it has similar black space on the sides. It should also have the same js scripts. hidebar is the old scrollto trick for older idevices, I have no Idea why I still bother with that, and loading bar is a generic fullscreen loading bar. These are present in all of my games.

My games are made to scale and the more room there is the larger they get. Black bars are normal since the game will keep the 16:9 aspect and not all screens have that. But in this case they should simply be manually setting the size they want even isf it is bigger than the games original resolution. I'll remind them of this again and show them your reply, hopefully this will get solved. Thank you very much for taking the time to look over the html and for your help.

EDIT: Black bars around games are apparently a normal thing on their site: http://abcya.com/adventure_man_counting.htm

mattstyles · August 2, 2016

Top marks to @BobF for picking the correct answer very very early on! The mans a genius!

The only difference between robot islands (man, thats a great game, has taught my 5 year old loads about planning and reasoning) and money land is the 'overflow:hidden' on the body (in your stuff, in the iframe), I applied the overflow css and all is good with money land.

Technically I guess this is just a plaster and you should work out why that 1100px height is being applied and resolve it, but, I know which solution I'd go for.

-AAG- · August 2, 2016

I'll let my client know. I just sent them 3 new versions of the game for testing: without hidebar, without loadingbar, and without both. But this should convince them to look into their side of things again.

I am very happy to hear that you and your 5 year old enjoy Robot Islands so much. You will probably be glad to hear that ABCya wants an exclusive sequel made. Of course, if this doesn't get sorted out it might not happen at all

Thanks again for your help

-AAG- · August 2, 2016

THEY FINALLY SOLVED THE ISSUE!! It was what Bobf said from the beginning but it sure helped that matstyless tested it until it worked. This concludes my first ever exclusive deal an marks the beginning of more to come. I wish I had something better to give in return than a thanks but I really thank you both a whole lot. THANKS!

BobF · August 2, 2016

I'm glad it got sorted out. As Matt stated, overflow: hidden is a bit of a hack, but I've had to use it myself to fix a situation where one browser (IE, I think) was displaying scrollbars in a situation where it was not clear why they were there, and no other browser had the problem. Congrats on your deal, and good luck with the sequel!

[SOLVED] The scrolling bars issue

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members