How to make CSS Grid items take up remaining space?

Adding grid-template-rows: 1fr min-content; to your .grid will get you exactly what you’re after :). .grid { display: grid; grid-template-columns: 1fr 3fr; grid-template-rows: 1fr min-content; grid-template-areas: “one two” “one three” } .one { background: red; grid-area: one; padding: 50px 0; } .two { background: green; grid-area: two; } .three { background: blue; grid-area: three; } … Read more

HTML/CSS set div to height of sibling

I can rack my brain all I want, but I think this can really be solved only using table behaviour, i.e. using <table>s (if you need to be IE6 and IE7 compatible) or display: table / table-row / table-cell (which is effectively the same thing but won’t embarrass you in front of your peers because … Read more

HTML 5 video recording and storing a stream

RecordRTC: WebRTC audio/video recording https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC Audio recording both for Chrome and Firefox Video/Gif recording for Chrome; (Firefox has a little bit issues, will be recovered soon) Demo : https://www.webrtc-experiment.com/RecordRTC/ Creating .webm video from getUserMedia() https://www.tumblr.com/ericbidelman/31486670538/creating-webm-video-from-getusermedia Demo : http://html5-demos.appspot.com/static/getusermedia/record-user-webm.html Capturing Audio & Video in HTML5 http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Can I replace the expand icon (▶) of the element?

Since <summary> has display: list-style, customising the disclosure marker can be done by setting the list-style-type property: details > summary { list-style-type: ‘▶️’; } details[open] > summary { list-style-type: ‘🔽’; } details { border: 1px solid gray; border-radius: 0.2rem; padding: 0.5rem; } details[open] > summary { margin-bottom: 0.5rem; } <details> <summary>An example</summary> With some example … Read more

How to add hamburger menu in bootstrap

All you have to do is read the code on getbootstrap.com: Codepen <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js”></script> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css”> <nav class=”navbar navbar-inverse navbar-static-top” role=”navigation”> <div class=”container”> <div class=”navbar-header”> <button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″> <span class=”sr-only”>Toggle navigation</span> <span class=”icon-bar”></span> <span class=”icon-bar”></span> <span class=”icon-bar”></span> </button> </div> <!– Collect the nav links, forms, and other content for … Read more

how to change url without changing browser history

You’re looking for replaceState(), it replaces the current position in the history instead of pushing a new one, like pushState() does history.replaceState({}, ‘Title’, link.href); from MDN history.replaceState() operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one. replaceState() is particularly useful when you want to update the … Read more