DCP Partners

by

Disable the iOS ‘long-touch’ pop-up/callout

A standard behavior / ‘feature’ of iOS provides a pop-up window (‘callout’) that provides links for “Open in New Tab”, “Copy Link URL”, etc.  when a link or input element is touched and held. While handy in some cases, it is quite annoying in web-based applications where you’re trying to push a slider or interact with any touch element that requires you to hold the element down.  One of my web-apps makes use of slider elements to enter a numeric value – so when the user touched and held the slider ‘handle’, the callout would pop-up and interfere with the operation of the input element.

This behavior can be disabled quite easily thru CSS, by simply setting the -webkit-touch-callout property to “none” for the element(s) … or for the entire page.  For instance:

body {-webkit-touch-callout: none;}

will disable the callout for all elements on the page.

 

by

LiveValidation – Validate all text fields

I use the LiveValidation Javascript library to handle most of my client-side form validation features. With it, fields are validated as the user types and instant feedback provides the user with specific instruction on how to correct errors – BEFORE they get to the server and database. The documentation for the library (see link above) is complete and provides lots of examples. [Read more…]

by

Save WordPress Plugin CSS changes

WordPress plugins offer a great way to extend the functionality of your ‘standard’ WordPress implementation. Often the plugin author includes a CSS file that provides the style attributes for the content elements that the plugin creates. However, many authors do not provide a way to change the style of the elements, without having to change the plugin’s CSS file. This works fine – however, any changes will be lost when the plugin is upgraded and the bundled CSS file is replaced.

My solution for this problem is to place CSS changes in a separate “style-override.css” file in the Theme’s directory – including all of the selectors and attributes that I’d like to change.  CSS works on the ‘last one in wins’ rule – so the last definition of a given rule will over-ride any previous definitions.

You can load this ‘style-override.css’ file at the end of the page, over-riding any previous definitions, by using the following code in your functions.php:

//load the style-override.css file at the very end of the document
//allowing CSS for plugins to be altered and protected against overwrite by upgrade
add_action(‘wp_footer’, ‘loadOverrideCSS’);
function loadOverrideCSS() { ?>
<!– load style-override.css file –>
<link rel=’stylesheet’ type=’text/css’ media=’screen’ href='<?php echo get_bloginfo(‘stylesheet_directory’); ?>/style-override.css’ />
<?php }
//pcLoadOverrideCSS()

This will use the ‘wp_footer’ hook, which is one of the last things executed by WordPress when generating the content page.