HTML and iFrames

ogreman · #1 (**permalink**) 04-11-2012, 07:46 PM

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.

shugo · #2 (**permalink**) 04-12-2012, 09:15 AM

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.

shugo · #3 (**permalink**) 04-12-2012, 09:21 AM

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.

shugo · #4 (**permalink**) 04-12-2012, 09:25 AM

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.

shugo · #5 (**permalink**) 04-12-2012, 09:32 AM

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.

ogreman · #6 (**permalink**) 04-12-2012, 05:56 PM

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.

shugo · #7 (**permalink**) 04-13-2012, 03:06 AM

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)

shugo · #8 (**permalink**) 04-13-2012, 03:53 AM

^ 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.

shugo · #9 (**permalink**) 04-13-2012, 03:56 AM

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.

shugo · #10 (**permalink**) 04-15-2012, 08:27 AM

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.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode