發表文章

css3讓物件垂直置中對齊的方法-教學撰寫:徐嘉裕Neil hsu

圖片
如果要讓物件垂直置中,像是下面圖這樣的呈現!#content在父容器#box的垂直中間


基本上可以用css的 vertical-align: middle;,但這方法只能在table的td中使用,如果是div就無效了,後來上網查了一下資料發現css3有更好的方法能能決這問題,就是吧#box定義為table,吧#content定義為td,這樣就能用 vertical-align: middle;來垂直置中對齊物件了,真是好方便阿,方法如下:


結構

<div id="box">
    <div id="content">
        垂直置中物件內容
    </div>
</div>

CSS

#box {
    display: table;
}

#content {
    display: table-cell;
  vertical-align: middle;
}

這樣就OK了阿,有需要的朋友參考看看喔!!

參考資料來源:http://muki.tw/tech/css-div-center/

教學撰寫:徐嘉裕 Neil hsu

用JS程式做一個彈出swal視窗中的youtube影片停止播放功能-教學撰寫:徐嘉裕Neil hsu

圖片
最近在幫客戶開發模組剛好有用到一個功能,就是使用swal開新視窗播放youtube影片,像是下面這樣



看起來不難做,吧youtube影片崁入到swal視窗中就完成了!!

經測試影片的確也能播放,但發現一個問題,就是點選OK關閉swal視窗時,雖然區塊消失了,但youtube影片還是再繼續播放,因為還有背影聲音,也就是說關閉swal視窗並無法關閉正在播放中的youtube影片,必須要有youtube控制程式才能關閉影片,這還真是傷腦筋,上網查了一下相關說明,找到一個不錯的youtube影片控制方法修改一下分享給大家

需要準備的工作,
1、youtube網址後方要加上?enablejsapi=1
2、iframe要加上class='youtube-video'

所以整個CODE就是

//影片播放

