|
Post by Sue on May 1, 2017 9:48:41 GMT -5
Hi friends, I don't usually bother with these kinds of details, but this particular problem is annoying me to no end. I have a basic iframe layout for my web site : fleabagz.net/main/When viewing it on my iphone, the frames seem to be non-existent. I think it's called stack overflow...? Anyway, my pages are simple old school html. Is there a code I can add to my index, to keep the pages inside the iframes, as viewed on a computer? I've looked at web design tutorials, but haven't yet found an answer than my wee brain can wrap around. Thanks in advance.
|
|
|
Post by midnightwolf on May 1, 2017 10:14:38 GMT -5
You'd need to use CSS as well as HTML to fix that issue I believe. Is your CSS embedded in your html, or you use purely HTML? This tutorial is the simplest I could find, but it uses CSS as well as HTML. You could just add the coding that they've written, add a CSS file (or add it on top of your html file), and use CSS only to fix that issue you're having. Your site views perfectly on Android if that makes you feel any better :D
|
|
|
Post by Sue on May 2, 2017 10:58:43 GMT -5
Thanks for your help! I do have css on my index. *blush* Then I use an external css style sheet for my pages. I wasn't clear on that point, sorry. What I meant was, that I assumed the only code I need is for the index itself which of course, contains the iframes. And after studing this simple fix, I see that should do the trick. However with the css that is already on my index, I'm fumbling it trying to put the code in the correct spots. My first attempt caused my menu to go byebye. LOL! This is what my index looks like.
I was given this by a friend years ago, and understand what I see. However I am lost as to where and how I should add the code that is on the tutorial you linked. </dummy>
PS. Yes! It does make me feel a bit better that this is only an iOS issue. Thanks for that! ;D
|
|
|
Post by midnightwolf on May 2, 2017 11:56:18 GMT -5
It might take a few tests because I don't have an IPhone (or the iframe pages) and I'm trying to work around some steps to make it so you don't have to go back and edit numbers when you want to change the layout. It's also been a long time since I've worked with iframes haha
Could you give this a try? I have high doubts but maybe. If not, I'll do it the wrapper way, it's just more annoying to mess with haha
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="shortcut icon" href="fbz-icon.ico"> <title>Fleabagz</title> </head>
<style type="text/css"> div#box { width: 800px; height: 800px; position: relative; margin-top: 0px; margin-left: auto; margin-right: auto; text-align: left; -webkit-overflow-scrolling: touch; overflow-y: scroll; overflow: hidden; } body { text-align: center; margin: 0; } .demo-iframe-holder { position: fixed; right: 0; bottom: 0; left: 0; top: 0; -webkit-overflow-scrolling: touch; overflow-y: scroll; } .demo-iframe-holder iframe { height: 100%; width: 100%; } </style> </head> <div class="scroll-wrapper"> <body background="l-back2.png" bgproperties="fixed"> <div id="box"> <img src="l-back.png" alt="" align="top" border="0" width="800" height="600" style="position:absolute;left:0px;top:100px;width:800px;height:600px;z-index:1"> <iframe name="iframe" style="position:absolute;left:20px;top:124px;width:580px;height:550px;z-index:2" src="site/home.html" allowtransparency="true" frameborder="0">Uhoh! Your browser can't see iframes!</iframe> <iframe name="menu" style="position:absolute;left:635px;top:117px;width:150px;height:550px;z-index:3" src="menu.html" allowtransparency="true" frameborder="0">Uhoh! Your browser can't see iframes!</iframe> </div> </body> </html>
|
|
|
Post by Sasha on May 2, 2017 12:26:13 GMT -5
As an iPad user I just wanted to pop in to say that sadly iframes, despite the name, never really work properly with idevices (lol). Even if you can get your content to appear in the iframe it becomes impossible to scroll. For that reason I actually prefer this 'spill out' issue because at least the content can be read that way. My website for example looks nice on iPads but I can't scroll and therefor the majority of my content becomes completely inaccessible. The issue is just Safari though by the way. It works perfectly fine in alternative browsers such as Puffin. I usually just switch browsers when I see that a site doesn't work properly.
|
|
|
Post by Sue on May 3, 2017 7:53:15 GMT -5
midnightwolf - I can't thank you enough for taking your time to help me out on this, but I fear that @sasha 🌻 may be correct. I tried your index, it didn't work on iOS and it added another scroll bar on the computer. It does however show me the correct place to add the code, and that is most helpful! I plan to work on it a bit more, with what you have shown me, there may still be a glimmer of hope. If not, I'll simply post "This site looks goofy on iOS. Thorry." HA! If I do get it to work, I'll let you know. No need to try the wrapper method... not just yet anyway. Thanks again to both of you.
|
|
|
Post by Sasha on May 3, 2017 10:04:22 GMT -5
If you do find out how let me know please because I'd like to fix my site too ^^
|
|
|
Post by Sue on May 12, 2017 12:09:20 GMT -5
^Of course! Please though, don't hold your breath. I'll be getting back to it during the upcoming week. *Edits: Sadly, no luck with this still.
|
|