發表文章

解決php程式迴圈使用Bootstrap框架排版內容高度無法一致的問題 -教學撰寫:徐嘉裕Neil hsu

圖片
使用Bootstrap框架排版來跑php迴圈,除非是要做瀑布流,一定會遇到以下的問題,就是每個div的高度都不一致,導致區塊跑位的情況 這樣不是很奇怪嗎?解決方法就使用js的each取得nth-child引響範圍內區塊高度的最大值,再輸出到範圍內的全部區塊,例如每列有三個區塊,迴圈跑三次共三列,程式就會以每三個區塊取值比對一次抓出最大高度在輸出,這樣每一列的高度都會一致,不會再發生區塊跑位的情況。 方法如下: html結構 <div class="row">   <div class="col-md-4">.col-md-4</div>   <div class="col-md-4">.col-md-4</div>  <div class="col-md-4">.col-md-4</div>   <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> 呼叫function <script>sameheightfunction();</script> js-code 吧以下的code放在頁面引入的js檔中 //區塊高度相等 function sameheightfunction() {   var $column=3; //欄位數   var $range = $column - 1;   var $sections = $('.col-md-4');  //區塊class   $sections.filter(':nth-child(' + $column + 'n-' + $range + ')').each(function() {     var $this = $(this),       $els = $this.nextAll(':lt(' + $range + ')&

用PHP遞迴作switch流程控制範例-教學撰寫:徐嘉裕Neil hsu

圖片
遞迴的運作原理就是在同一個function裡面再次或多次執行同樣的function,通常用在解階層式資料,像是分類父層子層之類的,但遞迴也能作為switch流程控制用途,這樣就能吧本來要用很多的function用一個function就能執行完畢了,程式也精簡很多,以下是參考範例: 例如我們要做一個以陣列方式選取星期的功能,然後吧陣列數值儲存為unserialize字串格式 所以儲存進資料表的字串內容如下: a:4:{i:0;s:1:"1";i:1;s:1:"3";i:2;s:1:"5";i:3;s:1:"7";} 接下來要在頁面上吧選擇星期的字串內容改為輸出星期一~星期日,並指定顯示選取的內容,我們利用PHP遞迴作switch流程控制一次搞定 //PHP-function //活動星期 function activityweek($week="",$type=""){ switch($type){ case "1": //開啟字串轉陣列解出數值 foreach(unserialize($week) as $val){ $weektext.="<span class='glyphicon glyphicon-check' aria-hidden='true'></span>". activityweek($week=$val,$type="2") ." &nbsp;" ; } $weektext= activityweek($week=$weektext,$type="3") ; break; case "2": //按數值對應星期 switch($week){ case "1": $weektext=_MS_SHARED162; //星期一 break; case "2": $weektext=_MS_SHARED163; //星期二 break; case "3"

PHP好用的QRcode產生套件phpqrcode->Xoops模組應用範例-教學撰寫:徐嘉裕Neil hsu

圖片
如果要在Xoops模組中使用php產生的QRcode套件,phpqrcode是個不錯的選擇,且套用方便利於擴充管理,首先先去phpqrcode官網下載套件包回來 http://phpqrcode.sourceforge.net/ PHP QR Code庫的某些功能包括: 支持QR Code版本(大小)1-40 數字,字母數字,8位和漢字編碼。(日文漢字編碼尚未經過全面測試,如果您啟用了日文編碼,則可以通過驗證它來做出貢獻:)) 完全用PHP實現,除GD2外沒有任何外部依賴項 導出為PNG,JPEG圖像,也導出為位表 TCPDF 2-D條碼API集成 易於配置 數據緩存可加快計算速度 提供的合併工具有助於將庫作為一個沒有依賴關係的大文件進行部署,易於“包含且不擔心” 調試數據轉儲,錯誤記錄,時間基準測試 100%開放源代碼,LGPL許可 解壓縮後吧phpqrcode丟到Xoops模組的class資料夾中 然後再Xoops的uploads資料夾中建立一個qrcode資料夾存放QRcode圖檔 (資料夾需設777權限) 再吧以下的code放到模組的function.php裡面 //QR CODE 產生器 function qrcodeGenerator($url='',$level='',$size='',$qrcodeimg=''){ //參數說明 //$url  產生QRcode連結 //$level  容錯級別 H 30% 校正 / L = ~7% 校正 / M = ~15% 校正 / Q = ~25% 校正 //$size  生成圖片大小 max10 //$qrcodeimg  產生QRcode圖檔名 include_once XOOPS_ROOT_PATH."/modules/ 模組ID /class/phpqrcode/phpqrcode.php"; $value = $url; //二維碼內容 $errorCorrectionLevel = $level; //容錯級別 $matrixPointSize = $size; //生成圖片大小 //生成二維碼圖片 $filename = XOOPS_ROOT_PATH.'/uploads

