Wednesday 29 October 2014

Change the styles of the selected area usign CSS

This tutorial demonstrates how to use the ::selection selector, which allows you to set different font and background color for the marked area. The default is black fonr color and blue background. Now let us show You how to change that.

First we simply call the ::selection selector.

::selection {
// You can add only 2 properties : color, background 
}

NOTE:
The ::selection selector is not supported in Internet Explorer 8 and earlier versions.

Firefox support the ::selection selector, but the -moz- vendor prefix is required.( ::-moz-selection )


EXAMPLE:

<html>
<head>
<title>::selection selector</title>
<style>

::selection {
color: #fff;
background: #000;
}

::-moz-selection {
color: #fff;
background: #000;
}

</style>
</head>
<body>

<p>This is a simple example.</p>
<p>Shows you how to use ::selection.</p>
<p>You can change the color.</p>
<p>Also the background.</p>
<p>Enjoy with our Tips & Tricks every day.</p>

</body>
</html>


DEMO cannot be added because it will effect to the other elements of the page.

Tuesday 28 October 2014

Vertical and Horizontal Center Alignment of Element(CSS)

    Vertical and Horizontal Center Alignment of Element(CSS)

This is for those who knows CSS.


As you know you can set specific element in the center of it's parent using "margin: auto;".


Using CSS position property.

With this property you can set your element without affecting the others.
Im going to show you how to set the element in the center verticaly and horizontaly. To do that you need to use also the margin: auto; property.
We simply add :

margin: auto;

position: absolute;


  • if we want to set it centered horizontaly we do that:

margin: auto;
position: absolute;
left: 0;
right: 0;

Now when you resize the page it wil be always at the center.



  • You can also set vertical center alignment by doing this :
margin: auto;
position: absolute;
top: 0;
bottom: 0;


  • Or set centered alignment for horizonal and vertical :
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;

Now no matter what you resize, the heigth or the width of the page the element will be always at the center of the page.


EXAMPLE:


<html>

<head>
<title></title>
<style>
.myDiv {
width: 300px;
height: 230px;
background: red;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="myDiv"></div>
</body>
</html>



#easilylearnhtml

Monday 27 October 2014

Change the cursor image of the mouse

           Change the cursor of the mouse

This tutorial demonstrates how we can change the cursor image for our elements with just one line of code.


The syntax is very easy:


cursor: url(URL to image);


but if you want it to work fine, in addition you have to add auto after this :


cursor: url(URL to image), auto;


Example:


<html>

<head>
<title>I am changing my cursor image</title>
<style>

#block {

width: 400px;
height: 240px;
background: #333;
cursor: url(Cursor-icon.png), auto;
}

</style>

</head>
<body>
<div id="block"></div>
</body>
</html>


LIVE DEMO:


We are accepting question here and in our facebook page. 

Sunday 26 October 2014

Pure JavaScript Live Form Validation(Non styled)

This is a perfect example for cool and responsive popup Sign Up/In form.
All you need to do is to add the HTML, CSS and Javascript to your page and add some styles.

You should pass the code here :

EXAMPLE:

<html>

<head>
<title>Form Validation</title>
<style>
// Here paste the CSS CODE
</style>
</head>
<body>
// Here paste the HTML CODE

<script>
// Here paste the JAVASCRIPT CODE
</script>
</body>
</html>





****HTML CODE****

<div class="form">
<form action="http://www.easilylearnhtml.blogspot.com" method="get" class="form">
Username: <input type="text" class="user" />
<br />
Password: <input type="password" class="pass" />
<br />
Email: <input type="text" class="email" />
<br />
<input type="submit" class="submit" />
</form>
</div>


****CSS CODE****

body {
margin: 0;
padding: 0;
}
.user, .pass, .email {
border: 1px solid #BFBFBF;
}


****JAVASCRIPT CODE****

function addEventHandler(evtTarget, evt, fnction, bubl) {
if (addEventListener) {
evtTarget.addEventListener(evt, fnction, bubl);
} else if (attachEvent) {
evtTarget.attachEvent("on" + evt, fnction);
}
} // cross-browser event handler


