So, I have been trying to implement a landing page for mobile view that you can see here : https://i.imgur.com/4Ju5XGs.png
It works fine so far.
But as soon as the user wants to introduce his username and password, the keyboard from Android appears and my problem appears as you can see here : https://i.imgur.com/uT4LKrQ.png
My elements (the logo and the form) are placed via absolute position to keep the layout in place whatever the screen size is. I suspect this is my main issue.
Here is a really really quick pen to showcase what the problem is all about : https://codepen.io/Gallow/full/BeLWVG ( https://codepen.io/Gallow/pen/BeLWVG to see the quick code )
In order to make the android keyboard appear, you have to enable Toogle Device Toolbar from the chrome debug menu, then click to choose a device and click edit.
From there, a list will open and check Nexus 5X.
The procedure is described here : How to bring up mobile keyboard in chrome dev tools?
To toggle the keyboard, just click on the screen options (to change orientation) and pick Portrait - Keyboard
I think this might be the code in cause : (you can see the same code in the pen as well)
.logo
{
position : absolute;
z-index: 100;
width: 80%;
left: 10%;
top: 7.5%;
}
.container__action
{
position: absolute;
z-index: 100;
bottom: 5%;
width: 80%;
left : 10%;
text-align: center;
}
As you can see, everything is placed via absolute. As the keyboard appear, the size of the body decrease dramatically which cause the form to move up and place himself in front of the logo.
I can't find a proper way to apply this layout without using absolute to place the element, while making it works when the keyboard lower the size of the body.
Thanks a lot !
My suggestion would be to divide your CSS into two sections, one below very square-ish aspect ratio (like 1:1, you have to see what resolution you get on what aspect ratios) and set logo's display to none (that is pretty common solution while keyboard is visible).
If you don't know how to do this, see read here about #media query.
Another option (if you don't want to use #media query) is to listen for input's focus and blur events (focus means that input is selected, blur means that it is no longer selected) and toggle logo using javascript.
Related
Let's say my background is an image of a boombox such as: https://ibb.co/hCZSWt2
I have the background image style set to background-size: cover so it will resize properly with the window.
How do I "attach" a button to a part of that background, so that if the window is resized, the button will always remain in the same place, in relation to the background image.
(i.e. if they hit a button on one of the cassette decks, I can make a song play).
Currently, when I use position: absolute I can get it to be placed properly for my screen size, but when I use Chrome's inspector to see the mobile view, that throws off the location of the button in relation to the background. I anticipate this will need to use JavaScript's vh and vw properties to calculate where the button should go on window resize, but if anyone could provide a simple example that would help a ton!
Try using top/left/right/bottom attribute. You can set them to percentages so they should shift with the page resizing. If the discrepancy is too much however, you can use #media to change the css once you reach a certain window size. An example:
#yourbutton{
position: absolute;
top: 15%;/*meaning it's top edge will be 15% of the page height away
from the top edge of the page*/
left: 20%;
/*You may want to set height and width to percentages as well to
make the buttons smaller should the screen size be too small*/
}
/*If the discrepancy piles up too much when the width/height is x
pixels*/
#media (max-width: 900px) {
left: 10%/*or something*/;
}
If the answer worked for you, please consider accepting it!
Everything works fine on any desktop browsers. Regarding mobile browsers, I’m having a really weird issue with Chrome on iOS only.
First load of the website from the URL bar works well, viewport height is correct. However, if I open the same site from the history or bookmarks, the viewport height is wrong and doesn’t take into account the real viewport.
Here is the basic style css I use:
body, html {
height: 100%;
}
Below part of the code I used before:
body {
margin: 0;
padding: 0;
overflow-x: hidden;
min-width: 320px;
background: #fff;
}
Here is the capture of the first load, there is not scroll bar and height viewport is correct:
Here is the capture on the second load of the page from the history, height is different and the page is scrollable:
Here are the logs, we can see that the height is different from the first load to the second load:
I’m not sure if I’m missing something but I disabled as much as possible my code, cleared the cache of the browser etc. but the issue persist. It happens on various iPhone models too.
Edit 12/20/2020
Here is a similar issue on a react website: https://www.kirupa.com/react/examples/react_router/index.html#/
If open via the link, viewport is correct. Reopening this website from the history, it will have a different height and a scroll bar will appear.
Thanks!
Try using
margin:0;
padding:0;
box-sizing:border-box;
}
And remove the display for html.
iOS has a convention that double-tapping on the top bar (i.e., where the current time is displayed) scrolls the app to the top state. For example, double-tapping the top bar in Safari brings you to the top of the current web page, and double-tapping the top in Facebook/Twitter brings you to the top of the feed. It's a very useful navigation shortcut.
Let's call it a TopTap for purposes of this question.
I'm wondering how I can detect TopTaps in a JavaScript app in mobile Safari -- that is, NOT in an iOS app, but in a web page that happens to be viewed in mobile Safari.
In my particular case, I can't rely on the built-in mobile Safari TopTap behavior because my document consists of a single <canvas> element that implements its own scrollable interface. I want to be able to detect a TopTap so that I can scroll that <canvas> to its top state.
I've experimented with adding an onscroll event handler, but there's no distinguishing information in that event that would let me isolate the TopTaps. Also, I can't use touch events (touchstart, etc.), because a TopTap happens in the browser/OS chrome, outside the scope of the web page.
Any ideas?
As it turns out double tapping the native status bar will trigger a scroll event on document.body which you can in fact listen for. Trick is, as you mentioned, how can you determine if it's from a double tap or not?
In order to detect it, the body has to be scrolled down to begin with. And setting the scroll position causes a scroll event.
While it's a bunch of hacks, I've been able to get this working:
Code: https://github.com/HenrikJoreteg/holy-grail-ios-layout
Demo: http://ios-layout.surge.sh
Basically, you don't really use the <body> as a container. You set it as position: absolute and full height/width. Then you have some kind of container element that you set to position: fixed that you use as your actual container for your content.
Doing this lets you programmatically scroll the body without affecting anything visual on the page at all.
Now you're set up to listen for scroll events on the body and ideally the user can't actually cause a scroll on the body except via double tapping the status bar.
Unfortunately you have to do all sorts of silly things to make this work.
Put something taller than 100% in the body so the body can actually has something to scroll.
Programmatically set the scroll position to 1 to start and after each status bar double tap.
Set a debounced scroll handler on the body that only fires if it knows the event wasn't caused by setting the position to 1.
As it turns out, iOS also likes to break thing when you rotate the phone, etc.
Use the following CSS to make the contents of your actual content containers scrollable with momentum and rubber-banding:
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
Anyway, it's something :)
More info in the github repo, but anyway, this really does seem to work quite well for iOS 8 (haven't tested other versions of iOS).
If your target is recent iOS, you could put an element over your canvas that is position: fixed to the top of the viewport and use that to detect double-taps.
EDIT: I was thinking something like the below, but as Adrian points out he needs it to happen when the native browser chrome is double-tapped as well.
<!doctype html>
<html>
<head>
<style type="text/css">
canvas {
height: 1000px;
width: 320px;
}
#top-tap {
height: 16px;
left: 0;
position: fixed;
right: 0;
top: 0;
}
</style>
</head>
<body>
<canvas></canvas>
<a id="top-tap"></a>
<script type="text/javascript">
function secondTap() {
window.scrollTo(0,0)
}
document.querySelector('#top-tap').addEventListener('touchend', function (e) {
var self = this
this.addEventListener('touchend', secondTap)
setTimeout(function () {
self.removeEventListner('touchend', secondTap)
}, 100)
})
</script>
</body>
</html>
Is it possible to create a hidden native html element, the same height as the content in your canvas. Then map the scroll position on the native element to the same position within the canvas. Could also hide the canvas scroll widget.
So as far as the users concerned they only see the native scroll bar... but all the scroll events map to the canvas - including the status bar tap.
May not work if you have other HTML content on the page but might if there's only the canvas visible.
Edit: Here's a very crude prototype http://jsbin.com/cisizopi/3
I'm simulating a canvas and it's contents with divs
After doing a little research, I came across this post: http://prud.github.io/ios-overflow-scroll-to-top/. I'm not sure if this will do what you are looking for. Also, I'm fairly certain that you cannot intercept the status bar touch with JS in the browser for IOS.
EDIT: The client wants to do some testing with disabling the click and drag feature in IE, so at this current moment you will be unable to replicate the bug. I understand if this effects the communities ability to assist in fixing the ultimate underlying problem.
So here is the problem. It occurs in IE9 and IE8 when the screen height or more specifically the browser height is less than the height of the website main container. The website scrolls horizontally so its total height is somewhere around 700 or 800 pixels.
To reproduce this bug you have to open up this url: http://dev.gregoryfca.com/ in IE9 and make the height of the browser somewhere around 500 or 600 pixels. So this will force the page to start scrolling vertically top to bottom.
Keep it all the way to the top so you can still see the G logo and the menu as well as the social icons. Then click in the white area and dont let go. You can click in the white area next to the Our People section.
When you click start to drag your mouse to the right. This will start the page scrolling and allow you to use the horizontal scroll feature.
So here is the bug. In IE9 when the browser height is smaller than the total website height, when you click and drag in the middle section to scroll horizontally, the whole page jumps down vertically so that the absolute top of the screen is the top of the #drag-wrapper element.
I dont want the page to jump when you are scrolling horizontally. If you put together this same set of circumstances in Chrome or Firefox you will see this bug is not present there.
I think it has something to do with the way IE treats focused elements with certain positioning, or something like that. The site uses lots of jQuery as you will see.
Does anybody have any idea. I have basically exhausted everything I can think of.
try giving left and top property to this css class:
#drag-wrapper {
height: 610px;
margin: 35px 0;
overflow: hidden;
padding: 0;
position: absolute;
left:0;
top:150px;
width: 100%;
-moz-tap-highlight-color: rgba(0,0,0,0);
-moz-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
z-index: 4000;
}
As you can see this class has position:absolute but it doesn't have the left and top property. make margins to 0 if requires.
Does anybody know how the eyeball in this website is designed? Is this javascript (jQuery perhaps), or simply HTML5 and CSS? I just don't really understand how you get a little image in that shape, get it's onhover method, set a new picture, and then make it clickable. Is this a button?
http://animalvfx.com/work/
They use one image as the background (found here: http://animalvfx.com/images/bg-open-close.png).
They are only using CSS, they have a hover state on the class that sets the background position to a negative offset.
Basically the styles are:
.slide-holder .opener {
width: 30px;
height: 38px;
overflow: hidden;
position: absolute;
bottom: -38px;
background: url(../images/bg-open-close.png) no-repeat;
}
.opener:hover {
background-position: 0 -76px;
}
Effectively you are only seeing one part of the background image at a time. Because the image states are similar, it appears to be looking up.
The click event of the eye is using jQuery slidedown
If you want to find out how things work yourself, you can use the developer console in most popular web browsers. Then use the HTML inspector tool to inspect the element you are interested in.
Developers consoles are usually activated by pressing F12. This works in any decent modern web browser (and Firefox with Firebug)
It is a sprite - http://animalvfx.com/images/bg-open-close.png - on hover the background image is shifted from the centered eyeball to the offset one.
.opener:hover {
background-position: 0 -76px;
}
I believe he compressed his javascript so its not legible to the human eye but I believe he uses a combination of jquery/javascript, and css3. The hover where the eye changes its appearance I believe is just some simple javascript to change the image when hovered over. I know for sure a toggle class is being used when you click the eye because you can see the class change on the list in the HTML source (it originally is set to display: none). This definitely seems like the work of slideDown from jQuery. Hope this helps :]