Thread by @Alex05481058, Here is my collection of html+css things I got stuck with working [...]

Here is my collection of html+css things I got stuck with working on my recent project

https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten">

Transforms are not applied to anything that is not a block type of display. It actually is not pretty obvious in specs. At least for me.

https://drafts.csswg.org/css-transforms-1/">https://drafts.csswg.org/css-trans...

Pseudo-elements "before" and "after" work with boxes only. Inputs are not boxes.

#before-after-content">https://www.w3.org/TR/CSS21/generate.html #before-after-content">https://www.w3.org/TR/CSS21/...

Slick carousel is not normally centered when parent is table-cell. Not very strange when you use Pagepiling js. Its sections have this property.

Fix #issuecomment-408043817">https://github.com/kenwheeler/slick/issues/2594 #issuecomment-408043817">https://github.com/kenwheele...

Slick inside the table or table-cell — Slick's width grows enormously large · Issue #2594 ·...

tl;dr Just use exactly this styles for your table container: .container { display: table; width: 100%; table-layout: fixed; } Wasted a lot of time to resolve an issue, when Slick is inside display:...

https://github.com/kenwheeler/slick/issues/2594#issuecomment-408043817

If it has no "href" and it& #39;s functional - make it button

Pagepiling-js plugin is not reacting to mousewheel scroll if scroll event is happening "above" content which is not handled by the plugin. Like, you have sections handled by the plugin and fixed footer 200px height. Nothing happens if you& #39;re "mousewheeleing" over the footer.

CSS flex-basis not working when flex-direction is & #39;column& #39; unless you set children& #39;s heights explicitly https://stackoverflow.com/questions/20136336/css-flex-basis-not-working-when-flex-direction-is-column">https://stackoverflow.com/questions...

CSS flex-basis not working when flex-direction is 'column'

My goal is to create a two-column layout with flexbox wherein the first column has two rows and the second column has one, like this: Setting flex-basis: 100% on the third item gives the desired e...

https://stackoverflow.com/questions/20136336/css-flex-basis-not-working-when-flex-direction-is-column

Off-top. Seaching some help on youtube, try not to be caught by these kitties

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🐱" title="Katzengesicht" aria-label="Emoji: Katzengesicht"> https://youtu.be/jrErPV57Oy0 ">https://youtu.be/jrErPV57O...

Background gradients are not animated on hover, what would be nice, anyway. https://stackoverflow.com/questions/14116689/animating-a-css-gradient-background-on-the-hover-event">https://stackoverflow.com/questions...

Animating a CSS gradient background on the hover event

I have some menu items that are styled using a background gradient on hover using the following styling: #sidebar ul li a:hover { background-image: linear-gradient(bottom, rgb(68,68,68) 5%, rg...

https://stackoverflow.com/questions/14116689/animating-a-css-gradient-background-on-the-hover-event

Animated gradient. Useful for hover over buttons

https://jsfiddle.net/59b32hgw/ ">https://jsfiddle.net/59b32hgw/...

Associative array are not convertible to JSON. Solition - initialize it as an object.

Explanation https://stackoverflow.com/questions/4425289/javascript-associative-array-to-json">https://stackoverflow.com/questions...

JavaScript associative array to JSON

How can I convert a JavaScript associative array into JSON? I have tried the following: var AssocArray = new Array(); AssocArray["a"] = "The letter A" console.log("a = " + AssocArray["a"]); //

https://stackoverflow.com/questions/4425289/javascript-associative-array-to-json

I succeeded in & #39;POST& #39;-ing a form to WordPress using vanilla JS only with the help of FormData. Sending JSON gives me 400 Bad Request. Looks like jquery uses the same object in $.post(). https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects">https://developer.mozilla.org/en-US/doc...

Using FormData Objects

The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. It is primarily intended for use in sending form data, but can be used independently from forms in order to...

https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

Scaling an element changing its content "position".

Solution - transform-origin: 0 100%

Check out labels in this form which are scaled once input is focused

https://jsfiddle.net/whimz/gya4b8sx/latest/">https://jsfiddle.net/whimz/gya...

Stuck with goddam "pinterest" grid-layout. Tried different approaches, each of them requiers too many manipulations from scratch. But I& #39;m lazy. Finally picked up this one. Very handy. https://github.com/desandro/colcade">https://github.com/desandro/...

desandro/colcade

Lightweight masonry layout. Contribute to desandro/colcade development by creating an account on GitHub.

https://github.com/desandro/colcade

Suddenly found out that progressive enhancement is much more simplier to implement than graceful degradation. Both are goddam hell. But working with enhancement was really faster.

https://en.wikipedia.org/wiki/Progressive_enhancement">https://en.wikipedia.org/wiki/Prog...

Surprisingly. Never thought that it& #39;s impossible to remove an anonymous event handler. On top of that, never thought there& #39;s a possibility to override default window event handlers. Interesting comments here https://stackoverflow.com/questions/641857/javascript-window-resize-event">https://stackoverflow.com/questions...

JavaScript window resize event

How can I hook into a browser window resize event? There's a jQuery way of listening for resize events but I would prefer not to bring it into my project for just this one requirement.

https://stackoverflow.com/questions/641857/javascript-window-resize-event

Latest Threads Unrolled: