Forum Moderators: open

Message Too Old, No Replies

problem with sizing iframe in Safari

         

toolbar

1:42 am on Apr 24, 2004 (gmt 0)

10+ Year Member



A site I'm working on for myself is like this: basically a menu with an Iframe imbedded in a graphic border (I wanted to say "frame" but that would be confusing.) The height of the iframe is set to %100 percent, but I've learned that this doesn't work in Safari, which correct-me-if-I'm-wrong only reads fixed sizes for iframes. It looks great in the other later browsers.

Is there a method of resizing the iframe with javascript using the width of the browser window as the given? I'm not very good at javascript yet, unfortunately. The thought of redesigning the entire site just for Safari kills me.

tedster

8:21 am on Apr 24, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hello toolbar, and welcome to the forums.

Yes, there are javascript methods for learning the current available width and/or height of the browser window. I'm not sure which you want, both both are available objects. We have a dedicated Javascript Forum [webmasterworld.com] which would be the best place for help to work out the specific code, if indeed you do go that way.

However, I agree that a javascript approach seems like extreme overkill - and it would also stand a chance of burying your menu in a javascript document.write() statement, which would give many search engines some trouble. Even without the js, you still want to provide the spiders a direct path to the menu document that's loading in your iframe. Last I checked, spiders were not consistently crawing the src attribute for iframe elements, only straight links.

Is your iframe in a table cell or a div? Can you share a little code snippet for that part of your page, but removing any URLs that would show your domain?

j4mes

8:34 am on Apr 24, 2004 (gmt 0)

10+ Year Member



There's a good reference here [hotwired.lycos.com] which shows what the various browsers can and cannot do. Unfortunately, iframes are hardly supported by safari.

You might be able to use regular frames in some kind of arrangement to get the desired effect. What kind of thing are you trying to do?

tedster

8:44 am on Apr 24, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Here's another thought -- if you never display anything but this menu in the iframe (that is, no link elsewhere changes the document that is displayed in the iframe) what you probably find more satisfactory is using a server-side include (SSI) for your menu.

toolbar

12:11 pm on Apr 24, 2004 (gmt 0)

10+ Year Member



My description might have been a bit confusing. Forget the menu, it's not actually in the Iframe. I just meant to say that all the content of the entire site opens in the iframe except the menu. Arggh,it's so hard to describe without giving the URL.

Imagine a picture frame: the iframe is embedded in some nested tables of sliced images, but no DIVs. At first I thought this was the problem. So i fiddled blindly for a long time. It was very difficult to find info on this apparant glitsch on the web. I guess I'm one of the few who want to use "%" in an iframe (this wish being ridiculed in other fora by frame-haters).
I could do it with a normal frameset, but it will always resize itself over those sliced images in the side-frames. It looks really bad. The whole thing is and esthetic issue, really, wanting a simple resizable cell to be a loadable frame: the promise of iFrame.

Incidentally, I'm not terribly concerned about spiders and search engines, as the iFrame's content is mostly photographic.

As for code:

[1]
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="50" background="borders/edge_t.gif"></td>
<td width="50" height="50"><img src="borders/corner_tr.gif" width="50" height="50"></td>
</tr>
<tr>
<td width="100%" rowspan="1" align="center" valign="middle" bgcolor="#000000">
[b]<IFRAME
marginWidth="0" marginHeight="0"
src="index2_content.htm" name="_receptor"
frameBorder=0 width="100%" height="100%" scrolling="auto"></IFRAME> [/b]
</td>
<td width="50" background="borders/edge_r_sml.gif">&nbsp;</td>
</tr>
<tr>
<td height="50" background="borders/edge_b.gif">&nbsp;</td>
<td width="50" height="50"><img src="borders/corner_br.gif" width="50" height="50"></td>
</tr>
</table>[/1]

Thanks for the help amigos
Toolbar