What are you looking ? - programmer tip and tricks: January 2015

Wednesday, January 21, 2015

Making tab page scroll with bootstrap

1) first create tab.

<div class="scroller-shop scroller-left-shop"><i class="glyphicon glyphicon-chevron-left"></i></div>
<div class="scroller-shop scroller-right-shop"><i class="glyphicon glyphicon-chevron-right"></i></div>
<div class="wrapper-shop">
<ul class="nav nav-tabs list-shop" id="product-shop">
<img src="waiting.gif" />
</ul>
</div>

explanation

<div class="scroller-shop scroller-left-shop"><i class="glyphicon glyphicon-chevron-left"></i></div>
will display left arrow, when scroll

<div class="scroller-shop scroller-right-shop"><i class="glyphicon glyphicon-chevron-right"></i></div>
will display right arrow, when scroll

<div class="wrapper-shop">
<ul class="nav nav-tabs list-shop" id="product-shop">
<img src="waiting.gif" />
</ul>
</div>
will represent tab bar, it contain 2 pieces

<div class="wrapper-shop">
>> this one has the width that you want to see.

<ul class="nav nav-tabs list-shop" id="product-shop">

>> this one contains all tabs, and it will move during the scroll.

2. add Cascade style sheets

.wrapper-shop {

position:relative;

margin:0 auto;

overflow:hidden;

padding:5px;

height:50px;

}

.list-shop {

position:absolute;

left:0px;

top:0px;

min-width:3000px;

margin-left:12px;

margin-top:0px;

}

.list-shop li{

display:table-cell;

position:relative;

text-align:center;

cursor:grab;

cursor:-webkit-grab;

color:#efefef;

vertical-align:middle;

}

.scroller-shop {

text-align:center;

cursor:pointer;

display:none;

padding:7px;

padding-top:11px;

white-space:no-wrap;

vertical-align:middle;

background-color:#fff;

}

.scroller-right-shop{

float:right;

}

.scroller-left-shop {

float:left;

}

explanation
height:50px;
this is the height of the tab

3) set function, and execute

