Contact   •   Articles   •   Products   •   Search

Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs

WebLog Posts in Category HTML


AngularJs ng-cloak Problems on large Pages



Angular supports the ng-cloak directive to address hiding initially unrendered template content. I found out the hard way that sometimes with very large pages this mechanism doesn't quite work and still results in slight page flicker of the unrendered template content. In this post I describe the problem and several easy solutions to get around it the edge case scenario.

JavaScript JSON Date Parsing and real Dates



JavaScript doesn't have a date literal, and for this reason JSON serializes dates as strings rather than real JavaScript dates. In this post I show how JSON date serialization works, a few approaches how you can manage dates and how to automate the process of converting JSON dates to 'real' dates more easily.

HTML5 Input type=date Formatting Issues



The new HTML5 Input types make it easier to display special formatted input types like dates and email addresses. Browsers that support them display a nice UI for editing and can validate values. However, support currently is limited and date formatting especially is complex as it involves using an ISO date format that doesn't fall back nicely to non-supporting browsers.

.NET HTML Sanitation for rich HTML Input



If you need to sanitize raw HTML for display in Web applications, the job at hand is scary for .NET backends. Unfortunately it seems there aren't a lot of tools available to help in this formidable tasks and the tools that are tend to be inflexible to the point of often being unusable. In this post I show a base implementation of an HTML Sanitizer that can be customized for your own needs.

Wishful Thinking: Why can't HTML fix Script Attacks at the Source?



I'm dealing with user HTML input in a Web application today and again I curse over the complexities involved in sanitizing this html. So today I started dreaming about a possible alternative...

IE9 not rendering box-shadow Elements inside of Table Cells



Looks like IE9 has a bug that won't render box-shadow CSS when the box-shadow is contained within a table that has border-collapse set. Here's what the problem is and how to work around it.

HTML 5 Input Types - How useful is this really going to be?



The HTML 5 input controls enhancements seem like a nice feature - until you look a little closer and realize that that validation and styling these control enhancement use are likely going to interfere with your existing application logic and styling. Here are are some thoughts on the subject.

A Key Code Checker for DOM Keyboard Events



Handling keyboard input events in JavaScript can be tricky when you need to deal with key codes. There are browser difference and different behaviors for various key events. Here's a refresher on how keyboard events work and a utility that lets you test key strokes and their resulting key codes in the various events available.

jQuery Time Entry with Time Navigation Keys



How do you display editable time values in Web applications? While date display has a pretty clear UI choice with date pickers, visual time picking isn't very efficient. In this post I show a keyboard based alternative to navigating and entering time (and date values) values using hotkeys hooked up through a jQuery plugin.

Building a jQuery Plug-in to make an HTML Table scrollable



Table displays in limited space require some rendering alternatives. While paging is a common way to address fixed size displays, it's not an end-all solution. Sometimes it's necessary to display larger amounts of data in a small fixed space on an HTML page. Scrollable list are fairly easy to do with most HTML structures, but HTML tables are notoriously difficult to manage when it comes to scrolling. In this post I describe a jQuery plug-in that attempts to make any table scrollable by decomposing and reassembling the table into two distinct areas.

Restricting Input in HTML Textboxes to Numeric Values



There are lots of examples limiting HTML textbox input to numeric values only but most examples fail to capture valid keys like navigation and edit keys properly so as to not interfere with normal textbox behaviors. Here's a simple plug-in that takes special keys into account.

Rounded Corners and Shadows – Dialogs with CSS



CSS 3 provides for box-radius and box-shadow, two features that make it really easy to create attractive floating windows easily with native CSS. Here's what you need to know to create rounded corners and box shadows effectively.

Changing an HTML Form's Target with jQuery



If you have multiple submit or link buttons in an ASP.NET Page and one or more of those buttons needs to post to a different target there's no built-in way to force one or more of those buttons to POST to a different frame/window. With a little bit of JavaScript though it's real easy to change the form's target dynamically as needed.

jQuery UI Datepicker and z-Index



The jQuery UI datepicker is a nice and easy to use datepicker control but if you're using it with other components that use absolute positioning you might run into issues with z-Index precendence. Here's a discussion of the problem and a couple of easy solutions around it.

Rounded Corner Rendering in newer Browsers



Rounded corners in HTML have been an elusive target. It's been done a million times over, but most of the approaches from manually creating images to using automated JavaScript to using complex CSS layouts with dependent images are a pain to work with. CSS 3.0 offers some relief by providing native support for rounded corners, but you can take advantage of this functionality today in some browsers that already support this functionality via browser specfic extensions.

An annoying IE position: Relative and OverFlow-Y Bug



Ran into a real sneaky but that only shows up in pre-IE 8 standards mode versiosn of Internet Explorer. Any parent elements that contain child elements that have position: relative set cannot be contained in the parent container via overflow settings or even a fixed height, resulting in elements spilling out of the bottom of the container. It appears there's no direct workaround short of using a different approach to element positioning.

Browser Rendering Differences and Browser Resets



As ASP.NET develoers it can be really easy to not pay attention to good CSS style layout practices. But CSS is vitally important especially when dealing with different browsers and consistent formatting. Using browser resets in particular is a big help in taking some of the pain out of cross browser rendering differences.