解決CentOS安裝XAMPP後MariaDB大量產生err的方法-[ERROR] Incorrect definition of table mysql.column_stats: expected column 'max_value' at position 4 to have type varbinary(255), found type varchar(255)-教學撰寫:徐嘉裕Neil hsu

圖片
最近靈異事件真的很多,像是完全按照官網版本安裝的XAMPP7.4X在CentOS上,照理說官方釋出的版本因該都正常的吧,沒想到一運行XAMPP就產生大量的.err檔,而請增加速度非常快,不用幾天就會吧root撐爆,不處理也不行 先來看一下.err錯誤訊息內容(.err位置在/opt/lampp/var/mysql/ xxx.err ) 2021-04-12  8:33:48 13 [ERROR] Incorrect definition of table mysql.column_stats: expected column 'max_value' at position 4 to have type varbinary(255), found type varchar(255). 2021-04-12  8:33:48 13 [ERROR] Incorrect definition of table mysql.column_stats: expected column 'min_value' at position 3 to have type varbinary(255), found type varchar(255). 2021-04-12  8:33:48 13 [ERROR] Incorrect definition of table mysql.column_stats: expected column 'max_value' at position 4 to have type varbinary(255), found type varchar(255). 是說table的mysql表裡面的column_stats欄位預設是varchar(255),但正確因該是varbinary(255),但mysql表不是MariaDB的系統預設表嗎??怎麼會出錯......真是見鬼了! 但不解決又不行,因為err會一直增加,那只能修改欄位類型了! 在phpmyadmin->mysql->sql執行以下sql語法 use mysql;  alter table column_stats modify column max_value varbinary(255);  alter table colum

JS捲軸觸發後按時間依次顯示的動畫效果-教學撰寫:徐嘉裕Neil hsu

 寫了一個JS捲軸觸發後按時間依次顯示的動畫效果的範例,效果如下影片 就是當捲軸拉到觸發的ID時物件按照時間依序觸發動畫,這通常用在視差設計裡面,方法如下 //HTML結構 <div class="row"> <div id='addressbox14' class="each" > <div class="col-md-6 addressbox01 " > 略..... </div></div> <div id='addressbox15' class="each" > <div class="col-md-6 addressbox02 " > 略..... </div></div> <div id='addressbox16' class="each" > <div class="col-md-6 addressbox01 " > 略..... </div></div> <div id='addressbox17' class="each" > <div class="col-md-6 addressbox02 " > 略..... </div></div> </div> //JS結構 $(window).scroll(function() { var $scrollTopa =$(this).scrollTop(); //當前座標位置 var $scrollTopb=$scrollTopa+850; //觸發位置 $(". each ").each(function(index) {   var $index=index*270; //setTimeout時間each迴圈取index乘270數

jQuery使用each->substr()擷取指定字元分割並套用html標籤做突顯色的方法-教學撰寫:徐嘉裕Neil hsu

