1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. To chat with the GameOgre community, you need to have at least 100 posts. Once you have the 100 posts, post at Become A New Ogre
    Dismiss Notice

HTML and iFrames

Discussion in 'Online Game Development' started by ogreman, Apr 11, 2012.

Thread Status:
Not open for further replies.
  1. Admin Post
    ogreman

    ogreman Ogre In Charge Staff Member GameOgre Admin

    Messages:
    51,981
    Likes Received:
    8,869
    Trophy Points:
    113
    Credit:
    497,415.69
    Does anybody have experience using these with browser games? Need to take one of our pages off the CSS to host an iFrame of a browser game.
     
  2. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    I use html and frames in shugo. Iframe makes very little difference to me over a normal frame.

    All I need to know, is to what file the frame should point and where this file is located on your server.
     
  3. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    Here is an example of a html frame that I use in shugo:

    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    <HTML>
    <HEAD>
    <TITLE>SHUGO</TITLE>
    <META NAME="description" CONTENT="Shugo is an online multiplayer game set in medieval Japan during the Sengoku Jidai era. The game supports a maximum of 140 players and is absolutely free to join."/>
    <META NAME="keywords" CONTENT="Shugo">
    <link rel="shortcut icon" href="../favicon.ico">
    </HEAD>
    <FRAMESET rows="70,*" frameborder="1">
    <FRAME src="linkage.php" name="linktop" scrolling="no">
    <FRAME src="council.htm" name="viewbottom" scrolling="yes">
    </FRAMESET>
    </HTML>
    
    In this example the frames are rows. Of course you could also make them as columns.

    In this example the top frame is 70 pixels high and points to the file linkage.php. Its name is linktop.

    The bottom frame is as high as the screen height minus 70 pixels of course. It is called viewbottom.

    You don't need to use pixels for the height or width. You can also use percentages of the screen width or height.
     
    Last edited by a moderator: Apr 12, 2012
  4. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    This is an example of the targetted links in the file named linkage.php

    Code:
    echo "<P><A HREF='nippon.php?view=terrain' target='viewbottom'>Map</A> |
    <A HREF='council.htm' target='viewbottom'>Council</A> |
    <A HREF='chronicles.php?eventtype=4' target='viewbottom'>Chronicles</A> |
    <A HREF='court.php?rankings=wealth' target='viewbottom'>Court</A> |
    <A HREF='forum.php' target='viewbottom'>Chat</A> |
    <A HREF='preferences.php' target='viewbottom'>Preferences</A> |
    <A HREF='logout.php' onclick='breakout()'>Logout</A></P>";
    
    
    You will notice that the target points to the other frame, called viewbottom.

    I did this, because I don't want for example the file called council.htm to open in the top frame, because a height of 70 pixels is too small. So instead I made a targetted link to the bottom frame, so that when a visitor who clicks on the link to the council.htm page sees the page at the bottom of their screen.
     
  5. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    a html tutorial of w3schools, explaining html frames:

    HTML Frames



    If you can't figure it out, no worries. In case of emergency email me. Again I do need to stress that I need to know what the files are named and where these can be found. Afterall you can't target something, if you don't know where it is.


    btw...

    when I just learned html this was the hardest thing for me to comprehend, so I understand why people have difficulties with this. But trust me it is a lot easier than it seems.
     
  6. Admin Post
    ogreman

    ogreman Ogre In Charge Staff Member GameOgre Admin

    Messages:
    51,981
    Likes Received:
    8,869
    Trophy Points:
    113
    Credit:
    497,415.69
    The iFrame is set up at Play Drakensang - Free Browser MMORPG but the box is too small because the whole design is too narrow. Need to widen that on that page. If that is something you can do, I can send the file that needs to be edited.
     
  7. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    I looked at the html code of that page

    Code:
    <div class="black">
    <h2 class="style2">&nbsp;Drakensang Online</h2>
    </div>
    <div class="inner">
                <p align="center" class="style3">
    			<iframe src="http://drakensang.bigpoint.com/?aid=4412"></iframe></p>
    			
    </div>
    </div>
    
    
    As you can see the iframe doesn't have a width and height.

    However I think you may have a bigger problem than just the missing width and height alone.

    As you can see from the code, it is nested inside a paragraph, that is nested in a div that is nested inside another div. The paragraphs and divs may be too small anyway. Since these html tags all have classes then the height and width of these html tags (the divs and the paragraph) are set by your css file.

    You could try to change the code to this:

    Code:
    <div class="black">
    <h2 class="style2">&nbsp;Drakensang Online</h2>
    </div>
    <div class="inner">
                <p align="center" class="style3">
    			<iframe src="http://drakensang.bigpoint.com/?aid=4412" width="400" height="300"></iframe></p>
    			
    </div>
    </div>
    
    
    Those are random numbers (400 and 300) I picked, I have no idea whether these are too small or too big.

    But if that doesn't work, I also need the css file that goes with that page. As I can see from the html code:

    Code:
    <link href="styles.css" rel="stylesheet" type="text/css" />
    
    is that the css file is called styles and it is located in the same directory as the playdrakensang file.

    I'll have to add new classes to that css file and change the class names of those divs and paragraphs.

    Even then I doubt that the iframe will be big enough, because it appears to me there just isn't enough room on that page for the drakensang iframe. You see, the bigpoint page is as big as the whole html page. So there is no way an iframe will show the whole page. If that is what you want, show the whole page in an iframe, then the answer is that it can't be done, because it is impossible.

    I can remove the paragraph around the iframe, and increase the size of the iframe inside the div. The p or paragraph only appears to be used to center the iframe inside the div, but if the iframe is as big as the div it is nested in, then that p won't be necessary, so it can be removed. Afterall why center, if that iframe is as big as the div, because then it is automatically centered in the div anyway. It probably won't be enough to remove the p though.

    It could also be the case that the css file sets the height and width of all your iframes. If that is the case, then the iframe needs to have a class, or the iframe class needs to be removed in the css file (that's assuming the css file styles isn't used for other html pages).

    One more thing...
    Setting the number of pixels (which is what I did in that example) , may not be the way to go about it, because the resolution of the computer screen of your visitors differs. Some people may have a small resolution of say 800x600, while others have a higher resolution of say 1028x768. So 400 by 300 may be too big for the 800x600 and too small for the 1028x768. If the iframe is bigger than the div it is nested in, then the div will break and the iframe will position itself to whatever else in the css file causes it to position itself there.

    The alternative is too set it to percentages like so for instance:

    Code:
    <iframe src="http://drakensang.bigpoint.com/?aid=4412" width="60%" height="50%"></iframe>
    
    
    But then it probably will be the width and height in percentages of the width and height of the div, it is nested in. If the width and height of that div is relative (i.e. also percentages), then it is likely that it may still be too small for visitors with a low resolution computer screen.

    So what I'm saying is that there is a very real chance that an iframe won't do for all your visitors on that page. The page just isn't designed to do that.


    Anyhow you could try this:

    Code:
    <div class="black">
    <h2 class="style2">&nbsp;Drakensang Online</h2>
    </div>
    <div class="inner">
    <iframe src="http://drakensang.bigpoint.com/?aid=4412" width="400" height="300"></iframe>
    </div>
    </div>
    
    
    or this:

    Code:
    <div class="black">
    <h2 class="style2">&nbsp;Drakensang Online</h2>
    </div>
    <div class="inner">
    <iframe src="http://drakensang.bigpoint.com/?aid=4412" width="60%" height="50%"></iframe>
    </div>
    </div>
    
    
    and play around with the number of pixels or percentages to see what works. You should try it with different resolutions of course, to see if it works for all your visitors.

    To change the resolution in windows:
    Go to configuration -> personal settings -> screen settings (it's below on the personal settings)

    (on some windows versions you may need to restart your computer, when you change your screen resolution)
    (the resolutions available to you depend on the limits of your monitor and your graphics card)
     
    Last edited by a moderator: Apr 14, 2012
  8. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    ^ I realize there is a lot of "but", "if", and "maybe" in that post, but that is because I haven't seen what is in that css file and if that css file is used for other html pages. If you had told me that, then I could have determined more.
     
  9. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    P.S.

    to the person who designed that page, using p to center something is not the way to do it, because as he or she can see from this situation is that it causes other problems. The designer should have used relative margins and/or padding.

    That designer should read more about the gutters system. It would really help him or her.
     
    Last edited by a moderator: Apr 13, 2012
  10. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    If you need aid with the iframe, then this tuesday will not be a very convenient day, because I have a meeting with a client that day. I'll probably be working on a website with a small webshop that sells a political book from tuesday onwards. I'll also be away this saturday. On any other day you could try your luck and see if I have time left to help with the iframe, but I'm giving you heads up, that there is a possibility that you may have to wait for a response.
     
    Last edited by a moderator: May 6, 2012
  11. Admin Post
    ogreman

    ogreman Ogre In Charge Staff Member GameOgre Admin

    Messages:
    51,981
    Likes Received:
    8,869
    Trophy Points:
    113
    Credit:
    497,415.69
    The iframe for the game was placed on the old GameOgre.com design at Play Drakensang Online - Browser MMORPG That is about the width that would be needed if we replaced that design with a newer one.
     
  12. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    that tells me something, but not everything


    I have plenty spare time this thursday and friday (i.e. tomorrow and the day after tomorrow). I don't have any time this saturday, but I am free this sunday.

    If you need help, email me.

    I need a copy of the file in question and a copy of the css file that goes with it.

    I think, i'll just make extra classes for the css file, just to be on the safe side, as I reckon that the css file is used in other html pages.
     
  13. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    No wait, forget the copy of html file. I can copy that myself, but I do need a copy of the css file.
     
  14. Admin Post
    ogreman

    ogreman Ogre In Charge Staff Member GameOgre Admin

    Messages:
    51,981
    Likes Received:
    8,869
    Trophy Points:
    113
    Credit:
    497,415.69
    Hmmm, might can do it myself. Cat suggested copying the CSS, renaming it, and then editing that one page. Then that page would point to this new CSS because the other CSS will be used for the rest of the site. That would work right?
     
  15. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    yes, it will

    it's a good suggestion of cat
     
  16. Admin Post
    ogreman

    ogreman Ogre In Charge Staff Member GameOgre Admin

    Messages:
    51,981
    Likes Received:
    8,869
    Trophy Points:
    113
    Credit:
    497,415.69
    Ok, will try that then:).
     
  17. Admin Post
    ogreman

    ogreman Ogre In Charge Staff Member GameOgre Admin

    Messages:
    51,981
    Likes Received:
    8,869
    Trophy Points:
    113
    Credit:
    497,415.69
    The file has been renamed, but not exactly sure what to edit to make that happen:).
     
  18. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    It seems likely to me that you can edit the size in the html file. That should do it just fine. If however the tag has a class and you shouldn't remove that for some odd reason (which seems improbable), only then you actually need to alter the css file.

    If it's all too difficult, because you don't understand the working of the frame (hey it happens), then you can email me of course.

    I have spare time tomorrow. I'm busy with a website this monday. My cousin needs help with her website. And well, family comes first, but if sunday is inconvenient, then I'm pretty sure I'll be able to help you this tuesday, wednesday and thursday.

    Friday afternoon won't be a good time and neither is saturday. You see the 4th of may is rememberance day in the Netherlands and the 5th of may is liberation day.
     
  19. quinn

    quinn Starcatcher Ogre Veteran

    Messages:
    3,811
    Likes Received:
    386
    Trophy Points:
    83
    Credit:
    13,397.09
    Oh, interesting, the page on the old design puts the entire game in a scrollable window if your screen is too small to view it at once, instead of forcing the entire page to scroll. Might want to look into changing this, as it can be a bit awkward. (Although I don't imagine many people with screens as small as mine browse GO regularly, hehe)
     
  20. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    just set it to scrolling=yes in the html that should fix that

    but good that you mention that quinn
     
Thread Status:
Not open for further replies.

Share This Page