Detecting IE10 and IE11Browsers

Since IE10, browser detection tags such as (.ie or .ie9 etc) are no longer support to identify the version of the IE browser. As a matter of fact, IE is no longer even recognized as an IE browser. Instead, if you search for the User-Agent in your request header, you will see that IE10 and IE11 have a User-Agent of a Mozilla Browser: “User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko”

ie11

I thought that this means, all rendering should look like any other Mozilla rendering (Firefox). However, it was not the case. I needed to specify a certain css styling only for IE10+ browsers and could not seem to find a way of doing so without using JavaScript.

Paste the following code between script tags at the end of your page before the body closing tag:

if (document.body.style["msScrollLimit"] == undefined){
//NOT IE10+ Browser
alert("You are not using IE10 or IE11");
}
else if (document.body.style["msScrollLimit"] != undefined){
//IE10+ Browser

    //msTextCombineHorizontal is a css property only accepted using IE10+
if (document.body.style["msTextCombineHorizontal"] == undefined){
//IE10 Browser
alert("You are using IE10");
}
if (document.body.style["msTextCombineHorizontal"] != undefined){
//IE11 Browser
alert("You are using IE11");
}
}

View Live Demo Here.

Goodluck 🙂

Node JS hello World Quick Tutorial

Why use Node.js ?

If you have been working on the web for a while, you definitely had to use JavaScript at some point. Now, if you have been using JavaScript for the front-end, we need to switch to some other language when working on the backend. This switching might be tiring or confusing. Node is literally a server-side language using JavaScript. That means that both the front-end and the back-end can be created using JavaScript, eliminating the switching hassle.  So, especially if you enjoy working with JavaScript, Node is for you. Node has been built on JavaScript since it has closures and first-class functions which makes node allowing strong event-driven programming. In fact, Node is event-driven and thus the flow of execution is determined by the events handled by event handlers and callbacks allowing for asynchronous programming.

Installing Node.js

Visit the node.js website and click the “Download Button” under the big Install Button.

1.download

Depending on what type of Operating System you are using, select the appropriate type. In my case, I have a windows 64-bit, so I have downloaded the first (msi) download:

2.download-type

When download is complete, run the file and keep clicking “next” until installing starts. Click Finish when install is complete.

Testing Node

Lets just make sure Node is successfully installed.

To launch node – Open the cmd (command-line) and type:

node                                                       –             this is the command given to launch node. A new line should appear with the symbol “>” as shown below

3.node

To close node you will need to press “CTRL + C” and it will ask you to press “CTRL + C” again to exit. Once you press “CTRL + C” twice, node will exit.

4.node-quit

Running Hello World using Node

Now lets create a simple “Hello World” print using node. Open the cmd (command-line) and type:

mkdir HelloWorldFolder             –            this will create a new folder named “HelloWorldFolder”

cd HelloWorldFolder                     –            this will change directory and enter the new folder “HelloWorldFolder”

Now open the new created folder in windows form if you feel more comfortable and create a file name “test.js”

Open the new file using a simple text editor and paste only the following to display Hello World on-screen:

// Call the console.log function.
console.log(“Hello World”);

notepad

Back to command line to run the js file and type:

node test.js                                      –             this will run the file “test.js”  in node

As you can see below node is running the js file and printing “Hello World” on the screen.

5.run-node

Pretty quick and easy.. enjoy 😉

Solved: Bootstrap 3.0.0 responsive navbar toggle not expanding/collapsing

I have recently downloaded bootstrap and needed to use a fixed responsive navbar at the top. When the window was small, the navbar was responding successfully as in only the logo and the toggle bar were showing rather than all the menu items. However, when clicking the toggle button, the menu items should have expanded down but instead nothing was happening.

I researched the issue on Google (as usual) but could not find a solution. Then I realised the Bootstrap needed jquery which I was infact using. However, I was not using the latest version. Therefore, I downloaded the latest version and tried it out. This seemed to have fixed my issue.

Hope it was of any help for some of you out there 😉

Customized Input Type Range

What and Why?

So, here I am using the input type range to create sliders. One day I needed to use a range for a volume bar and could not find a decent vertical range customized with css so I decided to create one and share it with all of you. I was using the default setting “appearance: vertical” but was not working properly so I came up with an idea to use CSS3 transformations. Here I have created 8 different sliders, 4 horizontal and 4 vertical.

Before starting, you can take a look at the DEMO .

In order to create a customise your range, first create an input type range element given a min and max of 0 and 1 with a stepping value of 0.1. We also need to assign the class “range”:

<input type=”range” class=”range”  min=’0′ max=’1′ step=’0.1′ value=’1′ >

In your style sheet or between the <style> </style> tags add the below css classes explained using comments:

Continue reading