文章

用CSS做一個物件連續旋轉的動畫方法-教學撰寫:徐嘉裕Neil hsu

圖片
 如果要做一個像下圖這樣的風車順時鐘一直重複選轉 可以用以下的CSS方法達成: HTML結構 <div id="bottompagerimg"> <div id='windmillbox01'></div> //旋轉風車圖片 <div id='windmillbox02'></div>  //底下支架 </div>   CSS結構 #bottompagerimg {  //物件父層BOX設定 position: absolute; width: 282px; height: 306px; right: 89px; top: -289px; z-index: 20; } #windmillbox01{  //風車設定 position: absolute; top: 0px; width: 276px; height: 276px; background: url(../../img/blocks/shiangan_46.png) no-repeat left top; animation-duration: 3.5s; /*執行時間*/ animation-fill-mode: forwards;    animation-name: windmillbox; animation-timing-function: linear;  /*相同的速度*/ animation-iteration-count: infinite;  /*動畫重複執行*/ z-index: 5; } @keyframes windmillbox {  //風車動畫 0% { transform:rotate(0deg); } 50% { transform:rotate(180deg); } 100% { transform:rotate(360deg); } } #windmillbox02{   //風車支架設定 position: absolute;  width: 20px; height: 120px; bottom: 0px; left: 125px; background: url(../../img/

php-smarty標籤切割字串的方法!!->xoops-教學撰寫:徐嘉裕Neil hsu

通常來說如果需要切割字串在後端php用preg_split就能處理好了,所以很少會需要在smarty上做切割字串,不過還是會有特殊情況, 例如在Xoops某個區塊標題輸入  最新消息 - Latest publicnotice 然後需要以 - 為中心切割成兩個字串,就是顯示(最新消息 及  Latest publicnotice) 但Xoops的區塊標題都是輸出成smarty樣版的,也就是<{$block.title}>,要處理還真的很麻煩,如果能在smarty上切割字串問題或許就好解決了!! 上網拜估狗大神發現一個不錯的方法,用explode可以切割smarty字串 <{assign var="blocktitle" value="-"|explode:$block.title}> 要切割字串的標題:最新消息-Latest publicnotice <{$blocktitle[0]}>  顯示:最新消息 <{$blocktitle[1]}>  顯示:Latest publicnotice 這樣問題就解決了,會這樣用是因為手機版介面不需要顯示那麼長的文字,所以吧英文的部份去掉留下中文就好,有需要的朋友參考看看吧!! 工作心的撰寫: 徐嘉裕 neil hsu

關閉IE強制轉跳開啟Edge瀏覽器的方法!!-教學撰寫:徐嘉裕Neil hsu

圖片
之前好像不小心按到什麼使用Edge瀏覽器的設定,之後開啟IE都會強制轉跳到Edge瀏覽器,雖然Edge瀏覽器比較新但我還是習慣用IE阿~找了半天於找到關閉強制轉跳的方法!! 1、開啟Edge瀏覽器->點選右上角的 ... 按鈕->點選齒輪的設定 2、點選預設瀏覽器->在 Microsoft Edge 中以 Internet Explorer 開啟網站->設為【永不】 設定完之後再用IE開啟網頁就不會強制轉跳到Edge,有需要的朋友參考看看! 工作心得轉寫: 徐嘉裕 Neil hsi

PHP解決CK編輯器複製FB表情符號(emoji)寫入資料表出錯問題!!-教學撰寫:徐嘉裕Neil hsu

圖片
CK編輯器可以吧原始資料來源的HTML編碼也一起複製過來,像是我們要複製FB的一段貼文,可能就會有很多的emoji表情圖😄💔🐷🐹,但是這些表情圖寫入資料表時卻會發生錯誤!! Incorrect string value: ' \xF0\x9F\x91\xA9\xE2\x80 ...' for column `chestycedu`.`x03echestycedu_neilonlinevideocenter`.`description` at row 1 紅字那段就是發生錯誤的原因,因該是跟反斜線有關,上網估狗了一下找到一支不錯的function能解決這問題,CODE如下: //去除emoji表情符號字符反斜線 function sqlinjectionfilterEmoji($str){ $str = preg_replace_callback( '/./u', function (array $match) { return strlen($match[0]) >= 4 ? '' : $match[0]; }, $str); return $str; } 只需要在送出表單接收post寫入資料表的地方使用即可! sqlinjectionfilterEmoji($str=$_POST['text']); 去除反斜線後資料就能正常儲存,原本的emoji表情符號也會保留! 這樣問題就解決了,有需要的朋友參考看看!! 工作心得撰寫: 徐嘉裕 Neil hsu

