Author Archives: Sudip

Sticky Menu in HTML

Advertisment

What is Sticky Menu

Of all newly introduced technologies, sticky menu in html is very popular now. In case if you are wondering what is it, well, it is the same menu of your website but it never goes off the screen even when you scroll down. Sometimes the menu stays the same as it is and sometimes it shrinks down a bit, maybe the fonts are a bit smaller with smaller logos etc. In my opinion the menu looks awesome when it shrinks down a bit by size and with some transition with it.

Why Sticky Menu

Navigation menu is the heard of a website. Visitors use the menu to go to different pages or services with it. If your webpage is too long and let’s say a reader comes down a bit and now wants to go to the top of the website, he will need to scroll up all the way to the top. Why do such when you have a very simple solution, sticky menu. A sticky menu will not only make your website look good, it will also make it user friendly.

Process

The process of making a sticky menu is easy. We will need to add some css with html and a little bit of JavaScript code. So, the main thing is that I will work on the header tag. When the user scroll down the page the header will get an additional class. So all we need to do is to style those two different class the right way so that our header becomes sticky.

Coding for the sticky menu

HTML

Here I am using the header element and in my header, I don’t have much of anything. I just have an h1 tag that I am gonna work with. Basically, in a sticky menu there is navigation menu, site logo, some social links etc. As I am just demonstrating the topic, I hope this little example will be better to understand.

<header>
<h1>Sticky Header Example</h1>
</header>

JavaScript

Wondering why the JavaScript before css? Well, before working on the css, we will need to generate a class with JavaScript. This block of code is really simple.

<script>
	$(window).scroll(function(){
		if($(this).scrollTop() > 1){
			$('header').addClass("sticky");
		}

		else{
			$('header').removeClass("sticky");
		}
	});
</script>

From this block of code, you can tell whenever a user scroll down a bit the header will get an additional class called sticky. It’s simple, right? Of course it is.

CSS

Here we have a very small piece of css styles. This will be enough to demonstrate sticky menu.

*{
	margin: 0;
	padding: 0;
}

body{
	font-family: Segoe UI;
}

header{
	height: 100px;
	background-color: #3B5998;
	text-align: center;
	transition: all 0.5s ease;
}

header h1 {
    color: #fff;
    padding-top: 23px;
    transition: all 0.5s ease;
}

header.sticky{
	position: fixed;
	height: 60px;
	width: 100%
}

header.sticky h1{
	padding-top: 5px;
	transition: all 0.5s ease;
}

Okay, one more thing before running the index file, we need to call jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

So, that’s it, sticky menu done. It was easy, isn’t it? Go ahead and try yourself and let me know your thoughts on it.

I hope the process was easy. As always, I have recorded the full demonstration in a 11.46 min YouTube video to make it even better. Go ahead and watch it. Subscribe to the channel for more contents.

Screen Recorder for Android

Advertisment

Why screen recorder for android

Sometimes you may want to record your gameplay or any activity on your android device to watch it later. Sometimes you may want to share it with everyone. If you want to make some tutorials, it might be handy too. In my experience, screen recorder for android is not very common when you go to the app store. Well, you can find hundreds of apps will say they record screen but in the end you will end up disappointed if you don’t get the best screen recorder for android.

Main reason for this problem is the apps want root access to record screen, there might be some apps available that doesn’t require root access but maybe paid. So, problem everywhere. Before installing any screen recorder for android, if you just go through their ratings and reviews, that won’t be much promising. I have used many android phones before but I have never rooted any of them and I don’t like the idea of it. So, how can I get a good app to record screen on my android?

Best screen recorder I found so far

Well, the best option is if your device has already got a built in screen recorder app. I am using Sony xPeria M4 AQUA and my phone has built in screen recorder so I am not facing that problem anymore. But, what if you don’t? Well for that reason I will review an app today which is the best screen recorder for android. Name of the app is AZ screen recorder. Developer name Hecorat. This is a very light and powerful app and most importantly, it doesn’t require root access.

