Lance Vo lancevo

## demo.html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>

      div { width:150px;border:10px solid #ccc;
        display:inline-block;

## Opacity-Animation-for-updating-list.markdown

      
              4 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                lancevo
                / Opacity-Animation-for-updating-list.markdown
            
            
              Last active
              August 29, 2015 14:15
            
              
                Opacity Animation for updating list
              
          
    Opacity Animation for updating list

Smooth transition when updating the list, all hidden items don't display as blank in layout. It animates at the parent level (ul/ol) rather than the individual level (li), to overcome several challenges:

Use height:0 transition will hide the item smoothly, but it presents several issues:
a) to show the item, you must provide exact pixel for height, and each item height is different so it's not possible with css alone.
b) another way to get around this is when before showing the item, remove the previous hide class, it will reset the height to original, however it jerks the layout, because the height is restored before the transition.
Use display:none in animation doesn't work, so putting in the last keyframe doesn't do anything.
Use scale, transition, position:absolute to remove from the layout, it has the same issue as 1b. Also with position:absolute, when animating before opacity:0, the contents overlap each other,


## isNearBottom.js
function isNearBottom(element, marginPx){
  marginPx = marginPx || 100;
  var elementOffsetTop = $(element).offset().top,
      nearBottomMargin = $(window).scrollTop() + $(window).height() - elementOffsetTop;
  return Math.abs(nearBottomMargin) <= marginPx;
}

## ios-standalone-mode.js
var standaloneMode = window.navigator.userAgent.indexOf('iPhone') != -1 && window.navigator.standalone == true;

## TimeZone.js
// get weekday in Chicago CST
console.log( (new Date()).toLocaleDateString('en-US',{ timeZone: 'America/Chicago', weekday: 'long'}) );
// get time in Chicago CST
consoe.log( (new Date()).toLocaleTimeString('en-US',{ timeZone: 'America/Chicago', hour12: true}) )

## jplaceholder.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://raw.github.com/lvo811/jplaceholder/master/jplaceholder.js"></script>

<h2>Example 1</h2>
<p>
Placeholder text is hidden when input field is focusing
</p>
<form id="form1">
    <label>
        <input name="user" jplaceholder="User ID" />

## alerts.html
<h1>Alert</h1>
<p>Bootstrap JS</p>
<div class="alert fade in">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>

<p></p><a ng-click="alert=true">Open Alert (AngularJS)</a></p>
<div class="alert fade" ng-class="{in:alert}">
  <button type="button" class="close" ng-click="alert=false">×</button>

## mac rvm
# install ruby and rails
\curl -L https://get.rvm.io | bash -s stable --autolibs=3 --rails

## avim.js
/*
 *  AVIM JavaScript Vietnamese Input Method Source File dated 28-07-2008
 *
 *  Copyright (C) 2004-2008 Hieu Tran Dang <lt2hieu2004 (at) users (dot) sf (dot) net
 *	Website:	http://noname00.com/hieu
 *
 *	You are allowed to use this software in any way you want providing:
 *		1. You must retain this copyright notice at all time
 *		2. You must not claim that you or any other third party is the author
 *		   of this software in any way.

## avim.css
#AVIMControl {
  background-image: url('transparent.png');
	padding: 2px;
	border: 1px solid #5b958e;
	position: absolute;
	top: 5px;
	left: 5px;
	width: 320px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style>

	div { width:150px;border:10px solid #ccc;
	display:inline-block;
	function isNearBottom(element, marginPx){
	marginPx = marginPx \|\| 100;
	var elementOffsetTop = $(element).offset().top,
	nearBottomMargin = $(window).scrollTop() + $(window).height() - elementOffsetTop;
	return Math.abs(nearBottomMargin) <= marginPx;
	}
	// get weekday in Chicago CST
	console.log( (new Date()).toLocaleDateString('en-US',{ timeZone: 'America/Chicago', weekday: 'long'}) );
	// get time in Chicago CST
	consoe.log( (new Date()).toLocaleTimeString('en-US',{ timeZone: 'America/Chicago', hour12: true}) )
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
	<script src="https://raw.github.com/lvo811/jplaceholder/master/jplaceholder.js"></script>

	<h2>Example 1</h2>
	<p>
	Placeholder text is hidden when input field is focusing
	</p>
	<form id="form1">
	<label>
	<input name="user" jplaceholder="User ID" />
	<h1>Alert</h1>
	<p>Bootstrap JS</p>
	<div class="alert fade in">
	<button type="button" class="close" data-dismiss="alert">×</button>
	<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
	</div>

	<p></p><a ng-click="alert=true">Open Alert (AngularJS)</a></p>
	<div class="alert fade" ng-class="{in:alert}">
	<button type="button" class="close" ng-click="alert=false">×</button>
	# install ruby and rails
	\curl -L https://get.rvm.io \| bash -s stable --autolibs=3 --rails
	/*
	* AVIM JavaScript Vietnamese Input Method Source File dated 28-07-2008
	*
	* Copyright (C) 2004-2008 Hieu Tran Dang <lt2hieu2004 (at) users (dot) sf (dot) net
	* Website: http://noname00.com/hieu
	*
	* You are allowed to use this software in any way you want providing:
	* 1. You must retain this copyright notice at all time
	* 2. You must not claim that you or any other third party is the author
	* of this software in any way.
	#AVIMControl {
	background-image: url('transparent.png');
	padding: 2px;
	border: 1px solid #5b958e;
	position: absolute;
	top: 5px;
	left: 5px;
	width: 320px;
	}