Tuesday, October 29, 2013


Sort numbers in an array using JavaScript:

function sortingArray()
{
var beforeSorting = [40,100,1,5,25,10];
var afterSorting;
document.getElementById("beforeSorting").innerHTML = beforeSorting;
afterSorting = beforeSorting.sort(function(a,b){return a-b});
document.getElementById("afterSorting").innerHTML = afterSorting;
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
 background: #F1F1A8;
}
#beforeSorting,#afterSorting{
 font-weight:bold;
}
</style>
</head>
<body>
<div id="mainContainer">
 <div>Array before sorting is: <span id="beforeSorting"></span></div>
 <div>Array after sorting is: <span id="afterSorting"></span></div>
</div>
<script>
function sortingArray()
{
var beforeSorting = [40,100,1,5,25,10];
var afterSorting;
document.getElementById("beforeSorting").innerHTML = beforeSorting;
afterSorting = beforeSorting.sort(function(a,b){return a-b});
document.getElementById("afterSorting").innerHTML = afterSorting;
}
sortingArray();
</script>
</body>
</html>

Sample Output:


How to sort numbers in an array using JavaScript

Demo:



How to sort numbers in an array using JavaScript?

Sunday, October 27, 2013


Calculate length of any object in JavaScript:

Object.size = function(obj) {
    var size = 0, key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) size++;
    }
    return size;
};

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
 background: #F1F1A8;
}
</style>
</head>
<body>
<div id="mainContainer">
 <div>Length of the Array is: <span id="resultantLength"></span></div>
</div>
<script>
Object.size = function(obj) {
    var size = 0, key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) size++;
    }
    return size;
};
</script>
<script>
var myArray = new Object();
myArray["firstName"] = "Suresh";
myArray["middleName"] = "Babu";
myArray["lastName"] = "Shamala";
myArray["age"] = 25;

document.getElementById("resultantLength").innerText = Object.size(myArray);
</script>
</body>
</html>

Sample Output:


How to calculate length of any object in JavaScript

Demo:



How to calculate length of any object in JavaScript?

Saturday, October 26, 2013


Generate a random number between two numbers using JavaScript:

function randomNumber(minNum,maxNum){      
    var numLow = minNum;
    var numHigh = maxNum;
    if ((!isNaN(numLow)) && (!isNaN(numHigh)) && (parseFloat(numLow) <= parseFloat(numHigh)) && (numLow != '') && (numHigh != '')) {
       var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;       
       var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
 return numRand;
    } else {
        return "Please try again....";
    }       
    return false;    
};

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
 background: #F1F1A8;
}
#randomNumber{
font-weight:bold;
color:red;
}
</style>
</head>
<body>
<div id="mainContainer">
 <label>Enter Minimum Number: </label><input id="minimumNumber" type="text"><br>
 <label>Enter Maximum Number: </label><input id="maximumNumber" type="text">
 <div>Random number between Minimum and Maximum numbers is: <span id="randomNumber"><span></div>
 <button onclick="calculate();">Get Random Number</button>
</div>
<script>
function randomNumber(minNum,maxNum){      
    var numLow = minNum;
    var numHigh = maxNum;
    if ((!isNaN(numLow)) && (!isNaN(numHigh)) && (parseFloat(numLow) <= parseFloat(numHigh)) && (numLow != '') && (numHigh != '')) {
       var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;       
       var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
 return numRand;
    } else {
        return "Please try again....";
    }       
    return false;    
};
function calculate(){
var minimumNumber = document.getElementById("minimumNumber").value;
var maximumNumber = document.getElementById("maximumNumber").value;
document.getElementById("randomNumber").innerHTML=randomNumber(minimumNumber,maximumNumber);
};
</script>
</body>
</html>

Sample Output:


How to generate a random number between two numbers using JavaScript


Demo:



How to generate a random number between two numbers using JavaScript?

Thursday, October 24, 2013


Apply gradients to the complete body of the webpage using CSS3:

