Category Archives: Public

for public access

jQuery Toggle/Manipulate FontAwesome 5

FontAwesome is great, but after upgrade to 5, there are prefix types (far, fas, fab) added and then the way to render with SVG/JS to make its mess.  There are 2 types of use, but SVG/JS is way better in advance features to decorate the icons.

Not sure if it’s only me that seems the manual/instruction on how to manipulate the font awesome using SVG/JS does not work as promise. I have to figure it out myself.

So here is my solutions

This is jQuery toggle function to change from <i class=”fas fa-plus-circle”></i> to <i class=”fas fa-minus-circle”></i> icon

jQuery('.btn').on("click", function(){
   jQuery(this).find('[data-fa-i2svg]')
       .attr('data-prefix', 'fas');
    if (jQuery(this).find('[data-fa-i2svg]')
       .attr('data-icon') == 'minus-circle') {
         jQuery(this).find('[data-fa-i2svg]')
           .removeClass('fa-minus-circle')
           .addClass('fa-plus-circle')
           .attr('data-icon', 'plus-circle');
   }else{
         jQuery(this).find('[data-fa-i2svg]')
           .removeClass('fa-plus-circle')
           .addClass('fa-minus-circle')
           .attr('data-icon', 'minus-circle');
   }
});

Explanation:

  1. There are 2 elements that shared ‘data-fa-i2svg’ attribute (<i> and <svg>)
  2. You have to find the element with attribute ‘data-fa-i2svg’ then  add/remove class with original FontAwesome class which starts with fa-xxxxx.
  3. Change the attribute ‘data-icon’ to the FontAwesome class (eliminate the fa- prefix)
  4. Last thing, change the attribute ‘data-prefix'  to make it correct prefix type for each icon.

 

Bootstrap DateRangePicker & FancyBox

Lately I have a messed problem that daterangepicker not function correctly on fancybox v. 2.1.5 (modal).

DateRangePicker w/ FancyBox
After fix problem. it works correctly

The problem is daterangepicker works fine on parent page, but not work on fancybox dialog. The calendar not showing, no error in console. I guess there is something not in the right place.

My keywords to searching for the answer  is “bootstrap daterangepicker fancybox” and not find any related answer so I try myself to use option “parentEl” of daterangepicker which seems for something and still not work, apparently I don’t know how to use it since there is no example or much explanation.

I’m finding a solution for a day, without any of daterangepicker explanation on the document how to use the option “parentEl”.  Not even mention that it is for use with modal. Would you say poor documentation?

The very short description says:

parentEl: (string) jQuery selector of the parent element that the date range picker will be added to, if not provided this will be ‘body’

So after reading the problem all over the internet, found that the modal have to use option “parentEl” but still don’t know how since there is no example. I have tried it myself several ways.

Here is my solution

add a script in the ajax file that loads inside fancyBox so it will be loaded right after the form.

<input type="text" name="date" id="date" value="" class="fancyBoxDateRangePicker">


