星期二, 7月 21, 2015

[Raphael.js] ie8 圖片無法置中

今天測試在ie8執行時,發現圖片會無法置中,找到以下這個討論

https://github.com/DmitryBaranovskiy/raphael/issues/361


主要是svg使用vml轉換時的問題,解決方法如下:


只要打開原始碼找到以下這段

fill.size = _.fillsize[0] * abs(sx) + S + _.fillsize[1] * abs(sy);

修改如下即可解決

fill.size = _.fillsize[0] * abs(sx)/1.34 + "pt" + S + _.fillsize[1] * abs(sy)/1.34 + "pt";


星期二, 7月 14, 2015

[jQuery Plugin] jqplot 重新調整tooltip

在jqplot裡面的highlighter擴充模組提供了tooltipContentEditor方法讓使用者可以處理tooltip的效果,測試ok的範例如下:



tooltipContentEditor: function (str, seriesIndex, pointIndex, jqPlot) { plugin.logger.debug('tooltipContentEditor (x,y): ' + str); // console.log('str: ' + str);// x , y // console.log('seriesIndex: ' + seriesIndex); // console.log('pointIndex: ' + pointIndex); // console.log(jqPlot.options.axes.xaxis.ticks); // console.log(jqPlot.data[seriesIndex]); // console.log(jqPlot); var xAxis = jqPlot.options.axes.xaxis.ticks[parseInt(str) - 1]; // str.split(',')[0]; var yAxis = str.split(',')[1];//這樣取比較準 var newElem = '
' + '' //以下這個方法有時候取得的值會異常,例如設成年的時候 // +'
' + jqPlot.series[seriesIndex]["label"] + '
x axis: ' + xAxis + '
y axis: ' + jqPlot.data[seriesIndex][pointIndex] + '
'; + '
y axis:
' + yAxis + '
'; return newElem; }
http://stackoverflow.com/questions/17719534/jqplot-tooltip-content-editor

2015/12/28後記

被qa發了tooltip值異常的問題,擷圖來記錄一下,最後修正最完了的xaxis的解法請參上的範例即可。

星期日, 7月 12, 2015

[jQuery plugin] 解決jqplot 動態繪圖記憶體一直長大的問題

目前在專案上使用jqplot來繪圖,遇到記憶體一直長大的問題,
經過測試以下這個作者的解法是可用的
https://edsilverton.wordpress.com/2011/04/11/avoiding-jqplot-memory-leaks/

在每次重新繪圖時需要把元素整個幹掉,記憶體才會真的往下嶧放掉。

星期六, 7月 11, 2015

[CI] 記錄一下CI框架新手功能

記錄一些CI框架Seed常用的功能手記,讓日後可以快速回憶 :D
雖然已經是被很多人放棄的技術,不過還是有他方便的地方XD

測試版本

CI 2.x

設定起始的base url

Just overwrite the line in config/config.php with the following:
$config['base_url']    = 'http://'.$_SERVER['HTTP_HOST'].'/';
If you are using the sub folder you can use following code:
$root = "http://".$_SERVER['HTTP_HOST'];
$root .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);
$config['base_url']    = "$root";

設定資料庫


application/config/database.php:

設定啟動的控制器


打開application/config/routes.php:
$route['default_controller'] = 'index';

設定啟動時載入相關的helper


打開application/config/autoload.php:
// $autoload['helper'] = array();
$autoload['helper'] = array('form','url','assets','images','load_view_helper');

星期五, 7月 10, 2015

[Wordpress] Limit Login Attempts 設定使用者登入太多次的鎖定外掛

如果要預防使用者一直嘗試登入電腦,可以透過 Limit Login Attempts
來限制使用者可以登入錯誤的次數,不過外掛已經有二年未更新了XD

https://wordpress.org/plugins/limit-login-attempts/

星期一, 7月 06, 2015

[Docker] 快快樂樂學Docker指令集

由於上周為了在MAC上面安裝跟開發機一樣的環境,結果費時費力還會爆炸,決定使用docker來統一一下開發的環境。

測試環境

Mac OS X 10.9.5

安裝Docker

1. 下載boot2docker
https://github.com/boot2docker/osx-installer/releases/

安裝後docker 和 boot2docker 的執行檔就已經放在 /usr/local/bin,而且也會多裝一個Virtualbox,因為docker是要跑在linux核心上面

