I am using below code
<ion-scroll zooming="true" direction="xy" style="width: 100%;height:100%" delegate-handle="zoom-pane" class="zoom-pane" min-zoom="1" scrollbar-x="false" scrollbar-y="false" overflow-scroll="false">
<iframe id="rframe"
ng-src="{{rm._iframe}}"
style="height: 100%;width: 100%;",
name="r_container">
</iframe>
</ion-scroll>
But on rendering I am not able to zoom in content of iframe. What's the issue here
Related
I make the application ionic 3 and use the library chortjsfor sharing graphs. Since the width of the mimic screen is not large and I do not want to fit in all the 12 months I want to scroll. I do this:
<ion-scroll padding scrollX="true" style="width: 100%; height: 100%">
<canvas id="myChartDiogram" width="500" height="500"></canvas>
</ion-scroll>
But the scroll does not work. What am I doing wrong?
try this way
<ion-scroll padding scrollX="true" style="width:100vh;height:100vh;overflow-x: scroll" >
<canvas id="myChartDiogram" width="500" height="500"></canvas>
</ion-scroll>
I have modal for displaying Attachments.
When I display one image in modal and pinch zoom , close the modal and click on second image, 2nd image is already zoomed.
How to stop this from happening?
<script id="modal.html" type="text/ng-template">
<ion-modal-view>
<div class="bar bar-header" class="ng-cloak">
<button class="button button-clear ion-ios-arrow-left fontSize25" ng-click="closeModal()"></button>
<h1 class="title customeHeared white-color">Attachment</h1>
</div>
<ion-content>
<ion-scroll zooming="true" direction="xy" delegate-handle="zoom-pane" class="zoom-pane" min-zoom="1">
<img ng-src="{{imagePath}}" style="width: 100%;padding: 20%;"/>
</video>
</ion-scroll>
</ion-content>
</ion-modal-view>
</script>
I have not found any solution for this, Closing this now.
If anyone comes here and finds it with an answer please let me know with a comment.
I have jssor slider working well in Firefox and IE. However in Chrome the image vanishes as soon as the transition completes. Then the image reappears just as the next transition begins. How do I "tell" Chrome to display the missing slide?
Just set $HWA to false as you can see here
I have fixed the problem by changing:
<img data-u="image" style="position: absolute;"/>
to
<img data-u="image" style="position: relative;"/>
I have found that removing the link from the image element fixes the problem along with setting the style="position: relative;" as mentioned above.
<div>
<a u=image href="#"><img src="../img/paint/08.jpg" /></a>
</div>
to
<div>
<img src="../img/paint/08.jpg" style="position: relative;"/>
</div>
I would like to integrate FB Fan-Box on my website. Everything works fine, except the height is not correct. For me, the important thing is not displaying the faces, but the stream. When I adjust the height parameter the whole frame gets bigger, but the layer with the stream in it remains still 300px. How can I set this to 900px, since I would like my visitors to see more activities on the stream?!
Here is my code:
<iframe
src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F
%2Fwww.facebook.com%2Fapps%2Fapplication.php%3Fid%3D200876329955648&width=800&
amp;colorscheme=light&show_faces=false&border_color&stream=true&
amp;header=false&height=900"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:800px; height:900px;"
allowTransparency="true"></iframe>
Thanks for the help!!!!
Try the HTML5 version, it may work better:
<div
class="fb-like-box"
data-href="http://www.facebook.com/platform"
data-width="292"
data-height="900"
data-show-faces="false"
data-stream="true"
data-header="false">
</div>
I've verified that it will go to 900 in height showing more stream items.
No it is not for my HTML 5 tag with 2000px
<div class="fb-like-box"
data-width="1100"
data-height="2000"
Facebook generate iframe height correctly, but inside the iframe
it explicitly set div to 300px... This is a very annoying bug
<iframe name="f36c389328" width="1100px" height="2000px"
<html>
..
<div class="phm pluginLikeboxStream" style="height: 300px"> <---
What is a point of having it configurable if it is defaulted to 300px on FB side?
I was aware of multiple scrolling libraries (TouchScroll, iScroll) for the iPhone/iOS due to its inability (???) to support overflow:scroll . However, I was not aware (and I am looking for confirmation) that IFRAMEs don't really work either. It appears that the iframe doesn't respect any attempt to give it a fixed size and always just resizes itself to its content. Am I correct on this? Is the only way to scroll an IFRAME to place it inside a block element with the overflow CSS property set and then to use a lib like the aforementioned?
simply adding...
overflow-y:auto;
-webkit-overflow-scrolling:touch;
to a div around my iframe worked for me
You can scroll any content which is set to overflow:auto by touching with two fingers and dragging. Don't put iFrame inside a div with overflow:auto, and instead set the iframe to overflow:auto itself. Unfortunately, iframe scrolling is very choppy, regardless of content or device, so the best solution is to find a way to make your content fit into one long page, with "top" & "bottom" view divs set to follow the viewport (if this is the effect you're going for.)
Have you given Joe Hewitt's Scrollability library a go?
You can read more about it here:
Scrollability, New iOS Physics Project from Facebook for iPhone Creator, Joe Hewitt
Hope this helps.
The code below works for me (thanks to Christopher Zimmermann for his blog post http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/). The problems are:
1. There are no scroll bars to let the user know that they can scroll
2. Users have to use two-finger scrolling
3. The PDF files are not centered (still working on it)
<!DOCTYPE HTML>
<html>
<head>
<title>Testing iFrames on iPad</title>
<style>
div {
border: solid 1px green;
height:100px;
}
.scroller{
border:solid 1px #66AA66;
height: 400px;
width: 400px;
overflow: auto;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
</table>
<div> Here are some additional contents.</div>
</body>
</html>
Flippant answer: don't use IFRAMES anymore.