Stop ScrollBar Covering the Content – Internet Explorer CSS

While designing one of my wordpress theme (not released yet), I have realized that Internet Explorer is playing something annoying. It’s vertical scrollbar is overlaying the content and I don’t want that.

Stop ScrollBar Covering the Content

Do you think it’s a bug ?

Well, actually not. It’s not a bug, Internet Explorer has a css property called -ms-overflow-style which controls such overlaying behavior. For most of the webdesigns it’s a cool property. Scrollbar is not staying there all the time, it appears only when mouse enters the viewing area, otherwise it’s hidden. But when it shows up it has to overlay the content otherwise content has to make space for the scrollbar. That sounds reasonable.

What if you don’t want such effect and want scrollbar keep staying (not overlaying the content at all and not hiding either) always. I mean the normal way just like other browser treats the scrollbar.


Add this CSS into your css file:

html {
-ms-overflow-style: scrollbar;

Scrollbar will comeback to it’s place (No more hiding). For more information you can always read about the -ms-overflow-style property.

Optimize jQuery to Improve WordPress Speed Performance

As a wordpress theme developer I understand the importance of website speed. It not just increase your chance to be liked by google or other search engine but creates credibility among your users. If you have a nice wordpress theme then it is very much possible that it must be using jQuery to do all those animated stuff and DOM manipulation.

Yes, DOM manipulations are expensive in terms of performance. If there are lot of DOM insertions and manipulations then your site might end of with poor performance.


I am going to discuss some basic jQuery code writing ways we all know but don’t follow. Specially WordPress Theme developers, they must write better jQuery to make awesome theme.


Loops are necessary and can’t be ignored.

$.each(arrayToIterate, function(i, arrayElem){
     var newItem = "<li>" + arrayElem + "</li>";

Above code has a performance problem. Suppose array contains 100 elements then this code will endup appending 100 times into the DOM.

We can optimize this code by collecting all the DOM insertions into one variable and then append that variable for just once. Of course it will depend on situations, but that’s the basic idea behind it.

var collection = ""; //creating a variable
$.each(arrayToIterate, function(i, arrayElem){
     collection += "<li>" + arrayElem + "</li>";

There can be other variants of this version but I think you get the basic idea.

Caching Length of Loops

As I have said, you can’t ignore loops, here is another improvement.

We often do this:

for (var i = 0; i < customArray.length; i++ ){
     //Do our stuff

Can you see the problem here !! Calculating unnecessary array length with every iteration.

var arrLength = customArray.length;
for (var i = 0; i < arrLength; i++ ){
     //Do our stuff

Use detach()

detach() is performance booster. Know the difference between hide(), remove() and detach(). says “Remove the set of matched elements from the DOM.” But keep it’s integrity i.e. all the attached events / jQuery data will exist. Useful when you have to reinsert the element again in DOM.

detach it. Build it or Modify it and reinsert it into dom. That way you will touch DOM just twice. That’s why I call it performance booster.

var table = $( "#myTable" );
var parent = table.parent();
// ... add lots and lots of rows to table
parent.append( table );

Check for Absent Elements

There is nothing bad in bad code but morality says it’s good not to do bad things. Check whether your selected elements do exists or not. If they don’t, then why bother spending valuable processing cycles.

//It runs many functions since it get to know
//there is nothing in the selection.


var dontShow = $(".dontShow");
//Checking elements existence.

Better Selection Optimization

Use ID based selections with .find()

$(“#wrap .white”); // Ok Ok

$(“#wrap”).find(“.white”); //Very Fast

ID based selections are handled by document.getElementById() which is fastest.

Be Specific on Right Hand Side

$(“div.wrap .white”); //Less Optimized

$(“.wrap td.white”); // Better Optimized

### Try less specific on Left Hand Side.

Don’t be More Specific

$(“.wrap  td.white”); // Less Optimized

$(“.wrap td.white”); // Better Optimized

### Drop middle selector.

Universal Selectors are Very Expensive

$(” .wrap > * “); // Poor Selection

$(” .wrap “).children()  OR  $(“.wrap”).find() // Better Selection

Check Scripts and Styles Being Used on WordPress Posts Pages

Today, I have uploaded a plugin called “What Scripts Styles Debug Bar” to wordpress plugin directory. It’s a tiny plugin to help all the WordPress Developers. When you have no clue about the scripts running on any page or post, this plugin can be handy.


Scripts Styles Debug Bar (WordPress Repo)


It will tell you all the scripts being run by wordpress. And out of those scripts which are being used on current page. It tells everything about stylesheets too. There are other plugins which displays the scripts running on a page/post but not all other scripts. Sometimes we need to know more and not just scripts running on a page/post.

what style scripts debug bar plugin 1

Please take a note that “What Scripts Styles Debug Bar” plugin depends on debug-bar plugin. You need to install debug-bar plugin to take advantage of our extension.

It shows a check-mark to indicate which are the scripts or styles are being on this page/post along with other useful details. Like dependencies of the script, version number of the script, script handle and script direct url.

( If you like to contribute, we are always available on github.)

Which WordPress Theme Should I Use And Why – Wondering

Get any theme and use it ! No matter whether it’s good or bad. Good or Bad !! What do you mean by that?
This question can be asked in many ways. I want a good design. I want a good functionality. I want fully responsive theme (wait a minute if you don’t know what responsive means). Aaaaa… I want …. say simple theme but it should look good. Every person thinks differently and that defines their need.


Think of an movie actor. A wordpress theme should be like that.

It should look beautiful, perform seamless and blend nicely on every platform (Mobile, Tab or PC – Yes, Responsive)

Need Vs Everything

Sometimes our need is something and we shop something else. Same thing applies when selecting a wordpress theme. Make an habit (I know I am asking too much, but this will benefit you for the rest of your life) to crosscheck your need just before checkout.

Make Quick Guidelines

Guidelines are awesome to choose the right product. Make quick guidelines just before diving into the confused web. Guidelines will be life savers.

Design: Simple, stylish, newspaper type, masonry, business style or just fun.

I know this is difficult but give it a minute and think about the genre of your site. As soon as you identify the genre, things will become easy to sort things out. For example if you are going to start a political blog then you can look for newspaper styles or masonry style or simple blogging theme.
Functionality: Not that difficult but i often found this step tricky. Sometimes we get confused between similar type of functionality. Like which slider should I use or I think sliders are just not my type. It’s entirely up to you to choose the functionality you need and then start looking for it.

If you have a plan to sell something then make sure theme supports woocommerce or other eCommerce platform.


Plugins : I know this is beyond the scope of this post. But lot of premium WP themes comes with bundled plugins. You should check them out. Most of the times they are part of the genre but if you are liking the design and not planning the advance usage then it’s a bad idea to pay extra. If you really dying for the design then paying some extra is like appreciating the designer.

Free Vs Premium


I Love Freebies and I bet we all do. But not when I need professional service. Wither do it yourself because you know what wrong have you done or buy pro stuff.

Free Themes are good for testing and learning but not when you are going live. There are lot of places you can buy premium theme. I am not going to name one because no one is paying me for that. Haha!! Jokes apart internet is full of premium stuff. Give it a try on google.

WooCommerce Remove a Category from SHOP Page

WooCommerce is an exciting plugin. It gives you everything you need to run an eCommerce site. And when it’s all about business you need the best solution. As I always advice that you should not make permanent edit if you are not sure what you are doing. If you have any doubt or unsure about something then it’s always good to consult an expert.

Moving back to topic. If you need to hide a specific category from WooCommerce shop (Yes, the Product Page) then you can use this code: I’ll explain it as we follow.

add_filter( 'get_terms', 'get_subcategory_terms',10,3 );
function get_subcategory_terms( $terms, $tax, $args ) {
	if( is_shop()){
		foreach($terms as $term){
			if($term->slug == 'us' || $term->slug == 'jeans' ){

				$new_terms[] = $term;
		return $new_terms; 
	return $terms;	

FAQ About the code above

Where am I supposed to paste this code.

You should paste this code into your theme’s functions.php file.

What changes should I make in the code?

Since the above code is custom code and few things will vary depending upon your WooCommerce terms. In the code above look at this line:

if($term->slug == 'us' || $term->slug == 'jeans' )

‘us’ and ‘jeans’ are the categories which are supposed to be removed. If you like to remove just one category then you can remove the pipe sign (||) and remove the second condition like this:

if($term->slug == 'us')

Easy enough!

Code Explaination:

Although not everyone needs explanation but as I always like to educate my client (if they like to) about what and how something is being done on their site, so here it is:

First line is about adding a filter to get_terms. More about Filters.

It means whenever terms (category) are being fetched run a custom function. In our case it is : get_subcategory_terms.

And what this function doing is: If the page in focus is shop page (is_shop) filter the terms and remove desired categories from the array. Then return the array back to the filter for further processing.

Hope this will help some!
No one is perfect. If I have missed something or code is not working for you or if it helped you then do point out. 

What To Do With Old Xbox 360 or Playstation 2

Have got a new gaming console and now you are scratching your head for what to do with this old gaming junk. Hey, they were not junk a day ago and now suddenly you are reading this article. Well, it happens with all of us. That is why we have got some creative uses of your old gaming console.

Gift It To A Low Tech Person

imageNot everyone loves technology upto a crazy level like youngsters. You can gift your old Xbox or Playstation to someone who is still fighting with touchscreen phones. Although gifting an old stuff is not good to everyone but you will surely find someone ( else donate it to orphanage ), teach them how to use it and amuse them with nice old playstation 2 games / xbox games. If you think that’s not a good social convention then here is the next tip too.

Xbox or Playstation for Watching Movies (DVD Player)

If you have a second TV but no DVD player then use your old playing machine to serve this purpose. No need to buy a separate DVD player and save money to buy something else like new game disc.

Watch Youtube, Netflix Videos (Streaming Player)

If you are not satisfied with the DVD option then you can extend the video watching with youtube, netflix etc. You will find dedicated apps within your xbox like HBO Go app. Just subscribe and watch. Youtube is full of videos and with Xbox you can enjoy them on your TV. Big screen haan!!

Get Some Money (Sell Playstation / Xbox)

ebay cash xbox

If you think that none of the option is working for you and you just need your money back then simply sell it on ebay and old games DVD’s. You will get some cash which can be used to buy new blue-ray games discs which can be played on your new love.

Dlink Router 3G Configuration for MTNL BSNL Airtel


In one of my previous post I have dealt generic 3G configuration of D’link Modem/Router (2750U) for any SIM. But lot of people are mailing me to write specific SIM configuration. That’s is why this little repetitive post is being written.

I will not deal with all the basic configuration here, for that look at d’link 3G configuration post.

Assuming that you have read the suggested post and ready to tweak it for your SIM. If you will notice that there are just few things which differs from sim to sim. In previous post’s step 7 you need to make sim specific changes.

For MTNL Users:

Account : mtnl

Password: mtnl123

Dial_Number: *99# (MTNL says that you can leave it blank too)

Net-Type: TD-SCDMA

APN: (Both for Delhi/Mumbai)

For BSNL Users:

Account: bsnl

Password: [blank]

Dial Number: *99# or *99***1#

Net-Type: TD-SCDMA

APN: bsnlnet

NOTE: This BSNL APN is valid for these states: Haryana, Punjab, UP(East), UP(West), Himachal Pradesh, Rajasthan, Jammu & Kashmir, Jharkhand, Bihar, Kolkata, West Bengal, Orissa, Assam, North East, Adman Nicobar, Maharashtra, Gujrat, Madhya Pradesh, Chattishgarh, Karnatka, Andhra Pradesh, Chennai, Tamil Nadu, Kerala.

For Airtel Users:

Operator : airtel

Password: [blank]

Dial Number: *99***1#

Net-Type: TD-SCDMA


NOTE: If you feel that these settings are not working then make a call to airtel call center and ask them APN for 3G. Rest of the settings will remain same, although you can cross-check them too.

The point here is to note is that almost all major mobile carriers are now using a common APN for all the states. So, if you have free data roaming then you don’t need to change settings from state to state. If network provider is providing 3G in a state then these settings can be considered as default settings.

Connect 3G Phone Data (Internet) on Laptop like Wifi

Wires are a big hassle and mobility is today’s demand. Most of us are using internet on phone but when we need to use it on laptop then we find no clue of sharing phone’s internet connection with our laptop.

Do you know that you Can make a personal HotSpot (wifi) with 3G/4G

Although it’s very simple and is called Tethering. Let me tell you how to do it on an Android device. Although there are many versions of androids are available but they all have more or less same settings for tethering.

There are 2 ways by which you can use 3G/4G data on your laptop

1) Via USB Cable (It works like a wired LAN)
2) Via making mobile a hotspot. (Like your home/office Wifi)image

Go go Android Mobile’s Settings >> Wireless and Networks

Click Tethering & Portable Hotspot.

Once you are there

Check Portable Wifi HotSpot and this will enable your packet data (3G/4G) which is available on your mobile to be used over Wifi


Sometimes this is called MobileAP and MobileAP settings.

What about Wifi HotSpot settings? (Security Key etc.)

In the above image the third option is Portable Wifi hotspot Settings.  Click it and now you can configure the security key.


You can define your own SSID (Name which you will see on your laptop to connect your phone ) and Security (By default it’s open which means it can be used by anyone without any key). If you like you can change it to WEP or something like that and define the key. This key will be your security key which will be asked while you connect a laptop to this hotspot.

That was easy!! But there are some precautions too.

Precautions and Guidelines of using portable wifi hotspot

In this hotspot configuration, mobile consumes lot of battery. So make sure that you have necessary battery power to use it and switch it off (hotspot) when your work is done.

This configuration will heat-up your mobile a little bit more than usual, so don’t keep mobile in your pocket while hotspot is enabled.

If you are not getting 3G/4G speed but 2G!!

This happens sometimes. Make sure you have proper data package and 3G/4G is enabled on your mobile.

Go to Settings >> Wireless & Networks >> Mobile Networks

Now make sure of two things: One is Mobile data is ON (checked) and the other is Network is WCDMA or 3G or 4G depending on your network. But it should not be GSM. GSM provides 2G only.

A Screen Capture Software with Free Paid-Features

We all take print screens (PrtSc Button at the top of your keyboard [Windows]) and have always dreamed of a kind of software which can edit my print-screen instantly.


GetShareX is an awesome utility in this respect. It’s just under 2 MB but loaded with awesome advanced features. It will change the way you think of screen-shots or print-screen so far.


It allows you to take screenshots in various ways like Fullscreen, Select the software window (Very handy while making presentation), Rectangle, Traingle, Circle, Free-Hand, Polygon, Hand-free.

It has a very interesting feature called Auto-Capture. It says that, you select the region and feed the time and it will take screenshots after every time-slice. I can’t say where will it be useful, but sometimes such things helps.

It will Upload your files automatically. You just select the service and it will automatically upload the file and copy the link within your clipboard. You can paste that link wherever you like.



Here are some interesting improvements too. You can automatically send the link  within e-mail or post it to social network like facebook. There is a URL shortener service too. Again I am not sure, how they will be useful but geeks find their usages.

There are lot of file uploading services around and you can choose the one you like. Some of their interesting features includes image-annotator, image effects and watermarks on all of your images.

GetShareX is highly customizable and comes with hotkeys settings. You can customize the hotkey. Like you like to fix a region and whenever you hit your defined key combination it will take the screenshot and upload it to a free image hosting service and email the URL to someone. Everything automatically. So, many triggers with just one key combination. Best of all is you can customize it they way you like.

Expand Android Notification Text to Full Length

Notification are an important part of Android and is very useful at times when you just need to look at the current events. But there is a little problem with the notification are is that it shows notification just like a teaser and not the full. Even if you drag down the notification area notification doesn’t expand.

Android developers has identified its usefulness and from 4.2.x onward you can expand the notification easily with pinch-zoom or two-finger glide. This Android Specification has said that

pinch zoom

“The user can pinch-zoom or two-finger glide in order to toggle between base and expanded layouts.”

expanded vs teaser android notificationBase layout is when notification is not expanded and is shown just like a teaser (only one or 2 lines). It’s good when message is small but not always.

expanded vs teaser android notification-2

Expanded Layout is when you can read the whole message within the notification area. Android developers has made the base layout is the default layout. If you need to view the entire message then you need to use pinch-zoom or 2-finger glide.


Although there are lot of advantages of having expanded notifications but sometime it’s annoying specially when there are lot of pending notification and you have to review them all. That’s why android has not made the expanded version is the default one. So far there is no way by which we can change this default behavior.

If you have got few e-mails and you need to review them all within the notification area. Expand them with pinch-zoom way and you will get a nice overview of all of them.


I liked the way Android is simplifying the way of using mobile devices. I am sure newer versions of android will transform our behavior a lot more and will give us more flexibility with such great smartphones.