使用jquery-ui.js的sortable做一個tabe拖曳排序功能-教學撰寫:徐嘉裕Neil hsu

圖片
現在很多網站排序都是採用拖曳式的,但拖曳也並非萬能,像是有分頁的資料或是有幾百筆以上的資料或是階層式資料用拖曳就很累了,還是用輸入排序編號比較方便,所以如果要用拖曳的排序最好是在20~30筆以內資料為佳,這裡分享一個使用jquery-ui.js的sortable做一個tabe拖曳排序功能方法如下: HTML結構部分 (紅字為拖曳需要增加的部分) <table class='table  sortable' > <thead> <tr> <th>標題1</th> <th>標題2</th> <th>標題3</th> </tr> </thead> <tbody> <tr class='tr' id='1' > <td>text1</td> <td>text1</td> <td>text1</td> </tr> <tr  class='tr'   id='2' > <td>text1</td> <td>text1</td> <td>text1</td> </tr> <tr  class='tr'  id='3' > <td>text1</td> <td>text1</td> <td>text1</td> </tr> </tbody> </table> //引入JS (如Xoops佈景已有引入則不需重複引入) <script src="http://tool.phpddt.com/resources/js/jquery-1.

PHP使用GD圖形來產生文字圖片作為驗證碼使用-教學撰寫:徐嘉裕Neil hsu

圖片
在防機器人填寫垃圾表單除了Google套件外,如果要自行開發,最好的還是使用圖片文字來做為驗證依據,這裡分享一個不錯的GD圖形產生文字圖片的function分享給大家 php-code 可以吧以下這段function放到模組的function.php中 //產生GD文字圖片 function fonttoimageGDfunction($width="",$height="",$x="",$y="",$font_size="",$word=""){ //$width 區塊寬度 //$height區塊高度 //$x內容的x位置 //$y內容的y位置 //$font_size文字大小1~5(最大值為5) //$word顯示圖片文字內容  $im = imagecreatetruecolor($width, $height); //製作白底黑字 $text_color =imagefilledrectangle($im, 0, 0, 300, 300, imagecolorallocate($im, 255, 255, 255)); // 設定 底色白色 imagestring($im, $font_size, $x, $y, $word, $text_color); ob_start();  //   打開輸出控制緩衝 imagepng($im); $output = base64_encode(ob_get_clean());  //取得當前內容並刪除緩衝 imagedestroy($im); return $output; } 然後再要使用圖形驗的的地方輸出function //產生圖片 $word="text.text" echo $robottimedateingbox='<img id="fonttoimageGDbox" src="data:image/png;base64,'.fonttoimageGDfunction($width="100",$heig

Xoops佈景升級jquery->jquery-3.5.1.min.js的方法-教學撰寫:徐嘉裕Neil hsu

圖片
Xoops佈景預設引入的jquery.js已經很老舊了,如果要引入最新的jquery-3.5.1.min.js則會與$xoops_module_header中預設jquery.js衝突,所以如果佈景要引入jquery-3.5.1.min.js必須做以下修改才行,移除Xoops預設的jquery.js。 1、在佈景樣板的<{$xoops_module_header}>標籤上方引入jquery-3.5.1.min.js,然後再引入jquery-migrate-3.3.0.min.js以便做舊版jquery.js的兼容,若沒引入jquery-migrate-3.3.0.min.js很多舊版的JS功能都會發生異常無法使用。 所以樣板程式就會是以下這樣 <{php}> global $xoopsTpl; //引入jquery-3.5.1.min.js $module_header.="<script src='".XOOPS_URL."/modules/neillibrary/js/jquery-3.5.1.min.js' type='text/javascript'></script>"; //引入jquery-migrate-3.3.0.min.js $module_header.="<script src='".XOOPS_URL."/modules/neillibrary/js/jquery-migrate-3.3.0.min.js' type='text/javascript'></script>"; echo $module_header; <{/php}> <!--module_header--> <{$xoops_module_header}> 2、再來解決$xoops_module_header重複引用jquery.js的問題,需要吧Xoops預設的jquery.js拿掉,還有tadtools中較舊版的jquery-migrate-3.0.0.min.js拿掉,這裡需要使用samty的replace功能,程式

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

