Hussien.salah

How to Display Date Format in JavaScript?

You can display different date format using Date object in JavaScript for your webpage or web application.The different date format may be year only (YYYY), year and month (YYYY-MM), complete date (YYYY-MM-DD), complete day with day name (YYYY-MM-DD DayName) and date with different time format. Different methods are available in date object to manipulate date in JavaScript. The Date object automatically hold the current date and time as its initial value. You can extract Year, Month, Day along with Hours, Minutes and Seconds from it. Here I have given very simple codes for printing different date formats, you can use respective codes for displaying that format of date on your web page.

JavaScript Date Format YYYY (year only)

<script type="text/javascript">
function displayDate(){
var now = new Date();
var year=now.getFullYear();
date.innerHTML=year
}
window.onload=displayDate;
</script>
<div id="date"></div>

It prints Year only. i.e. 2014

JavaScript Date Format YYYY-MM or MM-YYYY (year and month)

<script type="text/javascript">
function displayDate(){
var now = new Date();
var month=now.getMonth();
var monthName=new Array(12)
 monthName[0]="January";
 monthName[1]="February";
 monthName[2]="March";
 monthName[3]="April";
 monthName[4]="May";
 monthName[5]="June";
 monthName[6]="July";
 monthName[7]="August";
 monthName[8]="September";
 monthName[9]="October";
 monthName[10]="November";
 monthName[11]="December";
var year=now.getFullYear(); 
date.innerHTML=monthName[month]+",  "+year
}
window.onload=displayDate;
</script>
<div id="date"></div>

It prints Year and Month. i.e. February, 2014

JavaScript Date Format YYYY-MM-DD (complete date)

<script type="text/javascript">
function displayDate(){
var now = new Date();
var today=now.getDate();
var month=now.getMonth();
var monthName=new Array(12)
 monthName[0]="January";
 monthName[1]="February";
 monthName[2]="March";
 monthName[3]="April";
 monthName[4]="May";
 monthName[5]="June";
 monthName[6]="July";
 monthName[7]="August";
 monthName[8]="September";
 monthName[9]="October";
 monthName[10]="November";
 monthName[11]="December";
var year=now.getFullYear();
var day=now.getDay();
date.innerHTML=monthName[month]+today+ ",  "+year
}
window.onload=displayDate;
</script>
<div id="date"></div>

It prints Year, Month and Day. i.e. February21, 2014

JavaScript Date Format YYYY-MM-DD-DayName (date with day name)

<script type="text/javascript">
function displayDate(){
var now = new Date();
var today=now.getDate();
var month=now.getMonth();
var monthName=new Array(12)
 monthName[0]="January";
 monthName[1]="February";
 monthName[2]="March";
 monthName[3]="April";
 monthName[4]="May";
 monthName[5]="June";
 monthName[6]="July";
 monthName[7]="August";
 monthName[8]="September";
 monthName[9]="October";
 monthName[10]="November";
 monthName[11]="December";
var year=now.getFullYear();
var day=now.getDay();
var dayName=new Array(7)
 dayName[0]="Sunday";
 dayName[1]="MOnday";
 dayName[2]="Tuesday";
 dayName[3]="Wednesday";
 dayName[4]="Thrusday";
 dayName[5]="Friday";
 dayName[6]="Saturday";
date.innerHTML=monthName[month]+today+ ",  "+year+"  "+dayName[day]
}
window.onload=displayDate;
</script>
<div id="date"></div>

It prints Year, Month and Day with Day Name. i.e. February21, 2014 Friday

JavaScript Date Format YYYY-MM-DD hh:mm (date with hour and minute)