As of today, the app size is only 4.6 mb and current user rating in 4.5 with more than 5 m downloads. You can read some of it’s reviews and it should work just fine. Just one thing, your Android version must be 5 or more. So, let’s go and download it on your device:

screen recorder for android

Play store link for AZ screen recorder

Running AZ screen recorder for android is very easy. After opening the app for the first time you will see a ui like this:

screen recorder for android ui

You can also customize all the settings by clicking on the settings button. There are a bunch of options to go through, you can either keep it or change it as you need it.

screen recorder for android

I searched a lot for an appropriate screen recorder for android and at last found it. If it is same with you, I can assure your bad days are over. So, starting from the downloading to recording a video, I have captured in a YouTube video for you guys in 02.00 min. If you want, click the video below and see it.

For further videos, subscribe to my YouTube channel.

 

Sony xPeria Update to Android 6 Marshmallow

Advertisment

Sony xPeria Update Just Arrived

New Sony xPeria update is in the house. Just at the end of Android 5 Lollipop version and before the release of Android 6 Marshmallow, Sony released a bunch of phones and tablets and when they came out, the operating system was Android 5 with support to Sony xPeria Update to Android 6.0 or more.Now, as stated on their website, Sony said the update depends on different location, time frame and devices. But recently on Sony Mobile’s website, they published about Sony xPeria update to some of their devices.

If you use any of the following phones, then there’s a new update for you.

xPeria Z5 (Dual, Compact, Premium, Premium Dual)
xPeria Z4 Tablet
xPeria Z3 (Dual, Compact, Tablet Compact, +, +Dual)
xPeria Z2, Z2 Tablet
xPeria M5, M5 Dual
xPeria C5, C5 Ultra
xPeria M4 Aqua, M4 Aqua Dual
xPeria C4, C4 Dual

I bought a Sony xPeria M4 Aqua Dual more than 6 months ago and I was really getting angry to them for not releasing the android 6 update. However, it might be a bit late, but you can take a look at the android 6 features if you want. Anyways, yesterday I was browsing around and saw the new sony xperia update and couldn’t wait a bit. Just went on and updated my device to the latest android 6.0.1.

Updating your device

Now, updating the device is very easy. Basically, there are two ways to update device to a newer android version. One, by using your device or by using your computer. I prefer using the computer as it will be less pressure to the phone. First, the sony xperia update will be downloaded to the computer and then it will be installed on the phone. So, first of all you need to download xPeria companion first. You can either go to google and search for it or you can save your time and click the following link:

Sony xPeria Companion Download

Go ahead, download and install it on your computer. Now open it. Keep your data cable with you and connect to the device. The software is smart enough to let you know that there is a new sony xPeria update available for your device and it will directly prompt for the update.

Sony xPeria Update Prompt

However, if for some reason it doesn’t ask for the update automatically, you can click on the Software Update menu manually, will do the same thing actually. Anyway, just click ok and you can see the download progress on the top right corner of the companion software.

sony xperia update download status

It might take some time depending on your computer configuration and internet connection. You can disconnect your phone and continue using it until the download is complete.

While downloading the update, you can disconnect and use your phone if you want.

After the companion software downloads the update, connect your phone to your computer. It will ask for it.

Connect phone for update

After you connect your phone to the computer back in, the Sony xPeria update will be installed and you will see new version number, all your data will be kept.

Confirm before update

Then, it will prepare your device

Preparing device for update

After preparation done, a window will come and say not to disconnect device. While updating the device will be switched off and you can’t use it.

Final installation

Sony xperia update installation process

Installation process

Finally, Sony xPeria Update is finished, you will see a message like this

Update finished Successfully

Remember, for the first time after you install an update, it will take some time for the phone to open. After your phone opens, you can see the new version.

Update Complete to Android 6.0.1

