PAWDD E-Training
24Sep/091

JavaScript Out of Office Script

Hello again.  I have completed my very first functional JavaScript program.  Even though this program is simple in its approach, it is functional and will display anywhere you want, whether or not you are in your office.

I have created this script to change the color of the text to green when you are in the office, and to red when you are not.  This could be modified so that it changes the color of a specific division to your color of choice, or not to change the background color at all.

The appropriate message and color is displayed depending on your office hours. The following office hours were used as a guide:

Monday + Wednesday:      3:30pm-5:00pm
Tuesday + Thursday:   2:00pm-4:00pm
Friday:   1:00pm-4pm
Saturday + Sunday:      Out of the office

Here is the code in action, it will display only a simple message and will display the message and color inside of a H1 tag , the message will be appropriately displayed whether I am in my offce or not regarding the hours above... Please remember these hours from above are NOT my office hours, they are fictitious.

Where am I?

--------------------------------------------------------------- 

---------------------------------------------------------------

Download the code as a zipped file: JavaScript Office Hours Script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<script language = "JavaScript" type = "text/javascript">
	<!--
		var hours; 	//holds the determined hour of the day
		var minutes; //is the minutes
		var dow; //holds the day of the week
		var region; //holds the region of the day
		var outcome; //holds the outcome for the region
		var Now; //uses the date constructor to create a date object
		var openTime; //holds the time I will be in the office next
		var backgroundColor;  //holds our background color
		var message; //holds our message
		var nextTime; //holds our "next time" I will be in the office
		var outTime; //holds the time I leave the office
		var textColor;
 
 
		Now = new Date(); //creates the "Now" date object and assigns its value to variable "Now"
 
		hours = Now.getHours(); //retrieves and stores the hours from the "Now" date object
		minutes = Now.getMinutes(); //retrieves and stores the minutes from the "Now" date object
		dow = Now.getDay(); //retrieves and stores the "day of the week" from the "Now" date object
		textColor = backgroundColor;
 
		//starts the determination of what region of the week we are in via a "time" relationship
		if (hours < 13) { //0:00-12:59
			region = "A";
			}
		else if (hours < 14) { //13:00-14:00
			region = "B";
			}
		else if ( (hours == 14)||((hours == 15) && (minutes < 30)) ) { //14:00 or 15:00-15:29
			region = "C";
			}
		else if (hours < 16) {//15:30-15:59 - Could also be ((hours == 15) && (minutes >=30)) - but we don't need it due to we already eliminated the previous 29 minutes of the 15th hour
			region = "D";
			}
		else if ((hours == 16) && (minutes < 30)) { //16:00-16:29
			region = "E";
			}
		else if (hours < 17) { //16:30-16:59
			region = "F";
			}
		else {//region must be "G" - 17:00-23:59
			region = "G";
			}	
		//  Un-comment the line below to write the region to the screen for testing		
		//  document.writeln ("<h1>" + region + "</h1>");
 
 
		//determines the outcome based on a "dow" and "region" relationship
		if ( ((dow == 1) && (region == "G")) || ((dow == 2) && ((region == "A")||(region == "B"))) ) {
			outcome = 3; 
			}
		else if ( ((dow == 3) && (region == "G")) || ((dow == 4) && ((region == "A")||(region == "B"))) ) {
			outcome = 5;
			}
		else if ( ((dow == 2) && (region >= "E")) || ((dow == 3) && (region <= "C")) ) {
			outcome = 4;
			}
		else if ( ((dow == 4) && (region >= "E")) || ((dow == 5) && (region == "A")) ) {
			outcome = 6;
			}
		else if ( (( dow == 6) || (dow == 0)) || ( ((dow == 5) && (region >= "F")) || ((dow == 1) && (region <= "C")) ) ) {
			outcome = 2;
			}
		else{
			outcome = 1;
			}	
		//  Un-comment the line below to write the outcome to the screen for testing		
		//  document.writeln ("<h1>" + outcome + "</h1>");
 
 
		// start open varible set based on the "outcome"
		if (outcome == 1)
			openTime = true;
		else 
			openTime = false;
 
 
		//set messages for office times preceeding the current time via the "outcome"
		if (outcome == 1)
			nextTime = "";
		else if (outcome == 2)
			nextTime = "Monday at 3:30pm";
		else if (outcome == 3)
			nextTime = "Tueday at 2:00pm";
		else if (outcome == 4)
			nextTime = "Wednesday at 3:30pm";
		else if (outcome == 5)
			nextTime = "Thursday at 2:00pm";
		else //outcome must be 6
			nextTime = "Friday at 4:30pm";
 
 
		//determine outTime via a "outcome" and "dow" relationship
		if ( (outcome == 1) && (dow == 1) )
			outTime = "5:00pm";
		else if ( (outcome == 1) && (dow == 2) )
			outTime = "4:00pm";
		else if ( (outcome == 1) && (dow == 3) )
			outTime = "5:00pm";
		else if ( (outcome == 1) && (dow == 4) )
			outTime = "4:00pm";
		else if ( (outcome == 1) && (dow == 5) )
			outTime = "4:30pm";
		else //outTime must be nothing because it is Saturday or Sunday
			outTime = "";
 
 
		// start message variable set
		if (openTime) {
			backgroundColor = "#00FF00";
			message = "<h1 style=\"color:#0F0\">" + "I am in my office," + "<br />" + "I will be in my office until " + outTime + "</h1>";
			}
		else {
			backgroundColor = "#FF0000";
			message = "<h1 style=\"color:#F00\">" + "I am out of the office." + "<br />" + "The next time I will be in is: " + nextTime + "</h1>";
			}				
 
 
		//write the results to the screen with backgroundColor changing
		document.bgColor = "#516c82";				
		document.writeln (message);
 
 
 
 
		//  success at my first JavaScript program is sweet beautiful bliss :)  
	//-->
