@FalseMcFakeman If you don't want the horizontal scrollbar then you set the box-sizing of the full-width container to border-box. What you have done there is not an advisable solution. Most people just use the following now by default on every project instead because border-box is a much easier way of thinking about sizes.
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}Modified someone else's work and fixed a few errors and changed it to be in monospace (for code notes) for a nicer looking notepad with ability to email the notes:
data:text/html;charset=utf-8,<title>Notepad</title><style>body%7Bbackground%3A%23123%3Bcolor%3A%23333%3Bpadding%3A20px%3Bmargin%3A0%25 auto%3Bwidth%3A90%25%7Dtextarea%7Bbackground%3A%23fbfbfb%3Bborder%3A0%3Bcolor%3A%23333%3Bfont-family%3Amonospace%3Bfont-size%3A2rem%3Bheight%3A96%25%3Bline-height%3A1.4%3Bmargin%3A0%25 auto%3Boutline%3A0%3Bpadding%3A4rem%3Bwidth%3A100%25%7Dbutton%7Bbackground%3A%23fbfbfb%3Bborder%3A1px %23ccc solid%3Bcolor%3A%23123%3Bcursor%3Apointer%3Bfont-family%3Amonospace%3Bfloat%3Aright%3Bletter-spacing%3A.1ch%3Bpadding%3A5px 10px%7D%23dateline%7Bcolor%3A%23fff%3B%7D</style><body><button onclick="sendMail();return false">Email this</button><div id="dateline"></div><textarea contenteditable id=TE spellcheck=true placeholder=Write... autofocus></textarea><script>function sendMail(){var d=new Date();var t=d.toDateString()+' '+d.toLocaleTimeString();var a="mailto:email@example.com?subject="+escape("Browser Notes " + t)+"&body="+escape(document.getElementById("dateline").value);window.location.href=a};var d=new Date();var t=d.toDateString();document.getElementById("dateline").innerHTML=t+'\n\n';</script>
Change your browsers default monosapce font to whatever your favorite is.
Nice, I tweaked it to: data:text/html, <html style="font:200% monospace" contenteditable> for a more readable sized font in monospace. I usually just use notepad++ for my random notes throughout the day and keep my workspace in VS Code, but this might be conditionally useful as well.
No one should ever actually do this.
Here is a version that only requires vanilla JS:
var isOnScreen = function (element) {
var w = window,
elBounds = element.getBoundingClientRect(),
scrollTop = w.pageYOffset,
elTop = elBounds.y + scrollTop;
return (
elTop < (w.innerHeight + scrollTop) &&
elTop > (scrollTop - elBounds.height)
);
}And here is the modern way to write it:
const isOnScreen = (element) => {
const w = window,
elBounds = element.getBoundingClientRect(),
scrollTop = w.pageYOffset,
elTop = elBounds.y + scrollTop;
return (
elTop < (w.innerHeight + scrollTop) &&
elTop > (scrollTop - elBounds.height)
);
}with the element argument being any single node, like what is returned by getElementById (though this is not the only way to grab an element obviously)
Couple things: First you say that parseInt is the fastest, and yet all the data for the jsperf test shows that isn't really the case, ignoring the fact that parseInt is only going to work if you are dealing with values you are sure are integers.
The inner div
.row-fullonly really needs the width set explicitly if another style effecting it sets it explicitly at something other than100vw, or if it has had itsdisplayvalue changed fromblock. An element with thedisplayvalue ofblockwill automatically take up the most space it possibly can, and when you changed thepositionvalue torelativeyou took it out of the normal document flow and its maximum value became 100vw automatically. In your example you can thewidth: 100vw;line out totally and it will look the same in all cases.