Wednesday, September 14, 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: http://sorgalla.com/lity/

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="https://www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>Youtube</a>

4. Bind the click event:

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

Awesome!!!

Saturday, September 10, 2016

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.


Reference: http://www.sensefulsolutions.com/2012/01/viewing-chrome-cache-easy-way.html

Thursday, September 8, 2016

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';" />


Reference: http://stackoverflow.com/questions/3984287/how-to-show-alternate-image-if-source-image-is-not-found-onerror-working-in-ie

Wednesday, September 7, 2016

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: http://isotope.metafizzy.co/

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






Mercury

Hg
80
200.59

Tellurium

Te
52
127.6

Bismuth

Bi
83
208.980

Lead

Pb
82
207.2

Gold

Au
79
196.967

Potassium

K
19
39.0983

Sodium

Na
11
22.99

Cadmium

Cd
48
112.411

Calcium

Ca
20
40.078

Rhenium

Re
75
186.207

Thallium

Tl
81
204.383

Antimony

Sb
51
121.76

Cobalt

Co
27
58.933

Ytterbium

Yb
70
173.054

Argon

Ar
18
39.948

Nitrogen

N
7
14.007

Uranium

U
92
238.029

Plutonium

Pu
94
(244)





The code's below:





Monday, September 5, 2016

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. yyy@xxxx.onmicrosoft.com):

Connect-MsolService

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:

(Get-MSOLCompanyInformation).DirectorySynchronizationEnabled

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


Reference: https://support.microsoft.com/en-gb/kb/2619062