Winn.ws

Browser detection using jQuery

Browser sniffing is messy. There are a million ways to do it but none of them are particularly clean and most involve conditional statements such as “” for IE and various other CSS selector hacks for other browsers.

It get around this common issue i am now using jQuery to add a class to my body tag.

1
2
3
4
5
if($.browser.msie){
        $('body').addClass('browserIE');
        // Add the version number
        $('body').addClass('browserIE' + $.browser.version.substring(0,1));
}

If the user is using IE it will add a class to teh body tag like so:

1
<body class="browserIE browserIE#">

The “#” stands for the version of IE the user is running.

You can now access elements on your page that neeed to be corrected for IE by calling:

1
2
3
.browserIE6 #myDiv {
     display:block;
}

This will work much better then current hacks. Hope that helps someone!!

posted in: Development 02.10.09

CSS 3 talk – Rounded corners

So the last few years have brought amazing things, with the standards movement and getting companies to pay attention to the importance of following standards. In that time, I have seen over five big changes in PHP, three great changes in rails and only one in CSS. Why are we not seeing css3? Why does IE 8 beta still barley work with CSS 2.1? Crazy!

Well, time for a CSS 3 trick! I will cover rounded corners! This is only supported by Firefox and Safari. Below you should see a box with rounded corners!

This box has rounded corners!

Here is the code:

<div style="-moz-border-radius: 5px;
background-color: #333;
-webkit-border-radius: 5px;
border: 1px solid #fff;">
 
This box has rounded corners!</div>
posted in: Design & Layout, Development, web standards 11.10.08

Web User Controls

Using the user controls may be one of the best moves you will make when developing an application in .NET. The user control will allow you to separate your reusable logic and keep it in one place. For many developers this is a great thing! Many of us have to re-create items over and over, after some time your code can look like crap and then you feel like crap because you have to deal with it.

Let’s say we have a site where I needed a “Quick Search” on every other page, but each page had a different look and feel or a different CSS document. All I would need to do is create a web user control “.ascx” file and lay down the basics of my quick search. Assign the div’s ID’s or classes, then include your control in each page that needs it. To style, just use your style sheet assigned to that page an add your styles.

Web controls make life a little easier when developing in .NET, so be sure to take advantage of this great tool and stop duplicating your work!

posted in: .NET 3.5 VB, Development 10.23.08