Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrolling Generic iFrame for Apple Touch Devices #25

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Scrolling Generic iFrame for Apple Touch Devices #25

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5874e82
Update index.html
chameides Aug 11, 2014
7e7c784
remove carriage return (which breaks the code)
Aug 11, 2014
15b26f4
removed comments
Aug 11, 2014
14c449f
Add webkit rules to css
Aug 11, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,14 @@
height: 0;
overflow: hidden;
}
/*if external css, target apple touch screen devices with
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-device-width : 1024px) */
#genericpreview .embed-container{
-webkit-overflow-scrolling: touch; /*iframes should scroll*/
overflow-y: scroll; /*iframes should scroll, but this rule will cause two scroll bars in chrome on windows*/
overflow-x: scroll;
}


.embed-container-squarish {
position: relative;
Expand Down Expand Up @@ -84,7 +92,7 @@
<script>

var embedLabel = "<br/><p class='control-label'>Embed code:</p>";
var embedContainerCSS = "&lt;style&gt;.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }&lt;/style&gt;";
var embedContainerCSS = "&lt;style&gt;.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; -webkit-overflow-scrolling: touch; overflow-y: scroll; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }&lt;/style&gt;";
var embedGettyContainerCSSFront = "&lt;style&gt;.embed-container { position: relative; padding-bottom: ";
var embedGettyContainerCSSBack = "%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }&lt;/style&gt;";
var embedSquareContainerCSS = "&lt;style&gt;.embed-container {position: relative; padding-bottom: 100%; height: 0; overflow: hidden;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }&lt;/style&gt;";
Expand Down