Tuesday, November 30, 2010

validating dynamically created radiobuttonlists

I recently was working on writing a client validation function to go hand in hand with my customvalidator. My form had some regular ASP controls on it, and it also had a section of questions inside a repeater, since this section was designed to ask you to rate instructors, and the name and quantity of said instructors depended on which class it was. I don't remember trying to write javascript to check radiobuttonlists inside a repeater before but eventually read a helpful snippet here.

In the example at that link, the entire form is iterated through. In my case however the form had radipbuttonlists both in and out of the repeated, and I only wanted to iterate through the repeater for this check. I already had simpler functions for the rest of them. Additionally I did not want a message to pop up for every unanswered radiobuttonlist in this section, but merely one generic "please rate all instructors" message. So I wrapped the repeater in a div, and it is this div that the variable called container below references.


// Grabs all inputs - radio, checkbox, text, buttons and lists -sticks them in an array
var last = "NameUnlikelyToBeUsedAsAnElementName";

var container = document.getElementById("divRpt");
var allInputs = container.getElementsByTagName("input");

// walk through the array
for (i = 0; i< allInputs.length; i++)
{
var input = allInputs[i];
if (input.name == last) continue; // if this object name is the same as the last checked radio, go to next iteration

// checks to see if any one of similarly named radiobuttons is checked
else if (input.type == "radio" )
{
last = input.name;
var radios = document.getElementsByName(input.name);
var radioSelected=false;

//iterate over question options
for (j=0; j < radios.length; j++)
{
if(radios[j].checked)
{
radioSelected=true;
break; // Found it, proceed to next question
}
}
if (!radioSelected) // no option selected
{
bOK = false;
}
}
if (!bOK){alert("Please rate the overall teaching effectiveness for your instructor(s)");}

Tuesday, October 26, 2010

Google Font API

I have been researching ways to increase the list of typography that is available for us as web designers. If you are not aware browsers can use only the fonts installed in each computer, so it means that every visitor of your web page needs to have all the fonts you want to use installed in his/her computer. These fonts are called web safe fonts and include arial, times new roman, courier new, helvetica, Georgia, and the list goes on.

What this means is if you download a font from a free website and decide to use it for all your main headings for example, you should be aware that unfortunately not everybody will be able to view your masterpiece the way you created it. What happens when a font is not present? The browser will replace them with some other fonts that are already installed on your computer.

There are some ways around this. You can use SVGs or image replacement but they aren't always the best solution. SVGs are not embraced by all browsers (I am looking at you Internet explorer!) and image replacement can be a pain for screen readers to process. There are also a variety of typekits that you can incorporate in your site but they are not free.

I have been playing around with Google's font API. Its free and easy to use and I think it is something we could use to add some new fonts to our sites. Google Font API is still pretty young and in time I hope they add more fonts. Check out this example below to see what I am talking about.

test site

To use this service you need to add a stylesheet link in your head tag. Then add the fonts you want to request from the google server. Something to keep in mind is for every font you want to use you need to make a http request. Too many of these can slow your site down.
javascript:void(0)
Another thing to keep in mind is if you want to use a font and a bold variant of that font you need to make 2 requests to the server. One for the regular font and one for the bold font.

Below is the link to the google site which includes all the information you would need to use this, including, the font directory and examples. I also included a link to a blog post containing some tips and more information. Let me know if anyone has any questions.
http://code.google.com/apis/webfonts/
http://sixrevisions.com/web_design/google-font-api-guide/

Thursday, August 19, 2010

IE8 And Visual Studio Debugging Fail

I told Jason I was going to make this into a short story, but since it's 4:25 I decided not to.

The long and short of it is:

IE8 and Visual Studio debugger do not work well together. Well at least VS2005 and IE8 do not work well together unless you only have one IE8 Browser open (the one you are debugging in - this happens in firefox as well).

If you have multiple IE8 browsers open, your debugger will not stop on your breakpoints when you are running your code. (try it, its fun! Maddening at first when you cant get any of your debugging techniques to work, but fun after you pull out your hair)

I looked up this issue and found this information here

Enjoy! and um... dont lose your hair over this!

Friday, July 30, 2010

SQL Server Guidelines

I saw this out on the SQL Authority blog and thought that I'd pass the link around, seeing as the author doesn't want it printed or even downloaded. It's certainly not a bad thing to have a SQL reference, or change it up, even your style is already ingrained into your brain. Check out this link below for a decent SQL notation reference. I find that I already follow alot of these standards, except for the lookup table notation. I always used "LKP_Tablename" notation when creating those. I think I'm going to change my style.

Let me know what yinz think.


http://www.pinaldave.com/sql-download/SQLServerGuideLines.pdf

Friday, July 23, 2010

list all tables in a database

So I'm documenting a database with 21 tables in it. I wanted A quick way to get them listed. Voila:

SELECT *
FROM information_schema.Tables where table_type = 'base table'



note that I added the WHERE clause. Without it, I also got all of the views.

Friday, July 2, 2010

time tracking tool

I was reading about Toggl, which seems pretty cool, and free.

http://www.toggl.com/public/tour

Don't know how people are tracking their time these days. I liked Allnetic's tracker until they decided to charge for it :P

Since toggl is web based you don't need to be tied to a machine to track your time, although I don't know if the desktop tool syncs up - I would assume so though.

Monday, April 26, 2010

formatting data in a gridview that's auto generating columns

What a long title! Anyway formatting the cell's onrowdatabound is quite well documented but all of the discussion tends to assume that you'll have specified columns, so you'll have BoundColumns and TemplateItems to work with. But I wanted to use short dates in a gridview where I was letting the gridview auto generate the columns (the default unless you set it to false in the gridview properties).

I only found this little reference to it - you need to scroll down to find the relevant code sample underneath Community Content (http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.autogeneratecolumns%28VS.80%29.aspx). I used a free code converter change it to C# but that code still needed work. The original converted code with original comments, and then mine added in below. This code is easily customized for a wide range of formatting output when your gridview is automatically generating columns.


protected void Gridview1_RowDataBound(object sender, GridViewRowEventArgs e)
{
//use syntax to hide baddates
//maybe also do short date strings?

//http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.autogeneratecolumns%28VS.80%29.aspx
// Routine to display an unknown DateTime column
// as a short date at runtime
// By Ken Cox [Microsoft MVP]
// July 28/06
//
// Make sure this is a datarow being bound
if (e.Row.RowType == DataControlRowType.DataRow)
{
// Create variables to hold values
DataRowView dtview = default(System.Data.DataRowView);
int intCounter = 0;
// Get the contents of the current row
// as a DataRowView
dtview = (DataRowView)e.Row.DataItem;
// Loop through the individual values in the
// DataRowView's ItemArray
for (intCounter = 0; intCounter <= dtview.Row.ItemArray.Length - 1; intCounter++)
{
// Check if the current value (item - Layla) is
// a System.DateTime type
if (dtview.Row[intCounter].GetType() == typeof(DateTime))
{
// If it is a DateTime, cast it as such
// into the variable

//Layla: cast item to DateTime
DateTime myNewDate = Convert.ToDateTime(dtview.Row[intCounter]);
//now test if that date is missing date, then hide it if so
if (myNewDate == myConstants.NOTCOMPLETE_DATETIME)
{
e.Row.Cells[intCounter].Text = "";
}
else
{
// Set the text of the current cell
// as the short date representation
// of the datetime
e.Row.Cells[intCounter].Text = myNewDate.ToShortDateString();
}
}
}
}
}


If you compare the original code you can see some small differences. Rather than create a DateTime variable holder to place the item into, I just create the variable IF NEEDED (if the item in the row being evaluated is of type DateTime) and populate it with the item cast as a DateTime. Very small, but I prefer that because I think it's easier to read/understand.

If anyone knows of any other ways to accomplish this - namely iterating through the items in a gridview row onrowdatabound, I'd love to compare it, so tell me about it in the comments!

Tuesday, April 13, 2010

.NET Validators

I have been working a lot with .NET validators recently. I found this article that explains about them quite in depth: http://msdn.microsoft.com/en-us/library/aa479045.aspx

There are two new tricks I took out from this:
1. You can fire an individual validator from javascript using this: ValidatorValidate(document.getElementById("yourValidatorId")). I found it useful in this situation: I have a field taking a temperature value and they wanted to enter either in Fahrenheit or in Celsius. I made two text fields, one for Fahrenheit and one for Celsius, and one validator to validate the range of the Celsius field. When one value is entered or changed, javascript calculate and populate the other value. I didn't want to use one validator for each field because there was no room. So if I entered a value in Fahrenheit that was out of range the Celsius validator wouldn't fire until I submit the form. Now I can call the validator right after I convert Fahrenheit to Celsius so the Celsius field gets validated immediately.

2. You can use ValidatorHookupControl(control, val) to link controls to validators. It's helpful when you have a customvalidator. Without the hookup the validator wouldn't fire immediately. For example, you submit a form and then find that some control is not valid. You fix the problem but the error message won't disappear right away. The built-in validators such as requiredvalidator fires when the control is changed. So users will get confused by this inconsistent behavior, they might think they didn't fix the problem correctly.

Wednesday, March 31, 2010

Solution Items

I recently discovered that you can right click on the solution in Visual Studio in the solution explorer panel, you can add items that will be kept in the root directory. So in my case, I have an application which will consist of a questionnaire and a tracking application. I removed the web.config from each project and instead added one config to the solution items. My directory now has the main Root folder (let's call it ResearchStudyName) inside which is the config, and a generic error page I added called error.htm, and inside ResearchStudyName are 2 directories, Questionnaire and Tracking.

Now in order for the needed files to be there upon publish, I add them as linked files to each project by using Add > Existing Items whereupon I navigate to the files in the root dir, and drop down the Add button to change it to Add as Link.

All done!

Tuesday, March 23, 2010

Blueprint CSS Framework

I have been hearing a lot of great things about Blueprint and after reading more into, I think we could use it. Basically Blueprint is a CSS grid framework. Layout grids have been primarily used in publishing to help achieve page layout and design but have become very popular in website design, especially WordPress blog themes. Blueprint does not only provide a foundation to build grid layouts, it also includes css for print/screen, typography, and forms.

There are a few areas that I think Blueprint could really help us out.

1) it will cut down dramatically on development time
2) it ensures cross-browser compatibility
3) blueprint has a lot of tutorials and extra plugins that you could use for added design
4) The css files used are relatively small so they wont slow down our page loads