<script type="text/javascript">
function displayDate(){

var now = new Date();
var today=now.getDate();
var month=now.getMonth();
var h=now.getHours()
var m=now.getMinutes()
var s=now.getSeconds()

m=checkTime(m)
s=checkTime(s)

var monthName=new Array(12)
 monthName[0]="January";
 monthName[1]="February";
 monthName[2]="March";
 monthName[3]="April";
 monthName[4]="May";
 monthName[5]="June";
 monthName[6]="July";
 monthName[7]="August";
 monthName[8]="September";
 monthName[9]="October";
 monthName[10]="November";
 monthName[11]="December";
 
var year=now.getFullYear();
var day=now.getDay();

var dayName=new Array(7)
 dayName[0]="Sunday";
 dayName[1]="MOnday";
 dayName[2]="Tuesday";
 dayName[3]="Wednesday";
 dayName[4]="Thrusday";
 dayName[5]="Friday";
 dayName[6]="Saturday";

date.innerHTML=monthName[month]+today+ ",  "+year+"  "+h+":"+m
}
function checkTime(i)
{
if (i<10)
{ i="0" + i}
return i
}
window.onload=displayDate;
</script>
<div id="date"></div>

It prints Year, Month and Day with Hour and Minute. i.e. February21, 2014 9:18

To include other time formats refer to the previous post: How to Create a Digital Clock in JavaScript?

What are the Different Ways to Redirect Page in JavaScript?

When you click on a link or type the URL to go to one page but sometimes it may go to another page internally due to page redirection on that page. There may be several reasons to redirect to a new page from the original page. The reasons you may want redirection are to redirect from your old domain to new domain, to redirect visitors from mobile device to the mobile site, to redirect to the visitors from different countries to their respective country level domain URL and many more.You can use temporary or permanent redirection methods to redirect from on page to another page. The permanent redirection is server side redirection and temporary redirection in client side redirection.

Using JavaScript you can do client side redirection, however it is not preferred method for page redirection, a search engine may ignore JavaScript redirection. Do not use this feature to spam the search engine, if such you may band from search engine. Here are given different redirection methods and their purpose to redirect from one page to another page in JavaScript, you may use any one of them according to your circumstance.

Simple JavaScript Redirection to Another Page

1. Using window.location method: Use these scripts to the head section of your page.

<script type="text/javascript">
window.location="http://www.newpage.com";
</script>

2. Using window.location.href method: Use these scripts to the head section of your page.

<script type="text/javascript">
window.location.href="http://www.newpage.com";
</script>

3. Using window.location.assign method: Use these scripts to the head section of your page.

<script type="text/javascript">
window.location.assign="http://www.newpage.com";
</script>

4. Using window.location.replace method: Use these scripts to the head section of your page.

<script type="text/javascript">
window.location.replace="http://www.newpage.com";
</script>

JavaScript Redirect to Another Page After 'x' Seconds

1. Using onLoad method: Use these scripts in body tag to redirect to another page after '5' seconds.

<body onLoad="setTimeout(location.href='http://www.newpage.com', '5000')">

2. Using Redirect function: Use these scripts in the head section to redirect to another page after '5' seconds with redirection message.

<script type="text/javascript">
 
function Redirect()
{
 window.location="http://www.newpage.com";
}
document.write("You will be redirected to a new page in 5 seconds");
setTimeout('Redirect()', 5000);
 
</script>

JavaScript Redirect to Another Page On Load

1. Using onLoad method: Use these scripts in body tag to redirect to another page on load.

<body onLoad="setTimeout(location.href='http://www.newpage.com', '0')">

2. Using a function: Use these scripts in the head section to redirect to another page on load.

<script type="text/javascript">
 
function Redirect()
{
 window.location="http://www.newpage.com";
}
setTimeout('Redirect()', 0);
 
</script>

JavaScript Redirect to Another Page On Click

1. Using a function: Use these scripts in the head and body section to redirect to another page on button click.

<head>
<script>
function myButton()
{
window.location="http://www.siteforinfotech.com";
}
</script>
</head>
<body>
<button onclick="myButton()">Click me</button>
</body>

JavaScript Redirect to Another Page Passing Variables

1. Using a function: Use these scripts in the body section to redirect to another page on button click with passing the value of text box.

<body>
<form action="/search">
Enter your search text: <input type="text" id="searchtext" name="q">
&nbsp;<input onclick="myFunction()" type="submit" value="Search It" /></form>
<script>
function myFunction()
{
var search = document.getElementById("searchtext").value;
window.location = '/search?q='+search; 
}
</script>
</body>

