Enabling CSS Hover Selector on Touch Enabled Devices

Most web developers and designer make use of this common CSS selector to help make pages easier to consume by hiding things in the UI like buttons until the context of the application makes sense to show them.  I use this a little to hide things like buttons until such time that it makes sense to show them based on what the user is viewing or doing.  This can help in many ways not least helping to keep the UI simple and uncluttered.

There are lots of solutions out there that whilst they work are in the most part overkill.  The following code snippet will enable the :hover selector on all child elements:

$('body').bind('touchstart', function () { });

So given this HTML:

<body>
    <div id="content">
        <div id="nav"></div>
        <div id="content-wrapper"></div>
    </div>
<body>

You might want to limit the scope to target just the actual page content, so you would use:

$('#content-wrapper').bind('touchstart', function () { });

The trick to getting this to work nicely in all instances is by being mindfull of the scope of the main selector. You might want to make sure the scope of the selector excludes any navigation menus and as I saw some odd behaviour in the Dolphin browser on iOS 8. This has been tested on FireFox, Chrome, IE, Dolphin, Opera and Safari on iOS 8.

Share

MVC Deployment – JavaScript – ReferenceError is not defined …

This had me stumped for a moment.

All the Javascript was there (linkable from bundle links in the page source), all the files were there, everything worked in dev (doesn’t it always?).

Anyway, if you’re seeing this error in your deployed applications there are a couple of steps to take.

Firstly you should download and install the Visual Studio tool JSLint.VS2012. Then set this up to show warnings and don’t set it up to fail the build. JSLint is not kind and very strict about things (your adherence to BP is your choice but recommended for sure!)

So, you deploy your app and BANG all your lovely JS is twatted. Never fear … pop over to your web apps Global.asax file and in the Application_Start method include this:

BundleTable.EnableOptimizations = true;

So now with this setting set you can launch your app in debug mode with all the Optimizations forced on to test minification and more closely model your testing to the deployed version.

Once you have that working and are seeing the problems more clearly you can start to work through the potential issues using the reports from your new JSLint VS plugin to fix the syntax and other formatting issues.

Share