2. 安裝新的linuxVM

$boot2docker init

執行過程中,會去下載 boot2docker.iso,並建立 Linux VM

3. 啟動 boot2docker-vm 虛擬機器 => 有了這個VM才有辦法開始使用docker
$boot2docker start


啟動後會提示需要export 以上設定,否則無法使用docker指令集



另外boot2docker安裝後,可以在應用程式看到一個boot2ocker iCON,也可以用來開這個vm



boot2docker 其他指令集

#取得boot2docker VM IP
$boot2docker ip

#可以在啟動前,先檢查有沒有新版的images
$boot2docker upgrade

docker常用指令集

星期一, 6月 22, 2015

[Android] 無法產生R.java檔

記錄一下第一次import要android專案踩到的雷,基本上網路上都找的到,但大家遇到的CASE都不一定相同。以下自已的解決方法,希望可以幫助遇到一樣問題的人。

R.java無法產生的問題如下:

  • ADT更新不完成 => 套用的SDK版本相關的組件沒安gk
  • 專案內的libs:裡面也放了參照的library,造成偵測到二個版本而無法編譯
          
  • res內的 *.xml一定有格式爆炸了,所以才會無法產生。
    • 有遇到新增新的Activity時,對應的樣版xml檔案內缺少XML 文件宣告而爆炸
  • 重覆引用appcompat_v7 專案的library(這個是新增Android自行產生的專案lib): 僅需使用android-support-v7-appcompat (這專案是從android-sdk_r24.3.3-macosx.zip下載之後內的專案匯入的,主要是要import它build出來的android-support-v7-appcompat.jar與android-support-v4.jar)


如何設定android-support-v7-appcompat設定成專案可以引用的libraries

1. 首先從下載android-sdk_r24.3.3-macosx.zip 解開後,把裡面的/Applications/eclipse/android-sdk-macosx/extras/android/support/v7的專案import到eclipse的workspace

2. 匯入後,在android-support-v7-appcompat的專案按右鍵,選properties,跳出下圖視窗,照紅色框線步驟點擊,第三步要把Library內的is Library打勾,我們就可以build一個library

3. 接著在匯入的專案指定要referenc android-support-v7-appcompat專案所產生的lib,按下ADD按鈕後,會跳出讓你選你要參考的專案lib,記得只能選擇android-support-v7-appcompat的lib而不要選appcompat_v7 專案的lib






請教完同事後,建議沒事不要亂更新IDE的SDK,除非是專案有必要,不然很容易爆炸的XD
android模擬器常發生專案無法run上去的情形,但大原則是專案只要沒有紅色的警告,接上手機來build code基本上都是可以跑的,筆記筆記。

星期日, 6月 14, 2015

[NetBeans] tomcat8.0.x 如何在netbeans 8成功執行

當使用tomcat8要在netbeans8執行時會發生錯誤,
可以修改catalina.bat裡面的JAVA_OPTS參數設定,
請照以下三步驟即可解決無法run tomcat的問題。


Step1: 打開你的catalina.bat
C:\\apache-tomcat-8.0.23\apache-tomcat-8.0.23\bin\catalina.bat


Step2: 找到以下的設定

:noJuliConfig
set "JAVA_OPTS=%JAVA_OPTS% %LOGGING_CONFIG%"

:noJuliManager
set "JAVA_OPTS=%JAVA_OPTS% %LOGGING_MANAGER%"

Step3: 移掉雙引號

:noJuliConfig
set JAVA_OPTS=%JAVA_OPTS% %LOGGING_CONFIG%

:noJuliManager
set JAVA_OPTS=%JAVA_OPTS% %LOGGING_MANAGER%


星期六, 6月 13, 2015

[AngularJS-3rd] angular-dialog-service 模組輕鬆整合訊息對話窗效果

記錄一下整合angular-dialog-service的程式筆記

主程式

libs/angular-dialog-service/dialogs.min.js => version 5.0.0

其他相依模組

required ngSanitize, bootstrap.ui,ngTranslate

Demo


以一個編輯用戶的LIST來做說明

