Tag Archives: javascript

Work stuff

DropzoneJs 5.5 & Thumbnail Problems

Leave a comment

DropzoneJs is a very good JavaScript upload script and flexible.

Too bad, upgrade is something a bit tricky and make existing script not work.  Well I would not complain if there is a good document, but there is not.

Problem with thumbnail not display when retrieve existing file. It used to be function createThumbnailFromUrl.  The parameter has changed so this solution does work

dz is your Dropzone object. The key is to have dataURL set on your file.

var thumb = { name: filename, size: 0, dataURL: ‘/upload-directory/’ + ‘filename’ };
dz.files.push(thumb);

// Call the default addedfile event handler
dz.emit(‘addedfile’, thumb);

dz.createThumbnailFromUrl(thumb,
dz.options.thumbnailWidth, dz.options.thumbnailHeight,
dz.options.thumbnailMethod, true, function (thumbnail) {
dz.emit(‘thumbnail’, thumb, thumbnail);
});

// Make sure that there is no progress bar, etc…
dz.emit(‘complete’, thumb);

Work stuff

jQuery Toggle/Manipulate FontAwesome 5

Leave a comment

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.

 

Work stuff

jStarbox Does Not Show Stars on Hidden Tab

Leave a comment

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

Site Security, Work stuff

Momcashblog.com Malware Attack

Leave a comment


This is a second time that my site, KrpMag.com (It is currently reported and I am appealing with them so I am not going to make a link since google will take it as a relationship between malware sites), has been report to StopBadware.

The relationship on “Reported Attack Site!” said I have a malware that hosted on momscashblog?!?!? WTF I have no link or relationship with this site before. I have scanned my whole files and can’t find any virus or trojan. Fortunately Google webmaster tool has a lab tool (this time) so I can see what is the malware!!!

My website must got some kind of hi-jack on wordpress that I was trying to update to the new version everytime, but for the plug-ins, you wouldn’t know which one has a good protection. The best of protection is.. make the file un-writeable on those plug-ins.

The malware look like this.

It was injected in plugin name “wp-polls” and I have the new version downloaded from developer site and couldn’t find that part of script in it. So this has been hi-jack by WordPress hole since November 2009, I am sure.

Once the javascript encode and write to the page look like this

So this will produce a hidden-iframe that point to momscashblog which has been reported Malicious software includes 3 trojan(s), 3 exploit(s), 1 scripting exploit(s).!!!! OMG

So, you must use Google Webmaster Tool or findout where is the suspicious javascript/iframe injected in your WordPress directory. I hope this help.