2016年6月27日 星期一

[CSS]calc()介紹

當要將layout切成3等分時,以往的做法通常是針對每個div去下width: 33.3%;來實現

現在可直接下width: calc(100%/3);即可自動切成3等分

另外此方法相當彈性,可加減乘除。

例:
div{
width: calc(100%/3-5px);
}
以上div寬度變成33.3%在減5px

最後補充,不僅可以使用在width上面,padding、margin亦可使用。
例:
div{
width: calc(100%/3-5px);
margin-left: calc(5px*3/2);
}

[php]西曆轉成民國

<?php
$date = date('Y/m/d');
$date_array = explode("/", $date);
$date_array[0] = $date_array[0] - 1911;
$date_array = $date_array[0] . '/' . $date_array[1] . '/' . $date_array[2];
echo $date_array;
?>

[wordpress]連結google calendar api的小外掛

1.先註冊成為google api 使用者(網路上教學很多,不多敘述)
2.先前往https://developers.google.com/google-apps/calendar/overview?hl=zh-TW參考php的Quickstart
3.承上,會使用Composer下載相關google calendar api的程式碼(注1.)
4.進入要設定分享的日曆進入日曆設定>>共用此日曆新增第1步所註冊的google api使用者
5.
建立一組API金鑰
6.
<?php
ini_set("display_errors", "On");
error_reporting(E_ALL & ~E_NOTICE);
require_once __DIR__ . '/vendor/autoload.php';//步驟3所下載的google calendar api
define('APPLICATION_NAME', 'Google Calendar API PHP Function');
define('SCOPES', implode(' ', array(Google_Service_Calendar::CALENDAR_READONLY)));

function getClient() {
$client = new Google_Client();
$client->setApplicationName(APPLICATION_NAME);
$client->setScopes(SCOPES);
$client->setDeveloperKey('XXXXXXXXX');//步驟5所建立的金鑰
$client->setAccessType('online');

return $client;
}

$client = getClient();
$service = new Google_Service_Calendar($client);
$calendarId = 'XXXXXX@group.calendar.google.com';//步驟4所要共用的日曆ID
$optParams = array(
'orderBy' => 'startTime',
'singleEvents' => TRUE,
);
$calEvents = $service->events->listEvents($calendarId, $optParams)->getItems();
?>
以上程式碼是簡易的抓取日曆上的資料
注1:Composer用法請參考[xampp]安裝laravel這篇文章








2016年6月3日 星期五

[javascript]簡單製作浮動視窗置底功能

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery(window).scroll(function() {
  if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()){
jQuery('#warnings').css("position", "static");
jQuery(window).scrollTop(jQuery(document).height());
}else{
jQuery('#warnings').css("position", "fixed");
}
  });
});
</script>


jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()
// 這段是判斷scrollbar是否已經到最底部,當滑到最底時改為固定在最底下否則以浮動的方式固定在網頁的最下方


CSS部分
#warnings {
  1. positionfixed;
  2. bottom0;
  3. z-index999;

[wordpress]Fix the HTTP Error When Upload Images to WordPress

在theme's function.php新增以下code

add_filter( 'wp_image_editors', 'change_graphic_lib' );

function change_graphic_lib($array) {
  return array( 'WP_Image_Editor_GD', 'WP_Image_Editor_Imagick' );
}

[Laravel]環境架設,使用docker + laradock

1.選擇使用docker + laradock在windows10的環境使用 先至 docker官方網站 下載 docker for windows   2.依照執行程式下載安裝 這邊我的電腦有遇到一些問題順便記錄下來, 在下載啟動docker時發生錯誤   Hardw...