FireFox 3 and Static File Caching Problems



FireFox 3.0 apparently is much more aggressive in caching content than previous versions of FireFox. While this is good for performance in many situations I've noticed that this is seriously becoming a problem in some of my applications where support files like scripts and CSS files get updated in applications and FireFox doesn't recognize those changes. The problem appears to be that FireFox is...

Forcing Client Windows to pop up as Windows in Tabbed Browsers



By default if you open a new window in Tab based browsers like FireFox 3 or IE 7 new windows pop up in new tabs. In most situations this is the desirable behavior, but sometimes it's in fact required to get a new window to pop up on the desktop and get it activated immediately.

Inclusion of JavaScript Files



I find myself struggling with effectively managing JavaScript scripts across multiple projects. Between version changes and updates to my own components I spend a lot of time comparing versions and trying to sync up files. There are a number of different ways to load and manage script resources, and in this post I show a few with their pro's and con's, but none of them seem ultimately satisfying. What are you using to manage 'Script File Hell?'

A jQuery Client Status Bar



Status bars are very useful in client applications to display well status information and having a reusable and easily callable and configured status component to display messages is extremely handy. Here's an implementation that uses jQuery plus a bit of CSS to make short work of displaying status content.

Unwanted Padding in IE Image Rendering in div Tag



I've repeatedly run into an issue where putting an image inside of a div tag as its only content causes IE to render a bit of padding that shouldn't be there. No problem in other browsers, but definitely an issue in IE.

:hover behavior in IE 7



Ran into an odd problem today with :hover CSS styling that wouldn't work in IE 7. It turns out that I accidentally wiped out my doctype, but even after restoring the doc type I still ended up with problems in large lists.

Customized Loading... Images



Here's a cool site that provides a number of different Ajax loading images that you can use in your apps:  http://www.ajaxload.info/ What's cool about this thing versus some other sites that have many of these same images is that this is actually a dynamic app that lets you completely customize foreground and background colors including background colors which is great if you need to stick...

Absolute Positioning inside of a Relative Element with CSS



Getting elements positioned absolutely inside of a container is not terribly obvious and not very discoverable using CSS. But it can make for a cool effect and is a useful feature for many overlay type operations in Html markup. Here's an example of a hover over delete button that pops up on focus of an element.

Cross Domain Support in IE 8 and Silverlight/Flash Applications



Peter Bromberg posts a quick note about the IE 8 Cross Domain Request object which allows making cross domain calls from within the browser. If you'll recall traditionally the XmlHttp object now standard in all main stream browsers does not explicitly support cross domain calls, which are blocked for security reasons. What's a real pisser about this though is that there are other ways to make...

Firefox 3.0 XmlHttpRequest Default Content-Type change



I ran into a small problem with some of my AJAX code that's checking content-type on inbound requests from the client - it looks like FireFox 3.0 is now including the charset on the content type from the client on POST operations which if not explicitly checked for can break existing code expecting only to see a content type. Small issue, but easy to miss especially in framework code like mine that frankly should have been prepared for this...

Sensible Debugging in IE 8



One thing that caught my attention in the IE 8 notes and that eventually made me download and install it is that it will feature the Developer Toolbar which has been an add-in for previous IE versions as a built in tool. Not only that but IE 8 includes a very FireBug-like debugger that can be easily hooked up to page content. This is a very worthwhile improvement IMHO because the debugging...

IE 8 to support Standards Mode out of the Box - Yay!



Microsoft announced today on the IE Blog that IE 8 will run in high standards mode by default, which is a complete about face from the previous position that was going to require special meta-tag headers to force the browser to run this way. This is an unexpected, but very welcome turn of events and brings some hope that we'll in our lifetime will have a version of IE that is compliant with the remainder of the browser world.

JavaScript Errors in the Mainstream



I kept a list of a few major sites that have been bombing for me with JavaScript errors just today in the last few hours since I decided to write this up: Hawaiian Airlines Expedia Amazon's MP3 Download Site Facebook (Email app) Musician's Friend Checkout site Authorize.NET's Admin interface American Express Bill Payment Yahoo - certain news stories of the portal home page And here are a few more...

ClientScriptProxy and JavaScript Linking In Headers



.NET 3.5 includes a new DataContractJsonSerializer that makes it real easy for serializing and deserializing .NET objects to and from JSON. This post shows code for simple serialization and deserialization as well as discussion of some of the features and limitations.

Creating a scrollable and grouped Repeater Layout



A couple of people asked me today about a layout I put together for an application. The layout is bascially a scrollable and grouped repeater that looks a little like a ListView control in WinForms. This sort of layout can be great for longer lists when paging is not really the right choice - a common scenario in AJAX applications actually. Here's a quick walk through on how this layout is put together.

JSONP for cross-site Callbacks



Here's the JSONP code that uses the code I mentioned in my last post. JSONP is an unofficial protocol that allows making cross domain calls by generating script tags in the current document and expecting a result back to calls a specified callback handler. The client JavaScript code to make a JSONP...

Images as Style Attributes



Here's a little tip that I started using more frequently recently that involves images. When embedding images into pages you're often inclined to use an IMG tag or an ASP.NET image control. In some situations though - especially if the same image repeats on the page - it can be much more efficient...


West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2015