$(document).ready(function() {

$("body").on("click", "#youtubebtn", function (){

$youtubebtn = $("#youtubebtn").attr("mane");

var $youtubebtnArr = $youtubebtn.split(','); //切割陣列

$title=$youtubebtnArr[0]; //影片標題

$lotteryurl=$youtubebtnArr[1]; //影片ID值,就是watch?v=後面的那一段參數

youtubebfunction($title,$lotteryurl);

})

function youtubebfunction($title,$lotteryurl){

swal({

title: "<h3>"+$title+"</h3>",

text: "<iframe class='youtube-video' width=100% height=450 src=https://www.youtube.com/embed/"+$lotteryurl+"?enablejsapi=…

製作一個PHP7的AES資料加密function-教學撰寫:徐嘉裕Neil hsu

PHP資料加密的方法有很多,這裡推薦使用AES 對稱式加解密法,這總方法除了數值本身的加密外,還加上了三方key的定義,產生的雜湊值如資料傳輸或存入資料表,三方key可以選一個自己知道的密碼藏在網站裡面用php常數帶出,這樣即使資料表被人破解了拿到裡面的數值沒有三方key的數值也是解不開的,AES資料加密function如下:


//AES 資料加密
function encryptdecode($var="",$types="",$key=""){
//製作SHA384-KEY
$hash_string = $key;
$hash = hash('SHA384', $hash_string, true);
$app_cc_aes_key = substr($hash, 0, 32);
$app_cc_aes_iv = substr($hash, 32, 16);
//加密
if($types==encrypt){
$data = $var;
$padding = 16 - (strlen($data) % 16);
$data .= str_repeat(chr($padding), $padding);
$encrypt = mcrypt_encrypt(MCRYPT_RIJNDAEL_128, $app_cc_aes_key, $data, MCRYPT_MODE_CBC, $app_cc_aes_iv);
$encrypt_text = base64_encode($encrypt);
$returnvar=$encrypt_text;
}
//解密
if($types==decryption){
$encrypt =base64_decode($var);
$data = mcrypt_decrypt(MCRYPT_RIJNDAEL_128, $app_cc_aes_key, $encrypt, MCRYPT_MODE_CBC, $app_cc_aes_iv);
$padding = ord($data[strlen($data) - 1]);
$decrypt_text = substr($data, 0, -$padding);
$returnvar=$decrypt_text;
}

ajax+js+php點選瀏覽器返回上一頁自動更新頁面程式-教學撰寫:徐嘉裕Neil hsu

網站很多功能都怕遇到user點選瀏覽器的返回上一頁功能,例如前一頁有某功能是需要購過js計算後顯示在容器中的結果數值,像是2*500=1000之類的算式,如果user點選送出後又返回上一頁,input中的數值還會保留,但容器的數值卻歸零(需要觸發計算),如果user又從送出一次表單那寫入的數值一定不正確,最好的解決方法就是當usre返回上一頁後瀏覽器自動更新頁面(同F5),經過許多嘗試後以下方法確實可以解決問題。


假設當前網址為 http://localhost/xoops/modules/test/index.php?op=storedvalue


如果只針對IE事情就簡單了,完全不需要動用到PHP,只需要在樣板貼上

<script type="text/javascript">

if (!!(window.history && history.pushState)){

var $time = (+new Date());

history.pushState({page: 1}, 'title 1', "?op=storedvalue&back="+$time+"");

history.state

}

</script>


這樣進入到http://localhost/xoops/modules/test/index.php?op=storedvalue

JS會以時間戳產生back變數值,例如

http://localhost/xoops/modules/test/index.php?op=storedvalue&back=1524612144000

當USER點選返回上一頁時間戳數值會改變,實際上也等於不同的頁面,頁面會更新,但很不幸的,這方法對於Google Chrome瀏覽器一點用都沒有,完全不會刷新頁面...................所以為了能夠讓Google Chrome瀏覽器返回上一頁頁也能自動更新頁面,只好動用到PHP的$_SESSION功能。


方法如下:

在PHP檔案輸出time()時間戳格式

$xoopsTpl->assign( "back" , $_SESSION['back&#…

好用的windows備份檔案dos指令XCOPY-教學撰寫:徐嘉裕Neil hsu

圖片
要快速的備份某個硬碟全部資料到備份硬碟中,雖然是可以用windows內建的備份與還原,但如果重灌windows可會有key不同而無法還原的問題,還要改一堆設定煩死了,直接用dos指令XCOPY來做檔案的複製就很快了,資料也不會丟失,好朋友可以參考看看!!

首先開啟windows所有程式->附屬應用程式->開啟命令提示字元!

然後輸入以下指令
XCOPY C:\xxx F:\xxx/s
藍字的C:\xxx 為複製檔案來源位置例如要複製整個C槽就輸入C:\
綠色的F:\xxx為複製目的位置,例如要放到F槽的備份資料夾,就輸入 F:\備份
紅字的S為複製類型參數,可以自行修改為以下的參數設定:
=================================================================
/A    只複製設定成保存屬性的檔案,不要改變屬性的設定。
/M    只複製設定成保存屬性的檔案,並清除保存屬性。
/D:m-d-y  複製指定日期當天或之後變更的檔案。如果沒給日期,只複製那些來源檔案日期比目的檔案日期為新的檔案。
/EXCLUDE:file1[+file2][+file3]...
        指定檔案清單字串。每個字串應在不同行。如果有字串對應到要進行複製的檔案絕
        對路徑的任何部分,這個檔案會被排除複製。例如,指定字串
        \obj\ 或 .obj 的話,會排除所有在 obj 目錄下副檔名是.obj 的檔案複製。
/P    在建立每個目的檔案時顯示提示。
/S    複製每個目錄及其包含的子目錄,不複製空目錄。
/E    複製每個目錄及其包含的子目錄,也複製空目錄。/S 與 /E相同,能夠用來修改 /T。
/V    驗證每個新檔案。
/W    在複製之前提示您按鍵繼續。
/C    如果錯誤發生時也繼續複製。
/I    如果目的不存在且複製一個以上的檔案的話,就假設指定的目的一定是目錄。
/Q    在複製時不要顯示檔名。
/F    在複製時顯示來源及目的檔案的全部檔名。
/L    顯示要複製的檔案。
/G    允許加密檔案複製到不支援加密的目的地。
/H    複製隱藏檔和系統檔。
/R    覆蓋唯讀檔案。
/T    建立目錄結構,但不複製其中的檔案。不包括空目錄…

好用的JS計數器countUp.js套件!!-教學撰寫:徐嘉裕Neil hsu

圖片
countUp.js套件是一個非常好用且設定簡單的計數器套件,好朋友可以去他們的Demo網站看一下效果:

http://www.htmleaf.com/Demo/201501271287.html




要使用很簡單,先去下載countUp.js套件回來

https://github.com/inorganik/countUp.js

解壓縮後,吧js裡面的countUp.js放到模組或佈景的JS資料夾裡面,引入即可!!

$xoTheme->addScript(XOOPS_URL.'/modules/模組名稱/js/countUp.js');


然後再要顯示計數器的樣板上貼上以下HTML結構

 <div class="jumbo" id="myTargetElement">0</div>

再於佈景或模組的JS檔中加上以下的設定值即可運作,這些值參之後都能改由AJAX引入數值,成為實際的統計數據。


$(document).ready(function(){
myTargetElement();

function myTargetElement(){

var options = {
useEasing : true,
useGrouping : true, //進位
separator  : ',',
decimal : '.',
prefix : '', //前面留幾個0
suffix : ''  //後面留幾個0
}

//開始值,結束值,小數點,執行速度
var demo = new countUp("myTargetElement", 0, 8888888888, 0, 2.5, options);
demo.start();
}

   });

其中綠字為計數器的開始預設值,紅字為結束值,也就是顯示在計數器上的最終數值,之後這兩個參數可替換為AJAX回傳的資料庫數值即可運作。


最後加上CSS設定

 .jumbo {
margin:0;
color:#EC4365;
font-size:200%;
white-space:nowrap;
}


這樣就完成countUp計數器的初始化設定工作了,有需要的朋友可以參考看看!!


$.ajax偵測秒數自動更新function取得最新資料的方法(只更新內容區塊不刷新頁面)-教學撰寫:徐嘉裕Neil hsu

用過FB的朋友一定有發現一個有趣的功能,就是在人氣旺的粉絲團留言,有時候還沒輸入完內容前面就冒出其他的人留言回覆了,但都沒刷新頁面,其實這樣功能用setInterval()+$.ajax就能實現了,也不會很消耗user端瀏覽器效能,方法如下:


要顯示資料的內容區

<div id='test'></div>


執行$.ajax的JS檔案code


$(document).ready(function(){

//第一次讀取
 $returntrue=cartnumber();

//自動更新
if($returntrue){
setInterval(function(){ cartnumber(); }, 10000);  //預設10000毫秒自動重複執行cartnumber()函數
}
function cartnumber(){

$.ajax({

url: xoopsjsurl + '/modules/neillibrary/ajax.php',

type: 'POST',

data: { id: '1'},

success: function(response) {

$('#test').html(response);

},

error: function() {

console.log('ajax error!');

}

})
   return true;
}

});


這樣#test的內容資料就會按setInterval設定的10000豪自動更新一次,若此期間有新的資料寫入ajax會自動更新區塊內容,不用刷新瀏覽頁面,很方便實用的功能!!有需要的朋友參考看看!!

教學撰寫:徐嘉裕 Neil hsu

CentOS7安裝xampp-linux的方法教學-教學撰寫:徐嘉裕Neil hsu

圖片
先吧CentOS7架設起來,然後進到xampp官方網站尋找要下載版本(須為XAMPP for Linux):

https://www.apachefriends.org/download.html

然後滑鼠滑到Download 按右鍵->複製連結網址



得到以下的連結:

https://www.apachefriends.org/xampp-files/7.0.28/xampp-linux-x64-7.0.28-0-installer.run

接者使用pietty或是ssl遠端連線軟體連入CentOS貼上下載網址(wget指令)

wget  https://www.apachefriends.org/xampp-files/7.0.28/xampp-linux-x64-7.0.28-0-installer.run

然後開始下載檔案



完成下載後,輸入以下指令執行安裝檔!!

sudo ./xampp-linux-x64-7.0.28-0-installer.run  (紅字為檔名)



然後一路Y到底,然後啟動XAMPP

sudo /opt/lampp/lampp start



這樣就完成xampp-linux的安裝工作,輸入網址或IP位置就能看到XAMPP的首頁說明。





網頁根目錄位置在

/opt/lampp/htdocs

另外還需要設定xampp隨伺服器自動啟用,這樣伺服器如果有關機再開機xampp就會自動啟用。

#ln -s /opt/lampp/xampp /etc/rc.d/init.d/xampp
#chkconfig --add xampp
#chkconfig xampp on

重新啟動xampp,輸入指令:

/opt/lampp/xampp restart

另外如果要設定phpmyadmin可以參考以下教學文章
http://neohsuxoops.blogspot.tw/2017/10/centos7xamppphpmyadmin.html


參考資料來源:
http://jsnwork.kiiuo.com/archives/2093/linux-centos-%E5%AE%89%E8%A3%9D-xampp
https://sandeepverma.wordpress.com/tag/uninstall-xampp-from-your-machine/


教學撰寫:徐…

解決tad_web個人頁面設定請連到我另一個班網網址無效問題-教學撰寫:徐嘉裕Neil hsu

圖片
最近幫客戶網站安裝了TAD老師開發的tad_web模組,然後建了一推班級處室網站,可是客戶回報有的老師就還是喜歡用舊的部落格當個人網站,沒辦法只好使用tad_web模組->網站設定裡面的請連到我另一個班網網址功能,想說問題因該就能解決了吧!!




但設好連結之後,卻發現不管是登出還是登入訪客還是會員通通無法轉跳到指定的網站,查了一下資料表設定的連結的確有寫入




但是追查CODE卻找不到相關的設定,可能我太笨了,所以乾脆自己撈資料表寫個轉跳程式好了,來解決這問題,畢竟客戶最大,能解決問題優先。

找到以下檔案,用筆記本打開!!

../themes/for_tad_web_theme/theme.tpl

在上方加上這段CODE

<{if !$xoops_isadmin}>

<{php}>

$WebID=isset($_REQUEST['WebID'])?$_REQUEST['WebID']:"";

global $xoopsDB;

$sql = "select `ConfigValue` from " . $xoopsDB->prefix("tad_web_config") . " where `WebID`='$WebID' and `ConfigName`='other_web_url'";

$result = $xoopsDB->query($sql) or web_error($sql);

list($ConfigValue) = $xoopsDB->fetchRow($result);

if(!empty($ConfigValue)){ redirect_header($ConfigValue ,0 , ''); }

<{/php}>

<{/if}>
這樣轉跳頁面功能就正常了,如果之後要取消轉跳,只要用管理員進入個人網頁的網站設定裡面吧請連到我另一個班網網址功能連結拿掉即可!!


教學撰寫 徐嘉裕 Neil hsu




好用的CSS3->nth-child()選擇器(可以做奇偶數判斷)-教學撰寫:徐嘉裕Neil hsu

圖片
之前如果要做像這樣奇偶數的特效,通常都是透過PHP程式判斷迴圈奇偶數之後帶出odd及even數值傳值到樣板輸出成id,再定義CSS樣式,當然也能用SMARTY內建函數 class="<{cycle values="odd,even"}>來做出判斷。


不果現在有更快的方法,連程式都不用寫了直接前端CSS就能做出來了,就是用nth-child()選擇器來判斷奇偶數,範例如下:

//HTML結構

<div id='boxdiv'>
<li>內容內容內容內容內容內容內容內容內容內容內容</li>
<li>內容內容內容內容內容內容內容內容內容內容內容</li>
<li>內容內容內容內容內容內容內容內容內容內容內容</li>
<li>內容內容內容內容內容內容內容內容內容內容內容</li>
<li>內容內容內容內容內容內容內容內容內容內容內容</li>
<li>內容內容內容內容內容內容內容內容內容內容內容</li>
</div>

//CSS語法

#boxdiv li:nth-child(odd)
{
background:#ff0000;
}
#boxdiv li:nth-child(even)
{
background:#0000ff;
}

//輸出結果


這樣自動就能判斷奇偶數值並顯示CSS樣式,簡單好用又節省效能,有需要的朋友可以參考看看!!


教學撰寫:徐嘉裕Neil hsu