Jeremyopolis » tutorials http://jrsandberg.com An History Of Nerdly Activities Mon, 27 Sep 2010 02:57:58 +0000 en hourly 1 http://wordpress.org/?v=3.1.3 Windows Echo Without A Newline http://jrsandberg.com/2010/09/windows-echo-without-a-newline/ http://jrsandberg.com/2010/09/windows-echo-without-a-newline/#comments Mon, 27 Sep 2010 02:57:58 +0000 Jeremy http://jrsandberg.com/?p=155 Ever wanted to echo something in a cmd file and NOT have a newline added onto the end of the string?  Well, here is the answer:

ECHO/|SET /p=Text you want to be echo'ed here!

]]> http://jrsandberg.com/2010/09/windows-echo-without-a-newline/feed/ 0 Javascript Date Picker http://jrsandberg.com/2009/07/javascript-date-picker/ http://jrsandberg.com/2009/07/javascript-date-picker/#comments Sun, 26 Jul 2009 07:06:28 +0000 Jeremy http://jrsandberg.com/?p=18 Well, I started trying to do a tutorial for one of these so long ago that I might as well just release the finished code. I am releasing it under the MIT license. The code can be found at http://jrsandberg.com/Calendar.txt

The calendar works as an iframe. Include the calendar with something like this:

<iframe src="Calendar.html" frameborder="0" width="100"
height="100" name="calendar" id="calendar"/>

Once the iframe is included, you will also need to add a global variable called “cal”.  Just to make the calendar behave nicely you might want to add a “cal.hideCal();” to the <body onclick> event.  The calendar will automatically attach itself to the parent window and provide you with the functions you need through the “cal” variable.

In order to use the date picker, simply create an input that has the type of text and add the appropriate functions to it:

<input type="text" name="startDate" id="startDate"
size="10" onclick="cal.popCal(this);"
onkeypress="cal.keyPress(this,event);"/>

That should be it.  The calendar should align itself with the text box and format the date and things according to the us standard.  The calendar isn’t an end all or a be all but I think it covers the general functionality really well.

Admittedly, I would rather have the calendar work through a div and not an iframe.  I also don’t like the fact that it uses a “hack” to attach itself to the parent window.  One other word of caution, I don’t know how well it works in IE.  I have only really used it on Ubuntu firefox 2.5+.

Anyway, if you add any features, find any bugs or use this calendar, I would appreciate any and all feedback you have, good or bad.

]]> http://jrsandberg.com/2009/07/javascript-date-picker/feed/ 0 Calendar v0.1 – A Dynamic Javascript Date Picker…Tutorial http://jrsandberg.com/2008/06/calendar-v01-a-dynamic-javascript-date-pickertutorial/ http://jrsandberg.com/2008/06/calendar-v01-a-dynamic-javascript-date-pickertutorial/#comments Sun, 08 Jun 2008 04:25:55 +0000 Jeremy http://jrsandberg.com/?p=6 This is the first of a few installments of how to create your own dynamic JavaScript calendar/date picker. First of all, I want to define what I mean be dynamic: simply put, the calendar creates itself from scratch so that it doesn’t matter what date the user wants to pick; they can find it.

The first thing that I always do when creating a JavaScript application is to mock up the html. I find it much easier to debug if I can actually see what is coming out of the JavaScript. This is exactly what I will show you now.

My main concern at this point is that my JavaScript calendar will be robust enough to handle any user’s need. This means considering how many weeks I needed to display to show all of the days. At first thought, 5 seems like a good idea, and why not? Most months consist of four weeks with a few days on either end. But, alas, there are many cases where five weeks would just not do. This means that my design includes six weeks with the first day of the month you are looking at, starting at the top week and the other days following.

The next thing I considered was how to display and manipulate this data. My first idea, and I think best idea, is to just use a simple table. I know, I know, I made reference to the dreaded html tag and even said that I used it, but the plain and simple task is that I do use it and so should you…when it makes sense.

With those two things in mind, I set off to compose some really ugly looking html. Let’s begin by creating a table that has a border so we can see exactly where our columns and rows are divided. That will look something like this:

<table border="1">

Pretty simple! The first thing I want the user to see is the name of the month with an arrow on either side so they can move from month to month. That would look something like this:

<tr>
<td><<</td>
<td colspan="5">May</td>
<td>>></td>
</tr>

The colspan=”5″ is included because we know that there are 7 days in a week and the arrows only need to be one column wide. This means that we want the name of the month to take up the rest of the columns which would be 5 columns. The next row will show each day of the week in the corresponding column assigned to it:

<tr>
<td>S</td>
<td>M</td>
<td>T</td>
<td>W</td>
<td>T</td>
<td>F</td>
<td>S</td>
</tr>

The final thing to do is simply list the days the correspond to the month. The first few will of course be for the month before and the last few days for the month after.

<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>

And after all of that nice html code just finish it off with </table> and the mock of up our date picker/calendar is complete. Here is what the finished product should look like:

<< May >>
S M T W T F S
27 28 29 30 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
1 2 3 4 5 6 7

Not very pretty yet? Doesn’t actually accomplish anything yet? Um, yeah, that is correct. This is only so that we have a base off of which we can go. Now we easily know how we want to generate our html inside out javascript object. Figuring out the basic html before hand is the best way I have found to build web applications.

In the next installment of this tutorial I will show how to create a JavaScript object, public and private methods and variables in that object as well as one way to generate html on the fly with JavaScript. Thanks for joining me for this tutorial and I encourage you to check out the rest of the tutorials as they come.

]]> http://jrsandberg.com/2008/06/calendar-v01-a-dynamic-javascript-date-pickertutorial/feed/ 0