There are two ways of doing it, First using the native OS module, Check out the API function available for OS module here https://nodejs.org/dist/latest-v5.x/docs/api/os.html#os_os_platform Basically, all you have to do is to call platform() function from the OS class. Here is how its done Check if its windows operating system, os.platform() Returns the operating system platform. Possible values are,'darwin' 'freebsd''linux''sunos' or.'win32' [crayon-641def3c8f36c556805761/] A bit detailed code version with some other methods from my Windows 10 machine [crayon-641def3c8f375769182521/] Second, using the process's platform property, os.platform() basically returns the values of process.platform property Above logic can be rewritten as [crayon-641def3c8f376427770288/] I hope this helps Jas … [Read more...]
NodeJS How to determine or check for current OS (Operating System)
How to convert a string to equivalent integer value based on ASCII codes in Javascript
Hi Guys, Here is a quick tip if you would like to convert a string into a sum of ASCII codes for all characters Function you can use For ES5: [crayon-641def3c8fb83620163371/] We can do equivalent in ES6 in [crayon-641def3c8fb88037684148/] There are times when you would need to know the integer value of the string, be it in sorting or any other scenario, this function will help you out. If this code can be improved. please do let me know, I hope this helps, … [Read more...]
[Solved] bootbox.js show ajax html data inside the dialog
Hi Guys Just a quick one here if you are using a library called bootbox.js in your project. This library does not make ajax request automatically if you wish to load some data from your server to show within your dialog window. Instead, you can do something like this. Example below assume that you are using jQuery, but logic still applies to other similar libraries too. [crayon-641def3c8fd3a481947019/] You can replace [crayon-641def3c8fd3e589940848/] with you own custom path and make other changes. It can take a while sometimes to get the data back from the server. So its always a good idea to show a preloader while your request is being handled by the server. I hope this helps. … [Read more...]
5 best jQuery radio button and checkbox styling plugins
Sometimes its good to utilize great work done by different authors working in different fields rather than reinventing the wheel again and again. There are awesome Git projects that people are working collaboratively to produce something really good and then there are independent authors too. In this post I will highlight some exceptional jQuery plugins that will transform your old styled checkboxes and radio buttons to something that looks cool, at least if you see from my eyes :) Anyway lets get started iCheck I am a huge fan of this plugin and flexibility it offers. It also comes with a few themes that you are able to choose from. You can get iCheck from https://github.com/fronteed/iCheck Demo can be viewed from http://damirfoy.com/iCheck/ At the time of writing there are 8 contributors to this project. uniform very flexible, and CSS so simple that you can style yourself to suit your website theme. And it actually works with pretty much all form elements and is available under MIT license You can get uniform from https://github.com/pixelmatrix/uniform and demo is included within the zip file that you will download. At the time of writing there 23 contributors to this project. prettyCheckable As the name states, it will transform your radio buttons and checkboxes to look, let me say very pretty. I like this plugin, good thing is that it is compatible with IE7+ yay! You can checkout demo for this plugin here Project is hosted at https://github.com/arthurgouveia/prettyCheckable jQuery Radiobutton This is also a good option if you like something that is simple but stable. CSS styling is just way too simple. Also if you are looking to transform your radio buttons to iPhone styled switches Project is hosted on https://github.com/tomekwojcik/jQuery-Custom-Radiobuttons And demo can be reached here ezMark This was the first one I have ever tried for prettifying my radios and checkboxes. … [Read more...]
ExtJS Grid Multi-line rows
Yes, I heard you saying why there is no option or setting to force cell to wrap. Good news is that its very easy to achieve this. Without me wasting much of you valuable time lets jump straight to the point. Lets form a grid first. ExtJS Grid code [crayon-641def3c901b0323369284/] Now when you look at the grid you will get something like this The Markup [crayon-641def3c901b5706841028/] Above element is necessary because we are rendering our grid to #playcontainer. Outer #myGrid is there for a reason. I will tell you in a bit why. What we get because of above is something like this Now lets add a very basic CSS rule as shown below [crayon-641def3c901b7837736947/] When we add above CSS rules on our page lets see what difference it will make That made a a huge difference. And we get what we expected. Anyway this solution will lead to affect all grids but making a very basic change to our CSS rule we can overcome this [ltu] As you see that in our markup we have a parent container with ID: myGrid so lets utilize that [crayon-641def3c901b8801230832/] [/ltu] And that is it. Grid inside our marked id myGrid will be the only one that will get affected by our CSS change. Demo Demo is available for you to have a look from this link If you know something better in terms of solutoin then do leave your solution in your comments so that other readers can benefit from it. I hope this helps. Cheers, … [Read more...]
How to detect Facebook Unlike
Hi Guys, Let me show you how to detect the Facebook Unlike. Without wasting much time lets jump straight to the point. First up is to get our markup set up The Markup [crayon-641def3c90689669910805/] Above is just basic markup that is required for your Like button as picked from the Facebook docs. Next up will be converting our above container to a Facebook like button, here is how its done The JavaScript FB.init is the main thing that we should be concentrating on and for us the most important properties will be appId, xfbml This code should be placed directly after the opening tag. [crayon-641def3c9068d716052778/] FB.event.subscribe("edge.remove",function) is the magic bit. What we are telling FB API is to tell us if user have removed his/her Like for the current URL in href attribute The Demo Demo uses my jQuery plugin to generate Facebook Like buttons DEMO Most notable part as stated above is to use fbxml so that we can make use of event subscription. Normal iFrame code doesn't seem to work with events and stuff. Important: We can only detect user action on you FB Like button if that happens on your website. If user use their Facebook page to administer their likes and unlikes, there is no way we can tell then. Resources https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/ I hope that this post was useful. As always if you have anything to add, comments are open and stage is all yours Cheers … [Read more...]
jQuery plugin to create Facebook like button with callabacks (Like and Unlike)
There are times when you want to know if user Facebook Liked or Unliked your page. Facebook provide an API for that, also there are times when you want to generate Like button on the fly rather including the code upfront in your HTML file. This requirement can be result of N ideas. My first attempt for generate Facebook Like buttons on the Fly where user/developer is able to detect if User Liked or Unliked your page is below Without wasting more of your precious time lets jump straight into our code Plugin Name jcFacebookLike.js The Markup Here is an example markup required to use this plugin. [crayon-641def3c9089c080270402/] The Plugin Code You should always get the latest version from GIT. The below source can be dated in many ways, Link to GIT hosted files is provided at the end of this post [crayon-641def3c908a0646728387/] Usage Here is one example usage [crayon-641def3c908a1208328469/] Donate Yes! It take time and effort so please consider donations You can choose your own amount. Developing this plugin like these toke a lot of effort and time; days and weeks of continuous voluntary unpaid work. If you like this plugin or if you are using it for commercial websites, please consider a donation to the author to help support future updates and development. Main uses of Donations Web Hosting Fees Cable Internet Fees Time/Value Reimbursement Motivation for Continuous Improvements Demo If there isn't any demo, it doesn't work. So here is a link to demo to make sure it works http://jaspreetchahal.org/examples/jquery-examples/likes/jcFacebookLike.html Get Facebook API key https://developers.facebook.com/apps License MIT/GPL Fork it on Git https://github.com/jaschahal/jcFacebookLike I hope that this plugin will help you. Just in case if you find a bug or you can improve the above code please leave your comments. First attempt does always have room for … [Read more...]
How to Lighten or Darken HEX or RGB color in PHP and JavaScript
Hi Guys, Just a thought and following up on my previous post is a function that you can use in your PHP code to brighten or darken a HEX or a RGB color, For color manipulation in JavaScript you can look at this cool library https://github.com/jfsiii/chromath PHP Function Below is the function you can use to make on the fly adjustment to colors [crayon-641def3c90d4d047608302/] For sure above function can have less lines but for simplicity and readability I think putting it as above makes sense. Usage - Lightning Colors [crayon-641def3c90d52608918275/] Usage - Darkening Colors [crayon-641def3c90d54755360143/] Now lets check the JavaScript implementation of this function. JavaScript Equivalent Function For Lightening and Darkening HEX or RGB Colors You can definitely do better job with shift operators but I always think of readability of code first. The code below can be shrunk but at least you get the Idea what's happening in a typical way [crayon-641def3c90d55451237522/] Usage 1 - Lighten [crayon-641def3c90d56543020969/] Now lets check how we can use the same function to Darken our Hex or RBG colors Usage 2 - Darken [crayon-641def3c90d5c920150855/] I hope this helps. Got a better implementation of these function. I would love to know and this will help my readers too. Share it, leave your comments Cheers … [Read more...]
jQuery Plugin to Generate Google plus one +1 buttons
Hi Guys, For a new project of mine there were couple of requirements which gave birth to a couple of useful jQuery code snippets or in other words plugins. One of them is called jcPlusBtn.js This is a little jQuery code that you can use as a plugin that will page Google Plus button on any HTML element, callbacks are supported. Lets get started The jQuery Code [crayon-641def3c91214450277077/] The Markup What we need is pretty much a DIV or any other container element to place our Google Plus button. [crayon-641def3c91219031765239/] Options [crayon-641def3c9121a076760975/] Usage This plugins is rather easy to use and an example of this is shown below [crayon-641def3c9121c593877891/] Its that simple actually. Demo Nothing is complete without a demo. See this plugin in action here http://jaspreetchahal.org/examples/jquery-examples/likes/googleplusone.html Donate If you like this Plugin, please consider donating You can choose your own amount. Developing this plugin like these toke a lot of effort and time; days and weeks of continuous voluntary unpaid work. If you like this plugin or if you are using it for commercial websites, please consider a donation to the author to help support future updates and development. Main uses of Donations Web Hosting Fees Cable Internet Fees Time/Value Reimbursement Motivation for Continuous Improvements License This plugin is available under MIT license You can read it here http://opensource.org/licenses/mit-license.php Download Code is hosted on Google Code and you can find it here https://code.google.com/p/jcplusbtn/ There were couple of more things that I would have liked to do with the callbacks, but I have left it to you to handle the callback properly. I hope that this helps, Don't forget to donate if it does :) Cheers, … [Read more...]
Image blur using canvas html5
G'day, While I was looking around for something with my not so relevant queries, I found StackBlur which does pretty good Job to blur an Image by introducing a Canvas layer on top of the Image. I guess it make sense to do it that way. The results is something that took me by surprise. They are pretty close to what we are used to in Photoshop filter called Gaussian blur. Let me take you through this and we will also build a jQuery plugin to generalize few things in the end. A simple functional Image blur example can be reached from the link provided below Demo You can view the demo here http://jaspreetchahal.org/examples/jquery-examples/jblur/image_blur_example.html Now that you've seen the demo lets cover it in detail. First get hold of latest StackBlur from here Scripts and Styles Below are the scripts and stylesheet that you will need to recreate the example [crayon-641def3c913fb063124847/] [crayon-641def3c913fe317998968/] The HTML [crayon-641def3c913ff525902735/] [crayon-641def3c91400153175300/] The above stuff can be reduced to just couple of lines of code, but I just copy pasted from my code when I was trying to do a few bits and pieces but you'll get the Idea. The CSS Beautify it a little bit, but thats just me, for others I am spoiling the look and feel :) The JavaScript Below is the Javascript that we need to introduce a slider and stuff [crayon-641def3c91401470374817/] What above code does is, it is introducing a slider and binding the stackBlurImage() function to the slide event so that our slider value become the blur radius. Above works but what if we have something similar to this [crayon-641def3c91407086973323/] Well thats exactly what we will be looking at next, New revised Markup [crayon-641def3c91408722712527/] Our Little jQuery Plugin Code Please note that this plugin does not auto generate the slider control, slider control that is used in the example above, it from jQuery … [Read more...]
Recent Comments