How to Create Pop Up Menus in Oracle Forms ?

Pop Up menus are those, which are displayed on the screen when we right click on it. Pop Up menu makes any application easier to use it. In Oracle Forms also we can make pop up menus to add different menu items for the operating form. The items for operations such as inserting, saving, deleting and navigating records can be included in the pop up menu. Here I have written some steps for creating pop up menus in Oracle Forms along with their screenshots.

Steps for Creating Pop Up Menus

1. At first create a form as the post "How to Create Oracle Forms by Using Wizard ?" . Click on Pop Up option in object navigator, Click on plus + sign and rename the menu name. Right click on menu name and click on Menu Editor. Add the new items by clicking on plus down and plus right buttons as given below.

Menu Editor for Pop Up Menus in Oracle Forms

2. Add the items as given in the image below.

3. Right click on menu items on the object navigator and click on PL/SQL Editor option. Write PL/SQL queries On the PL/SQL Editor window as given below.

PL/SQL Editor for Pop Up Menus in Oracle Forms

4. Add the following PL/SQL queries in the PL/SQL editor for respected items.

PREVIOUS: previous_record;
NEXT: next_record;
FIRST: first_record;
LAST: last_record;
INSERT: create_query;
CONDITION: enter_query;
SAVE: commit;
DELETE: delete_record;
EXIT: exit_form;

5. For adding Menu Item Type as Separator, go to Property Palette by right clicking on menu item and clicking on Property Palette option. Select Separator on Menu Item Type property under Functional property.

Property Palette for Pop Up Menus in Oracle Forms

6. For assigning Pop Up menu on the form, right click on canvas and click on Property Palette option. From Popup Menu option under Functional property select the Popup Menu name as in the image below.

7. Save, Compile and Run the form. You can view the Popup menu while right clicking on form area.

How To Make Simple CSS Stylesheet for a Website ?

CSS language is used to simplify the process of making web pages presentable. It handles the look and feel part of a web page. Not only it makes the web development process more fast and saves the time but also makes the page loading time more faster and easier for maintenance. So today's almost all of the websites are designed by using CSS. You can design and link the CSS file very easily to the web page. In this post I am telling you on "How To Make Simple CSS Style Sheet for a Website ?" by using very simple steps and ideas. I hope that after reading this post you will able to make simple design for your web page using CSS. The format of the HTML page will be as in the image on right side.

Steps To Make Simple CSS Style Sheet for a Website

1. At first create a HTML file by using any text editor like notepad. On the HTML file write the following code and save it on the ".html" format.

<html>
<head>
<title>How To Make Simple CSS StyleSheet for a Website ?</title>
<link rel="Stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="banner">
<p>This is banner</p>
</div>

<div id="navigation">

</div>

<div id="content_area">
<p> This is content area</p>

</div>

<div id="sidebar">
<p> This is sidebar</p>
</div>

<div id="footer">
<p> this is footer</p>

</div>
</div>
</body>
</html>

Here I have used "id" selector for css, you can also use class selector as <div class="wrapper"> etc.

2. Then create a CSS file by using any text editor like notepad. On the CSS file write the following code and save it on the ".css" extension format.

#wrapper {
 width:1080px;
 margin:0 auto;
 padding:10px;
 border:5px solid #dedede;
 background-color:#fff;
 }

#banner {
 height:150px;
 border:3px solid #e3e3e3;
 background-size:cover;
 background-image: url("banner.jpg");
 background-repeat: no-repeat;
 }

#navigation {
 height:50px;
 border:3px solid #e3e3e3;
 margin-top:20px;
 width:auto;
 background-image: url("nav.jpg");
 
 }

#content_area{
 float:left;
 width:755px;
 margin:20px 0 20px 0;
 padding:10px;
 border: 3px solid #e3e3e3;
 text-align:justify;
 }

#sidebar {
 float:right;
 width:250px;
 height:388px;
 border:3px solid #e3e3e3;
 margin-top:26px;
 }

#footer {
 clear:both;
 width:auto;
 height:40px;
 margin-top:20px;
 background-image: url("footer.jpg");
 border:3px solid #e3e3e3;
 text-align:center;
 color:#fff;
 }