**By default, blueprint is a fixed layout but there is a plugin for liquid.

If this interests anyone, you could download the framework from blueprint's website below and the second link is a pretty good tutorial for beginners.

blueprint website:
http://www.blueprintcss.org/

Tutorial:
http://net.tutsplus.com/tutorials/html-css-techniques/a-closer-look-at-the-blueprint-css-framework/

Tuesday, March 16, 2010

CSS example: 100% height, fluid/min width layout


I was starting a new project and thinking about the CSS. I'll often copy from some old project but it bothered me that I didn't comment my old projects enough to remember the various sources I used to cobble together the layout in the first place, or what the basic layout had.

So I thought it would be good to throw some basic samples up here for future reference. I'll use the tag CSSlayout so that they can all be pulled up together.

Example 1:

This layout has:
  1. centered content
  2. a main div that has a fluid width, but also a min-width so it will expand but not shrink past a certain size; NOTE min-width breaks on IE < 7
  3. you can make a faux 100% height left col (easily made right if you want, but why would you?) by adding an image
  4. optionally this left col can go past the footer, so the footer appears to be only in the main content
  5. 100% height so when there's very little content the screen will still be filled

code:



/* commented backslash hack \*/
body {text-align:center}/* centre for ie5.+*/
html, body{
height:100%;
background: #8b2d47;
font: 0.9em georgia;
color:green;
}
/* end hack */
body {min-width:916px;}
* {margin:0;padding:0}
#outer{
min-height:100%;
height:auto;
background:#f3f7ff; /* url(bg.gif) repeat-y 0 0 <-- for faux 100% high column */
width:78%;
margin:0 auto;
min-height:100%;
position:relative;
text-align:left;
}

