Get the real width and height of an image with JavaScript? (in Safari/Chrome)

Webkit browsers set the height and width property after the image is loaded. Instead of using timeouts, I’d recommend using an image’s onload event. Here’s a quick example: var img = $(“img”)[0]; // Get my img elem var pic_real_width, pic_real_height; $(“<img/>”) // Make in memory copy of image to avoid css issues .attr(“src”, $(img).attr(“src”)) .load(function() … Read more

Custom CSS Scrollbar for Firefox

As of late 2018, there is now limited customization available in Firefox! See these answers: https://stackoverflow.com/a/54101063/405015 https://stackoverflow.com/a/53739309/405015 And this for background info: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109 There’s no Firefox equivalent to ::-webkit-scrollbar and friends. You’ll have to stick with JavaScript. Plenty of people would like this feature, see: https://bugzilla.mozilla.org/show_bug.cgi?id=77790 As far as JavaScript replacements go, you can try: … Read more

Convert Data URI to File then append to FormData

After playing around with a few things, I managed to figure this out myself. First of all, this will convert a dataURI to a Blob: function dataURItoBlob(dataURI) { // convert base64/URLEncoded data component to raw binary data held in a string var byteString; if (dataURI.split(‘,’)[0].indexOf(‘base64’) >= 0) byteString = atob(dataURI.split(‘,’)[1]); else byteString = unescape(dataURI.split(‘,’)[1]); // … Read more

Chrome / Safari not filling 100% height of flex parent

Solution Use nested flex containers. Get rid of percentage heights. Get rid of table properties. Get rid of vertical-align. Avoid absolute positioning. Just stick with flexbox all the way through. Apply display: flex to the flex item (.item), making it a flex container. This automatically sets align-items: stretch, which tells the child (.item-inner) to expand … Read more