html {
min-height: 100%; 
background-color: #0093d8; /* fallback */
background-image:-webkit-gradient(linear, left top, left bottom, from(#D84500), to(#FFFFFF)); /* Saf4+, Chrome */
background-image:-webkit-linear-gradient(top, #D84500 0%, #FFFFFF 100%); /* Chrome 10+, Saf5.1+ */
background-image:-moz-linear-gradient(top, #D84500 0%, #FFFFFF 100%); /* FF3.6+ */
background-image:-ms-linear-gradient(top, #D84500 0%, #FFFFFF 100%); /* IE10 */
background-image:-o-linear-gradient(top, #D84500 0%, #FFFFFF 100%); /* Opera 11.10+ */
background-image:linear-gradient(top, #D84500 0%, #FFFFFF 100%); /* W3C */
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
html {
min-height: 100%; 
background-color: #0093d8; /* fallback */
background-image:-webkit-gradient(linear, left top, left bottom, from(#D84500), to(#FFFFFF)); /* Saf4+, Chrome */
background-image:-webkit-linear-gradient(top, #D84500 0%, #FFFFFF 100%); /* Chrome 10+, Saf5.1+ */
background-image:-moz-linear-gradient(top, #D84500 0%, #FFFFFF 100%); /* FF3.6+ */
background-image:-ms-linear-gradient(top, #D84500 0%, #FFFFFF 100%); /* IE10 */
background-image:-o-linear-gradient(top, #D84500 0%, #FFFFFF 100%); /* Opera 11.10+ */
background-image:linear-gradient(top, #D84500 0%, #FFFFFF 100%); /* W3C */
}
.mainContainer{
color:#FFFFFF;
padding:20px;
font-family: Cambria;
}
</style>
</head>
<body>
<div class="mainContainer">
Here the trick is to apply gradient to the html selector. And also give "min-height: 100%" to the html selector.
</div>
</body>
</html>

Sample Output:


How to apply gradients to the complete body of the webpage using CSS3


Demo:



How to apply gradients to the complete body of the webpage using CSS3?

Wednesday, October 23, 2013


Design a simple semi-transparent container over an image on mouse hover using CSS3:

.thumb {
position:relative;
width:300px;
height:150px;
}
.thumb .overlay {
transition:opacity 1s;
-webkit-transition:opacity 1s;
}
.thumb:hover .overlay {
opacity:0.8;
}
.overlay {
position:absolute;
top:0;
left:0;
width:300px;
height:150px;
background:#fff;
opacity:0;
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.thumb {
position:relative;
width:300px;
height:150px;
}
.thumb .overlay {
transition:opacity 1s;
-webkit-transition:opacity 1s;
}
.thumb:hover .overlay {
opacity:0.8;
}
.overlay {
position:absolute;
top:0;
left:0;
width:300px;
height:150px;
background:#fff;
opacity:0;
}
</style>
</head>
<body>
<div class="thumb">
    <div class="overlay">A simple way to have semi-transparent container over an image on mouse hover using CSS3.</div>
    <img src="https://dl.dropboxusercontent.com/u/34694244/Images/scenary1.jpg" />
</div>
</body>
</html>

Sample Output:


How to design a simple semi-transparent container over an image on mouse hover using CSS3


Demo:



How to design a simple semi-transparent container over an image on mouse hover using CSS3?

Tuesday, October 22, 2013


Prevent user from selecting text on the webpage using CSS:

p.cannotSelect {
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
 background: #F1F1A8;
}
p.cannotSelect {
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
</style>
</head>
<body>
<p class="cannotSelect">We cannot select this text, as we have "user-select" property set to "none"</p>
<p>We can select this text. Try it !!!!</p>
</body>
</html>

Sample Output:


How to prevent user from selecting text on the webpage using CSS


Demo:



How to prevent user from selecting text on the webpage using CSS?

Monday, October 21, 2013


Make CSS3 animation play till end and then stop completely:

div {
 background-color: #ff0000; 
 width:200px;
 margin:10px auto;
 padding:10px;
 color:#FFFFFF;
 animation: forwardAnimation 2s 1 ease forwards;
-webkit-animation: forwardAnimation 2s 1 ease forwards;
}
@keyframes forwardAnimation { 
  100% { background-color: #0000ff; }
}
@-webkit-keyframes forwardAnimation { 
  100% { background-color: #0000ff; }
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
 background: #F1F1A8;
}
div {
 background-color: #ff0000; 
 width:200px;
 margin:10px auto;
 padding:10px;
 color:#FFFFFF;
 animation: forwardAnimation 2s 1 ease forwards;
-webkit-animation: forwardAnimation 2s 1 ease forwards;
}
@keyframes forwardAnimation { 
  100% { background-color: #0000ff; }
}
@-webkit-keyframes forwardAnimation { 
  100% { background-color: #0000ff; }
}
</style>
</head>
<body>
<div class="forwardanimationcont">Here we are setting the property "animation-fill-mode" as "forward". So after the animation it wont return animated values to its initial state.</div>
</body>
</html>

Sample Output:


How to make CSS3 animation play till end and then stop completely


Demo:



How to make CSS3 animation play till end and then stop completely?

Sunday, October 20, 2013


Animate corners of the div container on mouse hover using CSS3:

.mainContainer{
width:200px;
height:200px;
background:red;
margin:10px auto;
transition: border-radius 0.3s, background 0.5s;
}
.mainContainer:hover{
border-radius:100px;
background:blue;
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
 background: #F1F1A8;
}
.mainContainer{
width:200px;
height:200px;
background:red;
margin:10px auto;
transition: border-radius 0.3s, background 0.5s;
}
.mainContainer:hover{
border-radius:100px;
background:blue;
}
.notes{
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<div class="mainContainer"></div>
<div class="notes">Hover your mouse on container to see the effect!!!!</div>
</body>
</html>

Sample Output:


How to animate corners of the div container on mouse hover using CSS3


Demo:



How to animate corners of the div container on mouse hover using CSS3?

Saturday, October 19, 2013


Get a notification (callback) once CSS3 transition is completed using JQuery:

$(".transitioningContainer").on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd',
function() {
 $("#callBackMessage").html("Alert!!!! CSS3 transition got completed");
});

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div.transitioningContainer
{
margin:40px auto;
padding:5px;
color:#FFFFFF;
width:150px;
height:150px;
background:red;
transition: transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
}
div.transitioningContainer:hover
{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
opacity: 1;
background: #1ec7e6;
width: 200px;
height: 200px;
font-size: 30px;
}
#callBackMessage{
 text-align:center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".transitioningContainer").on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd',
function() {
 $("#callBackMessage").html("Alert!!!! CSS3 transition got completed");
});
});
</script>
</head>
<body>
<div class="transitioningContainer">Hover your mouse on this container to see the effect</div>
<div id="callBackMessage"></div>
</body>
</html>

Sample Output:


How to get a notification (callback) once CSS3 transition is completed using JQuery

Demo:



How to get a notification (callback) once CSS3 transition is completed using JQuery?


Make any div container resizable using CSS3:

.resizableContainer { 
   resize: both;
   overflow: auto; 
   color:#FFFFFF; 
   background: blue; 
   width: 300px;
   height:300px;
   padding: 10px;
   display:inline;
   float:left;
}
.notResizableContainer {
   background: yellow; 
   width: 300px;
   height:300px;
   padding: 10px;
   display:inline;
   float:left;
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.resizableContainer { 
   resize: both;
   overflow: auto; 
   color:#FFFFFF; 
   background: blue; 
   width: 300px;
   height:300px;
   padding: 10px;
   display:inline;
   float:left;
}
.notResizableContainer {
   background: yellow; 
   width: 300px;
   height:300px;
   padding: 10px;
   display:inline;
   float:left;
}
</style>
</head>
<body>
<div class="mainContainer">
  <div class="resizableContainer">This conatiner can be resizable</div>
  <div class="notResizableContainer">This conatiner cannot be resized</div>
</div>
</body>
</html>

Sample Output:

How to make any div container resizable using CSS3

Demo:



How to make any div container resizable using CSS3?

Subscribe via Email