Replace the image url i.e. "banner.jpg" by your image path on the css code above.

Replace the stylesheet name "style.css" by your saved stylesheet name on the HTML code above. The stylesheet file should be on the same folder or should give the full path.

For "class" selector, you have to write the css code as the format .wrapper{ } etc.

You can add the menu items on navigation by adding HTML codes and CSS codes on HTML and CSS files copying from the previous post: How To Create Simple Menu Using CSS ?

You can add the contents on "content_area", "sidebar" and "footer" by using different HTML Tags like <p> </p> etc.

How To Create Simple Menu Using CSS ?

By using CSS codes we can create websites menus more easily with very simple and small number of codes. So uses of CSS menus on websites makes your website lighter and faster, also runs on almost all of the browsers. Here I have given some useful steps and codes for creating simple menu using CSS. It may help you to make simple, attractive and awesome menu for your own website by using the following steps and codes.

To Create Simple Menu Using CSS

# At first create the following HTML codes on your webpage.

Replace the "#" with your link URL included in the HTML code below.

<div id="navigation">
 <ul id="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">Item1</a>
  <ul>
   <li><a href="#">SubItem1</a></li>   
   <li><a href="#">SubItem2</a></li>
   <li><a href="#">SubItem3</a></li>
   <li><a href="#">SubItem4</a></li>
  </ul>
 </li>
    
 <li><a href="#">Item2</a></li>
 <li><a href="#">Item3</a></li>
 </ul>
</div>

# Create a CSS file with the following codes.

Replace the 'back.jpg' with your image file included in the css code below.

#navigation{
  width:auto;
  height:30px;
  float:left;
  background-image: url('back.jpg');  
  border:none;
  margin-top:20px;
  margin-left:0px;
 }

#nav{
 list-style: none;
 padding:0px;
 display:block;
 margin-top:2px;

}

#nav li{
 font-size:20px;
 float:left;
 position:relative;
 width:180px;
 hight:50px;
 display:block;
 align:center;
 padding-left:10px;
 
}

#nav ul{
 list-style:none;
 margin:0;
 padding:0;
 width: auto;
 display:none;

}

#nav li:hover{
 background-image:url('back.jpg');
 background-repeat:no-repeat;
 background-size:cover;
}

#nav li:hover>ul{
 display:block;
 position:absolute;
 
}


#nav li ul{
 left:0px;
 margin-top:0px;
 padding-top:0px;
}

#nav li ul li{
 background-image:url('back.jpg');
 background-repeat:no-repeat;
 background-size:cover;
 border:1px solid #e3e3e3;
 padding-left:10px;
 width:178px;
}


#nav a:link, #nav a:active, #nav a:visited{
 display:block;
 color:#ff00aa;
 text-decoration:none;
}

# Link CSS file to the web page.

Add the following code to link CSS file to the web page between <head> tags.

<head>

<link rel="Stylesheet" type="text/css" href="style.css">

</head>

Hussien.salah

How to Display Date Format in JavaScript?

JavaScript Date Format YYYY (year only)

JavaScript Date Format YYYY-MM or MM-YYYY (year and month)

JavaScript Date Format YYYY-MM-DD (complete date)

JavaScript Date Format YYYY-MM-DD-DayName (date with day name)

JavaScript Date Format YYYY-MM-DD hh:mm (date with hour and minute)

Related Posts

What are the Different Ways to Redirect Page in JavaScript?

Simple JavaScript Redirection to Another Page

JavaScript Redirect to Another Page After 'x' Seconds

JavaScript Redirect to Another Page On Load

JavaScript Redirect to Another Page On Click

JavaScript Redirect to Another Page Passing Variables

Related Posts

How to Create Pop Up Menus in Oracle Forms ?

Steps for Creating Pop Up Menus

Related Posts:

How To Make Simple CSS Stylesheet for a Website ?

Steps To Make Simple CSS Style Sheet for a Website

Related Posts:

How To Create Simple Menu Using CSS ?

To Create Simple Menu Using CSS

Preview of CSS Menu

Related Posts: