What is the effect of the following CSS in a phonegap app? - javascript

What is the effect of including the following CSS? Initially this may seem like a silly question, but bear with me. I have the following page. Nothing too complicated, just a fixed header at the top with the h1 centered horizontally inside the header div. In a browser this works perfectly. However, this is to be used inside a phonegap 2.9.0 app.
On a nexus 4, when the screen rotates, the h1 is no longer centered horizontally unless the "orientations from js" css is included. But I don't even have the class in the #media selector in my HTML page at all. Admittedly I copied the orientation css from jquery mobile's css file, but only to understand how they were able to get their h1 to always center even upon device orientation change. I am not using jquery mobile.
Can someone please explain this mystery?
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
<style>
/*CSS WITH THE CORRECTING EFFECT*/
#media screen and (orientation: portrait){
.nonExistantClass {}
}
/* OR THIS ONE! */
#media screen and (orientation: landscape){
.anotherNonExistantClass {}
}
/*END CSS WITH THE CORRECTING EFFECT*/
.header h1{
font-size:1.4em;
margin: 0 30%;
}
.header {
left: 0;
right: 0;
width: 100%;
top:0;
position: fixed;
z-index: 1000;
background:black;
color:white;
height:2.4em;
line-height:2.4em;
text-align:center;
}
</style>
</head>
<body>
<div>
<div class="header">
<h1>Title</h1>
</div>
</div>
</body>
</html>
UPDATE:
I have narrowed it down a bit. My initial question was about classes ui-mobile and ui-page. However the same CSS from before with changed class names has the exact same effect.
Further, I only need one of the two #media selectors to exhibit the mentioned behaviour. I have updated my question.

My answer, unless someone can correct me, is that this is simply a bug in phonegap or its implementation on Android, and that by including one of those media selectors I am forcing the browser view of the app to somehow do a width calculation that it is supposed to be doing in any case.
I wonder if the people behind jQuery knew this or just coincidentally happened to have CSS that corrected the bug...

Related

Different height issue with same font-size & line height in each browser - Safari, Chrome, FF? How to have all of them pixel perfect & same height?

Different height issue with same font-size & line height in each browser - Safari, Chrome, FF? How to have all of them pixel perfect & same height?
I have this simple code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
span {
font-family: sans-serif;
line-height: 1;
font-size: 11pt;
margin: 0;
padding: 0;
width: fit-content;
height: fit-content;
display: block;
}
</style>
</head>
<body>
<span onclick="document.getElementById('output').innerHTML = getComputedStyle(this).height">CLICK ME!</span>
<span id="output"></span>
</body>
</html>
This gives me different heights in each browser:
Chrome: 14px
Safari: 15px
Firefox: 14.6667px
I have tried switching from span to div but the issue persists. I already have line-height:1 and padding, margin set to 0 too.
This height difference might not seem like much in this simple example but my actual use case has much larger height differences as I have lots of spans and divs and I need all of them to fit in a fixed sized container. I am designing a resume builder in browser and require all the content to fit in a fixed size container. This difference in heights causes things to overflow in Safari and a bit in Firefox. In each case, Chrome seems to squeeze things the most.
I can't use fixed height because my actual content will have multi-lined content.
You can test this JSFiddle:
https://jsfiddle.net/5s40jhyf/3/

Trying to create a 100% height div in a Wordpress site with Divi theme

I have a Wordpress site, that shows maps of fictional worlds. The maps are leaflet.js maps, that are displayed within a div called map. This div is not created with the divi frontend, but in a html file that gets included through a plugin shortcode. Basically the php plugin loads a bunch of map specific settings to provide to the leaflet map and shows some html.
Now I want this map div to be as high as possible without causing a scrollbar.
I've tried different things:
height: 100% - does not show anything at all, apperantly an issue with the parent elements
height: 100vh - way bigger than the screen and triggers a scrollbar
height: 74vh - fits on my 2.5k screen but not on others
setting height according to window.innerHeight is too large
setting height according to window.innerHeight and substracting the pixel count of the header and footer is too large too
Whatever I try, I either get a scrollbar or a white stripe below my blue footer. You can see it live here: https://fictionalmaps.com/audience-map/?creator=1&map=KisandraShowCase
My latest - not working - iteration of the code I include with php looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta charset="utf-8" />
<!-- meta name="viewport" content="width=device-width, initial-scale=1.0" -->
<!-- some css files are loaded here needed for the leaflet map itself - none should interfere with the map div -->
<style>
html, body {
padding: 0;
margin: 0;
}
#map {
width: 100%;
max-width: 1024px;
height: 70vh;
max-height: 1024px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var tempHeight = window.innerHeight;
jQuery('#map').height(tempHeight);
</script>
<!-- some js files are loaded here needed for the leaflet map itself -->
</body>
</html>
This produces a scrollbar. If I try e.g. var tempHeight = window.innerHeight - 340; I can get it to fit nearly, but get a white stripe below the footer. Also it's not consistent across computers.
My CSS game is weak, I need some help! I'm stuck in an unsuccessful trial-and-error loop and running out of ideas what else to try.
Use position absolute and give it a top: 0; and bottom: 0; that way iot will use the entire screen height.
#fullscreen {
background-color: blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<body>
<div id="fullscreen"></div>
</body>

How to crop the image so that it fits 50% of the screen?

