Posts

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: 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!!!

Get back your browser cached content

Image
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

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

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


show allmetaltransitionalkali and alkaline-earthnot transitionmetal but not transition

MercuryHg80200.59TelluriumTe52127.6BismuthBi83208.980LeadPb82207.2GoldAu79196.967PotassiumK1939.0983SodiumNa1122.99CadmiumCd48112.411CalciumCa2040.078RheniumRe75186.207ThalliumTl81204.383AntimonySb51121.76CobaltCo2758.933YtterbiumYb70173.054ArgonAr1839.948NitrogenN714.007UraniumU92238.029PlutoniumPu94(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. 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

It's show time

Image

Porcelain flowers

Image

The parking slots

Image