So yeah, that’s how to do the sony xperia update, I hope the process was easy. I inserted as many screenshots as I could so that you can get it easily. If the screenshots are not enough and you want to see the whole process in a video, don’t worry. As always, I have recorded the whole process in a 5.43min YouTube video, I hope you will like it. If you do, don’t forget to like, comment and subscribe.

Fifa 17 for PC, Requirements and Release Dates

Advertisment

EA Sports released fifa 17 trailer a few days ago. As always, the trailer is better than the last one and surely the gameplay won’t disappoint the gamers. Though, there were some speculation with the transfer market and game servers last year but hopefully they won’t be a problem this year. When I saw the trailer first, the graphics was amazing. The player faces and the movements was so real. For the first time this year, fifa 17 will be using the FrostBite engine and it should be amazing. Can’t really talk about any more in game stat unless it is released first. I will write a whole new game review on fifa 17 pc once it is released or at least the demo version is open for all.

Requirements

Fifa 17 pc does not have a lot of changes this year comparing to last year’s configuration requirements. EA Sports released the minimum and recommended configuration for the game this past week so here it is:

Minimum Requirements for fifa 17 pc:

Operating System: Windows 7 or 8.1 or 10 ~ 64-Bit
Processor: Intel Core i3-2100 at least 3.1GHz and higher or AMD Phenom II X4 965 at least 3.4 GHz and higher
RAM: 8 GB
Hard Disk Space: at least 50 GB
Graphics: NVidia GTX 460 and higher or AMD Radeon R7 260 and higher
DirectX: 11

Recommended Requirements for fifa 17 pc:

Operating System: Windows 7 or 8.1 or 10 ~ 64-Bit
Processor: Intel i5-3550K at least 3.40GHz or AMD FX 8150 at least 3.6GHz
RAM: 8 GB
Hard Disk Space: 50 GB
Graphics: NVidia GTX 660 or AMD Radeon R9 270
DirectX: 11

As you can see from the requirement, there isn’t much of a change in minimum and recommended except for the processor and graphics card, as it should be but not much of a change from last year so this is going to be good. Console users have the ease of access in this area as they don’t need to worry about configuration each year but yet, a pc is a pc, right?

So, if your PC already meets these requirements then you have absolutely nothing to worry about but if not, then go get it ready because along with the requirements, EA has also released the date when this game will be available. Buckle up and mark September 22 on your calendar, that is the day when fifa 17 pc will be available in origin platform.

Can I run fifa 17 pc?

You can check yourself whether you can run fifa 17 pc on your current configuration. I know about a great website that provides the services of such. Just go there and check if you can run fifa 17 pc or not. You can check for all other games too:

Click here to go to game debate

There you will see a page like this, scroll down a bit and enter your configuration there, the system will tell you about your stat.

fifa 17 pc configuration test

Here is a little demonstration on how to check your configuration, I have done the checking for my computer and found out my result. If you are not sure how to do it, click on the video and you will see exactly how.

So, that was it, I will be back for more fifa 17 pc contents soon. See you.

Smooth scroll anchor links in html

Advertisment

What is Smooth Scroll

Smooth scroll is a very common feature for almost all types of modern websites. We often see it on many websites and sometimes we may need it on our own. Now a day, this smooth scroll is very popular. Developers use it to increase the functionality and also for better user experience. We can use smooth scroll not just because it looks good, but also it gives the user a greater experience. It is mostly used in single landing page sites where all the main sections are in same page. Smooth scrolling uses the # anchor links of a webpage.

As you already know # links are used to link inside a page because of the target areas which are inside the same page. The main code is in JavaScript but it can easily be implemented in html too. So today, I will show how to create smooth scrolling anchor links or # links on your webpage.

How to make smooth scroll

This is very easy process. All we need to do is to have a webpage where all the different sections have an id so that the navigation menu can target that location. Let’s say we want to enable it on our navigation menu and the menu items will target those specific ids so that when a user clicks on it, that menu should take them to the desired location.