$(document).ready(function(){
$('.fancyBoxDateRangePicker').daterangepicker({
"parentEl": ".fancybox-overlay",
});

The input with daterangepicker has a css class name “fancyBoxDateRangePicker”  (use your own) and the class “fancybox-overlay” is the default css class in fancyBox so you don’t have to do anything with that.

Then after you use this, still one more problem that the calendar layer will be loaded under the fancybox modal so you have to add style to override.

.daterangepicker.dropdown-menu {
max-width: none;
z-index: 99999 !important;
}

Then one more problem, if the parent screen scroll, you can add more style to fix it

.fancybox-lock {
overflow: visible !important;
}

 

Hope this will help your problem 😀

Color Name from Hex to Color

I have to implement the color extractor from image so I have too look at the php script that can extract color in image to hex code, but then need to convert hex or rgb to human color name. So this is useful.

In case you are looking for this. It’s an array of color name matching with RGB in format

$colors = array(
"Acid Green" => array(176, 191, 26),
"Aero" => array(124, 185, 232),
...
...

Look at this link: http://pastebin.com/KsPbPU1j

jStarbox Does Not Show Stars on Hidden Tab

If you are using jStarbox so you know what I refer to.

I have downloaded Flat Bootstrap Responsive Website to tried jStarbox and was on the UI implementation. It was so messy because I have it on my hidden tab. After switch the tab to appear the rating stars not display as expected. I spent about 2 days for this as I am not that good with jQuery and Javascript much.

jStarbox

The visible tab is fine, but the hidden tabs seems has problem. I am not sure because of the design or the jStarbox does not have this prevention.

It appeared that .colorbar not set to the size of .positioner after visible. (.positioner still have width of 0px) here is what I do.

starbox.starbox(‘setOption’, ‘average’, averageVal); //call method to reset the average value

var size = 85; //manual fixed the size

positioner.children(‘.stars’).children(‘.colorbar’).css(“width”, (averageVal*size)+”px”); //add style

To try jStarBox Click here https://github.com/sabberworm/jStarbox

Recruit 1 Web Graphic Designer & 1 PHP Web Developer


I am recruiting new member for IT team. 1 Position of Web Graphic Designer, 1 Position of PHP Web Developer
I really like someone to join the team. Please let me know if you are qualify.
General Qualification:
1. Age 26 – 35 years old
2. Thai nationality
3. 2 – 3 Years Experience
4. Fair English communication

Salary is 25,000 Baht – 40,000 Baht depends on your experience.
Our office located in Silom, Bangkok. Easy to commute by BTS/MRT

More qualification is after the jump or download this recruitment description here
Continue reading Recruit 1 Web Graphic Designer & 1 PHP Web Developer

Testing New Invoice Format for SPM


The project I am talking about is an online/offline payment solutions for Australia merchant. BPAY and PostBillPay is very popular to merchant in Australia. After this patch done, I will expand the project bigger and that would effect a lot of product of our company. This is including accept credit card and all will need PCI Compliance. None of Thai Banking doing this or very few.

This time, I will need to patching the invoice generator to fix the bug on the first of August. All the tests are good and believe tomorrow test will be good. I was on this problem for about 2 months already. The first month I have to fix the logic of wrong fee calculation and that was fixed. Now is the patch for the new invoice that will display the correct amount of fee that charge to clients.

Sometimes, working on financial stuff is too scared for wrong things happen, but after fix and test for many times that could make us confident for the results. Tomorrow too, I am very confident it would pass very easy.

Review Text-Link-Ads


I have use Text-Link-Ads service since April 2007 and found out that it worth to use their service. From low and unstable earning website, now it is almost stable earning.. I earned every single month until now $1,326.50 already.

Let me describe what is Text-Link-Ads in my opinion:
Everyone in this market know that making a website need advertisement or sponsors. Either image/flash/popup or intelligent relevant ads like Google Adsense… there is a very simple one…. very old type of advertisement… It is Text link advertisement.

Text-Link-Ads is a company that publish text links on their network via XML which cached on the publisher website. How much the quality of website you have, how much you earn from there.

How does it works?
(Expert can skip this paragraph) For who is new and not understand this.. this is a very clear explanation. TLA’s text links (now I use a shorthand word) will be called from your website script either php/asp or other server side script and will provide a small streaming text in XML standard format, then your website script will save it to your website space (which called cache) in a limited time (your website script will update this cache often daily) and then display text links on your webpage. (You are not a programmer? oh no worry, TLA provide the script as well.. there are a plug-in for blog like wordpress and so on)

How much I can earn?
This really depends on how much quality of your website has and how long your website has published on the internet. Let’s look at my case. At april 2007, my website is 7 years old. I would say my website has unique contents. I have not much earning on the website either Google Adsense or any ads network, but it’s nothing to lose to add another ads that doesn’t make your website crap, isn’t it?
TLA allowed you to place up to 10 spots of text link so the maximum is 10 links multiply with the earning for each link. I sell about $25 for each link (not yet deduct TLA commission) so the maximum is $250 each month (If I can sell all 10 spots) In the reality, you could earn maximum about $100 a month for just 10 text link, isn’t that great?.

Apply?
You first need to submit your website so they can review if your website has good quality, but hey!, you have nothing to lose, just submit it. Apply here.

At first, I don’t even think I could have them approved, but I did it. You might have to wait for 3 – 4 months before you could get a first advertiser. If you have a great site, you would get it right away on the first month. TLA pays via PayPal (no fee) and the other ways, so get start and earn money for your website.

From the screenshot above, here is a TLA pdf statement that you could see it in detail. Please remember, this is only 1 website earning!!

and next post I will review another ads network which is invited me from TLA and it is as good as TLA and earn even more sometime. Again.. I wanna tell you it is only for one website.. If you have more quality website, you earn more.