Using jQuery-cookie we can implement a collapsable side-nav that remember the last status of the toggle (collapse/expand) even when we refresh the page!

See the demo below and check the code using my Codepen tabs.

See the Pen AEIpe by Farbod (@carmijoon) on CodePen.

Tip: To remember the trigger class for all URLs of the website and not just one page, You need to create expiring cookie, valid across entire site:
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

No matter how we style to get an element like a DIV on top of the HTML5 video in full screen mode, it does not appear until we use a trick!

The first time I needed to put a description bar on top of a HTML5 video, it did not work on full screen mode. I searched a lot and realised this is a common issue without any proper answer. So I started to play with z-index. I order to make sure it will be on top of everything, I put z-index: 999999999999;. Suddenly it has worked on FireFox! I found Firefox changed that large number to z-index: 2147483647;!

Yes! That was the trick! For any reason we need to use the maximum number of z-index and that will work in all browsers!
z-index: 2147483647;

Here is the Demo:

This is an element overlay on top of the fullscreen HTML5 video!

You can also find the JSFiddle Demo here!

I know how painful it is when you want to add/remove a class to SVG element using the normal .addClass method and see it doesn’t work!

This method is not working for SVG:

// This method is not working for SVG
$('#element').addClass("newClass");

Unfortunately, Adding, removing and toggling classes just aren’t there! But we don’t need to depends on another library! Just try one of the solutions below;

Solution using jQuery:

// Instead of .addClass("newClass")
$("#element").attr("class", "oldClass newClass");
// Instead of .removeClass("newClass")
$("#element").attr("class", "oldClass");

Another way if you don’t want to use jQuery:

var element = document.getElementById("element");
// Instead of .addClass("newclass")
element.setAttribute("class", "oldClass newClass");
// Instead of .removeClass("newClass")
element.setAttribute("class", "oldClass");

You might experience this issue where your fixed element randomly disappears in Chrome. Obviously as a front-end developer your first approach would be try to inspect that element and see what is going on. But surprise! The element is appearing again as soon as you touch the browser and this make it too tricky to find the fix!

This is a reported issue on Chrome code, However we all know it can take even several years to someone fix it.

Likely there is a trick to fix it! just add the following style to your fixed element.

.your-fixed-element {
    -webkit-transform: translateZ(0);
}