Shopping List that is printable. Tested in IE6.0, Netscape4.08, Netscape7.0, Netscape8.1, Opera9.0, Firefox1.5.0.4 and AOL Explorer1.2

T his is a great little script that can save you all kinds of time and effort by selecting all your items and then printing the list. Follow the below link to see how we have our printable shopping list set up;
[ Printable Shopping list ]

W e have tested the code in IE5.5, IE6, Netscape4.08, Netscape7.0, Netscape8.1, Firefox1.5.0.4, Opera9.0 and AOL Explorer1.2. This script worked well in all platforms with no variations noted.

T his list can be as small or as elaborate as you want. All you need to do is add as many <option value's as you need for the printable list.

Y ou can either bookmark our shopping list or if you would like to add this effect into your pages, just copy and paste the below code into your document.

I f you want to add this effect into your pages, depending on your knowledge of HTML and java script, it is an easy two part copy and paste code that goes into both the <HEAD> and <BODY> section of your document with the reconfigurations restricted to the <BODY> section of the code. Below you will see all the reconfigurations that can be made.

Reconfiguration For Textarea Form Box
The Box All The Items Go

<p></form>
<form name="displayform" >
<font face="Georgia,Arial,Helvetica," size="3" color="#000000"><i>Items added to list:</i></font><br>
<textarea cols="60" rows="410" wrap="virtual" name="itemsbox">
</textarea>
</form></p>

L et us now define the above reconfigurations.

1) cols="60" This number denotes how wide (left to right) the textarea form will be.
2) rows="410" This denotes how long (up and down) the textarea form box will be prior to having to scroll within the form.

A Little Note On The Above Settings

I f you will notice on our shopping list (above link) how long it is. we have the rows set for "410". See above reconfiguration.

R eason being that with java script, when you print the list, it will only print what is visible, not what is scrollable within a textarea form. Therefore we had to make the textarea form box long enough to fit all the items on our list just in case they were all selected.

Adding More Items To List

T he number of items allowed is only limited to your needs. It will expand and contract you whatever size you require.

<select name="dropdownbox" size=1>
<option value="">Make selection</option>
<option value=""<</option>

<option value="">**** Items That Start With Letter A ****</option>

<option value=""></option>
<option value="( ) Air Freshener Solid">Air Freshener Solid</option>
<option value="( ) Air Freshener Spray">Air Freshener Spray</option>
<option value="( ) Almond Extract">Almond Extract</option>
<option value=""></option>

<option value="">**** Items That Start With Letter I ****</option>

<option value=""></option>
<option value="( ) Ice Cream">Ice Cream</option>
<option value="( ) Instant Iced Tea Mix">Instant Iced Tea Mix</option>
<option value=""></option>
</select>

T o add more items, just add more option values. In other words, for each item you want on the list, add the below code and make sure all your option values are before the closing </select> tag.

L ets break down the above option value part of the code.

1) <option value="( ) Name Of Item Here"> This is the part that you will see once you click "Add To List"
2) >Name Of Item Here</option> This is what you will see in the drop down selection menu before you add it to your list.

N ow lets elaborate a little more on the other color coded part of the above section of code and what they do.

T he above if you notice does not have any option values filled in. This is used as a spacer between the different alphabetical or item type selections. Notice the positioning of these spacers! Also notice on the drop down menu on the shopping list how each section is also spaced for easier viewing.

T he next color coded part of the code is to differentiate between catagories or letters.

<option value=" ">**** Items That Start With Letter A ****</option>

N otice in the above section of code that there is nothing filled in in the <option value=" "> section. This tells the script that it is not part of the transferable items when you click on "Add To List". You can hi-light it but when you click on "Add To List", nothing will happen.

O n the shopping list you will notice a "Close Window" button.

T his above button can be removed if you do not want it on your page. This button is only good if the page it is on opens in a new window like in our example. If the button is on a page that is not opened in a new window, when you click the button you will lose the original page you came from. Below is how the button looks on the script if you want to remove it.

<input type=button value="Close Window"
onClick="javascript:top.window.close();">

O ne final note that as silly as it may sound, it has been asked of us. To put this script on your pages, you do not need a printer attached to your computer but..................
In order to print the list, to answer your question, Yes, you do need a printer attached to your computer.

W e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]