# CSS - Opacity effect child element 在利用 opacity 做背景時常遇到個問題就是子元素也被設置 opacity 這時就可以利用 CSS 的 :before 或 :after
<div class="bg-2"> <h2>Title</h2> <p>Content</p> <img src="http://blog.soonr.com/wp-content/uploads/2013/03/Google-Play-Badge.png" alt="google play" /> </div> .bg-2 { position: relative; &:before { content: ""; z-index: -99; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; @include opacity(0.8); } } CodePen
See the Pen qeojf by Ted (@tedshd) on CodePen
...
# Website switch layout 之前看過不少網站有切換 layout 的功能 於是就試著做做看
Demo
主要利用定義在 body 上的 class 去做不同 layout 的切換
Sample code
var node; function node(selector) { return document.querySelector(selector); } // set style var layoutList = 'layoutList', layoutGrid = 'layoutGrid', layoutFull = 'layoutFull', layoutCard = 'layoutCard'; function changeLayout(style) { // maybe make loading? node('body').setAttribute('class', style); } // bind click change style node('#style_1').addEventListener('click', function () { changeLayout(layoutGrid); }); node('#style_2').addEventListener('click', function () { changeLayout(layoutList); }); node('#style_3').
...
# Detect mobile device Use PHP or JavaScript detect mobile device like iPhone, iPad, iPod or Android…
## Android ### PHP <?php $ua = strtolower($_SERVER['HTTP_USER_AGENT']); if(stripos($ua, 'android') !== false) { echo 'Android!!'; exit; } ?> ### JavaScript var ua = navigator.userAgent.toLowerCase(); if(ua.indexOf("android") > -1) { document.write('Android!!'); } Refer - Android Detection with JavaScript or PHP
## Apple mobile device Refer - How to detect iPhone, iPod and iPad with PHP Refer - How to Identify an Apple iPhone, iPod or iPad Visitor to Your Website
...
# JavaScript - Easy to get DOM It is old way to use getElementById, getElementsByTagName …
New method is use querySelector and querySelectorAll
If use IE, it only for IE8 up.
Make them as a method
var node; function node(selector) { if (selector.indexOf('.') === -1) { if (document.querySelectorAll(selector).length === 1) { return document.querySelector(selector); } return document.querySelectorAll(selector); } return document.querySelectorAll(selector); } And then use it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>querySelector</title> </head> <body> <div id="box" class="area"> test </div> <div class="area"> test2 </div> <div id="selector" class="area"> <p class="con"> content </p> </div> </body> <script> var node; function node(selector) { if (selector.
...
# Google map api - research log ## Introduction 使用 Google Maps JavaScript v3 static map 嵌入地圖到網頁中以圖片方式呈現 使用限制 基本上不要一日載超過 25000 次都沒事 區域化 - 語系
Library
## Init map <!DOCTYPE html> <!--使用 <!DOCTYPE html> 宣告，將應用程式宣告為 HTML5--> <html> <head> <meta charset="utf-8"> <title>Google_map_api_basic</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!--最新的瀏覽器會將使用此 DOCTYPE 宣告的內容以「標準模式」呈現，也就是說，您的應用程式應更具備跨瀏覽器相容性。此外，DOCTYPE 也設計成會逐漸適應，但無法理解它的瀏覽器將會忽略它，而採用「快速模式」顯示內容。請注意，有些 CSS 在快速模式中可以運作，但在標準模式中卻無效。具體來說，所有百分比的大小都必須繼承父區塊項目，但這些上階中如有任何一個無法指定大小，就會假設為 0 x 0 像素大小。基於這個理由，我們加入了下列 <style> 宣告--> <style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0px; padding: 0px; } #map_canvas { height: 100%; } </style> <!
...
# Facebook api get UID & AccessToken Build App in facebook APP_ID is a facebook App id Must set facebook App’s web url and use code in it’s domain <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>fb_oauth</title> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body> <div id="fb-root"></div> <p> <input id="FBLogin" type="button" value="登入臉書" /> </p> <p> <span id="uid"></span> <br> <span id="accessToken"></span> </p> </body> <script src="http://connect.facebook.net/zh_TW/all.js"></script> <script> FB.init({ appId: 'APP_ID', status: true, cookie: true, xfbml: true, oauth: true }); $('#FBLogin').
...
# Sass compile two spaces Use Sass compile to css css lndent is 2 spaces if want 4 spaces Must modify this sass source code
sass-3.2.10/lib/sass/tree/visitors/to_css.rb # before tab_str = ' ' * (@tabs + node.tabs) # after tab_str = ' ' * (@tabs + node.tabs) Refer - Change indentation in Sass
...
# JavaScript - Event event type 事件名稱
event target 事件發生在哪一個目標上
event handler or listener 處理或回應的 function, 即監聽或註冊事件
event object 與事件關聯的物件
event propagation 氣泡(bubble)現象
default actions 觸發事件時的預設行為, 有時必須取消該行為
## GlobalEventHandlers HTML <button id="btn">Click</button> JavaScript var nodeBtn = document.getElementById('btn'); nodeBtn.onclick = function (e) { alert('ok'); }; ## event HTML <button id="btn">Click</button> Use addEventListener(only IE9 up) addEventListener
JavaScript var nodeBtn = document.getElementById('btn'); nodeBtn.addEventListener('click', function () { alert('ok'); }); ## delegate If use dynamic page the dom maybe not init in the page load So use delegate
...
# Android - Note(view) src java
res
drawable layout values view
px2dpi
...
# load data in view for JavaScript 如果要從後端帶資料給 JavaScript, 很常用 AJAX 的方式, 但假如是頁面在 load 進來時就需要使用後端的資料, 一開始就把資料帶在頁面上然後再用 JavaScript 取得頁面上的資料是一個較佳的方式(至少說省下一個 request).
## controller <?php ... public function index() { // TODO $server_data load data for JavaScript $server_data = array( "data_01" => array( "title" => "title 01", "num" => 01, "con" => array( "con_01" => "news", "con_02" => "sport", "con_03" => "tech", ), ), "data_02" => array( "title" => "title 02", "num" => 02, "con" => array( "con_01" => "life", "con_02" => "movie", "con_03" => "cars", ), ), ); // do something $data["static_data"] = json_encode($server_data); $this->load->view("welcome", $data); } .
...