Page A has an iframe (that loads Page B). That Page B has a div#OutputDiv. My goal is to make that div in that iframe scrollable.
SOLUTION (CREDIT TO STEVE!):
Include overflow: auto for that div. However you must specify height too. Simply give any fixed value. eg height: 0.
Use a javascript function to make the div's height always same as the window's, even after window resize. height is now not fixed.
Code:
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
overflow: auto;
overflow-x: hidden; (optional)
-webkit-overflow-scrolling: touch; (enable smooth scrolling on mobile)
height: 0; (omit-able)
}
$(window).resize(function(){
$("#outputDiv").css("height",0).css("height",$(this).height());
});
$(window).trigger("resize");
TL;DR Full story
Page A.html - has an iframe to load Page B. When on Page A, that div#OutputDiv in that iframe must be scrollable. Works fine on PC but not scrollable on iPad/Android. Page structure:
Page B.php - Left half div#OutputDiv, right half div#map-canvas containing Google Maps.
(Sidenote: I think the #map-canvas CSS is pretty unchangeable, for example changing something may cause the Maps to extend height beyond browser height, which is not what I want.)
Page A.html
<style type="text/css">
#title-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#real-time-alert {
margin-top: 155px;
margin-left: 10px;
}
.tab-content {
border-left: 1px solid #ddd;
padding: 10px;
height: 100%;
}
#map {
height: 100%;
}
.nav-tabs {
margin-bottom: 0;
}
#panel {
position: fixed;
top: 120px;
right: 10px;
bottom: 10px;
left: 350px;
}
iframe {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="title-banner" class="well"><h1>Real-time incident updates</h1></div>
<div id="real-time-alert">
DEMO:<br>
<a id="demolink" style="cursor: pointer; font-weight: bold;">22/11/2013, 0.32.18AM: 3.128268, 101.650656<br></a>
</div>
<div id="panel">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#map">Map</a></li>
<li><a data-toggle="tab" href="#message">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="map"><iframe seamless name="map-report"></iframe></div>
<div class="tab-pane" id="message"></div>
</div>
</div>
</body>
Page B.php
*for div#map-canvas, I had to do the code below, or else when I hover on the page, div#OutputDiv will disappear. This may be not important.
$("*").hover(function(){
$("#map-canvas").css("position","fixed"); });
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
width: 50%;
}
#content-pane {
float:left;
width:48%;
padding-left: 2%;
}
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
}
</style>
<body>
<div id="content-pane">
<div class='well well-small' id="inputs" style="margin: 1em 1em 0 0">
<b>TESTING ONLY</b> <br>
<label for="originLat">Incident Site: </label><input type="text" id="originLat" style="width:6em;" />
<input type="text" id="originLng" style="width:6em;" />
<button type="button">Calculate distances</button>
</br>eg. 3.126547,101.657825
</div>
<div id="outputDiv"></div>
</div>
<div id="map-canvas" style="position: fixed; right: 1px;"></div>
</body>
I can't see any overflow controls specified in the CSS (apologies if I missed them).
Have you tried:
div#OutputDiv { overflow: auto; height: 200px; }
The height is just for testing purposes - but you could use Javascript to get the actual height and apply it using either raw javascript or jQuery.
A good example (including how to detect orientation changes if device goes portrait to landscape or similar) can be found on:
How do I get the new dimensions of an element *after* it resizes due to a screen orientation change?
Related
I know there seems to be a lot out there about this, but none of the solutions seem to fix my issue.
I am trying to apply a fixed button to the bottom of my screen within an iframe. With my current implementation, I am experiencing a terrible flicker with the button on iOS Safari whenever I scroll.
Here's essentially what I have:
HTML
<iframe>
<body>
<div class="app">
<div class="app-content">
<div class="card">
<h1>Header</h1>
<p>Content</p>
</div>
<button class="fixed-button">This is flickering</button>
</div>
</div>
</body>
</iframe>
CSS
iframe {
border: none;
position: absolute;
height: 100%;
width: 100%;
top: 0; left: 0;
}
app {
-webkit-overflow-scrolling: touch;
overflow:auto;
position:absolute;
width:100%;
height:100%;
}
fixed-button {
position: fixed;
bottom: 1rem;
}
I've got a WIP on my site here http://jaredrauh.com/iframe-fixed-elements-ios/. Any suggestions would be amazing.
I'm relatively new to web designing so hopefully what I'm writing here makes sense . . .
I have three sections on my page. A header, the middle section and the footer. Within the middle section there are three divs which include an image and text and each taking up 30% of the width of the entire middle section. When the page is decreased to smaller sizes, the footer bumps up onto this middle section. Of course, I'm wanting the footer section to remain at the bottom and be responsive.
At first I had these three divs floated left and I thought this may have something to do with the footer moving. But then I changed the divs to an inline-block.
I've also tried to clear: both. The footer keeps moving up when I scale down the page.
Hopefully, I'm making sense and someone can help. Thanks.
HTML:
<section class='mid-section'>
<div class='one-third'>
<a href='thai-tattoo.html'><img src='https://farm2.staticflickr.com/1528/26102511281_67fdc7c189_m.jpg' alt='Bangkok street'></a>
<h3>HEADLINE</h3>
<p>TEXT</p>
</div>
<div class='one-third'>
<a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>HEADLINE</h3><p>TEXT</p>
</div>
<div class='one-third'>
<a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>HEADLINE</h3><p>TEXT</p>
</div>
</section>
<div class='bottom-section'>
<div class='social-icons'>
<p > Follow us on the Web </p>
</div>
</div>
CSS:
.one-third {
width: 30%;
display: inline-block;
margin: 5% 0 0 2.5%; }
.one-third img {
width: 100%;
height: 300px; }
.one-third p {
margin: 0.5em; }
.tattoo-text {
width: 60%;
margin: 50px; }
.tattoo-h {
font-size: 25px; }
.tattoo-pic {
width: 60%;
float: right;
margin: 10px; }
.quaint-street-pic {
width: 60%;
float: left;
margin: 10px;
height: 300px; }
.social-icons {
float: right;
margin: 100px 100px 0 0; }
I made a simple flippable element using common techniques and found some strange behavior in Mobile Safari on iOS 7 (older version also may be affected, unfortunately I can't test them at the moment older versions also seem to be affected), please see the images below or visit a demo directly on your iOS device.
Editable markup and stylesheet
Full screen view to visit on your iOS device
<div class="flippable">
<input id="flippable-trigger" type="checkbox">
<label for="flippable-trigger" class="flippable-faces">
<div class="flippable-face-front">
Front
</div>
<div class="flippable-face-back">
Back
</div>
</label>
</div>
body {
font: 1em/0 Arial;
background-color: silver;
}
.flippable {
position: relative;
float: left;
width: 10rem;
height: 10rem;
-webkit-perspective: 800;
}
.flippable input[type="checkbox"] {
display: none;
}
.flippable-faces,
.flippable-face-front,
.flippable-face-back {
position: absolute;
width: 100%;
height: 100%;
}
.flippable-faces {
-webkit-transform-style: preserve-3d;
-webkit-transition: 600ms;
}
.flippable-face-front,
.flippable-face-back {
position: absolute;
width: 100%;
height: 100%;
line-height: 10rem;
text-align: center;
-webkit-box-shadow: 0 0 1rem gray;
-webkit-backface-visibility: hidden;
}
.flippable-face-front {
color: black;
background-color: white;
}
.flippable-face-back {
color: white;
background-color: black;
-webkit-transform: rotateY(180deg);
}
.flippable input[type="checkbox"]:checked ~ .flippable-faces {
-webkit-transform: rotateY(180deg);
}
It appears that repositioning your divs fixes the issue. I don't have an answer as to why that was happening though. Sorry. Working Example | Example for iPhone
<div class="flippable">
<input id="flippable-trigger" type="checkbox" >
<label for="flippable-trigger" class="flippable-faces">
<div class="flippable-face-back">
Back
</div>
<div class="flippable-face-front">
Front
</div>
</label>
</input>
</div>
I'm having some difficulty getting my website to display properly when viewed on the iPhone and iPad. The website displays properly when viewed on every desktop browser I've tried (safari, chrome, firefox), however, on the iPhone/iPad there is a tiny gap/space between the IMG and right box.
It works fine in Firefox. What is the problem?
Here's an inline link to JsFiddle.
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/>
<div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
#wrapper {
border-top: 8px solid #457b91;
max-width: 488px;
margin: 0 auto;
overflow: hidden;
}
#wrapper img {
width: 32%;
float: left;
}
#subject {
background-color: green;
float: right;
width: 68%;
padding-bottom: 32%;
position: relative;
}
#subject_wrapper {
padding-top: 12%;
position: absolute;
height: 100%;
width: 100%;
}
#subject span {
font-family: Thonburi;
font-size: 34px;
color: #ffffff;
display: block;
padding: 0 20%;
}
#subject span:nth-child(2) {
font-size: 18px;
line-height: 8px;
}
I don't have an iPd or iPhone to hand to check this, but try commenting out the space between your elements, thus:
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/><!--
--><div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
It's a pretty ridiculous fix, but it work for inline block elements, like menus made up of LIs.
I have a page with two lists on it. When I test on my iPhone 5, underneath the lists there is a load of extra blank space and a random blank line. (See image below)
I am not using the footer data-role="footer". Just data-role="content" and data-role="page". I have tried using the footer but it makes no difference.
When I test on a web browser all appears fine, so I cannot use the element inspector to find out whats wrong.
Would anyone know how to get rid of this? (ps I am running this on Cordova if that matters)
My HTML is:
<div data-role="page" data-title="Conversation">
<div data-role="header">
Back
<h1>Conversation</h1>
</div><!--HEADER-->
<div data-role="content">
<ul data-role="listview">
<li><a id="facebook" href="#"><img class="ui-li-icon" src="img/facebook.png"/>Facebook</a></li>
<li><a id="twitter" href="#"><img class="ui-li-icon" src="img/twitter.png"/>Twitter</a></li>
<li><a id="youtube" href="#"><img class="ui-li-icon" src="img/youtube.png"/>YouTube</a></li>
<li><a id="instagram" href="#"><img class="ui-li-icon" src="img/instagram.png"/>Instagram</a></li>
</ul>
<div class="yeldivider"></div>
<ul data-role="listview">
<li><a id="tickets" href="#"><img class="ui-li-icon" src="img/ticketsicon.png"/>Tickets</a></li>
</ul>
</div><!--CONTENT-->
</div><!--PAGE-->
There is no custom CSS other then the .yeldivider which appears between to two lists.
.yeldivider {
background-color:#ffeb00;
height: 40px;
width: 100%;
padding-left: 40px;
padding-right: 40px;
margin-left: -40px;
}
This is a wild guess but sometimes content DIV has a problem with vertical stretching.
Worst case scenario, give it some id or class, like this:
<div data-role="content" class="cover-screen">
//Content goes here
</div>
And use this CSS if you don't have a footer:
.cover-screen {
position: absolute;
top: 43px !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
}
or this CSS if you have a footer:
.cover-screen {
position: absolute;
top: 43px !important;
bottom: 43px !important;
left: 0 !important;
right: 0 !important;
}
And like I told you this is just a wild guess.
Working fine here DEMO http://jsfiddle.net/yeyene/SjbMd/ and already tested on iPhone.
I use these...
jquery.mobile-1.3.1.min.css
jquery-1.9.1.min.js Remove
jquery.mobile-1.3.1.min.js
what about yours?
CSS
.yeldivider {
background-color:#ffeb00;
height: 40px;
width: 100%;
padding-left: 40px;
padding-right: 40px;
margin-left: -40px;
}