How to get random item from JavaScript array

Hi,

Today I have a requirement in project to retrieve a random value from javascript array. We can do this by using different method.

I have used below code for it.

HTML Button:




Here I have called “ShowArrayItem” function on click event.

Javascript Function:


function ShowArrayItem()
{
    alert(items[Math.floor(Math.random() * items.length)]);
}

Here is the javascript static array; you can define it as per your requirement;


var items = Array('sachin', 'sehwag', 'virat', 'yuvraj', 'raina', 'dhoni', 'jadeja');

When you click on button then it will take random value from the javascript items array.

You can also check it online demo from here, random item from JavaScript array

That’s it.

how to display footer at bottom of page

Hi Friends,

Once in my project, I came across with CSS is dynamic layout. I need to develop footer which stick to the bottom of a page. For example, consider the condition of regardless the height of the content of a page, the footer should stick to the bottom of the page.

When an HTML page contains a small amount of content then footer comes halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen.

There are several ways to make a footer stick to the bottom of a page using CSS, but the cleanest and most well tested method I have come across is CSS Sticky Footer.

You will need to structure your webpage in the following way in order to manage footer at the bottom of page.

This is your HTML part:

 
Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

This is your CSS part:

html,body {
	margin:0;
	padding:0;
	height:100%;
}
#container {
	min-height:100%;
	position:relative;
}
#header {
	background:#c2dcf4;
	padding:10px;
}
#content {
	padding:10px 10px 80px 10px;
}
#footer {
	background:#ccc;
	width:100%;
	height:80px;
	position:absolute;
	bottom:0;
	left:0;
	padding:0px 10px 0px 10px;
}

The above CSS will keep your footer at the bottom of the page but you will need to make a few tweaks to the code.

You need to make sure that height of your footer and bottom margin of your content should be same. you can see in the above example.

You can see online demo from here, sticky_footer

Hope this will help you !!!.

How to show table cell element as a separate table row element

Hi friends,

Once in my project I want to show table cell element as a separate table row element So I have searched on it and find the solution on same.

Let me share it with you; we can do it by using css style properties

See the below example:



First Second Third Fourth

Here, you can see that there are one table row and four table cell. Now I want to all table cell as a separate table row element.

You can see that I have defined class in table cell i.e. “row”. In this class i have display element as a table-row which fulfill my requirements.

Hope this will also work for you !!!!.