編輯使用者
             $scope.editUser = function($index, user) {
            logger.info('edit user');
               var dlg = dialogs.create(
                'partials/users/dialog/dialog.updateUserInfo.html',
                'DialogUpdateUserInfoCtrl',
                user, {}
            );
            dlg.result.then(function(resultData) {

                $scope.users[$index] = resultData; //update users data

               
            }, function() {

            });
        };

刪除使用者
  $scope.deleteUser = function($index, user) {
            logger.info('delete user');
            // console.log(user);
            var dlg = dialogs.confirm(
                '刪除帳戶',
                '你確定要刪除帳戶' + user.U_Email + '嗎?'
            );
            dlg.result.then(function(resultData) {
//reload user data
            });

        };

[AngularJS] 不透過type=reset來清除表單

記錄一下如何在angular清除表單內的值呢?
一般來說除了透過在頁面上放置一個按鈕類型為reset的效果最快。
但如果要在送出表單後,Server確定新增正確後,
再清除表單可自已新增一個resetForm的方法來處理。
以下是一個新建用戶的頁面來說明:


重設2按鈕是使用自訂的方法來清除表單資料,這裡需要額外注意type=mail資料驗證失敗是不會被寫入進$scope的,透過手動來清除,透過上圖可以清除看到$scope.user物件並無存到已輸入的錯誤文字

 $scope.resetForm = function(formModel) {
            logger.debug('resetForm');
            console.log(formModel);


            $scope.addForm.$setPristine();
            angular.copy({}, formModel);

            $scope.user.email = '';//解決email input無法清除的問題,email欄位要在通過規則後才會被model綁定
        };

頁面元素放入 ng-click="resetForm(user),user則為表單的物件
  <button type="button"
                                 ng-click="resetForm(user)" class="btn btn-default">
                                <i class="fa fa-refresh"></i> 重設2</button>

星期五, 6月 12, 2015

[CSS] 處理內部元素無法完全顯示的問題,當父元素加入overflow:hidden時

之前遇到頁面上做了一個contextmenu的選單效果,但一直被顯示時,選單會因為父元素裡面設了overflow:hidde,導致這個問題。


討論串位址:
http://stackoverflow.com/questions/3387489/make-child-visible-outside-an-overflowhidden-parent

This is an old question but encountered it myself.
I have semi-solutions that work situational for the former question("Children visible in overflow:hidden parent")
If the parent div does not need to be position:relative, simply set the children styles to visibility:visible.
If the parent div does need to be position:relative, the only way possible I found to show the children was position:fixed. This worked for me in my situation luckily enough but I would imagine it wouldn't work in others.



[jQuery Plugins] fancybox 執行在1.9.x的jquery錯誤處理

處理一些新版jquery跑fancybox 1.3.4的處理方法:
討論位址:

It seems like it exists a bug in jQuery reported here : http://bugs.jquery.com/ticket/13183 that breaks the Fancybox script.
Also check https://github.com/fancyapps/fancyBox/issues/485 for further reference.
As a workaround, rollback to jQuery v1.8.3 while either the jQuery bug is fixed or Fancybox is patched.

UPDATE (Jan 16, 2013): Fancybox v2.1.4 has been released and now it works fine with jQuery v1.9.0.
For fancybox v1.3.4- you still need to rollback to jQuery v1.8.3 or apply the migration script as pointed out by @Manu's answer.

UPDATE (Jan 17, 2013): Workaround for users of Fancybox v1.3.4 :
Patch the fancybox js file to make it work with jQuery v1.9.0 as follow :
  1. Open the jquery.fancybox-1.3.4.js file (full version, not pack version) with a text/html editor.
  2. Find around the line 29 where it says :
    isIE6 = $.browser.msie && $.browser.version < 7 && !window.XMLHttpRequest,
    and replace it by (EDITED March 19, 2013: more accurate filter):
    isIE6 = navigator.userAgent.match(/msie [6]/i) && !window.XMLHttpRequest,
    UPDATE (March 19, 2013): Also replace $.browser.msie by navigator.userAgent.match(/msie [6]/i) around line 615 (and/or replace all $.browser.msieinstances, if any), thanks joofow ... that's it!
Or download the already patched version from HERE (UPDATED March 19, 2013 ... thanksfairylee for pointing out the extra closing bracket)
NOTE: this is an unofficial patch and is unsupported by Fancybox's author, however it works as is. You may use it at your own risk ;)
Optionally, you may rather rollback to jQuery v1.8.3 or apply the migration script as pointed out by @Manu's answer.