setTimeout(function() {

//create the shop here

$('#product-shop').html('<li>tab1</li><li>tab2</li>');

setTimeout(function() {

//scroll

var itemslist={data:[],count:0}

var widthOfList = function(){

var itemsWidth = 0;

$('.list-shop li').each(function(){

var itemWidth = $(this).outerWidth();

itemsWidth+=itemWidth;

if (!itemslist['done']) itemslist['data'][itemslist['count']++]=$(this).position().left

});

itemslist['done']=1

return itemsWidth;

};

var getLeftPosi = function(){

return $('.list-shop').position().left;

};

var reAdjust = function(){

if (($('.wrapper-shop').outerWidth()) < widthOfList()) {

if ((Math.abs(getLeftPosi()) + $('.wrapper-shop').outerWidth()) > widthOfList()){

$('.scroller-right-shop').hide();

}else{

$('.scroller-right-shop').show();

}

else {

$('.scroller-right-shop').hide();

}

if (getLeftPosi()<0) {

$('.scroller-left-shop').show();

}

else {

$('.scroller-left-shop').hide();

}

//initial

reAdjust();

var newposition = function(pos0, type){

var pos = Math.abs(pos0)

for (var i=0;i<itemslist['data'].length;i++){

if (itemslist['data'][i] > pos){

if (type=='right'){

if (i == 0) return 0

//else

return '-'+itemslist['data'][i-1]

}else{

if (i == (itemslist['data'].length-1)) return itemslist['data'][itemslist['data'].length-1]

return '-'+itemslist['data'][i]

}

break;

}

return pos

}

$('.scroller-right-shop').off()

$('.scroller-right-shop').on('click', function() {

$('.scroller-left-shop').fadeIn('slow');

$('.scroller-right-shop').fadeOut('slow');

var pos= getLeftPosi() - $('.wrapper-shop').outerWidth()

pos = newposition(pos,'right')

$('.list-shop').animate({left:pos+"px"},'slow',function(){

reAdjust();

});

$('.scroller-left-shop').off()

$('.scroller-left-shop').on('click',function() {

$('.scroller-right-shop').fadeIn('slow');

$('.scroller-left-shop').fadeOut('slow');

var pos= getLeftPosi() + $('.wrapper-shop').outerWidth()

if (pos > 0) {

pos = 0

}else{

pos = newposition(pos,'left')

}

$('.list-shop').animate({left:pos+"px"},'slow',function(){

reAdjust();

});

},1500)

explanation
setTimeout(function() {
$('#product-shop').html('<li>tab1</li><li>tab2</li>'); },1500)
we used the timer, so we can see waiting gif, show. and we load the tabs her.

setTimeout(function() {

},1500)

we used the other timer, so we will see the navigator show up later.

var widthOfList = function(){
              var itemsWidth = 0;
              $('.list-shop li').each(function(){
                var itemWidth = $(this).outerWidth();
                itemsWidth+=itemWidth;
                if (!itemslist['done']) itemslist['data'][itemslist['count']++]=$(this).position().left
              });
              itemslist['done']=1
              return itemsWidth;
           };

this is to calculate the total width of the list, and collect each tab position (for case that you have each tab with different width)

itemslist

it will contain the position of each tab

var getLeftPosi = function(){
              return $('.list-shop').position().left;
           };

to get the position of tab bar

var reAdjust = function(){
              if (($('.wrapper-shop').outerWidth()) < widthOfList()) {
               if ((Math.abs(getLeftPosi()) + $('.wrapper-shop').outerWidth()) > widthOfList()){
                   $('.scroller-right-shop').hide();
               }else{
                   $('.scroller-right-shop').show();
               }

              }
              else {
                $('.scroller-right-shop').hide();
              }

              if (getLeftPosi()<0) {
                $('.scroller-left-shop').show();
              }
              else {
               $('.scroller-left-shop').hide();
              }
           }

this function will used to validate to show left or right scroll button, if there total size of tab is small then we don't need to show the scroll button

of once it goes the left most, we don't need to show scroll left button, and it goes to the right most then we don't show scroll right button

var newposition = function(pos0, type){
               var pos = Math.abs(pos0)
               for (var i=0;i<itemslist['data'].length;i++){
                   if (itemslist['data'][i] > pos){
                       if (type=='right'){
                           if (i == 0) return 0
                           //else
                           return '-'+itemslist['data'][i-1]
                       }else{
                           if (i == (itemslist['data'].length-1)) return itemslist['data'][itemslist['data'].length-1]
                           return '-'+itemslist['data'][i]
                       }
                       break;
                   }
               }
               return pos
           }

this function return the good position for display the move tab

$('.scroller-right-shop').off()
           $('.scroller-right-shop').on('click', function() {

              $('.scroller-left-shop').fadeIn('slow');
              $('.scroller-right-shop').fadeOut('slow');
              var pos= getLeftPosi() - $('.wrapper-shop').outerWidth()
              pos = newposition(pos,'right')

              $('.list-shop').animate({left:pos+"px"},'slow',function(){
                  reAdjust();
              });
           });

add event to scroll right button when click, we calculate new position and move the tabs to the left

$('.scroller-left-shop').off()
           $('.scroller-left-shop').on('click',function() {

               $('.scroller-right-shop').fadeIn('slow');
               $('.scroller-left-shop').fadeOut('slow');
               var pos= getLeftPosi() + $('.wrapper-shop').outerWidth()
               if (pos > 0) {
                   pos = 0
               }else{
                   pos = newposition(pos,'left')
               }


               $('.list-shop').animate({left:pos+"px"},'slow',function(){
                   reAdjust();
               });
           });

add event to scroll left button when click, we calculate new position and move the tabs to the right

Monday, January 19, 2015

SamudBunShe version 1.27

A new version 1.27 is released, this new version is a patch to fixed problem about crash. The crash is report with android report bug function.

You can also update from your android update system or click it below.

SamudBunShe Pro version 2.5

A new version 2.5 is released, this new version is a patch to fixed problem about crash. The crash is report with android report bug function.

You can also update from your android update system or click it below.

Thursday, January 15, 2015

How to sort string in javascript

example If you have an array of string, and you want to sort it.how to do ?

1. simple array

var pets = ['cat','snake','dog'];

pets.sort(function(a, b){

if (a > b)

return 1;

else if if (a.n == b.n)

return 0;

else

return -1;

});

your data will be sort like this

cat
snake
dog

2. table data

if you have data like this table, you want to sort by name

name	age
sammy	12
tony	51
lucy	20

// fill in array

var ages_list = [];

ages_list.push({"name":"sammy","age",12});

ages_list.push({"name":"tony","age",51});

ages_list.push({"name":"lucy","age",20});

//sort it

ages_list.sort(function(a, b){

if (a.name > b.name)

return 1;

else if if (a.name == b.name)

return 0;

else

return -1;

})

this is result of sort

name	age
lucy	20
sammy	12
tony	51

Thursday, January 8, 2015

Detect timezone in javascript

For now I'm working on a project, I need to display the value of date on screen. The value I received , I get it as datetime in UTC value. I need to display as local timezone.

var time_value = 1391187600000;

I check the current timezone by use this method getTimezoneOffset

It is a method of object date in javascript, it return number of minutes different from UTC.

This is what I use

var hplus = ((new Date().getTimezoneOffset()) / 60) * -1);

if (isNaN(hplus)) hplus = 0;

explanation:

new Date()

Need to use method of object date, then create one

new Date().getTimezoneOffset()

Receive -420 (minutes) from this method

(new Date().getTimezoneOffset()) / 60

Need hour so I divided it by 60, in my sample I will get 7

(((new Date().getTimezoneOffset()) / 60) * -1)

As I received UTC, to display I will add 7 to UTC hour, I prefer to get +7
If you are at Arizona in USA, you will received -7

Wednesday, January 7, 2015

Check type of varaiable in javascript

In javascript, you can get the type of variable in javascript with this function:

typeof(var)

example:

var a = 1;

>> typeof(a)

return number

var b = "hello";

>> typeof(b)

return string

var c = new Date();

>> typeof(c)

return object

the sample of useful of this:

var man = {"name":"tom", "age" : 12};

if you want to display it according their type in table.

By String should align left, and number align right.

var html_table='<table><tr>';

for (var each in man){

html_table+='<td>'+each+'</td><td align="'

if (typeof(man[each])=='number') html_table+='right';

else if (typeof(man[each])=='string') html_table+='left';

html_table += '">'+man[each]+'</td>';

};

html_table+='</tr></table>';

after run, you will see the result like this

name	tom
age	12

Tuesday, January 6, 2015

Regular expression in javascript

example of the use, if you want to extract "my name" from this string '"name":"my name"'

var ret = '"name":"my name"';

var rets = ret.match(/name[\\'"+]:[\\'"+]([^\0'"]+)/i)||[,];

you will get rets[0] = "name":"my name"

and you will get rets[1] = "my name"

explanation:

.match is the method of string type. this is actual structure .match(//i)

i -> indicate that we don't care the case

so if you have string = '"Name":"my name"' or '"nAme":"my name"' it will also work

now look at this regular expression

name >> begin of search

we want to find the text that has "name" at the begin of the search

your name : >> this will work
your nnme : >> this will not work

[\\"'+] >> represent next characters after above word

next character must be \ " or ', at least 1

your name" : >> this will work
your name: >> this will not work

it can be more than 1

your name"' :>> this will work
your name\" :>> this will work

: >> represent next character after above pattern

your name": >> this will work
your name""x >> this will not work

[\\"'+] >> represent next characters after above word

next character must be \ " or ', at least 1

your name":" >> this will work
your name: " >> this will not work

it can be more than 1

your name"':" :>> this will work
your name\":\" :>> this will work

([^\0'"]+) >> represent group of text that after above word

it can be any character but not ascii 0 and not " and not '

your name":"sss" :>> this will work
your name":"sss :>> this will not work

it can be more than 1

your name":"s" :>> this will work
your name":"sss" :>> this will work

let's look at the function method

ret.match(/name[\\'"+]:[\\'"+]([^\0'"]+)/i)

>> this will return array if match

>> and return null if not match

ret.match(/name[\\'"+]:[\\'"+]([^\0'"]+)/i) || [,]

>> always return array, if match will return matching array

>> if not match you will get empty array of 2 index

Wednesday, January 21, 2015

Making tab page scroll with bootstrap

1) first create tab.

2. add Cascade style sheets

3) set function, and execute

Monday, January 19, 2015

SamudBunShe version 1.27

SamudBunShe Pro version 2.5

Thursday, January 15, 2015

How to sort string in javascript

1. simple array

var pets = ['cat','snake','dog'];

pets.sort(function(a, b){

if (a > b)

return 1;

else if if (a.n == b.n)

return 0;

else

return -1;

});

2. table data

// fill in array

var ages_list = [];

ages_list.push({"name":"sammy","age",12});

ages_list.push({"name":"tony","age",51});

ages_list.push({"name":"lucy","age",20});

//sort it

ages_list.sort(function(a, b){

if (a.name > b.name)

return 1;

else if if (a.name == b.name)

return 0;

else

return -1;

})

Thursday, January 8, 2015

Detect timezone in javascript

var time_value = 1391187600000;

var hplus = ((new Date().getTimezoneOffset()) / 60) * -1);

if (isNaN(hplus)) hplus = 0;

Wednesday, January 7, 2015

Check type of varaiable in javascript

typeof(var)

var man = {"name":"tom", "age" : 12};

var html_table='<table><tr>';

for (var each in man){

html_table+='<td>'+each+'</td><td align="'

if (typeof(man[each])=='number') html_table+='right';

else if (typeof(man[each])=='string') html_table+='left';

html_table += '">'+man[each]+'</td>';

};

html_table+='</tr></table>';

Tuesday, January 6, 2015

Regular expression in javascript

var ret = '"name":"my name"';

var rets = ret.match(/name[\\'"+]:[\\'"+]([^\0'"]+)/i)||[,];

Friday, January 2, 2015

Happy New Year 2015

I wish all the reader the happiness, More trick and hint will coming. regards

I wish all the reader the happiness, More trick and hint will coming.

regards