If you've build mobile Web applications that need to run on iOS Safari and on an iPhone you might have run into the problem of input fields 'auto-zooming' the display when the input field and popup keyboard get focus. The view zooms and doesn't return back to the unzoomed even after exiting the input field. In this post I describe why this happens in some scenarios, and a couple of ways you can work around this annoying iOS Web browser behavior.

When using async events, it's important to understand how events work when called asynchronously. Specifically if you need to interact with the event context for things like preventDefault(), cancelBubble() or returning values that determine completion state, you need to be careful as these may have no effect if called after an `await` call.

I learned something new today: there's a CSS `text-transform` style property that can be used to transform text automatically to upper, lower or capitalized case. No JavaScript contortions and it just works. In all my years doing Web dev I've not run into this property before, so I'm posting it here for others to find as well...

The native date picker in HTML is a bit of a pain to work with as it's overly simplistic in features and how you have to assign and retrieve values from it. It also isn't customizable so if you need to build custom behavior like a button date popup that doesn't show the input control, you're out of luck. In this post I discuss the challenges of the HTML date picker control, provide small component to make binding values easier, and provide an example on how to create a button only date picker both with plain JavaScript and as a small Vue component.

HTML table column wrapping and truncating doesn't work like other HTML elements. Specifically if you want to keep table column content from wrapping via `overflow` or `white-space` wrapping settings you'll find that tables just laugh in your face. Here's a quick post that describes table wrapping and text truncation issues and the hacky workaround.

Ran into an issue recently where a querySelector operation was failing in document link navigation when navigating hashes. There are a few issues at work when using Hash navigation but one issue i didn't expect to run into was a naming conflict of a hash tag that interfered with CSS operators. Turns out there's an easy solution around with with CSS.escape - if you can make the connection. In this post I talk about the problem how it might show up and how to fix it.

Filters are not new in CSS, but their often overlooked for providing some useful generic behaviors for things like hover styling or nice background effects. In this post I discuss how to use the brightness() filter to create a generic button hover behavior and also briefly discuss the newish `backdrop-filter` property.

Ran into a weird issue today with AdSense in one of my older Web sites. I noticed that the site was not using the custom scrolling in containers that I've been using for years. Turns out Google's AdSense on this page is injecting some extra styling that changes the scroll behavior - and the way the entire page works. Here's what the problem is and how you can work around it.

Client side live reloading is one of the most compelling features of client side JavaScript development. Instant updates of any code changes in the browser are a huge productivity booster - WYSIWYG on steroids. Unfortunately for ASP.NET Core server side code and MVC apps there aren't any comparable easy solutions. In this post I show how I use Browser Sync and `dotnet watch` in combination to provide live reloading for both server and client side changes.

When you're creating HTML Anchor links that are non-navigating and handled via script code or through some JavaScript framework, what's the best way to handle the `HREF` navigation link in the HTML? In this back to basics post I look at a few different approaches and what works best.

Recently I needed to add the ability to save HTML documents in Markdown Monster. Saving raw rendered Markdown is not really sufficient and so I set out to create an HTML packager that can package an HTML Web endpoint into a self-contained local package either as a single self-contained file, or an HTML document with all dependencies localized. In this post I discuss why this is needed and how to implement and use this library to capture HTML output in a few different ways.

These days most of the focus in Web development is on code - JavaScript code in particular. By comparison, the Web UI - HTML and CSS and the browser DOM and support features - feels like it has been stuck in the mud and stagnating for a long time. We now have all the advanced coding tools to do cool stuff, but it seems that HTML and the Web Browser's feature set are really what is holding us back. In this post I look at what's ailing Web UI and try to ruffle some feathers into discussion of how we can affect more rapid change in Web UI features.

Flexbox is a CSS based technology that makes it much easier to create structured layouts with HTML and CSS. Based on a containership hierarchy, Flexbox combines the structured features of tables with the free form layout capabilities of arbitrary HTML elements that make it possible to create complex , yet flexible HTML designs much more easily that was otherwise possible. My article in CoDe Magazine describes the reasons for Flexbox, the basics of operation and few practical examples you can use today to put flexbox to use.

I recently redesigned one of my Web sites to use dynamic page re-loading for additional page content, which broke the original AdSense ad code. In this post I'll describe how to get AdSense ads to work with AJAX loaded content by explicitly calling Googles ad code from your dynamic navigation code.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.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...

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.

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?'

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.

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.

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.

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...

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.

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...

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...

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...

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.

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...

.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.

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.

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...

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...