I've made a webpage that has an 4000px wide background and in Chrome and safari on Windows, Mac and iPad it scrolls nice. I can scroll to the left, the top and the right with no problems, just like you would expect it to be.
But when I convert this page to .wdgt-format, import it into iBooks and preview it on the iPad (4) the page will not scroll in any direction.
I've tried adding overflow: scroll;
-webkit-overflow-scrolling: touch; to the CSS of the body and the container but this won't fix the problem.
The HTML
<body>
<div id="container">
</div>
<body>
The CSS
/* General */
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, sans-serif;
}
#container {
width: 10158px;
height: 974px;
background: url(../img/1B.jpg) no-repeat;
-webkit-background-size: 10158px 974px;
}
Does anyone know how to solve this? Is it a CSS or a JavaScript problem?
Thanks in advance.
Have a look here:
https://github.com/edwilde/iBooks-HTML-Widget-Boilerplate
This is a boilerplate specifically for building for iBooks, which apparently targets & fixes your problem specifically.
Another suggestion would be using an iFrame, something like:
<div id="container" style="overflow: scroll; -webkit-overflow-scrolling: touch;">
<iframe width="4000" height="100%" src="">
</iframe>
</div>
Have you added in your head something like?
meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0"
Related
I need a wordpress theme or any plugin which looks like https://www.haldiram.com/ this and work like this. I want to make same home page and header in wordpress, can anyone help me about this in wordpress. Tell me how the same thing is possible using any plugin or using any theme, or tell any another way to do this. I try make background like this using css but didn't get success. i dosen't need exact same but if someting smillar to this tell me.
The important thing is to add the background-attachment: fixed; CSS property.
Also you need to have the page content height bigger than the window in order to see the scroll effect.
In the demo below I added a min-height: 2500px; on the .site-content page element.
body {
background-image: url("https://www.haldiram.com/themes/haldiram/images/bg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.site-content {
width: 100%;
max-width: 1200px;
min-height: 2500px;
background-color: #fff;
padding: 2rem 3rem;
box-sizing: border-box;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="site-content">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div><!-- .site-content end -->
</body>
</html>
CSS Scroll Snap allows the browser to snap scroll to elements in a container. To apply the same logic to the vertical page scroll I found that it had to be applied to <body> rather than <html> (see below). This is not a major problem however it does effectively create a scrolling area out of <body> instead of using the window scroll.
Whilst this may seem fine it has a couple of side effects:
Window scroll functions can no longer be used in javascript
The rubber band effect on Apple browsers is less responsive and non existent in Chrome on Mac.
I wanted it to appear as native as possible therefore the only conclusion would be to apply it to <html> rather than <body>. Applying it this way however prevents it from functioning. If you apply it to both, it will render correctly in Safari but remains broken in Chrome and Firefox.
The issue is not because <body> creates a separation between the parent and child element as if another <div> is added in the hierarchy it will still function correctly.
Here is the functioning code but applied to <body> rather than <html>.
<html>
<body>
<div class="extra_parent">
<div class="child">ONE</div>
<div class="child">TWO</div>
<div class="child">THREE etc..</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
html {
height: 100vh;
overflow: hidden
}
.child {
position: relative;
height: 80vh;
font-size: 100px;
text-align: center;
line-height: 80vh;
color: #000;
scroll-snap-align: end;
}
Solve a Fiddle: https://jsfiddle.net/u8tsjven/
I have an iframe and i need it to have a scrolling overflow. it seems work out in desktop, i used a work around to make it work in iOS. it works on android and iOS now. however, iOS8 it fails.
<html>
<body>
<style type="text/css">
.scroll-container {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#iframe_survey {
height: 100%;
}
.scroll-container {
height: 100%;
width: 100%;
overflow: scroll;
}
</style>
<div class="scroll-container scroll-ios">
<iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
</div>
</body>
Use the code in this way
<div style="overflow:auto;-webkit-overflow-scrolling:touch">
<iframe style="width:100%;height:600px" src="www.iframe.com"></iframe>
</div>
In order to make an iframe scrollable on iOS, you have to add the CSS3 property -webkit-overflow-scrolling: touch to the parent container:
<div style="overflow:auto;-webkit-overflow-scrolling:touch">
<iframe src="./yxz" style="width:100%;height:100%">
</div>
I finally got mine working after many hours and testing. Basically what worked for me was this (shown as inline styling to demo).
Making the outer div overflow auto keeps it from displaying an extra set of scrollbars on desktops.
<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe src="http://www.mywebsiteurl.com" style="width: 100%; height: 600px; display: block; overflow: scroll; -webkit-overflow-scrolling: touch;" ></iframe>
</div>
it did not work for me! but I could figure out a little trick after reading this post:
https://css-tricks.com/forums/topic/scrolling-iframe-on-ipad/
Just put an !important after that and works just fine!
-webkit-overflow-scrolling: touch !important;
overflow-y: scroll !important;
I found that fixes 1 and 2 work on iOS 11, but I also found that in loading a responsive page into the iframe, overflow-x: hidden; was also needed to keep the iframe from moving left and right on scroll y attempts. Just FYI.
There is a bug in iOS 8 that breaks scrolling all together when -webkit-overflow-scrolling:touch has been applied to anything that is overflown.
Have a look at the issue I posted a few weeks ago:
-webkit-overflow-scrolling: touch; breaks in Apple's iOS8
The must is define your scroll-container to fixed for the div is a fullscreen size. Then inside the iframe create a main content who have a properties scrolling.
Inside you iframe, in the mainContainer-scroll, you can add:
-webkit-overflow-scrolling: touch //For active smooth scroll
-webkit-transform: translate3d(0, 0, 0) //For material acceleration
overflow-y:scroll; //For add scrolling in y axis
position:absolute;height:100%;width:100%;top:0;left:0; //For fix the container
Main page
<html>
<head>
<style type="text/css">
#iframe_survey {
height: 100%;
}
.scroll-container {
height: 100%;
width: 100%;
position:fixed;
}
</style>
</head>
<body>
<div class="scroll-container scroll-ios">
<iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
</div>
</body>
</html>
Inside Iframe
<div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;top:0;left:0;-webkit-overflow-scrolling: touch;-webkit-transform: translate3d(0, 0, 0);overflow-y:scroll;">
<div class="Content" style="height:2000px;width:100%;background:blue;">
</div>
</div>
Not knowing what is on the other end of "www.iframe.com"...but for me, in that file's css I added:
body {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
That fixed it.
You have to use on body style or
overflow:scroll;
Or also use
<div style="width:100%;height:600px;overflow:auto;-webkit-overflow-scrolling:touch">
<iframe style="overflow:scroll;" src="www.iframe.com"></iframe>
</div>
I was able to make an iframe scroll in iOS by placing an iframe inside a div (which acts as container) and apply the styles as follows and this works perfectly.
.iframe {
overflow: scroll !important;
width: 100%;
height: 100%;
border: none;
}
.div {
overflow: hidden;
width: 100%;
height: 100%;
border: none;
background-color: #FFF;
}
As i am working in GWT, for GWT people here is the suggestion.
In case of GWT just place an iframe in ScrollPanel (div) and apply the styles as above.
I have a div with a background-color, and a 3 pixel white border.
When I set the html element to direction:rtl and overflow-y: scroll, I get a pixel of the background to the right of the border - only in IE9:
I'm pasting my code here, because on JsFiddle I can't replicate the bug.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html {
overflow-y: scroll;
direction:rtl;
}
.main {
margin: 0 auto;
width: 960px;
}
.sld-menu-item {
height: 85px;
border: 3px solid #fff;
background-color: #d25188;
}
</style>
</head>
<body>
<div class="main" role="main">
<div class="sld-menu-item sld-menu-item-2">
</div>
</div>
</body>
Has anyone run into this problem, and/or can someone suggest a solution? I can't give up the scroll and rtl rules...
I was only able to fix it by setting overflow: hidden on containing element and doing a negative margin hack:
.main {
overflow: hidden;
}
.sld-menu-item {
margin-right: -1px;
}
You might also want to set width of sld-menu-item to 961px then. Can probably put this in an IE9 conditional statement. I hope there's a better way of solving this though.
I banged my head against the wall for several hours, at the end I solved it in a very strange way...
Change the width of .main to 961px, it seems that Microsoft does not know how to find the "middle" of an even range.
Beginning to wonder if I am missing something obvious but I have been searching for days now and still haven't been able to find a definitive answer.
What I am looking for is a Source ordered Content CSS layout for a two column page (menu to right) with header and sticky footer, and preferably no nasty hacks. Preferable Source order of:
{content}
{rightmenu}
{footer}
{header}
Like I say I'm not getting too far in trying to build this for myself, nor have I been able to find a suitable example anywhere. Any suggestions?
Thanks
content right, with sidebar left is perhaps the easiest floated layout to make, just float the content right with a width, let the left fill the space with overflow to avoid wrapping. footer goes below by clearing.
As for the header put a fake header div first in the source, presuming there may be a logo or something to go in it, even though you might not want hordes of links up there if there is a big dropdown menu to go in there or something like that. Anyway I'd make the "fake" header tall enough to create the space you need then put any actual content in it, then put the content you want to appear top only in a div at the bottom and absolutely position it.
here's a fiddled mockup
This is the best I can come up with at the moment. Bit of a mixture of relative and absolute positioning but seems to work. Can anyone see any problems with this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.container {
min-height: 100%;
/*height: auto !important;*/
height: 100%;
margin: 0 auto -2em;
}
.content{
float: left;
width: 80%;
}
.menu{
margin-left: 80%;
}
.header{
position: absolute;
top: 0px;
height: 3em;
width: 100%;
}
.clearheader{
height: 3em;
}
.footer, .clearfooter {
height: 2em;
clear: both;
}
.container {
background: grey;
}
.header{
background: cyan;
}
.clearheader{
background: cyan;
}
.footer{
background: blue;
}
.clearfooter {
background: lightblue;
}
</style>
<link rel="stylesheet" href="NJC layout2.css" ... />
</head>
<body>
<div class="container">
<div class="clearheader"></div>
<div class="content">Content</div>
<div class="menu">menu</div>
<div class="clearfooter"></div>
</div>
<div class="header">header</div>
<div class="footer">Footer</div>
</body>
</html>
If I understand your question right, this should be your answer:
http://www.positioniseverything.net/ordered-floats.html
I actually think this article is explaining everything quite nice.