</script>
24Sep/090

JavaScript E-Training

JavaScript PAWDD E-Training.

I am a proficient begenning JavaScript programmer for the web.  i have had wonderful teachers at my college.  I will be blogging here about everything I learn in my JavaScript classes from start to finish.

I hope that the information you find here will help you discover the strength of JavaScript, and how to be a better more efficient programmer.

24Sep/090

PHP Coding Tips

This text was parsed PHP code in the post area

22Sep/09Off

PAWDD and Shaded Pixel LLC

Shaded Pixel LLC is a Web Design and Consulting Company owned by Jason S. Oney. PAWDD is sponsored by Shaded Pixel LLC and is maintained by Web developer Jason S. Oney.

If you have any questions or suggestions please feel free to contact the owner of PAWDD Jason S. Oney at admin@PAWDD.com.

More to come!

22Sep/090

Styling Lists Menus with Images that Expand

It is common to see a list styled as a vertical or horizontal menu. Our menus are usually very simple but why limit ourselves to simple text lists as a menu.

Especially when CSS is so powerful and can be used along with the tag to allow for genuine gorgeous list menus styled with images that expand and contract with link text length.

The following is CSS that will allow you to have beautiful image styled menus that expand and contract with content.

This example only expands horizontally, not vertically, so it is not a good idea to have multi-line text in your lists.

The Image

Image to use for your list menu up/down states

Image to use for your list menu up/down states

This example used an image that is 300x48, thusly taking into account that your link will never be more than 296px wide, and accounting for a 24 pixel high menu item, with a hover state built into the image using a stacked image that contains both states in one image, thus reducing load on your server, and removing the need for OnLoad events on the body.

The CSS

#menu li {
     list-style:none;
     float:left;
     margin-right:4px;
}
* html #menu li {
     height:24px;
     display:inline;
}
#menu li a {
     height:24px;
     display:block;
     background:url(images/nav.png) no-repeat left top;
     padding-left:15px;
     color:#405768;
     font:700 0.88em/26px Arial, Helvetica, sans-serif;
     text-decoration:none;
     cursor:pointer;
}
#menu li a span {
     height:24px;
     display:block;
     background:url(images/nav.png) no-repeat right top;
     line-height:24px;
     padding-right:15px;
}
#menu li a:hover, #menu li a.s {
     background-position:left bottom;
}
#menu li a:hover span, #menu li a.s span {
     background-position:right bottom;
}
* html #menu li a, * html #menu li a span {
     width:1%;
     white-space:nowrap;
     cursor:pointer;
}
* html #menu li a span {
     position:relative;
}

The XHTML

<ul id="menu">
	<li><a title="button 1" href="http://"><span>Button 1</span></a></li>
	<li><a title="Button 2" href="http://"><span>Button 2</span></a></li>
	<li><a title="Button 3" href="http://"><span>Button 3</span></a></li>
</ul>
10Sep/092

Make Lists Align Properly

Bulleted lists can present many issues in formatting in older and newer browsers.  I consistently run into a problem where my bulleted lists will slam up against the far left side of my division.

The fix for this issue is to use CSS to replace the standard bullet image with a left side margin and a background image as the bullet, or to remove the bullet image completely by placing a transparent background image as the bullet.

The CSS for the ul and li is as follows: 

ul  {
     white-space: normal;
     display: block;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     margin-left: 5px;
}
li  {
     margin: 0px;
     padding-top: 0px;
     padding-right: 0px;
     padding-bottom: 3px;
     padding-left: 10px;
     list-style: disc url(none) outside;
     background-image: url(../images/bullet/bullet.gif);
     background-repeat: no-repeat;
     background-position: left top;
}
   

Dashboard

Training Categories

Shaded Pixel LLC

Monthly Archive

Page Links

PAWDD E-Training