Full screen camera on an ionic app - css

I have an application based on Ionic.
At a part of it, I need to display a full screen div containing the camera input and, on top of it, a png guide.
So far, I've achieved our purpose by using lots of jQuery, but now I'm wondering if there's a better way. I mean, some way to just play with some css to make Ionic let me display a full screen div on top of everything (navigation bar included).
I've tried some like this:
.container {
width:100%;
height:100%;
display:block;
position:absolute;
z-index:1000;
top:0;
left:0;
}
But using this CSS, the .container div, has 0 width and it's not positioning on top of everything.
Any ideas?

Related

How to have a Tabbar of a Cordova app nicely fit with various mobile screen sizes?

I have a tabbar component in my Cordova app developed on Meteor and React. I want to be sure that the tabbar (or footer) will always be placed at the bottom of a mobile screen while the body is scrollable. The mockup in the picture is illustrating a mobile screen with a scrollable content and a tabbar.
Secondly, I want to ensure that the tabbar will nicely fit to various sizes of different mobile devices.
I am not sure if these two are related completely with CSS or viewport settings or Cordova config.xml.
What is the best way to address these two needs?
I would create an html div with an id "tabBar" and some CSS like this:
#tabBar {
position:fixed;
bottom:0;
background:#000;
color:#fff;
width:100%;
height:50px;}
Then you could have icon divs associated with classes, like:
#tabBar .icon {
float:left;
width:25%;
height:100%;
color:#ffffff;}

Resize img to window size keeping aspect ratio / no overflow on height or width

I realise this question has been asked multiple times in differently worded titles and options, but i have yet to find something that works for me.
Im trying to have an img fill most of the screen (keeping its aspect ratio) without overflowing the edges. (Basically what the firefox browser accomplishes when viewing an image)
Most that i've tried either works in only one direction ie. width will resize but will end up overflowing the height and the same for the other way, either with CSS or JScript. Also playing a factor in my trouble is that i want to aplly this to both portrait and landscape images (More or less any image i have on the site)
This seems like it should work using pure CSS but doesnt (im not completely knowledgeable in all CSS though):
Link to JSFiddle
body, html {
margin:auto;
padding:6px;
height:100%;
width:100%;
}
img {
max-width:100%;
max-height:100%;
}
There are a hand full of other scripts as well, but this post is getting a bit long.
Could anyone help me out containing my images within the screen, with either JQuery or CSS (within or without a DIV)
Thanks in advance,
Try this jQuery plugin: TailorFit
and check out the demo.
You can play around with various options in the demo to figure out if this could work for you. The browser support is extreme because it only uses jQuery and relative positioning.
Full disclosure - I'm the author of the plugin.
Now define your html, body height 100%;
as like this
body, html {
height:100%;
}
MY ANSWER:
I ended up just wrapping the image in a div and setting the div dimensions in CSS:
PURE CSS Resize
Unfortunately this method may look quite horrible in older browsers but it has atleast got me out of a pickle and its a tiny piece of styling.
Hopefully i can find some jQuery alternative soon.
body, html {
width:98%;
height:98%;
}
.outer {
position:fixed !important;
position:absolute;
margin:auto;
text-align:center;
top:10px;
right:0;
bottom:10px;
left:0;
}
img {
max-width:100%;
max-height:100%;
padding:4px;
background-color:#fff;
}
----
<div class="outer">
<img src="whatever.jpg" />
</div>

Can't get my div to stay fixed with layout

