Viewing Problem with iframes smaller than 560px width and scrollbars
Problem with iframes smaller than 560px width and scrollbars
|
User: David P. 11 years ago
|
|
|
Hello all, I'm copying my entire iWeb site into Everweb. Now I've a problem trying to set up the iframes that I used in iWeb exactly identical on Everweb. In a page I insert an iframe that is 400 px width and 600 px height. The page that is loaded into this iframe is 400px width but 1000 px height, so what I expect is that it will be displayed with a vertical scrollbar into the iframe to scroll the content vertically and without a horizontal scrollbar, because in the code "scrollbar" is set on "auto". This was how it worked with iWeb, how I see the pages in all browsers, how I want to maintain the design in Everweb too and how I think it should work. But for an unknown reason, the same configuration on Everweb always creates scrollbars horizontally, although they are not needed. I've discovered that this occurs with any iframe smaller than 560 px width, but when iframes are bigger than 560px, then the horizontal scrollbar is only showed when needed, working as expected. Why? And how can I solve this? This is the CODE that I'm trying to use: <IFRAME NAME="Name" SRC="content.html" WIDTH="400 px" HEIGHT="600px" FRAMEBORDER="0" MARGINWIDTH="0px" MARGINHEIGHT="0px" SCROLLING="auto" ALLOWTRANSPARENCY="true">
Last edit 11 years ago |
|
|
User: Jumbo T. 11 years ago
|
|
|
It's not a bug, it's the messy code. Try either one : <iframe name="Name" src="content.html" width="430" height="630" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" allowtransparency="true"> or <iframe name="Name" src="content.html" style="width: 430px; height: 630px;" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" allowtransparency="true"></iframe> The width and height are larger than the page, because a page ussualy has a 8px margin in the browser window. Last edit 11 years ago |
|
|
User: Roddy 11 years ago
|
|
|
If you are going to use iframes, you should at leat update your code. Items such as frameborder, marginwidth and marginheight are not supported in HTML5 and scrolling is useless on mobile devices. <iframe src="page-name.html" style="width:450px;height630px;margin:0;padding:0;border:none"></iframe> In any case, now that a large percentage of visitors are using tablets to view the full site, iframes should be avoided since they open to full height on these devices. Check your website in the iOS simulator to see what I mean. Either of the Scroller widgets will do the job better and work on iPad etc. As Jumbo T. has pointed out, the iframe width should be about 20px wider than the document being displayed in it if you want to avoid the horizontal scrollbar. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: David P. 11 years ago
|
|
|
Thanks Jumbo T. and Roddy... but it's not a code issue. I've tried your suggestions, but the same problem occurs. But I've good news, I think the problem is related to the "Content.html" file. The original was created with a previous version of EverWeb that I was duplicating to make the variations of every page. Now, I've tried to create an exact copy of the "Content.html" page ("Content1.html") with all the same options, sizes, images and text, but from a new and empty file, and this work perfectly. So, although "Content.html" and "Content1.html" seems to be identical, the old version creates the problem and the newest seems to work fine. Changing the subject, about iframes in iOS I know some limitations, but I'm able to view and scroll an iframe without problems with my iPad. But I have problems when the iFrame to scroll is into another iFrame... then, I don't know how to scroll it. If you have an iPad or iPhone, you can try what I mean here: http://www.davidpratsjuan.com/TESTS/Pruebas/Only1iFrame.html Some years ago, I was using "iframe" for IE and "object" to all other browsers (including iOS Safari). The content of an Object were perfectly scrollable with two fingers in early versions of iOS, but was broken on iOS 4 and newers. Now, iframes seem to be scrollable but not when they are inside another iframe. Last edit 11 years ago |
|
|
User: Jumbo T. 11 years ago
|
|
|
Use the code in this file. http://www.davidpratsjuan.com/TESTS/Pruebas//Only1iFrame_files/widget0_markup.html Look at the source and copy/paste the the code that's between <body> and </body> The code is still sloppy. Note that the WIDTH is 620 PIXELS not 400 PIXELS. The iframe with page will show correctly and the JavaScript will make it scroll on an iPad. |
|
|
User: David P. 11 years ago
|
|
|
Jumbo T. this page is very old, I created it many years ago with iWeb to explain another problem, it's not the page that I was talking about on my first question, it's not related to Everweb and obviusly the width and height are not the same, don't worry. I just pasted here the link to show that iframes are scrollable on iOS, but I want to ask you If you know any other code or script to make scrollable on iOS an iframe that it's into another iframe. Please, try to scroll this on iPad or iPhone: http://www.davidpratsjuan.com/TESTS/Pruebas/iFrameINiFrame.html |
|
|
User: Jumbo T. 11 years ago
|
|
|
The iframe that scolls has a javascript. The iframe that doesn't scroll has no javascript. So now you know what to do. And besides that, what's the purpose of an iframe in an iframes in an iframe, etc? |
|
|
User: David P. 11 years ago
|
|
|
[quote name=Jumbo T. time=16/05/2015 1:14:48]The iframe that scolls has a javascript. The iframe that doesn't scroll has no javascript. So now you know what to do. Thanks! I will try it later. [quote name=Jumbo T. time=16/05/2015 1:14:48]And besides that, what's the purpose of an iframe in an iframes in an iframe, etc? I use it to alternate different content in a little section of a page, without having to load the entire page. For example, here: http://www.davidpratsjuan.com/Producciones This is the old page I made with iWeb and I'm trying to renew with Everweb. As you can see, there's a main page "Producciones.html" with an iframe at the bottom. Into this iframe, you can use the buttons inside ("Cortometrajes", "Documentales", "Largometrajes" and "Publicidad") to view different content: movies, short films, documentary films, spots... Every different content has to be scrollable, so I put it into another iframe inside the iframe. I know that using target code I will be able to have the buttons in the main page and only one iframe with scrollable content, but then I don't know how to highlight what button (section) is selected/active every time. So my solution was to have the main page, a first iframe with the buttons and inside it, another iframe with the content. Sure there are better ways to do this with other professional software like Dreamweaver or Flux and perhaps other programming languages, but I don't know anything about this... Perhaps I want to do some complex things that are not compatible with the simplicity of iWeb or Everweb, but these are the only software that I'm able to use because I just can understand some easy codes of html and nothing more. Last edit 11 years ago |
|
|
User: Jumbo T. 11 years ago
|
|
|
Here's what will work based on what I guess you want : Paste each piece of code in a separate HTML Snippet If you see java script with a space, it's because this forum make it that way. Remove the space. <!-- this belongs <script type="text/javascript" src="http://www.davidpratsjuan.com/PlugIns/Scripts/jquery.min.js"></script> <script type="text/javascript"> $(function(){ if (/iPhone|iPod|iPad/.test(navigator.userAgent)) $('iframe').wrap(function(){ var $this = $(this); return $('<div />').css({ width: $this.attr('width'), height: $this.attr('height'), overflow: 'auto', '-webkit-overflow-scrolling': 'touch' }); }); }) </script> <iframe id="show" name="show" src="Cortos.html" width="620" height="550" frameborder="0" marginwidth="0" marginheight="0" scrolling="true" allowtransparency="true" ><p>Si lee este mensaje puede ser debido a que su navegador web no soporte algunos elementos de esta página. Para visualizarla correctamente quizás deba intentarlo con otro navegador o con una versión actualizada y más reciente del que está utilizando. Disculpe las molestias.</p></iframe> together --> <a href="Cortos.html" target="show">Cortometrajes</a> <a href="Docus.html" target="show">Documentales</a> <a href="Pelis.html" target="show">Largometrajes</a> <a href="Spots.html" target="show">Anuncios</a> Here's a sample : http://tahafut.hol.es/anuncios/ You will not see images, because I only saved the pages. If I use a link to your page, a desktop browser will show the page in the iframe, but on my iPad the page opens in a new window. I guess it is for security reasons that browsers only show content from the same domain. And don't do namedropping of applications. Dreamweaver nor Flux would do it. KNOWLEDGE does. |
|
|
User: David P. 11 years ago
|
|
|
Thank you very much for your help Jumbo T. I'm using the code you entered on the new page I'm doing now with Everweb. But I think it's still necessary to use two iframes, one inside the other, to do exactly what I want. Why? Well, as you can see in my design the links "Cortometrajes", "Documentales", "Largometrajes" and "Anuncios" are buttons, grey images that when are active (because showing different content in the scrollable iframe) turn to blue to tell you what are you viewing every time. For that reason, this images are into the first iframe, because when you click one of them, the image colors of links needs to change: the active one from grey to blue and the previous active again from blue to grey. So in my example, this occurs in the first iframe that contains the second iframe, which is the one that have to be scrollable. I don't know how to do that without two iframes... I was thinking on a possible solution that will continue using two iframes but not one within the other, showed each one in an independent div. But for that, I need that the same button execute with just one click two different link actions opening two different pages in two different frames. When you click, on the one hand the link opens the scrollable content in iframe1 and in the same action also changes a menu page in iframe2 where the buttons colours turn different. I do not know if I'm explaining this very well... Do you understand me? Some months ago, I was searching a lot and I didn't found nothing about this. I think it's not possible in HTML language that the same link execute two simultaneous actions opening two diferent pages in two different frames. I imagine something like: <a href 1="Content1.html" target="iframe1" a href 2="Buttons1.html" target="iframe2">Cortometrajes<a/>
Last edit 11 years ago |
|
|
User: Jumbo T. 11 years ago
|
|
|
Something like this? http://tahafut.hol.es/anuncios/click.html |
|
|
User: David P. 11 years ago
|
|
|
[quote name=Jumbo T. time=16/05/2015 9:00:13]Something like this? http://tahafut.hol.es/anuncios/click.html Yeah! Exactly this! Well... with a little difference, the text or image with the link has to be into one of the two frames that also changes. Is it possible? I mean just to put the text with the link into the "Page 1", then when you click, the "Page 1" changes to "Page 2" and also the other frame where "Page 2" was showed changes simultaneously to "Page 1". Exactly the same of your example but with the text link inside one of the two frames. Remember that one of the pages that has to change is the one that contain the button links, because what I want is to change also the colors of the links active, those that you are viewing in the other frame. |
|
|
User: Jumbo T. 11 years ago
|
|
|
It's a 5 minute solution. Other solutions may take 10 minutes or longer. You now have the code. You create the pages. |
|
|
User: David P. 11 years ago
|
|
| Thank you very much! I will try the two options. :) | |
|
User: David P. 11 years ago
|
|
|
Ok, I've managed to work with the links outside the frames with an exact copy of your code. Furthermore, the content is scrollable in iOS. But I can not make it work when the links are within the frames. Something I'm doing wrong or perhaps different path must be specified when the link is within frames. http://davidpratsjuan.com/TESTS/2iframes/java.html |
|
| Post Reply |
| You must login or signup to post. |