In this demonstration, I will use one of my previously converted html page and implement smooth scrolling there. So, first of all, let’s give each of my div an id.

smooth scroll on anchor links

And now let’s target those IDs from my navigation menu and also check if those are working properly.

smooth scroll on a webpage

We are almost done, as our links are working properly, now we need to enable the smooth scrolling. Just a simple block of JavaScript will do the trick. On your webpage footer just before the ending of the body tag insert this code inside a script tag:

//enabling smooth scroll
$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Resource

I got this code from CSS Tricks, you can also go there and find this code. Copy this code and insert it inside script tag and see the magic. Smooth scrolling will work just fine. Since the code is fully working, you can either keep it in your index file or you can put the code maybe in another JavaScript file

So, if you have done everything right, your code will work properly. As always, I recorded this whole process in a video of 06.07. If you want, you can watch it on YouTube. Please like, comment and subscribe to my YouTube channel for more videos.

 

How to Save Battery on Android

Advertisment

How to Save Battery on Android

The battery life of a smartphone is not as smart as it’s features are. So, you get some and you charge some. No batteries last forever and some android phones last very short in terms of battery. You can’t increase your android battery life to 2x or 3x comparing to as it is now but there are a few tricks and if you use them you will know how to save battery on android very easily.

The Nokia era of batteries are long gone now. Before the rise of smartphones on every hand, nokia phones were the most popular ones with battery life longer than many short lived species. Actually those phones used to last 2-3 days with a single charge. You may also find memes about those. Some of them say, the phone lasts more than 24 hours after first warning of low battery. However, to some of you, this might seem a fairytale but trust me, it was for real. I have used myself a 3310 with a battery life of hulk. As soon as the smartphones like android, windows and iOS started growing up on the market, the Symbian phones was the fallen one.

Okay, let’s get out of the history part and discuss something that makes actual sense. I often see blog posts or request for tips and tricks on how to save battery on android and it’s a hot and trending topic too. It takes no huge effort, just some precautions. Before applying techniques on how to save battery on android, you need to know which apps eats up most of your battery. To check this, you need to see your battery usage. Go to your settings and find your battery usage which should look something like this:

how to save battery on android

You can see most of your battery is used by the screen, so let’s try and do something about the screen.

  • Do not use live wallpapers:

It might seem very fancy to use a live wallpaper, to some people it might be some sort of show off how nice phone they have but by doing this, you are killing your battery. You don’t need your wallpaper to be an animation or even a video. What’s the point in that? Use a general wallpaper and also try to use a wallpaper that has black color in it. It will use less battery life.

  • Do not use daydreams:

This daydream thing may be in different names in different phone, but it is the thing that flashes around when your phone is on charge. It shows latest pictures on your screen. You don’t need to have that feature turned on. Nobody looks at their smartphone always when they are being charged, isn’t it? So, for sake of saving battery on android let’s not do that.

  • Avoid auto brightness:

You might like the auto brightness turned on so that you don’t need to change the adaptiveness each time you go to a darker place form lighter one and vice versa but auto brightness is not that good for your phone’s battery. When you set brightness to auto, it actually gives you a lot more brightness than you need. Thanks to some new features on newer devices, now along with auto brightness you also get a meter of setting the minimum brightness, if you are blessed with this option on your android, use the minimal.

  • Turn off features you don’t need

A smartphone comes with loads of smart features which you don’t need most of the times. Recommendation is, only use features you really need. Such as, you don’t need to turn on your GPS, Bluetooth, NFC, Mobile Data and even Wi-Fi all the time. You might get mad about the fact Wi-Fi but think, you only need it when you are home, or at your mates’ or somewhere you have access to a network. So, you can turn it off unless you start using it. When you are at home, it’s totally fine. You have access to your Wi-Fi and you can also charge your phone whenever you want but you won’t have a change to charge it when you go out for work. So, why waste it for no reason? Mobile data is a monster in case of battery use. If you haven’t checked yet, you can check your battery use during wireless network and compare it to mobile data. You will find at least 1.5x to 2x more battery usage during this. Use mobile data only when you do not have any wireless connection nearby. Other features like GPS, Bluetooth or NFC, you can turn them off for save battery on android, right? It’s worth it. I am not saying not to use it, but only turn it on when you use those features. Like mobile data, gps also eats up a whole lot of battery.

