# JavaScript - Converting a JavaScript string to a html object var str = '<div id="myDiv"></div>'; var htmlObject = document.createElement('div'); htmlObject.innerHTML = str; /* htnkObject is obj; <div> <div id="myDiv"></div> </div> */ Refer - converting a javascript string to a html object
...
Category: JavaScript
# JavaScript - handle textarea value Handle textarea string.
// jQuery var textarea = $('textarea').val().replace(/\n/g, '<br>'); // JavaScript var textarea = document.querySelector('textarea').value.replace(/\n/g, '<br>');
...
# gulp.js - Use Log ## Intro gulp.js
Getting Started
Grunt vs Gulp - Beyond the Numbers
## package.json version setting dependencies
## How to pipe to another task in Gulp? gulp.task('first', function() { // first task }); gulp.task('second', ['first'], function() { // this occurs after 'first' finishes }); Refer - How to pipe to another task in Gulp?
## Use Package ## Compass First, must install compass
gulp-compass
...
# Youku Api & player Youku is popular video web in China.
youku(优酷)
Try use youku(优酷) api & javascript player
Create a account in 优酷开放平台
Create a application(创建应用)
You can get a client_id as a api id
Create a player 工具箱 - 优酷开放平台
Fin
...
# HTML5 - Video Introduction 這是一篇關於如何用 web 建置一個 video player 的文章, 這裡使用 HTML5 video 與一些 open source library 來建立 player
## Some Function ### Main video pause video play video autoPlay or no-autoPlay show current video time show total video time time jump full screen ### Other keyboard control mute control volume up & down buffer handle set quality Refer - Seeking API Refer - The State of HTML5 Video
...
# JavaScript - handle load img fail Sometime load image from server or other place fail(404 not found), we must prepare default image.
A simple way
<img src="avatar.svg" onerror="this.src='/static/ico_default_avatar.png';this.onerror=null;">
...
# Windows 8.1 app - Introduction Develop Win 8.1 app with JavaScript.
死心吧, 請準備一台 Windows 8.1 的電腦(一直以來我都以為生為前端攻城獅只要用 Mac 就可以打天下了)
下載 Visual Studio 2013, 要下載 Visual Studio Express 的版本
開始努力地讀文件 Doc
## Notice & Tip 先了解一些限制與規範以免踩雷
Microsoft 提供 WinJS 來協助開發 Windows 8.1 app
無法使用網路的 source
無法使用 remote 的 CSS or JavaScript, 必須全部 download 下來 無法直接使用 iframe
package.appxmainifest -> 內容 URI, 把 iframe url 設成例外, 但是該 url 必須用 https 使用 x-ms-webview tag 來代替 iframe, x-ms-webview element | x-ms-webview object ### Handle AJAX 在開發 Windows 8.
...
# AngularJS - $http Angular use $http handle AJAX behavior. It support method to handle rest API and basic usage. But its default Content-type is application/json
## Basic usage $http({ method: 'GET', // support GET, POST, PUT, DELETE url: '../php/response.php', params: data, // GET method query string data: data, headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, timeout: 30000, // timeout abort AJAX cache: false }). success(function(data, status, headers, config) { // this callback will be called asynchronously // when the response is available console.
...
# JavaScript - 多行文字省略 Sample code
CSS .ellipsis-mult { width: 300px; height: 5em; overflow: hidden; } p { margin: 0; } HTML <div class="ellipsis-mult"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit.
...
# AngularJS - do something after ng-repeat 在學習用 AngularJS 的過程中遇到個問題就是 ng-repeat 好厲害喔, code 變得好少喔 但我想再 ng-repeat 完移掉 loading view 要怎麼移啊? 用 setTimeout 跟白癡一樣, 又不知道時間要設多久 只好向 fb 求救 沒想到有人立馬給出解決方案 原文來源 blog
由於對 AngularJS 不是了解的很透徹, 所以在此不詳加說明(原文內有說明) 這裡只上 code
## HTML <div id='list' ng-app="testApp"> <div ng-controller="blogger" > <ul> <li ng-repeat="list in blog" on-last-repeat> {{list.title.$t}} </li> </ul> </div> </div> ## JavaScript var module = angular.module('testApp', []) .directive('onLastRepeat', function() { return function(scope, element, attrs) { if (scope.
...