星期二, 6月 09, 2015

[Javascript] 如果透過window物件來將字串轉換成執行程式

先前需要遇到不同狀況時,
呼叫不同含式,
但函式內部只是call不同api,
於是為了簡寫一點程式,利用字串的方法來取得函式物件,
可以使用window[你的函式字串]來轉換含式

           var runAPI = '';
                switch (reportType) {

                    case 'datastream':
                        runAPI = 'FUN_A';
                        break;

                    case 'avg':
                        runAPI = 'FUN_B';
                        break;

                    case 'max':
                        runAPI = 'FUN_C';
                        break;

                    case 'min':
                        runAPI = 'FUN_B';

                        break;

                }//end of switch

                //conv to real js function !!important
                var fnRunAPI = window[runAPI];

接著funRunAPI就變一個可執行的函式了


2015/10/21 更新

另外要使用物件或帶入參數也是可行的


window[你的函式字串](參數)

window[物件Class名稱][物件函式字串](參數)


星期日, 6月 07, 2015

星期六, 5月 09, 2015

[Java] Java專案的JS/CSS minify

針對Java專案js/css最小化相關open souces資源記錄

pack-tag

A JSP Taglib for delivering minified, combined and gzip-compressed resources (JavaScript and CSS).

https://github.com/galan/packtag

Jawr

https://github.com/ic3fox/jawr


Granule

Java JS/CSS optimization solution (tag and ant,servlet). Whitespace remover and Google Closure compilator integration
https://github.com/JonathanWalsh/Granule


wro4j

Free and Open Source Java project which brings together almost all the modern web tools: JsHint, CssLint, JsMin, Google Closure compressor, YUI Compressor, UglifyJs, Dojo Shrinksafe, Css Variables Support, JSON Compression, Less, Sass, CoffeeScript and much more. In the same time, the aim is to keep it as simple as possible and as extensible as

https://github.com/wro4j/wro4j



星期二, 4月 21, 2015

[CSS] backgroud 與 backgroud-image 小踩雷

今天在弄二層下拉選單時(以前都有美工拉好T_T),
在mouse hover的時候設定要改一下背景色,結果卻把a裡面設定的backgroupd-image ICON蓋掉了,
原來是用錯指令啦,記得要使用backgroupd-color

.sub-nav li a:hover,.sub-nav li:hover{
    color:  #000 !important;
/*    border-bottom:  2px solid  #58616d;*/

    /*background是設背景圖,會把icon換掉的,要改backgroupd-color即可*/
    /*background:#dfdfdf !important;*/ 
     background-color: #dfdfdf !important;
}

星期一, 4月 20, 2015

[AngularJS-3rd] ui-select 操作筆記

記錄一下ui-select這個元件的操作
https://github.com/angular-ui/ui-select

ui-select transclude 錯誤

遇到這個問題只要升級angular的版本到1.2.18即可:D
// Recreates old behavior of ng-transclude. Used internally.
        .directive('uisTranscludeAppend', function () {
            return {
                link: function (scope, element, attrs, ctrl, transclude) {
                    transclude(scope, function (clone) {
                        element.append(clone);
                    });
                }
            };
        })


[jQuery API] 如何讓元素透過tabindex來達到Focus效果

今天在實作一個下拉選單顯示與隱藏的效果(透過點擊一個按鈕)
當下拉選單出現時,設定呼叫focus(),反之在失去Focus時,會自動hide。

加入tabindex屬性,讓元素(div or ul)支援focus方法

//再focus執行前,加入tabindex屬性
  $dropdownMenu.attr('tabindex',-1).fadeIn().focus();

偵測被Focus的元素的方法

// Get the focused element:
var $focused = $(':focus');

// No jQuery:
var focused = document.activeElement;

// Does the element have focus:
var hasFocus = $('foo').is(':focus');

// No jQuery:
elem === elem.ownerDocument.activeElement;

去除瀏覽器的tabindex外框

當你讓選單focus的時候,會發現外框出現的色框


可以透過以下css,讓border消失

:focus { 
    outline: none; 
}

參考


其他你感興趣的文章

Related Posts with Thumbnails