Friday 9 December 2016

Moving Background image in JavaScript.


Hello guys, I have already made a video tutorial on YouTube demonstrating how to make a background image moves vertically in a continuous manner.

The code snippet is very minimal and simple to understand.

Below is the code snippets for the html, css and javascript files.

HTML File

For the html, you need to generate as much paragraphs as you can to fill the page so you can see clearly the effect we are trying to demonstrate. 

Note: This tutorial is for beginners in web development, so don't feel sleep off if you are already a nerd in the field. :-)

If you are using emmet plugin, you can easily generate these paragraphs using the following
p*20>lorem and press tab. So I will not show all the content of the body here.


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Moving Background Image</title>
 <link rel="stylesheet" href="css/app.css">
</head>
<body>

 <div class="wrap">
            <!--Your content here-->
  
 </div>
<script src="js/app.js"></script> 
</body>
</html>

CSS code Listing.


body{
 background-image: url('../img/desert.jpg');
 background-repeat: repeat;
 background-size: cover;
 background-attachment: scroll;
}
.wrap{
 color: #ccc;
}

In the above listing, you replace the "desert.jpg" with your own image.

JavaScript Code Listing

window.onload = function(){
 var body = document.querySelector('body');

 var x_pos = '0px';
 var y_pos = 0;

 setInterval(function(){
  body.style.backgroundPosition = x_pos + ' ' + y_pos + 'px';
  y_pos++;
  
 }, 20);
}

The above code listing is the most important of all.
CSS background position is the one doing the magic.
You use background-position to determine where you want to position the background image of your web page
It is used like: background-position: "50px' "60px";
The first value is the X position and the second is the Y position.
In our case, we want to continuously updating the Y value by incrementing it, that is why we used it in
javascript.
setInterval() function takes a function, in our case an anonymous function and a timer value that shows
at which time in milliseconds will the function runs.
So in every 20 milliseconds, you change the background position by updating its Y-coordinate value.

Thursday 2 July 2015

PHP Built-in Web Server

As of PHP version 5.4.0 to later versions, PHP is bundled with a built-in web server by default.
This blog will show you how to get started. It is pretty much easy to set up and helpful, especially in a situation where you want to quickly test your web application without necessarily hosting it online or you don't want to install XAMP or WAMP.

Below are the procedures



  1. First thing first, Make sure you download PHP following this link: http://php.net/downloads.php, install it.
  2. Go to your command prompt or terminal in case you are on Mac or Linux, change directory to your working directory by using the cd command.
  3. Type: php -v to check your version of PHP and also make sure PHP is installed properly. If PHP is installed properly, you will see your PHP version. In that case you can continue to the rest of the steps, else go back and make sure your PHP is installed properly.
  4. Still on your command prompt or terminal, you then choose the IP address and port you want your application to be running on. Just type php -S 127.0.0.1:port name, for example, 127.0.0.1:1337 and press Enter. If all is well, you will see your PHP version, the IP address and port your server is listening on and your document root as show below.
  5. create any php file in your working directory... Navigate to 127.0.0.1:1337/index.php and you will see your output.

Monday 15 June 2015

How to fix NPK driver is not running in wireshark.

If you just installed wireshark on a windows machine for the first time, chances are that you get a message like NPK driver is not responding anytime you you try to capture some packets.
This simple procedure works perfectly for me.

1. Open command prompt by typing cmd in the search box
2. type: "sc start npf" without the quotes and press enter.
3. Now run this command so that it starts automatically "sc config npf start = auto" without the quotes and press enter.

That's it. you will not get that message again.

Monday 6 April 2015

You are all welcome!

Intro.
In this blog we will be presenting to you some of the basic computer programming configurations you need to set up your environment for programming. so sit back and relax, don't also forget to post any error and weird message you got while trying to configure your environment for programming.