Category: Systems

Allow user to print the contents of an element

Here is a cross browser solution to allow the user to press a button and print out the contents of an element. Suppose we have a content area with an id of “mycontentarea”, and a button that says “print”. We can attach a handler to the click event and run this code in the function to print out the contents of “mycontentarea”:

[code]
w=window.open();
reportinfo =  document.getElementById(‘mycontentarea’);
w.document.write(reportinfo.innerHTML);
w.document.close();
w.print();
w.close();[/code]

Automation: open and close a form every year.

As complex paperless forms become full fledged web applications, there is a growing need for automation such as  having a form available to be used from a certain date/time range. For example,  a health insurance sign up that opens on December 1 at 9:00 AM and closes on December 24th at 5:00pm Pacific Time. We want these times to be hard coded for the server, in case the users  are from different time zones, we want everyone to be able to sign up at exactly the same server time, regardless of their location. So if they were from New York, they would be open to sign up at 3pm December 1st, etc….

We need a few variables.
open_date – the date / time that the form will open
close_date – the date / time that the form will close
today_date_server – the current date/time of the servertoday_date_user – the current date/time of the users machine.
user_time_difference – the difference between the users time and the servers time. this could be used to display correct messages about when the user can sign up.

openorclosed – this will be set by the logic then used to display the correct messages and ui views
closedmessage – this will be a spot for the special message that will display to the user when the form is closed.

So now that I have my variables set up, lets put them to use. I will compare the dates and make sure that today is within the form opening range. Then I will set the openorclosed variable to open or closed based on the results. The I will update the ui view according to the openorclosed variable.

Here is the final form opening and closing automation logic in VbScript:

open_date = "9/2/" & year(NOW) & " 09:00 AM"
close_date = "10/14/" & year(NOW) & " 05:00 PM"
today_date_server = NOW()
datediffopen = DateDiff("n",today_date_server, open_date)
datediffclosed = DateDiff("n", today_date_server, close_date)
If datediffopen < 0 and datediffclosed > 0 Then
openorclosed = "open"
Else
openorclosed = "closed"
End If

This will automatically open and close the form to the users every year. Hooray for Automation!

Now I can manipulate the ui view using the variables, so the user will know when the form is open and why its closed.

[code language=”vb”]
If datediffopen > 0 and datediffclosed > 0 Then
‘display message for before the form has opened for the year.
openorclosedmessage=”The nomination form will be open from ” & open_date & ” to ” & close_date & “. Please submit your nominations between this time period for them to be considered.”
ElseIf datediffopen < 0 and datediffclosed < 0  Then
‘display message for after form has closed for the year.
openorclosedmessage=”The nominations were due by ” & close_date & “. The nominations are over for the ” & year(NOW) & ”  year. The nomination form is closed.”
End If[/code]

To display the date and time in a user friendly format –  Tuesday, October 14, 2014 at 5:00:00 PM – use the FormatDateTime function:
[code language=”vb”]FormatDateTime(close_date, 1)  at FormatDateTime(close_date, 3)[/code]

To debug the automation code, use this snippet:

[code language=”vb”]

‘ this message is for de bugging the open / close  automation
closedmessage = closedmessage + “<p class=’redtext boldtext’>Today is ” & today_date_server & “. The form will open on ” & open_date & ” and close on ” & close_date & “. Is today inside the date range?” & isitopenorclose & “. The date dif open is ”  & datediffopen & “. the date diff closed is ” & datediffclosed & “</p>”

[/code]

Now I would like to take this a bit further, by having the form open on the first Monday of January, and close on the last Friday of January. Here is the algorithm I have come up with:

[code]
mydate = “1/1/” & year(NOW) & ” 9:00 AM”
dtmDate = CDate(mydate)
daycounter = 1
Do While daycounter <= 7
‘ response.write(Weekday(dtmDate) & ” is the weekday for  ” & dtmDate & “<br/>”)

If Weekday(dtmDate) = 2 Then
response.write(“<br>The form will open on ” & FormatDateTime(dtmDate, 1))
Exit Do
End If
daycounter = daycounter + 1
dtmDate = dtmDate + 1
Loop

daycounter = 1
Do While daycounter <= 31
‘response.write(“<br />” & Weekday(dtmDate) & ” is the weekday for  ” & dtmDate & “<br/>”)