圖片
CSS物件垂直置中如果是以前只能用table td屬性中的vertical-align: middle;來定義,後來有CSS3可以透過假表格( display:table-cell;)吧div指定為table屬性後使用vertical-align: middle;但我覺得還是非常不好用,這裡分享兩個css3物件垂直置中的方法讓大家參考一下! 例如我們要做像以下的標題樣式 如果文字多顯示兩行,文字少顯示一行,但都必須垂直置中。 HTML結構  <div id='titlebox' ><div><a  href="https://www.blogger.com/">標題文字標題文字標題文字標題文字標題文字標題文字</a></div></div>  <div id='titlebox' ><div><a  href="https://www.blogger.com/">標題文字標題文字</a></div></div> 方法1,使用transform來垂直置中 transform CSS 屬性可以讓你修改 CSS 可視化格式模型(visual formatting model)的空間維度。使用此屬性,元素可以被平移、旋轉、縮放和傾斜。 參考資料來源: https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform #titlebox{ position: relative; height: 132px; background: #ffffff url(../../img/unit/) no-repeat left top; text-align: center; font-size: 200%; overflow: hidden; } #titlebox div{ position: relative; top:50%; transform:translateY(-50%); padding: 0px 20px; max-height:105px; overflow: hi

PhpSpreadsheet電子表格PHP匯出excel排版範例->Xoops-教學撰寫:徐嘉裕Neil hsu

圖片
在開發模組時如果要吧資料表內容匯出excel,最常用的套件因該就是PHPExcel,但是官網已經說明PHPExcel套件因升級不易只能支援到php5.6, 該物件已於2017年正式棄用,並於2019年永久歸檔 ,換句話說PHPExcel套件對於日後新版的excel格式均不支援,為保持程式在最新狀態只好棄用PHPExcel改使用PhpSpreadsheet電子表格套件,該套件也是能匯出excel,還能匯出LibreOffice Calc,感覺還不錯! 唯一比較麻煩的是使用PhpSpreadsheet要先佈署composer,如果沒佈署composer是沒辦法使用的,還好官方有釋出已經設定好的phpoffice套件可以直接引入使用,省了很多麻煩,使用PhpSpreadsheet方法如下: 1、先下載PhpSpreadsheet套件,我已經幫大家吧phpoffice一起打包上傳 https://drive.google.com/file/d/1jw73diWVjbcr1ycY-gtqM2cGfpLp1zS_/view?usp=sharing 下載回來後解壓縮吧phpoffice跟PhpSpreadsheet丟到Xoops模組的class資料夾中,未來如需更新PhpSpreadsheet可到官網下載最新版覆蓋即可 https://github.com/PHPOffice/PhpSpreadsheet 2、然後建立一個excel.php放在模組根目錄中 以下為編排excel表格常用的函數設定 include_once "header.php"; //先引入autoload.php檔 include_once XOOPS_ROOT_PATH.'/modules/ 模組ID /class/phpoffice/vendor/autoload.php'; use PhpOffice\PhpSpreadsheet\Spreadsheet; use PhpOffice\PhpSpreadsheet\IOFactory; $spreadsheet = new Spreadsheet(); //實體化Excel工作表 //設置電子表格元數據的操作: $spreadsheet->getProperties() ->setCreator

解決/opt/lampp/bin/mysql.server: 264: kill: No such process-無法啟用mysql的方法(CentOS)-教學撰寫:徐嘉裕Neil hsu

圖片
今天客戶突然告知學校的網站無法連線,我去看了一下LAMPP是啟用的,但MYSQL無法啟動,會顯示 /opt/lampp/bin/mysql.server: 264: kill: No such process 客戶說前幾天有跳電伺服器沒正常關機,按照經驗法則大概又是err在作怪,先輸入指令查一下客戶伺服器容量  df -l   結果如下圖   可以看到root 容量已到100%,然後問題又是mysql無法啟用,那就來找一下mysql的log資料夾看問題出在哪? /opt/lampp/var/mysql/ xxxxx. err 如果有發現紅字的 .err 檔案就是導致系統容量100%及MYSQL無法初始化的元凶,吧.err刪除後重啟LAMPP就能恢復正常了(可以多刪除幾次到沒有.err為止)。 刪除err後再看一下容量,root 容量變為17% 重新啟動xampp,輸入指令: /opt/lampp/xampp restart 這樣MYSQL就恢復正常運作了,有需要的朋友參考看看。 工作心的撰寫: 徐嘉裕 Neil hsu