圖片
css的first-letter選擇器可以讓第一個字元自訂樣式,也就是第一個字能變顏色變大變小都行,但問題來了,如果客戶希望第二個字元或第三個字元都能套用特別的顏色,first-letter方法就不可行了,還是要靠js來處理才行。 例如要做一個像下圖這樣的效果,新聞標題的前2個字元為紅色,其他字元為黑色。 code如下: html結構部分 <div id='titlebox'><a   class='exchangeArr'   href="https://www.blogger.com/">標題文字標題文字標題文字標題文字標題文字標題文字</a></div> 在標題<a>標籤加上 class='exchangeArr' js-code部分 在樣板底端加上以下code <script> $(".exchangeArr").each(function(index) { var $exchangetext = 2; //由0開始到擷取位置字元數 //擷取指定字元 var $substrbefore=$(this).html().substr(0,$exchangetext); //擷取剩餘字元 var $substrRear=$(this).html().substr($exchangetext); //輸出 $(this).html(' <span id="textcolor"> '+$substrbefore+' </span> '+$substrRear+''); }); </script> 綠色的<span>標籤跟id="textcolor就是指定第2個字元切割後套用上去的,在跟剩餘字元組合輸出的結果。 最後就是給id="textcolor定義一個css顏色樣式 #textcolor{ color: #ff1b1b; } 這樣就完成了,可以修改要擷取的字元數套用樣式,有需要的朋友參考看看! 工作心的撰寫: 徐嘉裕 Neil hsu

PHP數字轉英文字母套用Excel列標的方法-教學撰寫:徐嘉裕Neil hsu

之前寫過一篇【PhpSpreadsheet電子表格PHP匯出excel排版範例】的工作心得 https://neohsuxoops.blogspot.com/2020/09/phpspreadsheetphpexcel-xoops.html 但是發現一個問題,就是excel的列標一定是英文字母A~Z組合,例如: //表頭區 $worksheet ->setCellValue('A1', 'Product') ->setCellValue('B1', 'Quantity') ->setCellValue('C1', 'Unit Price') ->setCellValue('D1', 'Price'); 如果吧C1刪除剩下ABD,匯出Excel還是會空一格C的欄位,必須要重編A~Z的列標,實在不方便,最好的方法就是以數字增加自動生成英文,這樣的好處是如果要刪除欄位或是需要設定匯出條件某些欄位不匯出時,就不會產生空欄位的問題,方法如下: 1、先在模組的function.php中置入以下的function function IntToChr($index, $start = 65) { $str = ''; if (floor($index / 26) > 0) { $str .= IntToChr(floor($index / 26)-1); } return $str . chr($index % 26 + $start); } 這樣只要輸入數字就能產生英文 echo IntToChr(0); 輸出:A echo IntToChr(1); 輸出:B 再來就是修改Excel程式部分,吧原本英文字改為IntToChr($i),然後帶入$i值產生數字->帶出英文字母 //表頭區 $i=0; $worksheet ->setCellValue(''. IntToChr($i) .'1', 'Product'); //A1 $i++; $worksheet ->setCellValue('

解決 CentOS Linux release 7.9安裝XAMPP後啟動出現cat: error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory的方法-教學撰寫:徐嘉裕Neil hsu

根據G大神資料得知只要是CentOS X.9版安裝XAMPP都會出問題,這次是安裝XAMPP7.4..15啟動時出現以下錯誤訊息 cat: error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory 解決方案如下: 找到以下檔案 /opt/lampp/lampp 用筆記本打開編輯 if test $(osguess) = "rh9" then # for now disable PNTL. if PNTL gets more popular we will support it. - oswald [8apr3] export LD_ASSUME_KERNEL=2.2.5 #echo "XAMPP: DISABLE PNTL..." fi 吧紅字那段改為 export LD_ASSUME_KERNEL=3.1.0 修改後更新檔案 再次啟用XAMPP  /opt/lampp/xampp restart 就能正常啟動了 Starting XAMPP for Linux 7.4.15-0... XAMPP: Starting Apache...ok. XAMPP: Starting MySQL...ok. XAMPP: Starting ProFTPD...ok. 有需要的朋友參考看看 工作心得撰寫: 徐嘉裕 Neil hsu

CentOS->XAMPP變更檔案或資料夾 擁有人/群組 的方法-教學撰寫:徐嘉裕Neil hsu

將備份的XAMPP中下載回本地端的MYSQL的DB檔再次上傳回主機卻無法使用,原因是在於 擁有人/群組 設定不一樣,CentOS中的XAMPP->MYSQL路徑在/opt/lampp/var/mysql/資料表目錄,可以看一下擁有人/群組 預設都是mysql/mysql,但重新上傳後DB的擁有人/群組卻變成root/root或其他,所以自然無法讀取資料,解決方法就是修改  擁有人/群組 改為mysql/mysql,方法如下 使用以下的指令: sudo chown -R mysql:mysql   /opt/lampp/var/mysql/DB Folder 紅字 為變更 擁有人/群組 綠字 為需要變更的資料夾路徑,這樣指令就會以遞迴方式吧整個DBFolder裡面全部的DB通通改為mysql:mysql DBFolder->您的資料庫資料夾名稱 然後再去phpmyadmin中查看就能看到原本的資料表了。 另外還有其他用法 單一變更 擁有人/群組 非全體 sudo chown  mysql:mysql    /opt/lampp/var/mysql/DB Folder 參考資料來源: https://blog.gtwang.org/linux/linux-chown-command-tutorial/ 工作心得撰寫: 徐嘉裕 Neil hsu

JS->控制type='radio'切換checked的方法-教學撰寫:徐嘉裕Neil hsu

圖片
使用prop("checked",true)可以指定type='radio'元件的狀態為checked,如果我們想用某一個單選按鈕來控制另外一個單遠按鈕的checked狀態可以使用以下方法 例如要切換下方的-> 設置預約發文為【不設置】時 , 上方的是否啟用內容變為【啟用】 , 設置預約發文為【設置】時 , 上方的是否啟用內容變為【不啟用】 ,像下圖這樣: HTML結構 <div class='col-sm-12 col-sm-12Custom'> <label class='col-sm-6'> <span id='helpBlock' class='help-block'>是否啟用內容</span> </label> <div class='col-sm-6'> <label class='radio-inline'> <input class='' type='radio' id='' name='enable' value='0' >不啟用 </label><label class='radio-inline'> <input class='' type='radio' id='' name='enable' checked=checked value='1' >啟用 </label> </div> </div> JS-CODE $("body").on("change", "[name=prior]", function (){ if($(this).val()=='1'){ $("#priortimebox").slideToggle("fast"