I'm building a responsive web app and want to guarantee that nothing is unintentionally hidden by the address bar or navigation bar in iOS Safari and other mobile browsers.
I'm currently using this code:
window.onresize = function (event) {
toastr.warning("resized");
var h = window.innerHeight;
document.getElementById("applicationHost").style.height = h + 'px';
};
But I was wondering if there's a CSS-only way to solve this problem.
Maybe "vh" units would help in this case, hard to tell without seeing code and doing some testing. Try adding height:100vh; to the element that needs to have the viewport height.
Related
TL/DR; title says it all. HTML/CSS only website not performing as desired.
I'm an absolute beginner with HTML/CSS having only done an online University of Michigan HTML and CSS course 5 years ago. I've written my small business page using a W3 CSS template but have issues when viewing on small devices in particular. We don't need a really fancy javascript website to attract customers from competitors.
I've made a copy of the website (stripping out all personal details) and uploaded it to http://testurl.gq (not sure if linking to a site is allowed?) I just didn't want to post my entire code here.
I've tried to hide the navbar when scrolling because it takes up too much screen on a mobile device but have had no luck - it should be easy, right? How do I hide it, or make the font shrink so it reduced consimed screen real estate?
Also, the text for each person is hidden on mobile devices by default, but is there an easy way to show it by clicking on the photo of the individual?
Thanks for taking the time to read and respond. If it's preferable to paste my html and css file contents let me know and I'll upload it.
I think you want something like this
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("myNavbar").style.top = "0";
} else {
document.getElementById("myNavbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
I am trying to keep the physical size of a DIV constant, even when the user zooms in/out, or resizes the browser window.
Here's my latest attempt:
<center>Hello world</center>
<div style="text-align:left;background-color:#474747;
line-height:1.4;color:#a7a7a7;font-size:2vh;width:60vh;height:30vh;
bottom:0px;right:0px;margin:2vh;position:fixed;padding:1vh;">FixedDIV</div>
https://codepen.io/hexatomium/full/MWwNpzB
This almost fills my objective, except when vertically resizing the window.
Thanks for any ideas.
Note: Ideally I would like to make this work in Chrome and IE11.
You can try the Visual Viewport API.
This will take one step further.
const update = (event) => {
document.getElementById("size").style.width = window.visualViewport.width / 10 + 'px';
document.getElementById("size").style.height = window.visualViewport.height / 10 + 'px';
document.getElementById("size").innerHTML = window.visualViewport.width + 'px';
}
visualViewport.addEventListener('scroll', update);
visualViewport.addEventListener('resize', update);
addEventListener('scroll', update);
https://codepen.io/AvremiFriedman/pen/abOejZJ
It dont work good enough on code.
Try it on yor computer. You will get better results.
I'm trying to figure out a way to resize all content in a webpage based on the width of the browser window. The idea is based on the website newhive, which works in this way. Here is an example:
https://newhive.com/peertospace/nargifsus?&no_paging
Using css vw alone seems to not be capable of achieving this, so i'm panning towards javascript or jquery, but with no idea where to start. Any help would be appreciated.
I wouldn't take any steer from that website example if I were you. Everything they do on that page is horrendous from a UX point of view as well as a performance point of view. However if you really must you can use jQuery's resize function (see: https://api.jquery.com/resize/)
An example below (gets the current window width and checks if it's larger than 992px
function windowWidth(){
return document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
}
$(window).resize(function() {
console.log("window resize running");
if( windowWidth() > 992){
// do stuff
}else{
// do other stuff
}
});
I just noticed that the window height / width are no longer appearing on the top right hand corner of the web page when I enter developer mode.
Not sure if I accidentally turned it off or if an version upgrade removed this functionality.
How do I turn this back on? I am running version 49.0.2623.87.
The width and height at the top right hand corner of the window is gone. To get a similar view, you now have to click on the device icon on the top left hand corner of the developer console (below in red). Then on the screen that pops up, you need to select 'Responsive' on the device drop down tab on the top center of the screen (in blue).
Now you can see the width / height of the window and also resize it.
Looks like after sufficient requests, the developer tools team brought it back. In unstable/canary for now, soon in stable.
I created a plugin to help me when I'm not using the responsive feature in Chrome's dev tools as it does not resize when using the dev tools to the side. Here's the link to the plugin: https://chrome.google.com/webstore/detail/width-and-height-display/hhcddohiohbojnfdmfpbbhiaompeiemo?hl=en-US&gl=US
Alternatively, I took #Joefay and #Micah's (thanks!) answer from above and made a little visual in the upper right hand corner so you don't need to keep your console open after popping the code into the console. You will have to paste it in each time you open a new window or refresh your page however. Hope this helps.
var onresize = function() {
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var container = document.getElementById('heightAndWidth');
container.innerHTML = width + ' x ' + height;
};
(function addHAndWElement() {
var cssString = 'position:fixed;right:8px;top:8px;z-index:20000;background:rgba(0,0,0,0.6);color:#FFF;padding:4px;'
var htmlDoc = document.getElementsByTagName('body');
var newDiv = document.createElement('div');
var divIdName = 'heightAndWidth';
newDiv.setAttribute('id',divIdName);
newDiv.style.cssText = cssString;
htmlDoc[0].appendChild(newDiv);
onresize();
})();
I have a SVG chart using d3js. We can add some points to this chart and move it. When I have a big page and so when we need to scroll it, it works with the mouse. But I have an input screen with multi-touch and in more I develop my app for mobile.
The input with the chart and the scroll aren't working together with an input touch. For example if I want to move my point it's the page which scroll and not my point wich move. It's not exactly the same bugs on firefox, IE and my Windows RT app.
You can see a little example here to test if you have an input touch, I guess tablet and smartphone will have the same behaviour than my PC with a touch screen.
I have the following css to simulate a bigger app:
body {
overflow:visible;
width: 2000px;
height: 2000px;
}
There is a way to do this?
I hope you understood my problem :)
I tested this on my phone and tried to research how to force a browser to stop scrolling with little success. The good news is your app allows a mobile user to place a new point really nicely.
To get the project done quick, you might need to create a set of controls that grabs an id of each existing point and allow the mobile user to move the desired point using buttons. The UI for such a set of controls could be minimal and intuitive if done well. You could set the UI to display:none and only show when the screen width/height is iPad size or less.
I finnaly found a solution with the pointer-events property in css
var C1 = document.getElementById("C1"),
evtIn = window.navigator.msPointerEnabled ? "MSPointerDown" : "touchstart",
evtOut = window.navigator.msPointerEnabled ? "MSPointerUp" : "touchend";
C1.addEventListener(evtIn, function () {
d3.select("#C1").style("pointer-events", "all");
d3.select("body").style("overflow", "hidden");
}, false);
C1.addEventListener(evtOut, function () {
d3.select("#C1").style("pointer-events", "none");
d3.select("body").style("overflow", "auto");
}, false);
On touch start I just allow pointer events in my chart et disable overflow and in the other way for the touch end.