Showing posts from September, 2016

Lightbox effect made easy with litty

So you want to make a webpage that when you click a button, a youtube video frame will overlay the current windows instead of opening in a new screen. Lightbox effect is what you want to achieve. But it sounds like something fancy and would take a lot of javascript-fu to implement it. Fortunately, we have Lity.

Official website:

Here is how to use it:

1. Download the distribute package of litty from github. You only need 2 files: lity.js and lity.css from  the dist directory.

2. Include the library in your web page (and jQuery):

<link href="lity.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="lity.js"></script>

3. Add data-lity to your link tag:

<a href="" data-lity>Youtube</a>

4. Bind the click event:

$(document).on('click', '[data-my-lightbox]', lity);


Get back your browser cached content

Sometime you mess up your stylesheets, your javascripts and you realize that you forgot to commit the changes, so your life screws up. Actually, there is still one place you can look for help. It's your browser's cache (assuming that you're using Chrome).

1. In Chrome, go to chrome://cache, you will see all the links to cached files here.

2. Click on the one that you want, you will see a whole bunch of text and numbers

3. Open Chrome's Developer Tool, paste the following code into the javascript console:

4. Click on  the link "Left-click to download the cached file" appears on top of the page to download the cached file.


Show alternate image if source image is not found

To make an image showing alternate source when the main one is not found, you simply bind the onerror event on the image like the following:

<img src="imagenotfound.gif" alt="Image not found" onerror="this.onerror=null;this.src='imagefound.gif';" />


Search and Filter items in grid layout with isotop javascript library

I want to create a portfolio page that listing all of my projects with search and filter functionalities. I search through a lot of javascript libraries and isotope is the only one that I can make it to work (I tried Filterizr, it worked, but if the number of items is about 100, everything will be broken):

Isotope official page:

This is a working example. It's easy, just read through the code and you will understand:

Isotope - filtering with search field and button filters

show allmetaltransitionalkali and alkaline-earthnot transitionmetal but not transition

MercuryHg 80 200.59 TelluriumTe 52 127.6 BismuthBi 83 208.980 LeadPb 82 207.2 GoldAu 79 196.967 PotassiumK 19 39.0983 SodiumNa 11 22.99 CadmiumCd 48 112.411 CalciumCa 20 40.078 RheniumRe 75 186.207 ThalliumTl 81 204.383 AntimonySb 51 121.76 CobaltCo 27 58.933 YtterbiumYb 70 173.054 ArgonAr 18 39.948 NitrogenN 7 14.007 UraniumU 92 238.029 PlutoniumPu 94 (244)

The code's below:

How to delete directory synced users from the Office 365 dashboard

To be able to delete directory synced users on Office 365 dashboard, you have to disable the sync first on your on-premise server:

1. Open Azure Active Directory Module for Windows PowerShell

2. Connect to the Office 365 server by running this cmdlet in PowerShell and enter your Office 365 admin user (e.g.


3. Run this following command to disable directory sync:

Set-MsolDirSyncEnabled –EnableDirSync $false

It may take to 72 hours for the deactivation fully done.

4. Check if the sync was fully disabled by this command:


5. Go Office 365 dashboard and delete the users you want


It's show time


Porcelain flowers


The parking slots