I'm quite new to css, divs and everything in between.
So, i created a basic layout for my band, didn't want a bunch of useless links like bio, merch store and all that. So i just decided to arrange separate spaces for our video, a player and a facebook window.
I managed to create a div for the youtube iframe, but i can't get it to stay in its place when i resize the window. I've tried changing the positioning a bunch of times to absolute, fixed, relative...etc. No luck.
Keep in my mind that the layout is nothing fancy, just something quick to look at, and get some basic info of the band.
Here's the link: http://silentcellmusic.com/test.html
Thx in advance!
First you should remove the image from the markup, and set it as background of the body, or html, for example. Set it to position top center.
Then, set the div #wrapper to { width: 960px; margin 0 auto; }. This way it will always be in the center of screen, so as your background.
Third, create four divs:
social
listen
video
Float them to the left, set their widths and margins, accordingly.
Finally add a div for your footer (social links and mailto).
Best of luck.
What you need to do is use positions. What fixed does is determine the position in relation to the window (or browser) top left corner, so it will always stay in the same place no matter how you resize it. The right way to go is to use absolute and relative.
First you need a relative container. Your image is already centered, so you could do something like:
<div id="container">...</div>
#container {width:960px; margin:0 auto; position:relative;}
Then you want your video to be in an absolutely positioned div, but INSIDE the relative one. SO your html would be:
<div id="container">
<div id="videoDiv">
your video here
</div>
</div>
And your css for the videoDiv:
#videoDIv {position:absolute; top:200px; left:200px; }
Look por css position online to understand how it works, it's actually quite simple but you need the right structure. In your case, your center tag should be the one with position relative, but make sure you change it to a div, otherwise some browsers will give a validation error.
Having said that, there are a lot of things you can do to improve your site. Once you know how to handle positions, you could re-do the layout using different images (so it's faster to load), and you can use actual text. This is quite important for search engines to recognise your site, so try at least to have keywords spread around.
Here is your CSS for the video div:
#apDiv1 {
position:absolute;
left:747px;
top:535px;
width:400px;
height:223px;
z-index:1;
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
Did you mean to declare width twice? Is the width:960px throwing off your positioning?
Get rid of the <center> tag altogether and change the css for #apDiv1 to:
#apDiv1 {
position: absolute;
left: 597px;
top: 489px;
width: 400px;
height: 223px;
z-index: 1;
}

Absolutely positioning background in responsive layout

I am designing a responsive layout and have positioned a grungy png overlay on top of background using the following CSS:
#bg{
background:url(images/top1.png) no-repeat;
position:absolute;
width:1423px;
height:350px;
top:0;
left:50%;
margin-left: -711px;
}
This way, the image is always centered regardless of the page width. My problem occurs when the browser window is reduced to a width smaller than the background image for the #bg overlay. A horizontal scrollbar appears and the background extends far to the right (especially when the browser is very small).
You can see a DEMO of this here: http://pixelcakecreative.com/cimlife/responsive2/
As you can see a horizontal scrollbar appears, I would like browser window to shrink and not retain the full width of the image! Any ideas?
try this css code:
#bg{
background:url(images/top1.png) no-repeat center;
position:absolute;
width:100%;
height:350px;
top:0px;
left:0px;
}
Just had a quick look at your code. Check out your nav, this one produces the scrollbar.
Have a look on how to enable developer tools in your browser to inspect your page. It's a good way to check on your elements attributes.
Here's an good introduction for Chrome: Link
And for Safari: Link

Fixed width, 100% height object in HTML

So, maybe I just suck at searching, but I'm having real trouble finding a method to do this, so here goes...
I have a webpage with a fixed image background (tiled, non scrolling).
I now want to have a colored div on top of that (700px wide, 100% height, centered) that I can then put more content within (doesn't necessarily have to be a div, I just want a colored area in the center.)
Here's an image of what I'm working towards: http://bit.ly/g5qgj0
The lightly colored area (on top of which lies everything else) is what I'm trying to achieve.
Thanks in advance, I'm still getting to know HTML/CSS and this has been driving me crazy XP
html, body{
margin:0;
padding:0;
height:100%;
}
body{
background:transparent url(...) repeat 0 0;
}
div{
margin:0 auto;
width:700px;
height:100%;
background:white;
}
Check working example at http://jsfiddle.net/TGt4A/
I think your most foolproof way to do this is going to involve Javascript/jQuery, which I did in JSFiddle. You might want to add a CSS min-height on that #container as a fallback if Javascript is disabled or whatever.

Resources