Recently I have implemented a ebook like function web app runs on ipad . One function is to make a viewport to drag the book. I used this viewport plugin (with demo) : http://borbit.github.com/jquery.viewport/
The problem is the content can not drag .This work perfectly on desktop but not ipad.
There are two level of the ebook , the low level is a book page. when user click on the book, a overlay (top level) is display and it is an larger div for dragging.
I suspect ipad can not swift the higher level div. Is there any way to implement the viewport (refer to the example in above link) in ipad? Thanks
<div id="view" style="height: 385px; width: 1422px; position: relative; overflow: hidden; display: block;">
<div class="viewportBinder" style="position: absolute; overflow: hidden; height: 2541px; top: -1078px; width: 1247px; left: 88px;">
<div class="viewportContent ui-draggable" style="position: absolute; height: 1463px; width: 1247px; top: 329.98150634765625px; left: 0px;">
<div id="popup" style="height: 1463px; width: 1247px; display: block;"><img id="largeText" src="http://203.80.1.28/FlippingBook/development/demo/original/Web081112_P001_text.png"><img id="largeImg" src="http://203.80.1.28/FlippingBook/development/demo/original/Web081112_P001_image.jpg">
</div>
</div>
</div>
</div>
I think this can be easily solved using jQuery UI Touch Punch, this plugin adds touch event support for jQuery UI.
http://touchpunch.furf.com/
Try adding the script before the viewport script but after UI script, for example:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.js"></script>
<script type="text/javascript" src="jquery.viewport.js"></script>
<script type="text/javascript" src="https://github.com/borbit/jquery.scraggable/raw/master/jquery.scraggable.js"></script>
and that's all!
Related
I have embeded the following code onto my sharepoint online site. The image appears in the bottom right hand corner and once clicked it takes me to the top of the page, as coded; however the Jquery javascript code doesn't appear to work... The image just stays visible regardless of how many pixels are scrolled.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"><\script>
<script>
$(window).scroll(function() {
if ($(this).scrollTop()>100) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
</script>
<div id="toTop">
<a style="position: fixed; bottom:20px;left:5px;" href="#ctl00_onetidHeadbnnr2" title="Back to Top"><img style="border: none; height: 37.5px; width:50.5px" src="backtotop-1.png" ></a>
</div>
The above code encompasses both suggested solutions and still doesn't appear to work! The image is visible regardless of how much the page is scrolled, yet once clicked the image disappears. The code appears to work completely fine in a plain .html file.
Please help! Thank you very much in advance.
Current Console Error:
Check the jsfiddle link of your code. It works perfectly well. You just need to check the below line if the jquery 1.6.4.min.js:
<script type="text/javascript" src="http://code.jquery.com/jquery 1.6.4.min.js"></script>
This should be the right one: http://code.jquery.com/jquery-3.3.1.js
yeah, its your jquery source. have u seen a "space" in jquery src line, also you forget to close the tag. and for future dont forget to check the browser console for errors.
you can use the following fixed code in your source file.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(window).scroll(function() {
if ($(this).scrollTop()>100) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
</script>
<style>
body{
border: 1px dotted red;
min-height: 1000px;
}
</style>
<div id="toTop">
<a style="position: fixed; bottom:20px;left:5px;" href="#ctl00_onetidHeadbnnr2" title="Back to Top">
<img style="border:1px solid red; height: 37px; width:50px" src="https://i.imgur.com/WkCCy7L.jpg" >
</a>
</div>
let me know if this fixes your error now.
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
}
#content {
height: 800px;
width: 2000px;
background-color: coral;
}
</style>
</head>
<body>
<p>Scroll inside the div element to display the number of pixels the content of div is scrolled horizontally and vertically.</p>
<div id="myDIV">
<div id="content">Scroll inside me!</div>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener('scroll', function (e) {
alert("scroll");
});
document.getElementById("myDIV").addEventListener('click', function (e) {
alert("click");
});
</script>
Why its not working in IE I played this same code in w3 try it yourself page, it works in IE but not if I tried it as a separate file, so confused. Even if some one downvote this please tell me what I am missing?
I found these things when I browse other answers:
pointing to window.scroll but I need on a particular element
Use overflow-x: scroll; overflow-y: hidden; or vice versa.(which didn't work and also I need scroll on both ways)
NOTE:
This code works clearly in other browsers.
Its my bad. May be helpful for someone like me, Please enable scripting in your IE. :_(
A thing to note here is, Although script is not enabled it w3 school exercises exercises worked because of iframe?. If so how?
Example page source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Page</title>
</head>
<body>
<div class="main" style="height: 100%;">
<div class="header" style="height: 100px; background-color: green;"></div>
<iframe src="http://www.wikipedia.com"
style="height: 200px; width: 100%; border: none;"></iframe>
<div class="footer" style="height: 100px; background-color: green;"></div>
</div>
</body>
</html>
The problem is, that height of 200px from the IFrames inline style is ignored on mobile safari:
Also I'd like to change the height of the IFrame dynamically via vanilla JavaScript which is not working at all with the following code:
document.getElementsByTagName('iframe')[0].style.height = "100px"
The value of the height style is changed correctly according to the dev tools but it's simply ignored since the actually rendered height of the IFrame doesn't change.
This only seems to be a problem in mobile Safari and is working as expected on the latest versions of desktop Safari, Firefox, Chrome, Androids WebView etc.
Testpage: http://devpublic.blob.core.windows.net/scriptstest/index.html
Ps.: I tested this with various devices on browserstack and also took the screenshots there since I don't have no actual iDevice at hand.
It looks like this: How to get an IFrame to be responsive in iOS Safari?
iFrames have an issue on iOS only, so you have to adapt your iframe to it.
You can put a div wrapping the iframe, set css on the iframe and, what worked for me, was to add: put the attribute scrolling='no'.
Wishing you luck.
I got the same issue. And after tried all solutions I could find, I finally found how to solve it.
This issue is caused by the iOS Safari, it will auto-expend the hight of iframe to fit the page content inside.
If you put the scrolling='no' attribute to the iframe as <iframe scrolling='no' src='content.html'>, this issue could be solved but the iframe could not show the full content of the page, the content which exceeds the frame will be cut.
So we need to put a div wrapping the iframe, and handle the scroll event in it.
<style>
.demo-iframe-holder {
width: 500px;
height: 500px;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.demo-iframe-holder iframe {
height: 100%;
width: 100%;
}
</style>
<html>
<body>
<div class="demo-iframe-holder">
<iframe src="content.html" />
</div>
</body>
</html>
references:
https://davidwalsh.name/scroll-iframes-ios
How to get an IFrame to be responsive in iOS Safari?
Hope it helps.
PROBLEM:
I was having the same issue. Sizing/styling the iframe's container div and adding scrolling="no" to the iframe didn't work for me. Having a scrolling overflow like Freya describes wasn't an option, either, because the contents of my iframe needed to size depending on the parent container. Here's how my original (not working, overflowing its container) iframe code was structured:
<style>
.iframe-wrapper {
position: relative;
height: 500px;
width: 100%;
}
.iframe {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
<div class="iframe-wrapper">
<iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>
SOLUTION:
This super simple little CSS hack did the trick:
<style>
.iframe-wrapper {
position: relative;
height: 500px;
width: 100%;
}
.iframe {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100px;
min-width: 100%;
height: 100px;
min-height: 100%;
}
</style>
<div class="iframe-wrapper">
<iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>
Set the iframe's height/width to some small, random pixel value. Set it's min-height & min-width to what you actually want the height/width to be. This completely fixed the issue for me.
I see a bug on google chrome.
run the below html code on Chrome V 31
<!DOCTYPE html>
<html>
<head>
<title>Chrome scrollWidth issue</title>
<meta charset="utf-8">
</head>
<body style="direction: ltr;">
<div style="overflow: auto; height: 100px; width: 800px; border: 1px solid red;">
<div style="height: 150px; width: 1080px; background: blue;"></div>
</div>
</body>
</html>
When I change the body direction from ltr to rtl, the scrollWith of the parent div is different.
This is not occurred on FireFox V25 or Internet Explorer V10.
I report the issue on chrome issue tracker.
My question is how can I fix this with css or javascript?
Try to use clientWidth in the child element and you'll get 1080 in both rtl and ltr, hope that's a good enough solution till they fix the bug on chrome.
Add this on parent div's CSS
float:left
I'm trying to recreate something like they've got over at gimmebar.com.
When you click an image, the content current page slides out left and fades out. The target page fades in and slides in from the right.
I've tried a couple of things, like creating two divs in a container with a width of 200% and scrolling the content in to view and using JqueryUI and slideing the divs.
The scrolling failed with the divs not moving at all and srollLeft always being 0 no matter what.
The slide worked somewhat better but to me it seems like they aren't run simultaneously.
The second div just pops in to existence instead of nicely sliding in right behind the first.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
.container {
width: 100%;
float: left;
height: 800px;
}
#one {
background-color: red;
}
#two {
background-color: #333;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div class="container" id="one"></div>
<div class="container" id="two"></div>
<script>
$( document ).click(function() {
$("#one").hide("slide", { direction: "left" }, 1000);
$("#two").show("slide", { direction: "left" }, 1000);
});
</script>
</body>
</html>
It seems like it should be so easy to achieve but I'm stuck.
Take care.
Edit:
I kind of got it to work as you can see in this fiddle.
The slide is there but I can't see no fade.
There also might be a better way of achieving this but I'm pretty satisfied with not having to load a third lib/plugin just to slide a div.
http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios
Found a tutorial written by their developer. Think that would count as the solution.
A pure javascript solution: in the CSS:
div.wrap {visibility: hidden; position: absolute; overflow: hidden;
top: 0; left: 0; width: 100%; height: 100%}
div.wrap div.newContent {visibility: visible; position: relative; left: 100%;}
in the HTML:
<div class="initContent">
This is the content that is initially displayed
</div>
<div class="wrap">
<div class="newContent">
Put the content you want to be revealed here
</div>
</div>
The newContent div is initially hidden because its left edge is at the right edge of its parent (wrap) div, and the CSS tells the browser to hide any content that overflows the parent div.
Then to reveal the hidden content set a timer that progressively decreases the style.left for the inner div from 100% to 0% and increases the opacity from 0 to 1. I made a class for opening/closing swipey menus that could be adapted slightly to do this. (EDIT : a newer version)
i would recommend you use this jQuery script i used not so long ago in a website and it worked like a charm its called CODA SLIDER, it was made by Kevin Batdorf and the installation its barely 5 lines of code.
Good luck