I created a IONIC/Angular JS application ; and I want to load a web page on it as is done with Android WebView; that is to say, display my web page in a division of my ionic application. So the question is, is there a IONIC component that can do this?
I know you posted this question a while ago. I had the same need to embed a webpage inside my ionic page and the solution I found was to add an iframe tag. Set the source to go to the link you want to embed.The iframe will contain the webpage inside the application. you can even create a controller to add further functionality. See my code below:
<ion-view>
<ion-content class= 'padding has-subheader'>
<iframe class= 'webPage' name= "eventsPage" src="http://www.algonquincollege.com/studentsupportservices/events/">
</iframe>
</ion-content></ion-view>
For styling you will need to target a div with the class scroll that gets created automatically by ionic. For example, I wanted to to make the webpage fill a width of 90%. see code below:
ion-content div.scroll{
height: 90%; }
.webPage{
width: 100%;
height: 100%;
border: 2px solid #EAAB00;
padding: 1rem;}
Hope this helps.
full details here: http://mobileapplicationsdesigndevelopment.blogspot.ca/
Related
I'm a beginner to ReactJs this is a portfolio site. I am trying to mobile responsive navbar(Topbar). I am using SCSS here.
This is the mobile view.
Mobile preview -1
Mobile preview -2
This is the desktop view.
Desktop preview
The problem - I want to hide to be hidden in desktop view. I hide the
hamburger but the side menu is still appears.
If you are using css, then use media queries in the css file of your project with the min-width and set the class css to display: none.
So it is something like this:
#media only screen and (min-width: 1024px) {
.mobile-menu-class{
display: none ;
}
I’m having some trouble with my website, and I can’t get around it.
I’m trying to have my home page fixed, not scrollable. Which is currently working on desktops but not on mobiles. I checked the margins, everything seems fine.
Even though my code is as follow, for this specific page:
html, body {
height: 100vh;
margin: 0;
overflow: hidden;
}
I can’t get this straight. Any help would be highly appreciated.
The website is http://92-blue.com
Thanks!
Try not using 100 vh , on the mobile version. 100 vh displays the entire screen vertically for any device. When you are viewing it with the 100vh it will take into account the entire phone screen that is why it is scroll able, it gets moved down because of the url bar.
On my website I am using Bootstrap 3.2 for responsive design and I am trying to embed Adsense responsive adds there. I am having problems with orientation changes: I would expect that adds would resize on such event, but it doesn't happen. Is such feature ready for Adsense? Some old post on Adsense blog says:
The new ad code is responsive on initial page load only. Subsequent
changes to the ad size, such as a screen orientation change, will not
cause a new ad to be displayed. We know that this is an important
feature for many of you and we’re currently working to address this.
But current documentation doesn't mention such issue. Does this resizing work?
So it turns out the blog post I was quoting is about advanced mode (mode which allows specifying exact ad size via CSS). Even though more than a year ago Google recognized the problem, the advanced ads are not resizing automatically when screen orientation chages.
The AdSense documentation states that responsive ads resize with orientation changes. That's true, but only for default (not advanced ads).
The advanced mode allows specifying exact ad sizes with #media CSS rules which is nice. But for me it was possible to achieve almost same thing by wrapping default responsive ads with div container. The container's size can also be specified by CSS #media rules, so I have same result as with advanced ads + I get benefit of ads resizing when screen orientation changes.
I'm mainly shooting here, cause it's not a lot of information here to be fair, but:
What happens if you add style="display:block;" and also data-format="auto" to your ads?
If this is not going to help, I guess media queries are your friend in this matter.
Ads from AdSense, even responsive ones, are loaded based on your screen size and orientation one time - when the webpage is loaded. Of course, you can try to reload part of page where your ad is served, but then you will have a problems with inner iframe elements (AdSense don't like to be in iframes).
Try using this - https://github.com/mattnish/rad
I just used it in one of my projects and even though it says "outdated" it works perfectly.
The problem with adsense "responsive ads" is that it is responsive only on initial load.
Here is my take on this one. I used advanced mode with a responsive ad unit and put in the following media queries.
<style>
.myclass-responsive { width: 320px; height: 100px; }
#media (min-width: 768px) and (min-height: 768px) { .myclass-responsive { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- myclass-responsive -->
<ins class="adsbygoogle myclass-responsive"
style="display:inline-block"
data-ad-client="XXXX"
data-ad-slot="YYYY"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
The point being that the ads in advanced mode are loaded based on the device viewport dimension but do NOT resize dynamically. The default smart resizing mode produced mixed results with my layout and would occasionally break it on dynamic resize. Using (min-width: 768px) and (min-height: 768px) in a Bootstrap layout with a responsive ad unit in advanced mode seems to fix any resizing issue I had (well on the 5 devices I tested at least). However you may get undersized ads for some devices but that the story about it ... you can't get it all.
I can't seem to get the Vimeo video on this page to be responsive. I've tried lots of different code that's worked for other people, but not on this page. Can anyone help??? Here is the page: http://give.brighamandwomens.org/stories/entry/stepping-strong
Currently you have width: 550px which is the reason why its not responsive. You need to add width: 100%; on the .ss_video class for it to adjust to screen size.
I'm wondering if there's a quick solution to killing my fancybox calls at resolutions below 480px for mobile within my media queries. So that items that used the fancybox, just won't use it below certain resolutions and will be linked directly to the .html page (I'm using iFrame fancyboxs).
I've just tried display: none; on the fancybox class I'm using at the certain viewports and no success.
.fancybox-iframe { display: none; }
Media queries are finicky things. Some CSS properties can be use, while some can't. Display is one of those properties, I believe.
I find it best to set a max-width to 0px.