發表文章

修復tadgallery相片捲軸區塊開啟燈箱效果點選詳細內容sn為空值問題-教學撰寫:徐嘉裕Neil hsu

圖片
tadgallery是一套多功能的相簿模組,為tad老師所開發,也是目前Xoops使用率最高的相簿模組,不過目前發現一個問題,就是開啟相片捲軸區塊啟用燈箱效果時下方的詳細內容按鈕連結失效問題,為了先確認是否為系統環境造成的,我吧以下套件都改成tad的來做測試。



模組:
tadtools => 3.19最新版
tad_themes => 4.9最新版
tadgallery => 3.79最新版

佈景: => school2015最新版

都更換好配置後在測試燈箱效果,結果詳細內容還是一樣sn為空值


點了詳細內容因為sn沒值所以開啟的是空值頁面,沒內容的,初步排除是系統兼容問題。




沒辦法了阿,這樣是無法跟客戶交差的,只好動手來處理了,發現問題是出在blocks/colorbox.tpl這支檔的<{$block.sn}>為空值,相片捲軸既然是跑回圈的,那sn因該也是迴圈產生,所以修改了一下程式即可,

先找到tadgallery_block_carousel.tpl樣板檔,用筆記本打開
(在tadgallery/templates/blocks/tadgallery_block_carousel.tpl)


原本的code


<{if $block.pics}>

<style type="text/css" media="all">

.list_carousel {

position: relative;

}

.list_carousel ul {

margin: 0;

padding: 0;

list-style: none;

display: block;

}

.list_carousel li {

padding: 0;

margin: 0px;

display: block;

float: left;

}

.list_carousel.responsive {

width: auto;

margin-left: 0;

}

.clearfix {

float: none;

clear: both;

}

a.tadgallery_carousel_prev, a.tadgallery_carousel_next {

background: url('<{$xoops_…

用JS計算左右邊距固定position: fixed;位置方法!!-教學撰寫:徐嘉裕Neil hsu

圖片
在使用CSS的position: fixed浮動區塊最常遇到的問題就是無法指定位置,position: fixed的左右邊距是以瀏覽器的總寬度來做計算,所以假使您在1440px解析度設的position: fixed;位置是正確的,但如果吧解析度放大或縮小時,fixed區塊位置就會跑掉,例如下面圖示!

假使瀏覽器解析度為1440px,左右fixed區塊剛好在兩邊!



可是如果吧解析度改成1920,內容區#tpl-content寬度不變還是1280px,可是左右區塊卻是以瀏覽器的總寬度為主,因此就會變成下面這樣:




解決的方法就是用js來計算指定物件對齊左右邊距,方法如下:

js部分

$(window).load(function() {

var position = $('#tpl-content').offset();

var x = position.left;  //取得#tpl-content容器的left位置

var r =$('#tpl-content').width();

$("#leftframe").css("left", x-80+"px");  //計算左區塊位置

$("#righttframe").css("left", x+r+"px");  //計算右區塊位置

});


css部分

//左邊浮動區塊

#leftframe {

position: fixed;

top: 0px;

width: 80px;

height: 800px:

background: url(../../img/frame/01.jpg) repeat-y left top;

}

//右邊浮動區塊
#righttframe {

position: fixed;

top: 0px;

width: 80px;

height: 800px:

background: url(../../img/frame/02.jpg) repeat-y left top;

}

這樣即使瀏覽器設成1920左右浮動物件仍然會貼其#tpl-content容器的邊緣,不會在跑掉了。
有需要的朋友參考看看!

教學撰寫:徐嘉裕 Neil hsu

修改Xoops佈景結構增加一個入口首頁的方法!!-教學撰寫:徐嘉裕Neil hsu

圖片
之所謂客戶百百款,每個客戶對於網站的需求都不一樣,最近就遇到一個客戶需要再Xoops網站的首頁前面再加一層入口首頁,如果用原本的作法是用html做個頁面丟到網站根目錄然後指定伺服器預先讀取html即可,但是這樣做變成是獨立頁面,離開Xoops系統了,如果要使用Xoops的模組或區塊功能就不可行了,所以解決的方法還是修改佈景結構比較實在。

這是修改好之後的佈景樣式,如果輸入網址會出現入口頁面,



點進入網站按鈕則會顯示原本的Xoops預設首頁跟11個區塊!






