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();
})();
Related
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 building a chrome extension but when I use the "default_popup" I can see that it only allows a max height and width, and it is appearing inline over the content of the website. Is it possible to reduce the main browser page to 80% and have 20% of the visible screen for the extension?
Is there another term I can use instead of "default_popup" in "browser_action" to achieve this?
I ran into this issue with an extension recently. I wanted content to be inserted at the top of the browser window and I wanted that content to extend to 100% of the width content window. Since a popup is limited in both width and height, I went with the approach of creating the element to be inserted (for me that was a wrapper div with some content and some buttons) and then appending each of these elements to the body of the page. For example:
let body = document.body;
let wrapper = document.createElement('div')
wrapper.setAttribute('id', 'kty208wrapper')
let header = document.createElement('h1')
header.setAttribute('id', 'kty208header')
// create buttons for increasing/decreasing font size
let btnBigger = document.createElement('button')
btnBigger.innerHTML = "+"
let btnSmaller = document.createElement('button')
btnSmaller.innerHTML = "–"
// add wrapper, header, and bigger/smaller buttons to page
body.insertBefore(wrapper, body.firstChild);
wrapper.appendChild(header)
wrapper.appendChild(btnBigger)
wrapper.appendChild(btnSmaller)
With the wrapper div I used body.insertBefore to insert the content before the start of the body content (so that my wrapper div would show at the very top of the page).
Then I appended the header and buttons to the wrapper div.
Then I was able to write my functions to reference the inserted html elements like so:
let currentSize = 60;
btnBigger.onclick = function() {
currentSize = parseFloat(currentSize) + 5 + 'px';
bigURL.style.fontSize = currentSize
bigURL.style.lineHeight = currentSize
}
Since I wanted this code to be run when a user clicked the extension icon (and not on page load) I created a background script called background.js and listened for the onClicked event. One a user clicked the icon I executed the code above, which was stored in a separate file called content.js. I had to have separate scripts because background scripts don't have access to modify the dom.
chrome.browserAction.onClicked.addListener(function(tab) {
// when a user clicks the extension icon, execute content.js
// content.js has access to the current tab's DOM while
// background.js doesn't.
chrome.tabs.executeScript(null, {file: "content.js"});
});
I hope this helps!
In a web page I have an input field and a div that is fixed to the bottom of the window (with these CSS properties: position:fixed; and bottom:0;
I made a Codepen to show what I'm talking about: https://codepen.io/anon/pen/xpQWbb/
Chrome on Android keeps the div visible even when the soft keyboard is open:
However, Safari on iOS seems to draw the soft keyboard over the fixed element:
(I should mention I'm testing on the iOS simulator on my Macbook, because I don't have a working iPhone)
Is there a way to make iOS Safari keep the element visible even when the soft keyboard is open, like how Chrome does it?
I recently ran in to this problem when creating a chat input that should stay fixed at the bottom of the page. Naturally the iOS keyboard displayed on top of the chat input. Knowing the exact keyboard height seems more or less impossible. I embarked on a quest to find a solid value to base my calculations on so i can manually position the chat input container above the keyboard. I wanted to find the actual "innerHeight" value, in other words the currently visible area of the webpage. Due to how the iOS keyboard works, the only way to get that value with the keyboard open seems to be to scroll to the very bottom of the page, and then take a sample of "window.innerHeight".
So, i set up an event listener on my input field on 'click' (since on 'focus' caused a lot of issues for me). This opens the keyboard, which takes a while, so after i set a timeout for 1000ms to make sure (hopefully) that my keyboard is fully open. After 1000ms i quickly scroll to the bottom of the page with javascript, save the value of "window.innerHeight" in this state, and scroll back to where i was. This gives me the actual height of the visible area on the screen.
It seems like the browser window is placed behind the keyboard until you scroll to the very bottom, in which case the whole window 'scrolls up' and the bottom is placed at the top of the keyboard view.
Once i have this value i use currently scrolled value (window.scrollY) plus the value i saved minus the height of my absolute positioned element to determine where to place it. I opted to also hide the input while scrolling since it's flicking around quite a bit. Another downside to this is that you get a quick flick of the page when it does the measurement at the bottom.
Another thing i couldn't solve was the variable height of the address bar. I just made the input a bit higher than i needed so it would have some "padding" at the bottom.
var correctInnerHeight = window.innerHeight;
var isFocused = false;
var docHeight = $(document).height();
var input = $('.myInput');
input.click(function(e){
isFocused = true;
input.css('position', 'absolute');
// Wait for the keyboard to open
setTimeout(function(){
docHeight = $(document).height();
var lastScrollPos = $(document).scrollTop();
// Scroll to the bottom
window.scroll(0, $(document).height());
// Give it a millisecond to get there
setTimeout(function(){
// Save the innerHeight in this state
correctInnerHeight = window.innerHeight;
console.log(correctInnerHeight);
// Now scroll back to where you were, or wish to be.
window.scroll(0, lastScrollPos);
fixInputPosition();
// Make sure the input is focused
input.focus();
}, 1);
}, 1000);
});
input.on('blur', function(){
input.css('position', 'fixed');
input.css('top', 'auto');
input.css('bottom', '');
isFocused = false;
});
$(window).scroll(function(){
fixInputPosition();
});
function fixInputPosition(){
if(isFocused){
var offsetTop = ($(window).scrollTop() + correctInnerHeight) - input.height();
offsetTop = Math.min(docHeight, offsetTop);
input.css('top', offsetTop);
input.css('bottom', 'auto');
}
};
body, html{
margin: 0;
}
html{
width: 100%;
height: 2000px;
}
.myInput{
position: fixed;
height: 30px;
bottom: 0;
width: 100%;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='myInput'>
Check out this thread, it talks about a work around that may be more feasible in terms of code. In brief it talks about using the height of the keyboard to move the content into view. All be it a bit hacky it may be difficult to pin down the exact height of the keyboard across devices.
Unfortunately, due to the nature of the IOs Safari keyboard it's not part of the browser viewport so cannot be referenced as you would do typical elements.
#Bhimbim's answer may a good shot too.
Regards,
-B
i experienced this before. What i did back then was :
Make a listener when keyboard is hit.
When keyboard is hit resize you webview's height with screen height - keyboard height.
To do this trick you need to make sure that you html is responsive.
I can show more code in the IOS side, if you're interested i can edit my answer and show you my IOS code. Thank you.
Hi again, sorry, i was mistaken, i thought you were creating apps with webview inside. If you still wanna do this by listening the keyboard i still have work around for you. It may not the perfect way, but i believe this will work if you want to try. Here my suggestion :
You still can have listener from webpage when the keyboard is up. You can put a listener on your textfield by jquery onkeyup or onfocus.
Then you will know when the input is hit and the keyboard will show.
Then you can create a condition in your java script to manipulate your screen.
Hope this give you an insight friend.
#Beaniie thank you !.
Hi Andreyu !. Yes correct, we can not know the keyboard height, not like my case with WebView, I can know the keyboard height through IOS code. I have another work around, not so smart, but might work. You can get the screen size and compare to array of IOS device screen size. Then you might narrowed down the keyboard height by surveying through IOS devices. Good luck friend.
Try using position:absolute and height:100% for the whole page.
When the system displays the keyboard,it plTaces it on top of the app content.
One way is to manage both the keyboard and objects is to embed them inside a UIScrollView object or one of its subclasses, like UITableView. Note that UITableViewController automatically resizes and repositions its table view when there is inline editing of text fields.
When the keyboard is displayed, all you have to do is reset the content area of the scroll view and scroll the desired text object into position. Thus, in response to a UIKeyboardDidShowNotification, your handler method would do the following:
1.Get the size of the keyboard.
2.Adjust the bottom content inset of your scroll view by the keyboard height.
3.Scroll the target text field into view.
Check the Apple developer's guideline to learn more:https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
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.
I'm using Chrome Developer Tools and trying to get the browser width in px
Google recently rolled out updates for their Developer Tools, before these updates the screen height & width used to appear in the top right of the website preview when scaling the developer tools, but now there's no way to find out the screen size (example below)?
How can I find out the browser size via Chrome dev tools now?
I came across this trying to figure this out and couldn't find device mode as per Danamorah's answer. So I thought I would help save some time for a newbie and screen shot the icon to click so you can get measurements.
First, open dev tools, and then the top left corner you should see an icon shaped as a small tablet and phone. Click that and you can adjust measurements with the pixel count:
They change the way to show this tool, you can find it pressing in device mode
It's a bug: https://bugs.chromium.org/p/chromium/issues/detail?id=582421
Google Chrome beta branch has this bug fixed already and the fix is expected to be added to the next stable release (version 50).
As a temporary workaround, you can use this bookmarklet:
javascript: (function() {
var v = window,
d = document;
v.onresize = function() {
var w = v.innerWidth ? v.innerWidth : d.documentElement.clientWidth,
h = v.innerHeight ? v.innerHeight : d.documentElement.clientHeight,
s = d.getElementById('WSzPlgIn'),
ss;
if (!s) {
s = d.createElement('div');
s.id = 'WSzPlgIn';
d.body.appendChild(s);
s.onclick = function() {
s.parentNode.removeChild(s)
};
ss = s.style;
ss.position = 'fixed';
ss.top = 0;
ss.right = 0;
ss.backgroundColor = 'black';
ss.opacity = '1';
ss.color = 'white';
ss.fontFamily = 'monospace';
ss.fontSize = '10pt';
ss.padding = '5px';
ss.textAlign = 'right';
ss.zIndex = '999999';
}
s.innerHTML = 'w ' + w + '<br />h ' + h;
};
})();
It's not the same, and not as convenient as it used to be. But you can turn on a ruler under developer tools settings (General tab, Elements section, check "show rulers").
Then when you select an element (body or html) you can get the size of the element with a ruler on the x and y of the browser. This will not be the same as your browser window though if your content is wider than the browser.
It's inconvenient because it doesn't show you the size of the browser as you are resizing like it used to. Hopefully the original feature comes back.
*Also found that if you Toggle Device Mode on, and select Responsive in the drop down, you can resize the browser area and see real-time screen sizes.