* html #outer{
height:100%;
width:74%;
}

#header {
height:90px;
background:#fff;
}

#clearfooter{clear:both;height:50px;width:100%}

#footer {
width:100%;
position:absolute;
bottom:0;
left:0;
height:50px;
background:pink; /* url(bg.gif) repeat-y 0 0 <--- add this in and you'll extend the left col vertically over the footer */
}

#footer p {
margin:0 0 0 230px;
padding:0.3em 0.5em 11px 50px;
border-top:1px solid #b99032;
background:#f3f7ff url(../images/logo_pitt.gif) no-repeat 3px 3px;
}
#content {
padding-top:12px;
margin-left:200px; /* assumes left col */
font-size:0.9em;
}

Wednesday, March 10, 2010

LESS for CSS

Have you heard of this CSS tool called ‘LESS’? http://lesscss.org/index.html

It seems to be a good tool to organize CSS rules. It’s very easy to install if you have Mac OS X. For Windows, you need to install ruby first.

Friday, February 19, 2010

Unable to Start Debugging on the Web Server

I heard that a project was throwing this error on attempts to run it in a browser via Visual Studio. The full error complained about integrated Windows authentication.

What you need to do is go to the project via IIS and being up its properties. Then click over to the Directory Security tab, and under the first section, Anonymous access and authentication, there is an edit button. Click it, then down at the bottom you will see the checkbox for integrated Windows authentication. Check that box! Hit OK! And you should be all set.

Source: http://ryanfarley.com/blog/archive/2005/08/23/8540.aspx

Thursday, February 18, 2010

chart tools

don't know if you guys were aware of this, but the 3.5 framework supports a new set of charting controls - yeah, bar graphs and stuff1 How exciting! You'd need to install 2 separate add-ons, one for the framework, one for Visual Studio 2008, and then you can roll. I'm working on a bar graph now for a project.

Microsoft has a Getting Started article for these controls, but 4VGuysfromrolla's is much better and in depth, walking you through different ways to display your data, from hard coding the values, to progrommatically, to binding directly to a datasource. Read their article series.

ADDENDUM: I also highly recommend downloading the ASP.NET samples which you can run through Visual Studio 2008 (once you've downloaded and installed both add-ond mentioned above.) Highly interactive samples abound.