// Real time for validation

function autoFormValidation(form, patt) {

addEventHandler(form, "input", function(e) {
var pattern = patt;
var target = e.target.value;
var check = pattern.test(target);
if (!check) {
e.target.style.border = "3px solid red";
} else {
   e.target.style.border = "3px solid green";
}
}, false);

addEventHandler(form, "input", function(e) {
if (e.target.value == 0) {
e.target.style.border = "1px solid #BFBFBF";
}
}, false);
}

// checks if the fields are filled correct

addEventHandler(document.querySelector(".form"), "submit", function(e) {
if (document.querySelector(".user").value == 0 || document.querySelector(".pass").value == 0 ||
document.querySelector(".email").value == 0) {
e.preventDefault();
alert("Some of the forms arent filled");
}

if (document.querySelector(".user").style.border == "3px solid red" ||
document.querySelector(".pass").style.border == "3px solid red" ||
document.querySelector(".email").style.border == "3px solid red" ) {
e.preventDefault();
alert("Edit the red fields...");
}
}, false);




autoFormValidation(document.querySelector(".user"), /^\w{4,}$/); // username input
autoFormValidation(document.querySelector(".pass"), /^\w{6,}$/); // password input
autoFormValidation(document.querySelector(".email"), /^[a-zA-z0-9_]{4,}[@]{1}[a-z]{2,}\.{1}[a-z]{2,}$/); //email input


LIVE DEMO:

Username:
Password:
Email:

Saturday 25 October 2014

CSS3 Keyframes Slideshow

CSS3 Keyframes Slideshow

This is just example on what you can do with keyframes, its not tutorial, if You are not familiar with keyframes animation, CSS as language or HTML, click here : CSS3 Keyframes Full Tutorial  ||  CSS Full Tutorial  ||  HTML Full Tutorial

The below keyframe code is only for Chrome and Safari but you can add support for mozilla, opera and IE by copying the code and adding the -moz-, -ms- and -o- vendor prefixes.

Note:


All those strange letters are just links. Dont thing about them.


Example:


<html>

<head>
<title>CSS3 @keyframes slideshow</title>
<style>
.slideShow {

width: 400px;

height: 200px;
border: 1px solid #000;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9RHZUEIFXFHXQj8LLbGZB8-bbUaSyYB5bo1g3J4XZ_sIgyL2FQdIf64nh1xjy6fIwLx_W09Gb65MW7o4RTCdcQGZBu9KhPjasb6Hj5zncCUAHcwTpzXD4sjvaklsbwaDpP0Ms55OFOAQ5/w400-h200-p/crew.jpg);
background-repeat: no-repeat;
-webkit-animation: slideShow 15s 1s infinite alternate;
 -moz-animation: slideShow 15s 1s infinite alternate;
-ms-animation: slideShow 15s 1s infinite alternate; 
animation: slideShow 15s 1s infinite alternate;

}


// Chrome and Safari


@-webkit-keyframes slideShow {


0% {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9RHZUEIFXFHXQj8LLbGZB8-bbUaSyYB5bo1g3J4XZ_sIgyL2FQdIf64nh1xjy6fIwLx_W09Gb65MW7o4RTCdcQGZBu9KhPjasb6Hj5zncCUAHcwTpzXD4sjvaklsbwaDpP0Ms55OFOAQ5/w400-h200-p/crew.jpg) ;
    }

25% {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH8yZaTmlCOwYv19X21lRL0z_03dOfIolPWw_kgms1Z5xmAjgMOXGjvOMLSALRYnxDz9SRT21_rLWirX3wlcxmY1E5Fqz9wuUs3KlTvm66FK-7gzPGEtu1ilkbHHm3Ewmut_o1ythYxMEr/w400-h200-p/elder.jpg) ;
}