turn off unused features

  • Use your built in battery saving features:

All the big names in android phones have their own personalized battery saving built in app so that it helps save some of your battery. Use all the features you need there.

power management

  • Don’t use your phone while charging

Using phone during charge is very harmful for your phone’s battery. It causes long term damage to it. When you use your phone, the battery is used and if at the same time the battery is used for charging, which is completely the opposite direction, that’s going be harmful. If something is really needed to be done, discharge your phone and then use it, that will do just fine. Also, do not charge it very often, try to charge only after the battery is down to 30% or less. Your phone will charge faster and you will also save battery on android.

  • Avoid using auto sync

Enabling the auto syncing on your android means you are running the apps on the background all the time. Even when you turn off the screen. You do not need to be online for 24/7. Many say, auto sync is a trap for your battery to die fast. If you want to save battery on android, avoid auto sync process.

avoid auto sync

  • Don’t be a smartphone maniac

It’s just a phone, you don’t need to use it all the times, play games or use facebook in it. After all, it is a small device and it might not take all you put on. So, you can spend some times with your television or laptops and use a bit less of your phone in order to save battery.

In order to save battery on your android, you have to apply as much as you can of the above. Yes, sometimes it’s hard to do all these so my advice will be to apply as much as you can. There are people who needs to be online even on the go, so for them, maintaining these would be very difficult. Without applying these, you just can complain how to save battery on android every now and then.

 

How to add favicon to your website

Advertisment

Add favicon to your website

Favicon is very common and very popular now days. It is also a very important for your branding. In case if you don’t know yet what is favicon, well it is the small image that you see on top left of your tab when you are browsing a website. So, today I will show you how to add favicon to your website in a single line of code.

Why favicon

It doesn’t matter what type of website you have, there must be an identical image for it. Let’s say you have your company website, so it’s obvious you have a logo of it. That goes straight as favicon. It also increases the beauty of a website. For personal website or blog, there must be some sort of image, it might be the profile picture on social media like twitter, facebook etc.

How to add favicon

Adding favicon to a website is very easy. So hopefully by now, you know what is a favicon. If you don’t know how to add favicon, it’s fine. It requires an ico formatted image and a single line of code. I will demonstrate the process in a very simple and plain html.

Process of adding a favicon

Just open a html file and if you haven’t added favicon already then you will see nothing at the top left of your browser when you open it. Now, to add favicon, write this following code in the head section of your website:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Now, reload you page and you will see the favicon there. So yeah, that’s how to add favicon in one line of code. This is the easiest way. If you use wordpress or some other cms, you might find many different ways of adding favicon but this is the recommended way.

Why not plugins

There must be many plugins for adding favicons, but there’s no need to add favicon using plugin. As you see, plugins are just some lines of code that is extracted in your website. If you add favicon through plugin and inspect element you will see the same line of code on your head. So, why load a plugin for just a simple line of code, right? If you use wordpress, just add the code in header.php file. If you work with wordpress then you know, to add favicon to your website, you will need to create dynamic link, so that html link won’t work unless you put get template directory uri function like this following line:


<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/img/favicon.ico" type="image/x-icon" />

Here you can see I have added the favicon file to a folder named ‘img’. So, that’s how to add favicon to your website.

Like always, I have captured the whole process in a 5.29min youtube video. If you are unclear at some point take a look at here:

So, I hope the process was easy, if you think it was helpful, like this post and share on facebook and other social media.