I've found many related questions but none with an answer that explains how to scroll an iframe using the 2 finger method in iOS 4.
I am able to scroll a div with 2 fingers by setting a width and height attribute and setting overflow: scroll;. Here's a more complete example of this:
<div style='width: 280px; height: 200px; overflow: scroll; -webkit-overflow-scrolling: touch;'>
Just imagine a bunch of content is in here, spanning well over 200px
worth of height. You can scroll this just fine in iOS 4 by using 2
fingers, or in iOS 5 by swiping 1 finger thanks to
"-webkit-overflow-scrolling: touch;".
</div>
This same method isn't working on iframes on my iPad 1 running iOS 4.3. Here's a complete example that won't scroll with any combination of fingers in iOS 4 (although, of course, the -webkit-overflow-scrolling allows it to work on iOS5):
<html>
<head>
<style type="text/css">
#scroller {
width: 280px;
height: 200px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#scroller iframe {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="scroller">
<iframe src="content.html">content.html is a big list of nonsense.</iframe>
</div>
</body>
</html>
I must add that I can get 2 finger scrolling to work if I set the width and height of the iframe to actual pixel values, like height: 1000px;, but I will never know how tall the iframe's content will be. So, perhaps the real question is how can I convince mobile Safari in iOS 4 that the iframe inside of this div is indeed larger than 280x200 pixels?
A simple idea posted by rossb # github.com/fancyapps worked beautifully for both scrolling in iOS 4 (2 fingers) and iOS 5 (1 finger) and solves the "blank content on scroll" issues that iOS 5's iframes seem to be plagued with. Basically, you don't want the iframe to handle any scrolling. Give it a fixed width/height and wrap the scrollable content in your included file in a div that can be scrolled.
Here's an example:
<iframe id="stupid-iframe" width="600" height="200" src="a-file.html"></iframe>
a-file.html:
<html>
<body>
<div id="wrapper" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
...all my normal content...
</div>
</body>
</html>
Related
I have created a jssor slider, that scales well but kind of flickers when displayed on an iPhone 4S both in landscape and portrait but is fine on an iPad. I suspect it's hitting the limit of scaling or some such issue.
Also any idea on how to centre the slider vertically.
The URL is www.anamacdonald.co.nz/2.html
Please place your slider in the wrapper below,
<div style="position: fixed; display: table; width: 100%; height: 100%;">
<div style="display: table-cell; vertical-align: middle;">
<div id="slider1_container" ...></div>
</div>
</div>
Or you can use $('#slider1_container').css("top", top); to set top of slider1_container to change position manually while window resize.
[link removed] on iPhone, the top banner will not stretch all the way. Solution?
heres a screenshot: ![enter image description here][1]
Here's the CSS ive applied to the div:
#banner {
background-color: #F7F7F7;
background-size: cover;
box-shadow: 0 0 30px 2px #DCCFBF inset;
display: inline-block;
height: 200px;
width: 100%;
Issue 2. In chrome, when I resize the browser window, the bottom two nav icons shift (graphic design and social media). I put them in a container to try to keep them in place but it still happens... only on chrome. I realize the whole site shifts, but the other icons in the nav stop after a while and the bottoms one overlap them and it looks bad. Any suggestions?
The banner doesn't stretch all the way because your content is wider than what mobile Safari treats as the full width. It then scales down the whole page to fit the content and strands the header a bit.
see this answer to a similar question
It is usually fixed by adding
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
to the <head>
As for the icons, Chrome seems to be respecting the #media query value of width: 100% on #home (line 528 of main.css) as you shrink the browser window while Firefox does not, and retains the first value width: 1020px (l. 91)
im having some problems to understand how to render a web page in a decent way on the iPhone, i think the problem have to be releated with the margin-left but i have no idea how to solve the problem in order to have a good render on pc and mobile.
Here is how it looks on a pc browser:
Sorry for so many white spaces, is just to clarify the div is centered. And this is how its looks on my iPhone:
Even if a move the page with my finger im not abble to see the left side of the blue ribbon, it is just "out of the screen".
This is my code (part of it):
CSS
#center-coupon {
width: 474px;
height: 255px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -237px;
margin-top: -150px;
text-align: center;
}
#rib {
background-image:url(img/ribbon.png);
height:75px; width:474px;
}
#main4 {
position:relative;
background-color:#eeeeee;
height:300px;
width:340px;
left:66px
}
Html
<div id="center-coupon">
<div id="rib"></div>
<div id="main4">
<p style="font-size:35px;font-weight:bold;padding-top:15px;">El bar de mou</p>
<p>coupon awarded to</p>
<img src="http://graph.facebook.com/XXXXXXXXXX/picture" alt="profile picture" class="img-polaroid">
<span style="font-size: 25px; font-weight:bold;"> Domingo</span>
<p style="margin:10px 0 0 0; font-size: 17px;">Valid for: <b>Beer moretti 0.2l</b></p>
<p>created on 2012-10-21</p>
<a data-toggle="modal" href="#destroy_c" class="btn btn-danger btn-large">Destroy Coupon</a>
</div>
</div>
I know the center-coupon div is widder than the iphone screen, but that does not explain why im not abble to see part of the left side of the ribbon... A good solution will be forse the iphone to render the site with less zoom, but i dont know if that is possible, and dont know if that propety will be compatible with other mobile platforms. So what do you think?
I am no iPhone expert, but it is my understanding that the pixel density of the device has nothing to do with the CSS pixels. So, as far as CSS is concerned, the width of the phone is 320px. You are positioning the left edge of the coupon in the middle of the page, then moving it 237 pixels to the left, which essentially places it off of the screen. Have you tried changing the negative margin to a smaller amount?
You're negative margin is more than half the viewport width of an iPhone, therefore it is dragging it out of view.
If you want to center an element, you can use margin: auto (so long as an explicit width is set) rather than positioning the element with absolute positioning.
I'm trying to help fix a friend's webpage. She paid a guy $800 to make a site for her, and as soon as it went up, he bounced without making it compatible with iOS Safari (as he had promised). She can't get a hold of this guy and it's months later. So anyway, I'm trying to help her out. www.avasassi.com
I tried to fix the viewport tag
The entire display showed up too large on iOS safari
You couldn't properly zoom out to view the page
She wants it to load up correctly, and centered on the initial load up
Every page has this issue
I've only tweaked index.hmtl and projects.html so far
The original viewport tag was...
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" name="viewport">
I tried tweaking it to this viewport tag with mediocre results
<meta name="viewport" content="width=device-width, initial-scale = 0.5" />
Next the projects page (projects.html)
shows the individual images centered in firefox and chrome, but on safari on iPhone
it's off center, and somehow cuts the orange bar short so that it doesn't span the whole page
the images aren't centered with the header
Here's the code for the project page's images...
<section id="frame">
<div class="row1 cbox"><a class="samlink" href="saltysam.html"></a></div>
<div class="row2 cbox"><a class="spicelink" href="spicemates.html"></a></div>
<div class="row3 cbox"><a class="khloelink" href="khloe.html"></a></div>
<div class="row4 cbox"><a class="simonlink" href="simon.html"></a></div>
<div class="row5 cbox"><a class="thrivelink" href="thrive.html"></a></div>
</section>
CSS
#frame {
width: 450px;
height: 1850px;
margin: 0 auto;
position: relative;
display: block;
&
.cbox {
position: absolute;
overflow: hidden;
opacity: 1.0;
filter: alpha(opacity=100);
width: 450px;
margin: 0 auto;
Any and all help is gladly appreciated. Cheers.
http://api.jquery.com/animate/
On this page, they give a demo where they have a gray div move across the screen with the click of a button.
Notice that if you click the right button enough times and the DIV block reaches the end of the container it creates horizontal and vertical scrollbars.
I downloaded and modified the code to get rid of the overflow property and what I have so far works BEAUTIFULLY in desktop browsers.
However, Safari on the iPhone handles things a little bit differently. For some reason, Safari completely ignores the overflow property and instead expands the browser window to show you where the block moved to.
I don't want you to be able to see the block. I want it hidden until you hit button again.
Anyone know what the heck is going on?
Here is a pic of the issue:
Here is my code:
div {
position:absolute;
background-color:#abc;
width:100%;
height:100%;
margin:0px;
max-width:100%;
}
body {
margin:0px;
padding:0px;
}
* {
overflow:hidden;
clip:rect(auto, auto, auto, auto);
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
<script>
$("#right").click(function(){
$(".block").animate({"left": "+=110%"}, "medium");
});
$("#left").click(function(){
$(".block").animate({"left": "-=110%"}, "medium");
});
</script>
Even though I have moved the DIV block off the screen and I have overflow:hidden as a global style, the iPhone will make room for it in the browser window to show you where the DIV has moved to. ANNOYING!
Thank you in advance!
Not completely sure I understand what you want to accomplish here. But if you want to make the gray box disappear as it leaves towards the end of the document, then I would suggest that you wrap the div inside another div, and set the width of the wrapping element to 100% and overflow: hidden;
Like this:
<div class="wrapper">
<div class="block"></div>
</div>
Also add the appropriate styling:
<style type="text/css">
...
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
}
</style>
Note that you need to absolute position the wrapper as well, otherwise the gray block will still be visible outside it. You'll also need to give it some height (I used 100% in my example) or it will be 0px high (due to the absolute positioned child) and nothing will be visible.
Hope that helps.
Alternative to
overflow:hidden
HTML:/<div class="clear"></div>
CSS:.clear {clear:both;}