[Ubuntu] 安裝 Apache HTTP Server 2.4 + PHP 7.1 + PHP-FPM

操作環境:
OS: Ubuntu Server 16.04.3 LTS amd64
Apache Version: 2.4.27
PHP Version: 7.1.8

 

Step 1. 更新 APT Source,取得最新版套件資訊

# 安裝software-properties-common (已安裝者可跳過此步驟)
sudo apt-get install -y software-properties-common

# 加入 Apache PPA
sudo add-apt-repository -y ppa:ondrej/apache2

# 加入 PHP PPA
sudo add-apt-repository -y ppa:ondrej/php

# 更新套件清單
sudo apt-get update

Read more “[Ubuntu] 安裝 Apache HTTP Server 2.4 + PHP 7.1 + PHP-FPM”

[Bootstrap] Modal 自動設定最大高度

Bootstrap有個modal懸浮窗
如果裡面內容過多,bootstrap並不會把內容限縮在modal-body裡
為了美觀,所以需要CSS的「max-height」屬性套用至modal-body上
如此一來內容過長造成溢出時,modal-body會顯示捲動欄
同時modal-header與modal-footer的內容亦會固定在視窗上
網站上可能會用到多個modal,一個一個設定的話要自己去抓數字,很麻煩
所幸bootstrap modal有shown.bs.modal這個event可以使用
所以寫了一段全部modal都適用的code

$('.modal').on('shown.bs.modal', function(){
    var margin_vertical = parseInt( $(this).find('.modal-dialog').css('margin-top') ) + parseInt( $(this).find('.modal-dialog').css('margin-bottom') ) || 0;
    var height_header   = parseInt( $(this).find('.modal-header').css('height') ) || 0;
    var height_footer   = parseInt( $(this).find('.modal-footer').css('height') ) || 0;
    var height_body     = ( window.innerHeight - height_header - height_footer - margin_vertical - 10 ) + 'px';
    $(this).find('.modal-body').css('max-height', height_body).css('overflow', 'auto');
});

 

關於多扣10px的部分,因為有其他誤差值,造成body的捲動欄會出現
個人猜想可能是因為其他部分box-model的關係導致(border-width等blahblah)
不過我也抓不到就是了QQ,所以就偷懶多扣10px混過去XD
至於為什麼會用「shown.bs.modal」這個event,而不是「show.bs.modal」
是因為modal顯示前的的css height是0
「show.bs.modal」觸發的時機是顯示前,而「shown.bs.modal」則是顯示後
因此要等modal顯示時,偵測到的css height才是正確的
而這裡又有一個小小的缺點
就是當你使用fade-in & fade-out效果時
在動畫結束前,body的捲動欄會出現
直到動畫結束後觸發了shown.bs.modal event
才會顯示成正常的樣子
小弟才疏學淺,這個問題還不知道要怎麼解決
或許加快css animation speed做為障眼法混過去勉強可行
不過因為這種情況只會在該modal第一次顯示時才會出現
之後只要browser inner height沒有變,都不會出現
所以就將就一下囉~
順帶一提,如果你想要能限制最大高度,又能固定佔滿版,只要將第六行的「max-height」改成「height」即可。如下所示

$(this).find('.modal-body').css('height', height_body).css('overflow', 'auto');

 

Update:
2017-05-10: 利用 || 0 預防取回高度值為 nan 的情況下出錯。

[jQuery] 重設HTML select box

舊式做法是將selectedIndex設為0
自jQuery 1.6開始支援使用.prop()這支API來操作selectedIndex
 

HTML

<select id="name">
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

 

jQuery

$('#name').prop('selectedIndex', 0);

 

[jQuery] textarea自動調整高度

 "><!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>textarea auto height</title>
    <style type="text/css">
        textarea {
            resize: none;
        }
    </style>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("textarea.auto-height").css("overflow", "hidden").bind("keydown keyup", function() {
                $(this).height('0px').height($(this).prop("scrollHeight") + 'px');
            }).keydown();
        });
    </script>
</head>
<body>
    <textarea class="auto-height"></textarea>
</body>
</html>

[CSS] 以CSS Media Requires實作瀏覽器大小偵測

網頁排版時,考慮不同終端設備瀏覽大小是很重要的一環
解析度過小造成跑版,過大時把一些區塊size寫死又會造成頁面太空曠
RWD(Responsive web design) 的第一步,便從這開始

CSS的媒體查詢(Media Requires)語法

@media (query) {
/* CSS Rules used when query matches */
}

 

可以查詢的項目很多,不過RWD最常用的是min-width、max-width、min-height 和 max-height。
min-width:任何超過查詢中指定寬度的瀏覽器都會套用規則。
max-width:任何未超過查詢中指定寬度的瀏覽器都會套用規則。
min-height:任何超過查詢中指定高度的瀏覽器都會套用規則。
max-height:任何未超過查詢中指定高度的瀏覽器都會套用規則。
有涉獵過的人應該也知道還有device-width這個東西
但是device-width是針測裝置的螢幕的大小,而非檢視區的大小
通常只用在行動裝置上,建議還是以上面列舉的四項屬性為主。
下面列舉三種不同大小,更換不同背景顏色

@media (min-height: 1024px) and (min-height: 768px) { body { background-color:red; } } /* 1024 x 768 */
@media (min-height: 1440px) and (min-height: 900px) { body { background-color:blue; } } /* 1440 x 900 */
@media (min-height: 1920px) and (min-height: 1080px) { body { background-color:green; } } /* 1920 x 1080 */

 

也可以在link tag的media attribute寫入規則,來引入不同的樣式表

<link media="(max-width: 1024px)" href="max-1024px.css" rel="stylesheet" />
<link media="(max-width: 1440px)" href="max-1440px.css" rel="stylesheet" />
<link media="(max-width: 1920px)" href="max-1920px.css" rel="stylesheet" />

 

這裡有一些可以觀看一些RWD的例子:
http://mediaqueri.es/ 
Reference:
http://fundesigner.net/responsive-web-design-explain/
http://fundesigner.net/css3-media-queries/
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=zh-tw#section