50% {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJzLcaBwL47BE3Lf8Iqw4_ff8ST5Vr36ctxuJDwupbEQTdsRCXxvJZpW520-PT8aGgjlSdogF1o2JXvVMWhoWeJ1EPXNMiD9wBR8CJGNj9UOobo46pne2iCZFXp2nbUGGvlE6M9ULjVsFj/w400-h200-p/nfs.jpg) ;
}

75% {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD0EEEBImHDmjlnKZMApo9BtVVrsF14WYJA0w3ewBATEAToeuapGkV_BB9D4aDSmhFYZyIqaaCxzEynxDWpaUuMGV9mQSoCbYtnyj73B5Gb-UJhf8fvAxiKp7w5VdCvXRv5XcvV-FcMN9O/w400-h200-p/poseidon.jpg) ;
}

100% {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvHUnTqNYWUeFmpkg1UsuNamJLtLUkCYA74O5-Qj3r8k7wBvGU7wyHQBS2i87t4lWnF_zCDMgr_5AJzpOsN313-iGGAnUf5FHmHuX5AHaJKpatBn9hVESgBgyiaMWsvb97D8qBfNiUJsiw/w400-h200-p/tanks.jpg);
}

}


</style>
</head>
<body>
<div class="slideShow"></div>
</body>
</html>


LIVE DEMO

Friday 24 October 2014

CSS3 @keyframe Animations

CSS3 Animation/Keyframes

@keyframes allow us to make amazing animations without using Flash, javascript or animated images.



There's few important steps:


1. Choose the element you want to animate and give it class or id.


Example:


<div class="anime"></div>




2. Make sure that your element appear in the page by adding some styles.

Example:


.anime {

    width: 300px;
    height: 200px;
    background-color: #ff0033;
}



3. There's few properties that you can use.

animation-name  
You always have to add this property if you want to make animation. This is the name of your animation. It can be everything.

Possible values :



  • Animation name


animation-delay 
Pass only 1 value, for example if it's 3s(seconds), the animation will start after 3 sec when page loads.

Possible values



  • Seconds   //   animation-delay: 2s; 


animation-direction

Specifies whether or not the animation should play in reverse on alternate cycles.

Possible values :

normal | Default value.

reverse | The animation should play in reverse direction


alternate | The animation will be played as normal every odd time (1,3,5,etc..) and in reverse direction every even time (2,4,6,etc...)


alternate-reverse | The animation will be played in reverse direction every odd time (1,3,5,etc..) and in a normal direction every even time (2,4,6,etc...)



animation-duration

Defines how many seconds it will take the animation to complete one cycle.
Possible values


  • Seconds


animation-iteration-count

Defines the number of times an animation should be played
Possible values :


  • Number(1,2,3,4 etc.)
  • Infinite


animation-play-state

Specifies whether the animation is running or paused.

Possible values



  • paused
  • running


animation-timing-function

The animation-timing-function specifies the speed curve of the animation.

Possible values :



  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out


animation

This is shorthand property for setting all animation properties in one,
except the animation-play-state and the animation-fill-mode property.

Syntax :

animation: name duration timing-function delay iteration-count direction play-state;

Example:

-webkit-animation: spinner 5s ease 0s infinite alternate running;


Example of all properties:


