I am building an Android app with Ionic, it is a forex signal app, in one of the pages, I placed a widget I got from investing.com, the widget is supposed to give me live chart that updates every minute and its being loaded in an iframe, now my problem is that, the live chart is displaying but its but updating, like the chart is not changing, it's just static.
Here is my code
<ion-content>
<iframe frameborder="0" style="overflow:hidden; display:block; position: absolute; height: 100%; width: 100%" src="https://sslcharts.forexprostools.com/index.php?force_lang=1&pair_ID=1×cale=300&candles=50&style=candles"></iframe>
</ion-content>
But if I should load the page in a normal html page, the chart won't be static. How can I solve this problem?
Related
The question has been asked prior but no clear response was obtained
I an using Facebook's plugin which lets one embed and promote any public Facebook Page on a website
I am trying to hide not remove the scroll bar from the side
I still want scroll functionality but I do not want the scrollbar to be visible
What is the best method to achieve this functionality
https://jsfiddle.net/wesuf2tq/1/
<md-card style="width:auto">
<md-card-header style="background-color: dodgerblue; font-size:15px;font-weight:600; color: white; ">
<i class="fa fa-facebook-square" aria-hidden="true" style="font-size:40px; margin:0 auto"></i>
</md-card-header>
<div class="facebookContainer" >
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FKobe%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
height="800" style="width:100%;border:none;overflow:hidden;"
scrolling="no" frameborder="0" allowTransparency="true"
allow="encrypted-media"></iframe>
</div>
</md-card>
There is absolutely no way to achieve this at all - the plugin loads its content into the iframe from a different origin, so the Same Origin Policy prevents you from accessing anything inside it via JavaScript, or to inject any custom styling.
You are limited to the configuration options Facebook offers here - and hiding the scrollbar is not one of them.
I’ve created a few components that handle form submission functionality. In each of these components, I want the form submit/cancel buttons to be fixed at the bottom of the view, much like the functionality available via ion-footer. The submit button needs reference to the variables + methods in the component for [disabled] + (tap) functionality, for example [disabled]="!formGroup.valid" (tap)="submitForm()"
If the component is a child of ion-content then there is no way to add ion-footer as it will be contained within ion-content, instead of below ion-content. At first glance, having ion-footer inside ion-content appears to view properly, but the rendering can be buggy especially in scroll situations. I went as far as setting a force-bottom css class with fixed position/bottom but it looks like the ionic javascript overrides fixed positioning when inside ion-content, so a pure CSS solution does not seem to be possible.
<ion-content>
<a-form-component>
</a-form-component>
</ion-content>
<ion-footer>
<!-- add a-form-component's button here -->
</ion-footer>
Any recommendations on how to achieve the desired functionality?
TIA
Let's say you have a page called page and a component called cp
inside page.html you have the component <cp></cp>
Inside cp.html you have
<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div id="the-footer">
<button>login<button>
</div>
inside page.scss:
#the-footer{
background-color: #efefef;
text-align: center;
position: fixed;
width: 100%;
bottom: 0px;
z-index: 99999;
}
This will achieve the same result as ion-footer.
The div containing the button will always be visible regardless of the scrolling.
hope it helps
I have a page that scrolls, and I want to add a fixed div to the bottom of it in ionic2. I use the ion-fixed, and it works great on android devices staying fixed in the bottom of the page, but on iOS upon scrolling the page, it sort of jumps all the time until get the position.
I am sure someone working in ionic has forced the same issue.
I have tried to detect platform and to use a css tweak of
position: sticky;
and it moves smootly, but I am facing another bouncing issue once you are in the end of the page ( the native over-scroll ios behavior, if you continue to scroll the page from the top or the bottom area).
If you want to place a div in the bottom of the page, fixed, the best way to do it in Ionic is to put that div outside of the ion-content:
<ion-header>
<!-- ... -->
</ion-header>
<ion-content>
<!-- ... -->
</ion-content>
<div class="fixed">
<!-- ... -->
</div>
And then use some css style rules to set its position according to your needs:
div.fixed {
position: fixed;
bottom: 0px;
left: 0;
width: 100%;
z-index: 999
}
Since it's outside of the content, it will be ignored by Ionic during the scroll event.
It seems jQuery mobile and iframes don't play well.
Firstly, we know iframes are a bad idea - but in this case, we need to use it to load a form into our page - that has jQuery Mobile touch functions enabled.
Now, this works fine on all desktop devices, but on iOS - it seems when you select a form field that's in the iframe - and scroll - the form field loses focus and you can no longer enter text (even though the iOS keyboard is still visible). This is is a bit of a problem when there's a Captcha field in the form and users need to scroll to review the passphrase.
Any solution to this would be greatly appreciated! Thanks!
In ios Scroll bars in iframes are removed and render them as blocks. What I did for this solution is wrapping the Iframe inside a div and let the Iframe expand according to
<div id="myIframeParentDiv" class="myIframeParentDivClass">
<iframe style="z-index:2000" id="myIframe" width="100%" height="100%" src="" frameborder=0 ALLOWTRANSPARENCY="true" >
<p>Booking Engine error! your browser does not support iframes.</p>
</iframe>
</div>
STYLES
#myIframeParentDiv{
height: 100%;
width: 100%;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
I'm developing iPad html5 webpage that needs to display pages from other origins (different domains).
I'm loading those pages into iframe, and scrolling the iframe using the iOs5 new scrolling ability, as shown in the code below.
<div id="myDiv" style="height: 1185px; width: 100%; overflow:scroll; -webkit-overflow-scrolling: touch;">
<iframe id="myIframe" src="http://http://css-tricks.com/forums/discussion/11946/scrolling-iframe-on-ipad/p1"></iframe>
</div>
The problem is that the off-screen iframe content is not becoming visible when scrolling to it (the frame is blank).
How can I overcome this issue and provide scrollable iframe solution?
OK. found the solution.
apparently, the problem appear when the main document height is shorter than the iframe that is scrolled.
the parts of the iframe page, that exceed the document height, are not rendered.
So, under my needs, I could solve the problem by adding such a js (with jquery) code:
<script>
$(function() {
var iframe = $("#myIframe");
iframe.load(function() {
$("body").height(iframe.height());
});
});
</script>
If you have an access to iFrame body, apply some transform3d to its content to enable GPU rendering.
In my case adding -webkit-transform: translate3d(0, 0, 0); to main wrapping div did the job.