50 States in a control that will work in an ASCX file

Just in case you ever happen to need this (hey, some times the situation arises). Nothing else really to this post. Have a good day!

<div>
 <label>State</label>
 <%= Html.DropDownList(Model + "Region", new SelectList(new[] {
 new { Value = "AL", Text = "Alabama" },
 new { Value = "AK", Text = "Alaska" },
 new { Value = "AZ", Text = "Arizona" },
 new { Value = "AR", Text = "Arkansas" },
 new { Value = "CA", Text = "California" },
 new { Value = "CO", Text = "Colorado" },
 new { Value = "CT", Text = "Connecticut" },
 new { Value = "DE", Text = "Delaware" },
 new { Value = "FL", Text = "Florida" },
 new { Value = "GA", Text = "Georgia" },
 new { Value = "HI", Text = "Hawaii" },
 new { Value = "ID", Text = "Idaho" },
 new { Value = "IL", Text = "Illinois" },
 new { Value = "IN", Text = "Indiana" },
 new { Value = "IA", Text = "Iowa" },
 new { Value = "KS", Text = "Kansas" },
 new { Value = "KY", Text = "Kentucky" },
 new { Value = "LA", Text = "Louisiana" },
 new { Value = "ME", Text = "Maine" },
 new { Value = "MD", Text = "Maryland" },
 new { Value = "MA", Text = "Massachusetts" },
 new { Value = "MI", Text = "Michigan" },
 new { Value = "MN", Text = "Minnesota" },
 new { Value = "MS", Text = "Mississippi" },
 new { Value = "MO", Text = "Missouri" },
 new { Value = "MT", Text = "Montana" },
 new { Value = "NE", Text = "Nebraska" },
 new { Value = "NV", Text = "Nevada" },
 new { Value = "NH", Text = "New Hampshire" },
 new { Value = "NJ", Text = "New Jersey" },
 new { Value = "NM", Text = "New Mexico" },
 new { Value = "NY", Text = "New York" },
 new { Value = "NC", Text = "North Carolina" },
 new { Value = "ND", Text = "North Dakota" },
 new { Value = "OH", Text = "Ohio" },
 new { Value = "OK", Text = "Oklahoma" },
 new { Value = "OR", Text = "Oregon" },
 new { Value = "PA", Text = "Pennsylvania" },
 new { Value = "RI", Text = "Rhode Island" },
 new { Value = "SC", Text = "South Carolina" },
 new { Value = "SD", Text = "South Dakota" },
 new { Value = "TN", Text = "Tennessee" },
 new { Value = "TX", Text = "Texas" },
 new { Value = "UT", Text = "Utah" },
 new { Value = "VT", Text = "Vermont" },
 new { Value = "VA", Text = "Virginia" },
 new { Value = "WA", Text = "Washington" },
 new { Value = "WV", Text = "West Virginia" },
 new { Value = "WI", Text = "Wisconsin" },
 new { Value = "WY", Text = "Wyoming" },
 new { Value = "DC", Text = "District of Columbia" },
 }, "Value", "Text", Model), new { @class = "stateList"})%>
</div>
Columns

Faux Mega Menu in WordPress

Sometimes you have so many items in your WordPress blog’s navigation that you feel that it’s far too long. But if they are in the proper logical division splitting them into other menus is not be an option.

There are fantastic tools to create “Mega Menus” with jQuery and CSS such as this one. But on the standard WordPress menu you find in themes like 2010 or Thematic, implementing can be a challenge sometimes.

Luckily for us we can use CSS3 for a quick fix to make your drop down menu split itself into columns. The most obvious answer is to use the new “Columns” property but unfortunately it is not widely supported, even among modern browsers.

For reference, in this example I am styling a drop down menu in Thematic.

.sub-menu{display:inline-block; width:500px !important;}

.sub-menu li{width:50% !important;}

.sub-menu li a:hover{color:#FFFFFF;}

.sub-menu li:nth-child(even){float:right;}

All we are telling it to do is to make the sub-menu 500px wide, make every list item 50% of that, and using the nth-child property, tell every even-numbered element to float right.

Making it 3 columns would be as easy as dropping the li width to 33% if we wanted. Applying styles is easy as well. If we wanted a border dividing the left and right column (if mine didn’t already have borders) we could further edit the nth-child(even) and give it a left border, or make a new rule for nth-child(odd) and give it a right border.

Super easy!

Fake Conditional Statements in CSS

For a first post, let’s start this off simple. I saw a question on Reddit the other day asking if you could dynamically change the size of elements depending on what the user clicked on without using Javascript. [http://goo.gl/SErS9]

You can almost create this effect with CSS3 selectors and no Javascript at all.
Here is the CSS:

#div1, #div2
{
width:200px;
border:solid 1px #000000;
float:left;
margin-right:10px;
height:50px;
overflow:hidden;
}
div[id^="div"]:hover
{
height:200px !important;
}
div:target
{
height:200px !important;
}

And the HTML:

<a href="conditional-test.html#div1">Link to Div1</a>

<a href="conditional-test.html#div2">Link to Div2</a>
<div id="div1">

<a name="div1">This is a bunch of data.</a>
This is more data you can't see yet.

</div>
<div id="div2">

<a name="div2">This is a bunch of other data.</a>
This is more data you can't see yet.

</div>

The first handy thing to point is the chunk of CSS that says div[id^=”div]

At first glace this might seem like unnecessary mark-up, but the carot symbol (^) is actually a CSS identifier that says “target anything that starts with.”

So in this case, I am looking to target divs ( div[id^=”div] ) whose ID starts with ( div[id^=“div] ) the word “div.” ( div[id^=”div] )

As you can see in the HTML I have to divs names “div1” and “div2” and this was just one way to target both of them. This becomes more effective the more elements you have that have similar names and share similar styles, but have their own variations or perhaps are dynamically generated by something like a C# control and they end up with weird additions to what were your nice cleanly defined classes.

At the top of the HTML, you can see that we have two links, each ending in a hash tag and the name of one of our divs. When these links are clicked on, that name is appended to the end of the URL and is referred to as the “target.”

This incorporates the final chunk of our CSS that pretty much says if there is a div on the page with the same name as this target in the URL, append this style which in this case happens to make the div tall enough to see the other sentence of content.

With this method you can’t do fun things like animating the application of styles, but the technique does work and is super simple to do if you want to implement it in a hurry.