I need the image to fit the 50% of the screen height of the device and not 50% of the current screen size (the user might have minimized the screen). Also, when the user resizes the screen, I don't want the image to automatically fit the screen once initially it is rendered.
The image is very large and I am looking to crop it, and not resize it. Here is what I done so far:
home.html:
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<img class="image" src="myimage.jpg" alt="">
</body>
</html>
home.css:
html, body {
margin:0;
border:0;
padding:0;
}
img.image {
width:100%;
}
I don't want to use anything apart from HTML, CSS and JavaScript. It would be great if somebody help me understand how should this be done in CSS. Thanks!
Consider using the css clip property.
Combining clip with a little JavaScript to get the screen size may just be the right solution.
to crop the image, you will need a container with overflow:hidden.
DEMO/example :
html, body {
height:100%;
margin:0;
}
.crop50h {
height:50%;
overflow:hidden;
}
/* some specific behavior for image ? */
.crop50h {
text-align:center;
}
.crop50h img {
/* width:100%; ? */
margin:0 -100%;
min-width:100%;
}
Wit html basis :
<div class="crop50h">
<img src="http://lorempixel.com/1200/1200/"/>
</div>
If I've read your question correctly, I believe you're asking to set the image to be 50% of the desktop window, not the browser window.
In that case you can use window.screen.availHeight in Javascript to get the available height:
var half = window.screen.availHeight / 2;
var image = document.getElementByClassName("image")[0];
image.width=(half)+"px";

Slide content / page transition

I'm trying to recreate something like they've got over at gimmebar.com.
When you click an image, the content current page slides out left and fades out. The target page fades in and slides in from the right.
I've tried a couple of things, like creating two divs in a container with a width of 200% and scrolling the content in to view and using JqueryUI and slideing the divs.
The scrolling failed with the divs not moving at all and srollLeft always being 0 no matter what.
The slide worked somewhat better but to me it seems like they aren't run simultaneously.
The second div just pops in to existence instead of nicely sliding in right behind the first.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
.container {
width: 100%;
float: left;
height: 800px;
}
#one {
background-color: red;
}
#two {
background-color: #333;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div class="container" id="one"></div>
<div class="container" id="two"></div>
<script>
$( document ).click(function() {
$("#one").hide("slide", { direction: "left" }, 1000);
$("#two").show("slide", { direction: "left" }, 1000);
});
</script>
</body>
</html>
It seems like it should be so easy to achieve but I'm stuck.
Take care.
Edit:
I kind of got it to work as you can see in this fiddle.
The slide is there but I can't see no fade.
There also might be a better way of achieving this but I'm pretty satisfied with not having to load a third lib/plugin just to slide a div.
http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios
Found a tutorial written by their developer. Think that would count as the solution.
A pure javascript solution: in the CSS:
div.wrap {visibility: hidden; position: absolute; overflow: hidden;
top: 0; left: 0; width: 100%; height: 100%}
div.wrap div.newContent {visibility: visible; position: relative; left: 100%;}
in the HTML:
<div class="initContent">
This is the content that is initially displayed
</div>
<div class="wrap">
<div class="newContent">
Put the content you want to be revealed here
</div>
</div>
The newContent div is initially hidden because its left edge is at the right edge of its parent (wrap) div, and the CSS tells the browser to hide any content that overflows the parent div.
Then to reveal the hidden content set a timer that progressively decreases the style.left for the inner div from 100% to 0% and increases the opacity from 0 to 1. I made a class for opening/closing swipey menus that could be adapted slightly to do this. (EDIT : a newer version)
i would recommend you use this jQuery script i used not so long ago in a website and it worked like a charm its called CODA SLIDER, it was made by Kevin Batdorf and the installation its barely 5 lines of code.
Good luck

Is it possible to do a "snap-to" effect while scrolling?

I am setting up a website like this (vertical slideshow almost):
http://mikelegacywebdesign.com/scrollpage_test/index.html
The one thing I am looking to do that I can't figure out is how to make the scrolling SNAP to the point where the color change is while scrolling.
For example, when scrolling, you get to about 50-100 px near the top of the next color you are scrolling to, it would be nice if that would snap to that point, instead of just continuing to scroll, because it is hard to get that "frame" to perfectly align. It's dependent on the user to scroll the perfect amount so that they are viewing the full frame, and not pieces of the former or next frame in the sequence.
Anyone that knows if there is a jQuery plugin or something for this would be my hero.
Here is the ENTIRE page so far. It's simple coding to get the current effect:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Scrollpage Test</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
.container { height: 400%; width: 100%; }
.section { height: 35%; width: 100%; }
#section1 { background-color: #1d9ad7; }
#section2 { background-color: #c83e3d; }
#section3 { background-color: #75b946; }
#section4 { background-color: #f4be2f; }
</style>
</head>
<body>
<div class="container">
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
</div>
</body>
</html>
Yes, it's possible. Their code is quite awful though. While animating scrollTop, you'll want to make sure that additional user-input that normally leads to scrolling is ignored. Have a look at this test-case to get an idea about how to prevent a user from scrolling.
You can get the desired effect using the
scroll() jumpScroll() scrollBy()
and a little bit of your own code.
For example,
function jumpScroll() {
window.scroll(0,250);
}
Would scroll to that point on the page
I was after the same thing so asked a similar question a few weeks ago. I found an addon called stellar.js that had the functionality but the demo was in horizontal and I couldnt for the life of me change it to vertical. Anyways, someone posted a solution, which I edited for mousescroll instead of click: http://jsfiddle.net/djsbaker/dxzk4/
On a site note, I had issues with it being quite laggy with huge fixed background images. In fact very laggy, but I was using parallax which didn't mix well.

Categories