發表文章

寫一個偵測Google翻譯套件切換語言調整頁面css樣式的方法-教學撰寫:徐嘉裕Neil hsu

圖片
Google翻譯套件是可以崁在網頁上面讓user自行切換的網頁程式,目前雖然已經停止申請必須使用Chrome瀏覽器的內建翻譯功能,但如果是ie或是ff還是可以用Google翻譯套件,之前有寫過一個教學有需要的朋友可以參考看看!!

https://neohsuxoops.blogspot.com/2018/12/googlejs.html

這些是前言,目前遇到需要處理的問題是如果網站是繁體中文,切換成英文或日文因為字元變多了,會導致版面變形,像下圖這樣:






文字都疊再一起了,物件也跑位了,所以必須寫一段code去偵測切換的語言來調整css的文字大小的字句間距,方法如下:


//Google翻譯套件程式區
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'zh-TW', includedLanguages: 'en,ja,zh-TW,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

//判斷Google翻譯套件語言自定義css樣式區
<script>
$(document).ready(function(){
$('#google_translate_element').bind('DOMNodeInserted', function(event)…

分享一個PHP好用的去除副檔名跟取得副檔名function-教學撰寫:徐嘉裕Neil hsu

通常在處理檔案上傳的時候會吧檔名跟副檔名分開處理,這時候就需要移調副檔名或移調檔名了,透過G大神找到神友寫的一篇教學,我吧他程式function起來以方便使用,CODE如下:

//吧以下的CODE丟到function.php裡面然後在需要使用的檔案中引入function.php

//去除副檔名跟取得副檔名

function strriposfunction($val="",$type=""){
switch($type){
case "1":
//去除副檔名
$fileName = $val;
if (false !== $pos = strripos($fileName, '.')) {
$fileName = substr($fileName, 0, $pos);
}

break;

case "2":
//取得副檔名
$fileName = $val;
if(false !== $pos = strripos($fileName, '.')) {
$fileName = substr($fileName, $pos+1, strlen($fileName));
}

break;
}
return $fileName;

}


這樣只需要呼叫 strriposfunction()就能完成去除副檔名跟取得副檔名操作了!!
//去除副檔名
$val=test.php;
echo strriposfunction($val=$val,$type="1"); //$type=1 去副檔名
得到:test
//取得副檔名
echo strriposfunction($val=$val,$type="2"); //$type=2 取得副檔名
得到:php

有需要的朋友參考看看
參考資料來源:https://blog.xuite.net/choubee/blog/39503508-php+-+%E5%8E%BB%E9%99%A4%2F%E5%8F%96%E5%BE%97+%E5%89%AF%E6%AA%94%E5%90%8D
工作心得撰寫:徐嘉裕 Neil hsu

製作AJAX讀取條的方法-教學撰寫:徐嘉裕Neil hsu

圖片
如果要做一個AJAX讀取條,像是用在瀑布流讀取資料這樣的特效,方法如下:

使用JQuery AJAX 中的complete,beforeSend這兩個參數。

complete:請求完成時執行的函式(不論結果是success或error)。
beforeSend:發送請求之前會執行的函式。

//AJAX-CODE
$.ajax({
url: xoopsjsurl + '/modules/neilwenchuang/ajax.php',
type: 'POST',
data: { id: $id,
sortid:$sortid,
number:$number
},
cache:false,
ifModified :true,
async:false,
success: function(response) {

if(response=="") return false; //空值終止程式
$("#waterfallsflowformboxajax").before("<div id='waterfallsflowformboxajax"+$number+"'>"+response+"</div>");
},
beforeSend:function(){  //發送請求之前會執行的函式
$('#allrecordsimg').show();
},
complete:function(){ //請求完成時執行的函式
$('#allrecordsimg').hide();
}, 
error: function() {
console.log('ajax error!');
}
})

//HTML-CODE
<p id='allrecordsimg'></p>


//CSS-CODE

#allrecordsimg{
position: relative;
display: n…

AJAX+jQuery瀑布流作法-教學撰寫:徐嘉裕Neil hsu

圖片
客戶剛好需要做一個瀑布流功能的介面,瀑布流主要功能就是當捲軸拉到瀏覽器底時觸發資料,像是下圖這樣。


詳細程式結構就不描述了,這裡主要是說明透過jQuery觸發ajax讀取資料及控制顯示數量的操作方式,之後如果有需要可以再做其他延伸開發,code如下:


HTML結構

<div id='centerbox'>
<div class="row customrow">
<{foreach item=boxArr from=$wenchuangshow.neilwenchuangbox}>
<div class="col-md-6 customrowcol-md-6">
<div id='contentbox'>
<{$boxArr.contentbox}>
</div>
</div>
<{/foreach}>

<div id='waterfallsflowbox' name='1,<{$wenchuangshow.sortidDB}>'></div> //瀑布流取值
<div id='waterfallsflowformboxajax' name='0'></div> //建構瀑布流區 //備註:name='0'為預設值,到時候會透過AJAX回傳數量然後JS在讀取數量來控制顯示筆數

</div>
</div>

JS結構


//偵測捲軸位置如果到底觸發waterfallsflowboxajax()函數
$(window).scroll(function(){
var scrollint = $(window).scrollTop();
if ($(window).height() + $(window).scrollTop() == $(document).height()) {
$ajaxsetup = $("#waterfallsflowbox").attr("name");
if(type…

jQuery使用修改name值做一個點擊左右滑動css3動畫區塊特效-教學撰寫:徐嘉裕Neil hsu

圖片
最近需要幫客戶做一個jQuery區塊特效,就是點了按鈕左區塊會往左滑出內容區,然後再點一次按鈕左區塊又會往右滑回內容區,



這裡比較特殊工法的是利用修改name值來判斷區塊開啟還是關閉,這樣也能使用.css()來控制區塊的移動特效,方法如下:


//html結構

<div id='leftboxdiv'>

<div id='switchbtn' name='go'></div>  //name值預設是go

內容內容內容內容內容內容內容內容內容內容內容

</div>

//js-code


//滑入滑出左區塊

$(document).ready(function(){
$("#switchbtn").click(function(){
if($(this).attr("name")=="go"){
$("#leftboxdiv").css({"animation-name":"leftboxdivgo","left":"-293px"});
$(this).attr('name','back');  //吧name值改成back
}else{
$("#leftboxdiv").css({"animation-name":"leftboxdivback","left":"0px"});
$(this).attr('name','go');   //吧name值改成go
}
});
});


//css


#leftboxdiv{
position: absolute;
width: 293px;
height: 1076px;
background: url(../../img/blocks/travelerliving-commodity_01.png) repeat left top;
z-index: 100;
animation-duration: 1.5…

好用的jQuery custom content scroller(jQuery自定義內容滾動條)套件-教學撰寫:徐嘉裕Neil hsu

圖片
最近開發Xoops佈景時候需要修改瀏覽器原生的卷軸套件樣式,也就是overflow-Y: scroll,需要透過css自定義捲軸的背景顏色,但搞了半天IE可以Google可以Firefox就是不行,上網估狗過所有方法CSS都定義不起來,最後還是透過萬能的jQuery來解決吧,直接以程式來處理比用css搞半天快多了,效果還更美觀。

jQuery custom content scroller 插件網站
http://manos.malihu.gr/jquery-custom-content-scroller/




jQuery custom content scroller 插件效果演示範例
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html


也可以自行去我的G硬碟中下載已經整理好的套件回去用!!
https://drive.google.com/file/d/1sMrp6Tn2zlgyP1bCYowwHYLpTkcil2C0/view?usp=sharing

下載回來後吧scroller.rar解壓縮scroller資料夾看是放到佈景裡面的js資料夾還是模組裡面都可以!!

css引入

<link href="你的網站網址/js/scroller/css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css">

js引入

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript" src="你的網站網址/js/scroller/js/jquery.mCustomScrollbar.concat.min.js"></script>

//定義scroller

<script>
    (function($){
     …

Xoops免費佈景:neilambilight2.9正式版釋出-佈景設計開發:徐嘉裕Neil hsu

圖片
neilambilight2.9正式版發佈了,本次更新完成了neothemesadmin佈景管理後台介面全部翻新工作,並增加了許多實用的輔助功能,包括聯絡我們觀看內容表單由後台移往前台,增加連結登入後自動帶入頁面功能及指定會員回覆功能,布景增加將頁面連結快速加入佈景選單功能,頁腳三區塊樣式再開發,及新增加了聯絡我們區塊功能與強化網站表單的防機器人功能,目前neothemesadmin佈景管理後台100%都已翻新完成,各項功能也已開發完善,預計下次改版將針對佈景前台介面樣式作全部翻新設計,所以neilambilight3.0將會以全新的介面全新樣式呈現給大家。

Xoops免費佈景-Neil佈景測試站
http://demoweb.neodw.com/themesdemo/





neilambilight2.9 更新內容
==============================


1、修正neothemesadmin佈景管理模組所有用到分頁功能的排序功能在下一頁輸入數值時會吧其他頁的排序數值歸零問題。
2、修正neilambilight佈景CSS樣式導致作業上傳區塊上傳按鈕無法顯示問題。
3、修正neilambilight佈景meta->og:image讀取圖檔路徑判斷功能失效問題(佈景預設圖檔跟上傳代表圖檔) 。
4、neilambilight佈景聯絡我們表單增加防止外部網站傳參判斷功能,只有在相同網址內聯絡我們送出資料才能寫入資料庫,防止機器人大量外部傳參。
5、修改neilambilight佈景聯絡我們表單防機器人驗證機制。
6、修改neilambilight佈景底三區塊顯示方式,改為樣式1:三區塊全開寬度均分,樣式2:左中區塊開啟,左30%中間70%寬度,樣式3:中右區塊開啟,中間70%右30%寬度,樣式4:只開啟一個區塊,寬度滿版,樣式5:左右區塊開啟寬度各50%。
7、修改聯絡我們說明事項欄位使用base64編碼後儲存及讀取,保留原始格式並防止因特殊字元被防護模組阻擋寫入資料表的問題。
8、neothemesadmin佈景管理模組新增加一個聯絡我們區塊,可由Xoops區塊管理中開啟,建議開啟放置在底區塊中。
9、neilambilight佈景模組頁面增加可傳送頁面連結標題到佈景主選單及佈景區塊選單及佈景圖片播放器的管理中功能。
10、修正佈景主選單及區塊選單PHP兼容data-i…

使用Xoops內建函數$xoopsMailer寄送html格式郵件方法-教學撰寫:徐嘉裕Neil hsu

圖片
關於$xoopsMailer郵件參數的基本說明之前有寫過一篇教學了,有需要的朋友可以參考看看!!
https://neohsuxoops.blogspot.com/2018/01/xoops-xoops-xoopsmailer.html

上次的範例是寄送純文字格式的郵件,本次教學主要是寄送html格式郵件,也就是電子賀卡或廣告DM那樣的功能,但又不使用繁瑣的樣板模式直接用PHP就能寄送內容,簡單便利,CODE如下。


1、需要先建立一個function放置要寄送的html內容

function  boxfunction(){
global $xoopsModule,$xoopsConfig;

//引入CSS檔
$cssbox="
<style type='text/css'>
/* <![CDATA[ */

@charset 'UTF-8';
@import url('".XOOPS_URL."/modules/tadtools/bootstrap3/css/bootstrap.css');
@import url('".XOOPS_URL."/modules/tadtools/smartmenus/addons/bootstrap/jquery.smartmenus.bootstrap.css');
@import url('".XOOPS_URL."/modules/tadtools/css/font-awesome/css/font-awesome.css');
@import url('".XOOPS_URL."/modules/模組ID/css/style.css');

#centerboxbody{
position: relative;
font-family:'Helvetica Neue',Helvetica,Arial,'微軟正黑體',sans-serif;
width: 100% !important;
text-align: center;
}
#center{
position: relati…

Xoops做一個php下載檔案自動壓縮成ZIP格式方法-教學撰寫:徐嘉裕Neil hsu

圖片
通常下載檔案做個按鈕直接路徑指向檔案就能下載了,但現在瀏覽器越來越聰明,像是PDF,WOED或是圖片類型都會直接在瀏覽器開啟,而不會下載,再加上下載檔案會消耗網站上行頻寬,所以最好的方法就是吧要下載的檔案壓縮成ZIP格式再讓USER下載,減少頻寬消耗,這樣就都沒問題了,php5.2後都支援new ZipArchive函數,所以不用再去改什麼php.ini檔了。

方法如下:

PHP-CODE-把以下程式碼放到模組的function.php裡面,於要觸發下載的PHP檔中引入function.php

//下載檔案壓縮ZIP格式function

function  zipArchivefunction($url="",$zipname="",$temp=""){

//$url 檔案原始路徑+檔名
//$zipname 檔案名稱
//$temp 檔案暫存路徑+檔名

/********利用ZipArchive產生壓縮檔************/
$zip = new ZipArchive;

$zip->open($temp, ZipArchive::CREATE);

//$zip->addFile($dir); //添加檔案 (若有大量檔案可使用迴圈)
$new_filename = substr($url, strrpos($url, '/') + 1);  //重新定義壓縮檔路徑
$zip->addFile($url, $new_filename);

$zip->close();
/********使用header命令php下載zip檔************/

header('Content-Type: application/zip');
//指定類型
header("Content-type: ".filetype("$temp"));
//指定下載時的檔名
header("Content-Disposition: attachment; filename=".$zipname."");

//輸出下載的內容。
readfile($temp);
unlink($temp); //刪除…

分享一個好用的PHP單位換算function-教學撰寫:徐嘉裕Neil hsu

圖片
上傳檔案的$_FILES["file"]變數共會產生以下五個陣列內容

$_FILES["file"]["name"]:上傳檔案的原始名稱。
$_FILES["file"]["type"]:上傳的檔案類型。
$_FILES["file"]["size"]:上傳的檔案原始大小。
$_FILES["file"]["tmp_name"]:上傳檔案後的暫存資料夾位置。
$_FILES["file"]["error"]:如果檔案上傳有錯誤,可以顯示錯誤代碼。

如果要取檔案大小值,只要吧$_FILES["file"]["size"]存進資料庫即可,但是$_FILES["file"]["size"]預設解析檔案大小的單位是byte,所以如果是1MB大小的檔案則會取得1048576-byte值,如果能有一個function能吧數值轉換成B/KB/MB/GB/TB該多好,不然一長串數字USER也看不懂,上網Google一下找一個還不錯的單位換算function,測試都沒問題分享給大家。


吧以下的code丟到模組的function.php中,記得在要使用的php檔引入function.php

//單位換算
function formatBytes($size) {
$units = array(' B', ' KB', ' MB', ' GB', ' TB');
for ($i = 0; $size >= 1024 && $i < 4; $i++) $size /= 1024;
return round($size, 2).$units[$i];
}

這樣在需要使用轉換的地方需呼叫涵式即可
echo $filesize= formatBytes($size=$var);
$var數值就是存進資料表的$_FILES["file"]["size"…