So, i decided to try a background image for one of my Ionic apps. Not sure if this is the best way, but using the css it seems to work well in testing, I plan to test it later today on a real device and see what happens…
<style type=”text/css”>
.pane {
background: url(imageURL) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
</style>
So, I have this app Im working on and each time I come back to a page it reloads the whole controller, normally this is fine. However, in this case, I only want it to load one time, unless something else happens. My solution, which may not be the best but seems to work well for this prototype, is to use a root scoped variable.
if (!$rootScope.loaded)
{
//load this on startup then set to loaded
alert(‘This is the first loading’)
$rootScope.loaded = true;
}
Now, when I use the Back button it does not reload that part. But, in another page I can always set the $rootScope.loaded to false and recall the loading.
I would love to know if there is another way, or better way, to do this.
So playing around today I decided to test embedding a youtube video using a card layout. I found some code online, but it didn’t do what I wanted so I modified it a bit. It works out pretty well, I may use it in a test project.
The CSS:
<style>
.my-video {
position: relative;
padding-bottom: 55%;
padding-top: 10px; height: 0; overflow: hidden;
}
.my-video iframe,
.my-video object,
.my-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
The Ionic Card and iFrame:
<div class=”card”>
<div class=”item item-divider”>
This is the video
</div>
<div class=”my-video”>
<!– add leading and ending < > below –>
iframe src=”http://www.youtube.com/embed/7lw6ySxgKks” width=”100%”></iframe
</div>
<div class=”item item-divider”>
What did you think?
</div>
</div>
Cincyplanet 