If Weekday(dtmDate) = 6 Then
thelastfriday=dtmDate
End If
daycounter = daycounter + 1
dtmDate = dtmDate + 1
Loop
response.write(“<br>The form will close on ” & FormatDateTime(thelastfriday, 1))
[/code]

For the year 2014, the result will display:
The form will open on Monday, January 06, 2014
The form will close on Friday, January 31, 2014

Now I can drop this into my forms that will open in the pattern of first Monday, and close on last Friday of January.

Student Club Roster Form

I was assigned the task of turning the Student Club Roster Form paperwork into a paperless web application. This was a challenging project involving a lot of dynamic elements and on the fly data validation.

I created a day of the week chooser to hide some intrusive and unintuitive form checkboxes and turn it into a slick ui with a responsive modern design.

See this post for more information about the day of the week chooser.

I. T. Project Request Form

The head of the I.T. Department at Skagit Valley College asked me to convert the paper form that was used for submitting an I.T. Project Request. I used my 3DW DevCloud Tools to whip out this project in a small amount of time. My project management cloud is the perfect way to track and complete this project. As you can see from the tabs in the screen shot, I’m logged into my DevCloud, and have my task lists, notes and planning documents right at my fingertips. These powerful tools allow me to compete projects quickly and efficiently, using the best practices and techniques I have honed through the years of web application development at Skagit Valley College.

Using jquery document delegate to create Inline Editable fields.

I have come up with a technique to allow the user to edit content “Inline”.

Lets look at an example. I have a table of data, and the user needs to be able to edit the “Description” Field. Rather than take the user away from this ui view, I wish to enable “Inline Editing” like many powerful applications are offering these days.

The first step is to assign functions to the correct fields and capture the users input events. The user would click on the field to select it, so lets set up a doc delegate event to capture a click on the description field. We need to use doc delegate because the data is dynamic and so isn’t  in the DOM when the events handlers are normally assigned. Read my post about JQuery Document Delegate to catch up on this technique. I am going to delegate the capture of a click event on any table row <tr> with a class of “editBannerDescription”

$("#bannerslist").on("click", ".editBannerDescription", function(e){
var thedata=$(this).html();
alert(thedata);
 });

Yeah boyeee we have captured a click event for any element in the bannerslist table, and have access to the content that is in the table cell.

The next step is to alter the ui view so the user can edit the contents of the description table cell. I use a JQuery / JavaScript function to accomplish this:

enableEditDescription(object, bannernid){
     console.log("Message from enable Edit Description function: lets 
enable to edit the description of slide id:"+bannernid+" from
description of : "+$("#"+object).html()); }

I will continue to modify the enableEditDescription function to alter the ui view when the user clicks. I will grab the content from the cell, and replace the content with a text area whose value is the text that was in the cell.

The final code looks like this:

$("#bannerslist").on("click", ".editBannerDescription" , function(e){
var thedata=$(this).html();
var object=$(this).attr("id");
var getbannernid = object.match(/d+$/);
if(getbannernid){
    bannernid=parseInt(getbannernid[0], 10);
    console.log("Message from banner admin inc, here in doc delegate for 
     editBannerDescription with content of :"+thedata+" in cell 
     object id: "+object+" for banner nid: "+bannernid);
     enableEditDescription(object, bannernid);}
else{ alert('error getting id');}
 }); // end #bannerslist doc delegate actions

Now, when the user clicks a table cell with editable content, the cell changes into an inline editor.

The user needs to be able to “escape out” of the edit mode, discarding any changes that were made in the field.

Lets start with capturing the escape key press event when the user is in an editing field. We’ll use the good ol doc  delegate to capture this as so…

$("body").on("keydown", "textarea, input", function(e){
if(e.keyCode==27){
console.log("We have key press of escape key, on event target " + e.target.id + 
" lets exit edit mode without saving changes. Lets decide what place they're editing...");}
}); // end on keydown event handler

Now I can put back the original content of the cell and the user will have “escaped out” of edit mode.

The next step is going to be really fun. We are going to capture the press of the “Edit” button and save the new content into our cms.

Banner and Slider Administration Control Panel

Due to my years of experience designing custom content management systems, I have been tasked with creating a plug in to the CMS at Skagit Valley College that will allow staff to administer their respective home page image sliders via a web based admin control panel. Features include list of slides, ability to upload new slides, delete slides, arrange the sequence of the slides, and control the display of the slides. The slides are live at www.skagit.edu

The users will also have the ability to administer home page banners. Features include list of banners, ability to upload new banners, assign banner to homepage, delete banners.

The purpose of this project is to reduce webmaster workload by allowing staff to admin their respective home page sliders and banners. I will be taking on the role of Senior Developer for this project, and will perform the duties of all roles including : Information Architect,  User Experience Designer, User Interface Designer, Web Application Developer, SQL Database Administration.

I begin with the I/A documentation, the key to every successful project. After creating the Creative Brief, and clearly stating the objectives, purpose, target audience and timeline for the project, I then create the Flowcharts, Wireframes and User Stories.

With all the proper documentation in place, I have a clear project scope and will begin the design, develop and deployment by using my project management cloud.

From the screenshot you can see the hand written notes from meeting with the client, and the task lists that I created for the project. Each task list is filled with the tasks that I need to get done, and notes about each topic. It really helps keep me on track and manage the progress for the project.

I am going to develop an object oriented api for this project, with the application programming interface expressed in javascript and vbscript.

The api to handle the upload of slides will be interesting, since there isn’t a build in method for capturing the form upload data. We are using a third party library to handle the upload, and I haven’t even seen it yet.

I have  the list of slides layout in a table, since its the perfect use of tablular data. The list is generated dynamically and injected into the dom via a call to the api. This has the effect of negating my events that I place on the image to have a mouseover thumbnail preview. I  need to use the doc delegate that I deved into in a previous article.

Im going to delegate the event to my slides layout table, and then apply it to any td element with the class of “previewzone”. So lets slap it on there and see if it works…

$("#slideslist").on("mouseover mouseout", ".previewzone", function(e){
alert(e.type);
});
There is now a mouseover and mouseout event on any td with the class of “previewzone”

Sweet! Now I can set up the event handler so that it displays a preview of the image on mouseover, and hides it on mouseout.

Creating and maintaining secure passwords using Password Generators

Creating secure passwords can be pretty lame. Most sites have different requirements such as number of characters, the need to include special characters, capital letters, and numbers. I have found some great resources for creating passwords generated to specifications such as number of characters, special characters and other requirements.

Beyond Responsive Web Design – Creating Content for Different Devices

Screen shot of bonus content on large screen.

There are some things that should not be handled with responsive design. For example I’m creating bonus content for devices with very large screens. Using responsive design, the common technique is to load this bonus content into the dom but not show it for certain size screens. However this still takes its toll on the load time and would impact performance of the device since it would still have the content in its memory.

For the bonus content,  I am going to display  a large graphic image only on devices that meet a certain height and width requirement. This can be easily accomplished without a third party plug in or framework using standard JavaScript.

Screenshot of content on tablet

Content on Samsung Galaxy Mobile Phone

The JavaScript behind this is surprisingly simple and cross browser compatible. I have tested successfully on  PC’s with new ie and firefox, surface pro, android 2.2 up, ipad, iphone, blackberry playbook, older  imac with safari.

var screenheight=screen.height;
var screenwidth=screen.width;
if(screenwidth>=1280 && screenheight >= 1000){
// execute my sweet js script to display bonus content.
}

	


	
	






	
	

		
3DW Tools CSS Styles Library
	


	

		


After three years of  designing proof of concept and rapid prototypes I have decided to compile all of my custom css styles that were spread between multiple projects into one master library of css style design patterns. My 3DW Tools CSS Styles Library is managed via my cms, and when included into a project,  grants  access to some really great styles that can be  called using an easy to remember  style language.


In order to produce HTML 5 designs without Flash or Photo Shop, my 3DW Tools CSS Styles Library is the perfect addition to a blank HTML 5 page or a  JQuery build, giving me the ability to design some really great mockups, proof of concept, rapid prototype, and user experience designs.


Here is the link to the visual reference.


Here is a css box shadow generator https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Box-shadow_generator


Here is a css button generator https://developer.cdn.mozilla.net/media/uploads/demos/m/o/mok20123/8aff6ca4f35726d64880dd6fc77739ba/css3-button-generato_1325474481_demo_package/index.html


Here is the css border radius generator https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-radius_generator