.anime {

    -webkit-animation-name: spinner;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

Note:

Always use them with vendor prefixes:


  • -webkit- | for google chrome and safari
  • -moz- | for mozilla
  • -ms- | for Internet Explorer
  • -o- | for Opera



4. Next step is the real animation. Now you will going to use @keyframes. Always use vendor prefixes.

Syntax:

@-prefix-keyframes animationName {

    
}

Example:


@-webkit-keyframes spinner {


}


5. We can control the animation all the time. To do that you need to use percents.


Here's what will going to happen:

at 10% of the animation the background will change, at 30% the width, at 60 the height and at 100% it will spin the element 360deg.

SYNTAX:


@-webkit-keyframes spinner {

 10% {
background-color: #fff;
}
30% {
width: 400px;
}
60% {
height: 300px;
}
100% {
-webkit-transform: rotate(360deg);
}
}

Full example:


<html>

<head>
<title>My first Animation</title>
<style>

.anime {

    width: 300px;
    height: 200px;
    background-color: #ff0033;
    -webkit-animation-name: spinner;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

@-webkit-keyframes spinner {


    10% {

background-color: #fff;
}
30% {
width: 400px;
}
60% {
height: 300px;
}
100% {
-webkit-transform: rotate(360deg);
}

}


</style>

</head>
<body>
<div class="anime"></div>
</body
</html>

Note: 

Experiment with the code all the time for better and amazing results. Learn with #EASILYLEARNHTML Team all the time.

CLICK FOR LIVE DEMO

Thursday 3 July 2014

Chapter 12: JavaScript Functions

Functions

As we start to add more code we want to make sure that it doesn’t get messy and hard to read. So as it all languages we’ll going to break apart large element in JavaScript into smaller reusable modular pieces. All we doing is taking several statements, wrapping them up and giving them a name, and that means we are creating functions. To make one we take the code that we want to enclose, no matter the size of the script. We surround with a curly braces to create a code block to say where this function starts and ends. We use the word function, we also give it a name. You decide what to be the name, but you have to remember but you can’t start the name of your function with number

Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>

function anyFunction() {
    console.log("This is function example.");
}

</script>
</body>
</html>


After the function is declared, we can call it.
We can use the name of the function with the opening and closing parentheses ( always use open and closing parentheses when you declare function ), semi-colon because it is a full statement. And all the code inside the function will be executed. Now note that as soon as you put your code in a function it won’t execute, it won’t run unless you explicitly call it.
Its good practice to define your functions before you calls them.

Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>

function anyFunction() {
    console.log("This is function example.");
}

anyFunction();
</script>
</body>
</html>



Functions with parameters
When you call a function you can pass values to it named arguments or parameters.

We can create 2 types of arguments – single and multiple which is separated with comas.
function myFunction(parameterX, parameterY, parameterZ) {
// code to be executed
}

Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>

function anyFunction( x, y, z) {
var calc = x-y+z ;
console.log(calc);
}

anyFunction(20, 10, 5);
anyFunction(40, 27, 4);

</script>
</body>
</html>

When the function is called it receives values called arguments.
The parameters and the arguments must be in the same order:
var a = myFunction(x, y, z);
You can use the arguments as local variable when they are placed inside the function.
Often the arguments are used to compute a return value.

JavaScript return
We can optionally return values. Not only can a function accept information, but we can also send some back. If you want to return information all you need to do is to use the word return, and then pass back a variable, string, number, it’s up to you.

Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>

function myFunction( x, y, z) {
var calc = x-y+z ;
console.log(calc);
// we can return values
return calc;
}

myFunction(20, 10, 5);
myFunction(40, 27, 2);

</script>
</body>
</html>


Parameter Mismatch
One of the usual issues with the functions to take parameters is what happens if you get something wrong with them. For example if you pass the wrong amount of information in them.
In the below example we add an extra information, and when the code is executed the value 200 would be ignored by JavaScript.

Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>

function myFunction( x, y, z) {
var calc = x-y+z ;
console.log(calc);
}

myFunction(20, 10, 5, 333);

</script>
</body>
</html>


But what happened if I pass in only 2 values and we have 3 parameters?
And what will happen is that the missing one will be passes as undefined. The variable z will be the undefined one.

Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>

function myFunction( x, y, z) {
console.log( x + y + z);
}

myFunction("Hello ","World ");


</script>
</body>
</html>



variable scope/ Local variable
Variable scope means where this variable is visible, what part of your code can see it, and what part can use it.

Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>

function myFunction() {
var x = 500;
console.log(x);
}

myFunction();
console.log(x);

</script>
</body>
</html>


In the above example in function myFunction() we create a variable named x and we call it, and then it will input 500. But if we try to use this variable outside of the function the result will be undefined, x doesn’t exist outside the function. In this case the variable x is called Local variable, because we use the word var inside the function.

But if we want to create a variable that is visible for the entire file of code what you have to do is to define the variable x outside any function. And then the variable becomes a Global Variable.