Blog

Print Stylesheet in ASP.NET Themes

2008-10-09T12:05:01Z

Last post I talked about ASP.NET Themes -- all CSS files in the theme folder will be loaded, no matter what. This makes having a matching print stylesheet a little difficult since you can't specify media types for you theme stylesheets.

Enter the @media tag. In your print.css stylesheet, you can use this tag to specify your media type in the stylsheet instead of in the tag as you normally would.


@media Print 
{
	body,a {color:#000;}
}

And as an added bonus: this even works in IE 6. Who would have thought?

Stylesheet order in ASP.NET Themes

2008-10-09T11:43:00Z

I've started using ASP.NET Themes in my latest projects. They're interesting, but just goofy enough to make me hate them. The latest quirk I've discovered is that all CSS files in a theme are loaded, regardless if you want them or not.

Cascading Style Sheets is built on the idea of inheritance, in which order or styles is very important. So, when you can't control what styles are loaded at what time, it's hard to overwrite things when needed.

Problem

My theme is called cojui. Inside the App_Themes/cojui/ folder I have cojui.css. In that stylesheet, I import my other stylesheets: reset-min.css & masterpages.css.


@import "stylesheets/reset-min.css";
@import "stylesheets/masterpages.css";

/* My main styles follow below */

Visual Studio reads cojui.css first since it's in the root of the theme directory. Then, VS loads the rest of the stylesheets, in alphabetical order. This causes reset-min.css to reset all my styles since cojui.css has already been processed -- not the intended effect.

Solution

I put all my CSS files in App_Themes/cojui/stylesheets/ folder and add an underscore ( _ ) to the stylesheets I want to load first. This only gives me levels of granularity in load order, but for now it's working. I also renamed cojui.css to main.css to let other people know it's the 'main' stylesheet since it's no longer in the root directory.

Update: I've since decided this is NOT a good way of doing things.

I re-evaluated what should be a .NET theme, and what shouldn't. Themes should be limited to theme-specific style only. _masterpages.css and _reset.css are utility stylesheets, but not 'style specific' stylesheets. So, I've moved them into a 'stylesheet' folder ouside of the App_Themes folder.

Reference JS file when using MasterPages

2008-10-09T10:56:00Z

Problem

I need to reference a JS file in the in a Master Page in Visual Studio 2008. In Visual Studio 2005, I did:

but this gives me an error:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

I tried hunting down the error, and stumbled on Rick Strahl's post about a similar issue. Unfortunately, this didn't work for me.

Solution

Luckily some of my friends are better developers then I am. Turns out, the fix is to follow Rick Strahl's tip, but to databind() the head in the MasterPage's PageLoad()



	City of Jacksonville

Then, in the MasterPage's code behind


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
	html_head.DataBind()
End Sub

USA.gov Redesign

2008-09-26T10:53:01Z

Mr. Rutledge has yet another Redux out, and it’s a doozy. This time he takes a look at USA.gov and redesigns it for the new ObamAmerica. It’s absolutely perfect.

IA Summit 2008 wrap up

2008-05-07T02:02:00Z

IA Summit finished up almost a month ago, but I’m just now getting around to my summary.

IA Summit 2008 site
Flickr photos here and here
SlideShare sets here and here
Podcasts for day 1 (April 12), 2 (April 13), and 3 (April 14)

Podcasts of a few good sessions I went to:

I also heard Inspiration from the Edge: New Patterns for Interaction Design by Stephen Anderson was also good, but I’ve yet to find the time to listen to it.

I took a lot of notes, and I’ll be sure to post them as soon as I get the chance to clean them up a bit.

Web Form Design by Luke Wroblewski

2008-05-07T01:13:00Z

Luke’s book is out, go get it! Web Form Design is fantastic book about all things web forms (no kidding, right?). The book is packed full of great information backed with studies and real world examples. I was lucky enough meet Luke at the Web Form Design all day session at IA Summit 2008. He really knows his stuff, and he put a lot of it in this book!

If you buy it at the Rosenfeld Media’s site, the book is $36 and you get the ebook for free. Here is a 15% coupon to almost cover shipping: 242415

New jQuery UI release 1.5b4

2008-05-07T00:56:00Z

One more step closer to being out of beta; and a new site to boot. Check it out at http://ui.jquery.com

Expand with JavaScript; Link without JavaScript

2008-04-08T00:37:21Z

Over at GodBit, someone needed to show a div when a heading was clicked, but if the user didn’t have javascript, the heading was a link to a detail page. This sounded like an interesting idea, so I poked around and here is what I ended up with:


$(document).ready(function(){
 $("h3 a").parent().next("div").hide();
 $("h3 a").click(function() {
  $("h3 a").parent().next("div").slideToggle();
  return false;
 })
});

The key here is return false;—that stops the click from triggering the link.

Implementing IE min-width with Javascript

2008-03-25T11:07:00Z

min-width works in Firefox and Safari, and even IE 7, but not IE 6 -- big surprise. However, we can fake it fairly well. With a little jQuery fun, we can read the min-width value, and then implement it using javascript fairly nicely.

First off, we know we have to attach this to the resize of the browser. IE seems to execute the resize event many, many times during an actual window resize¹ -- almost as if it were trying to execute it once every pixel resized (just a guess).

Enter the wresize jQuery plugin. This plugin tries to catch when the resize starts, and more importantly, when it finishes, and then executes a function. The one downside to this plugin is that we cant execute a function that requires us to pass any variables to it. Luckily, we don't need to for this.

Here are the things we need to do:

Get the min-width value; if it's not set then we'll default to 760px.
jQuery will give us the value text, so it will return "960px" or the like. We need to strip out the text to convert it from a string to a number.
Then, we need to calculate what size the browser window should be before we invoke the min-width.
Then, we wait. Wait for the browser to be just the right size.
Set the min-width on the first div inside the body element.
Un-set the min-width when the browser window widens.

Simple, right? Here's the actual min-width function:


function minwidth() {
  if ( (jQuery.browser.msie) && (jQuery.browser.version==6) ) {
    var cssprop = jQuery("body div").css("min-width");
    if ( cssprop == null ) {
      cssprop = 760; //No min-width; default to min-width of 760
    } else {
      cssprop = parseInt(cssprop); //Convert value to numeric;
    };
    
    //get document margin to figure browser width to look for
    var margin = parseInt( jQuery("body").css("margin-left") ) + parseInt( jQuery("body").css("margin-right") );

    //21px is the width of the scroll bar.
    if (clientwidth() < (cssprop + margin + 21)) {
      jQuery(document.body).width(cssprop); //Set fixed-width
    } else {
      jQuery(document.body).width("auto"); //Un-set fixed-width
    };
  };
};

Now that's just the function; we haven't used it yet. We need to execute this function on page load, and use the wresize plugin to execute the same function on resize. Luckily, that's simple too.


$(document).ready(function(){
  minwidth(); //call IE minwidth on page load
  $( window ).wresize( minwidth ); //IE Resize event - resize for min-width
});

We didn't cover the clientwidth() function -- that's how we're getting the browser's window size. Check out the example page for the final result.

¹http://snook.ca/archives/javascript/ie6_fires_onresize/

Google Reader-like Interface Bug Resolved

2008-03-25T09:49:00Z

Well I know everyone was on the edge of their seats, however, all can relax: the bug has been fixed.

All I did was create a way to manage what ‘view state’ I was in, rather then doing a if/then of the current class name. My only made-up explanation I can come up with for why this works is that on page load, jQuery builds a giant array of your page elements and properties. When I start swapping class names around, that array isn’t being updated. Therefor, I just needed to come up with a method for tracking the state and query that rather then the current class name. Now all is well.

See it in action, or, you can download the .NET project and see it in action. I don’t care for .NET, but it’s what I had at the time—that and I don’t know php (yet).

Creating Google Reader Interface from Scratch; but Stuck on a Bug

2008-03-15T01:37:00Z

With a little down time at work, I started to make a few jQuery example pages for some quick documentation. One thing led to another, and I’ve decided to build a light version of the Google Reader interface. Check it out.

Ground Rules

No cheating. I didn’t want to see how Google did it—I wanted to plan the app from scratch. This way, I get a little practice planning the app’s architecture; How I track if each article is read, collapsed, etc.
Baby steps. Rome wasn’t built in a day, and this app won’t be up and running full speed ahead any time soon. For starters, I’m just building the thread view. Perhaps sometime later we’ll have the feed menu on the side, but not today.

Progress

Day 1: Day 1 was basic framework and concept. This is were I started with the basic expand and collapse example, and it grew from there.
Day 2: Thread views done. Mark all read and mark all unread buttons working, threads expanding and collapsing, and a read all button.
Day 3: I realized that I was missing the Expanded View and List View tabs. Adding these in required changing the way I track the read state of each thread, basically a complete change on my methodology—more on this later. I also found a doozy of a bug—more on this later, too.
Day 4: Major code overhall. Slimmed down my code to make shorted lines and smarter actions. I pulled out any duplicate actions and created reusable, chainable functions.

The Bug

I wrote a detailed, albeit probably jumbled, post to on jQuery’s Google Group about my bug. Here’s a quick recap: I have two functions that depend on a wrapper div’s class. When I first load the page, I set that wrapper’s class based on a cookie. From then on, my two functions don’t function based on what the wrapper div currently is, but what it was at page load. Somehow it’s not seeing the current wrapper class. Do you know why? Two gold stars to anyone who solves it!

The Future

I started building this interface just to see what I could do with jQuery. Once I get all the bugs worked out, I'd be nice to hook it up to a RSS feed and see it actually function. Perhaps a good excuse to start learning PHP, and maybe even Code Igniter.

Implimenting Syntax Highlighting on Instiki

2008-03-06T14:05:00Z

Instiki is a light wiki built on Ruby On Rails, however I'm not sure if it is still be maintained. I use it to maintain a lot of ideas and examples, mostly code heavy content. One thing that could make Instiki better would be syntax highlighting -- so lets implement it.

Implementation

First off, download Syntax Highlighter by Alex Gorbatchev. Move the respective files to:

/instiki/public/javascripts/highlighter/
/instiki/public/stylesheets/highlighter/
/instiki/public/flash/highlighter/

You'll need to make the 'flash' folder and the highlighter folders, but I think this keeps things organized. Now, lets open /instiki/app/views/layouts/default.rhtml and start implementing. I'm not entirely sure how/where all the javascript is being rolled into the main template page of Instiki, so instead of tracking that down we can just put some good ol' fashioned links. Right after <%= javascript_include_tag :defaults %> put:

Now I only added the few language files that I needed -- You, of course, should link to whichever ones you need. At the bottom of default.rhtml, right above put:

Usage

Using a

 tag, set name attribute to code and class attribute to the language of your choosing.
... some code here ...


For the full run down of it's usage and options, check out the project page.

Languages


Language Class Name(s)
C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt


Caveat
The name attribute on a  tag is not valid XHTML.

Language	Class Name(s)
C++	`cpp, c, c++`
C#	`c#, c-sharp, csharp`
CSS	`css`
Delphi	`delphi, pascal`
Java	`java`
Java Script	`js, jscript, javascript`
PHP	`php`
Python	`py, python`
Ruby	`rb, ruby, rails, ror`
Sql	`sql`
VB	`vb, vb.net`
XML/HTML	`xml, html, xhtml, xslt`

Coffee = Yummy

2008-02-18T03:23:01Z

oh mr coffee. why are you so yummy
you make me so happy mr coffee
so happy in my tummy

(by the way, Hello World)