修改方法如下:

1、先在佈景根目錄建立一個config.php檔
2、於佈景theme.tpl中引入config.php檔
<{include_php file="$xoops_rootpath/themes/$xoops_theme/config.php"}>
3、於config.php檔中增加以下的php code

<?php
$types=isset($_REQUEST['types'])?$_REQUEST['types']:"";

if(!empty(trim($this->_tpl_vars['xoops_contents'])) ){
$contentstrue=true;
}

$this->assign('contentstrue', $contentstrue);
$this->assign('types', $types);

?>

4、然後在佈景的tpl資料夾建立一個index.tpl檔,這個樣板就是用來放入口首頁內容的,包括區塊程式也能在這裡運作,index.tpl檔裡面要做個按鈕連到Xoops預設首頁。

<a title='前往首頁'  href="<{xoAppUrl /}>?types=index" >前往首頁</a>

5、修改佈景的結構樣板檔,加上以下的判斷
<body>


<{if !$types eq index && !$contentstrue}>
<{includeq file="$theme_…

使用JS去除nowrap標籤解決tad_uploader檔案名稱過長版面被拉破的問題-教學撰寫:徐嘉裕Neil hsu

圖片
tad_uploader是一套非常好用的檔案上傳模組,相信用過的朋友都說讚,但目前遇到一個問題,就是如果檔案說明文字太長的時候,版面會被拉到破版!!像下面這樣!!



原因是因在td結構裡面被下了一個nowrap屬性

<td headers="h2" nowrap>

最快的解決方法就是進到php檔或tpl樣板吧nowrap拿掉就好了啊,不用1秒解能解決,幹嘛還要那麼麻煩用js來解決的,這問題問得好,直接修改檔案當然是最快的方法,但必須要考量到日後更新的問題啊,如果客戶升級了tad_uploader模組,樣板都被覆蓋掉,那原本修改就不見了不又變回破版的樣子。

想說用css的white-space:nowrap;屬性來覆蓋nowrap屬性,但也不行,方法都試過了,好吧,最後還是要靠js了,方法如下:


先在引入js檔案的地方引入Xoops模組id變數!

<script>
var $xoopsdirname="<{$xoops_dirname}>";
</script>


然後再js檔案裏面貼上以下的code

//去除nowrap
if($xoopsdirname=='tad_uploader'){ //只有在tad_uploader模組執行
$(document).ready(function(){
$('#sort tr').each(function(index) {
   var $sorttext=$(this).html(); //取得tr中的HTML內容   
   var $sorttextreplace=$sorttext.replace(/nowrap/g,'');//去除nowrap標籤
   $(this).replaceWith($(this).html($sorttextreplace)); //輸出內容
});
});
}


儲存檔案後,再去看一下tad_uploader模組!!破版的問題已經解決了





這樣不但能更新模組,又能解決版面的問題,js大神真的好棒棒啊!!

教學撰寫:徐嘉裕 Neil hsu

JS解決submit同時存入AJAX跟POST外部傳參先後順序問題-教學撰寫:徐嘉裕Neil hsu

這總情況是會發生在假設submit按鈕觸發後需要POST傳參到指定網址但又需要用AJAX儲存資料,就需要建立先後順序,雖然不建順序也是可以的,因為POST之後會有秒差足夠AJAX儲存資料,但如果發生系統負載過重導致AJAX未成完成資料儲存,網頁就已經action到其他頁面了,就會發生ajax資料未被存入的情況,解決方法就是鎖住外連設定先後順序,先存AJAX完成後再啟用submit(),這樣就不會有問題了,方法如下:


HTM結構

<form action='URL' method='post' id="print">

於form加上id="print"設定

<button type='submit' id='btn' class="btn btn-danger btn-block btn-lg"> 送出</button>

</form>


JS部分
 $("body").on("click", "#btn", function (e){ e.preventDefault();      //加上鎖住外連設定
 $.ajax({     url: xoopsjsurl + '/modules/neillibrary/ajax.php',     type: 'POST',      data: { id: 1,                 var:$avr    },         success: function(response) {     $('#print').submit();  //啟用submit();     },      error: function() {       console.log('ajax error!');      }  })   }) 
這樣當點擊btn按鈕時e.preventDefault(); 會先鎖住外連不讓action網址連出去,然後等AJAX跑完後再用    $('#print').submit();…

JS瀏覽器返回上一頁自動轉跳網址的方法!-教學撰寫:徐嘉裕Neil hsu

之前有寫過利用JS+AJAX瀏覽器返回上一頁自動更新頁面的教學,但是某些狀況下這方法還是不行的,例如送出A頁面時更改了資料表中某些欄位的狀態數值跟寫入新的資料,如果USER利用瀏覽器返回上一頁又返回A頁面,即使自動更新後顯示的資料也不相同了(例如訂單編號之類的),所以最好的解決方法就是USER返回A頁面時自動轉跳到系統首頁或指定頁面,這樣就不會有這問題產生了!!

方法如下

在樣板端增加以下的JS設定

<script type="text/javascript">
history.pushState({page: 1}, 'title 1', '?barpage=gopage');
</script>

history.pushState可以更改瀏覽器的網址紀錄,但實際網址跟變數還是原本的,例如實際網址是

https://shopfish.com.tw/modules/neilshop/shoppingcart.php?op=shoppingcart2&suid=1&barpage=3

history.pushState會吧網址變更為

https://shopfish.com.tw/modules/neilshop/shoppingcart.php?barpage=gopage

我們就能取$barpage變數值來做判斷

再來在PHP端加個判斷,如果$barpage==gopage,就表示返回頁一頁,系統自動觸發轉跳網址

//網址判斷
if($barpage==gopage){
redirect_header(XOOPS_URL. "/modules/".$xoopsModule->getVar("dirname")."/index.php" ,0 , _MS_SHOPPINGCART283);
}

這樣如果USER透過瀏覽器切換返回上一頁,就會自動轉跳到模組首頁!!


教學撰寫:徐嘉裕 Neil hsu

Xoops區塊資料儲存newblocks資料表中content欄位及讀取的方法!!-教學撰寫:徐嘉裕Neil hsu

圖片
存放Xoops區塊資料表newblocks有一個可以存放大量文字的text欄位content



如果在製作的區塊中要使用到大量文字是可以使用這個欄位的,只要在textarea的name輸入content_block即可將資料儲存在content欄位中


但是遇到一個問題,就是區塊函數的輸入值$options儲存後預設是返回newblocks資料表中options欄位的數值,而不是content,這部分經過測試確實如此(用var_dump()看過陣列內容),所以無法讀取到content欄位的返回值,解決這問題只能自己撈資料表了!

查詢資料表名稱:newblocks
只要吧where條件設為where `edit_func` = '區塊編輯函數名' ,然後讀取content欄位即可抓到資料。


教學撰寫:徐嘉裕 Neil hsu

用PHP遞迴選單解指定頂層分類底下所有子分類中內容頁面的方法!!-教學撰寫:徐嘉裕Neil hsu

圖片
通常在首頁的商品分類選單都是顯示第一層,因為如果開太多層畫面會變得不好看,像是下面這樣的選單,只開一層感覺還不錯!!



如果選擇商品分類01,那基本上只會顯示商品分類01底下的商品內容,但如果商品分類01底下還有其他子分類跟商品內容就抓不到了!

這樣的區塊不是很奇怪,底層分類的商品永遠不會顯示在首頁的區塊中,只會顯示頂層的,所以解決辦法就是當USER選擇頂層分類時,連同頂層中全部的子分類中的商品內容頁通通抓出來,用隨機排列,這樣問題就解決了阿!!但是需要用到遞迴來解商品分類,再透過商品分類撈出商品頁面的ID。
方法如下
首先選單透過AJAX選單傳值過去的(分類id),這部分就不說明了,然後以下是在AJAX中遞迴解商品分類及商品內容的方法

$dbneme="productsort"; //第一層 $where="  where `sortid` = '".$selectid."' &&  `enable` = '1'  order by  sortidsort  DESC";  //where數值 $productsortArr=databasetablewhile($dbneme,$where);

//遞回開始
//分類指定sortid遞迴到底 function sortretorted($dbneme="",$sortid=""){  $where=" where `of_sortid` = '".$sortid."' order by sortidsort DESC";   //where數值 $sortArr=databasetablewhile($dbneme,$where); foreach($sortArr as $key=> $val){ $sortvar.=$sortArr[$key]['sortid'].","; $sortvar.=sortretorted($dbneme,$sortid="".$sortArr[$key]['sortid']."")…

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=…