Joined November 2019
·

stephenirving

Front-End Application Developer at Alexander Babbage
·
Charleston, SC
·
·
·

The inner div .row-full only really needs the width set explicitly if another style effecting it sets it explicitly at something other than 100vw, or if it has had its display value changed from block. An element with the display value of block will automatically take up the most space it possibly can, and when you changed the position value to relative you took it out of the normal document flow and its maximum value became 100vw automatically. In your example you can the width: 100vw; line out totally and it will look the same in all cases.

@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;
}
Posted to One line browser notepad over 1 year ago

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.

Posted to One line browser notepad over 1 year ago

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.

Achievements
1 Karma
0 Total ProTip Views