Category: Javascript

Safari and Hash URLs

Just discovered this strange behaviour in Safari (and Safari mobile). If you are using a cross-page url with a hash tag, first it must be formatted thus:

http://domain.tld/path/to/page/#hashtag

Note the slash before the hash. That’s apparently key to getting the hash recognized in Safari. Doesn’t seem to break in other browsers this way.
Next, the javascript to capture this is different:

//no good:
var hash = window.location.hash.replace('tab-', '');

//good:
var hash = location.hash.replace('tab-', '');

Again, this seems to work in other browsers.

Make all external links target to blank

Stupid little javascript workaround for when you are too lazy to do it in the html. Pretty fast, saves pain.

requires this little function:

function strripos(haystack, needle, offset) {
  //  discuss at: http://phpjs.org/functions/strripos/
  // original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // bugfixed by: Onno Marsman
  // bugfixed by: Brett Zamir (http://brett-zamir.me)
  //    input by: saulius
  //   example 1: strripos('Kevin van Zonneveld', 'E');
  //   returns 1: 16

  haystack = (haystack + '')
    .toLowerCase();
  needle = (needle + '')
    .toLowerCase();

  var i = -1;
  if (offset) {
    i = (haystack + '')
      .slice(offset)
      .lastIndexOf(needle); // strrpos' offset indicates starting point of range till end,
    // while lastIndexOf's optional 2nd argument indicates ending point of range from the beginning
    if (i !== -1) {
      i += offset;
    }
  } else {
    i = (haystack + '')
      .lastIndexOf(needle);
  }
  return i >= 0 ? i : false;
}

and the jQuery bit:

jQuery(document).ready(function($) {	
    // add target="_blank" to all *external* 
//create array of all *internal* urls that should NOT go to a separate window
    var internal_urls = Array('domain.tld','127.0.0.1','domain.tld');
    $('a').attr('target',function(){
        var url = $(this).attr('href');
        var target = $(this).attr('target');
        if(url == '#' || strripos(url,'http',0)===false){
            return '_self';
        } else {
            var i=0;
            while (internal_urls[i]){
                if(strripos(url, internal_urls[i], 0)){
                    return target;
                }
                i++;
            }
            return '_blank';
        }
    });
});

IE8 Javascript Upgrades

So, I’m discovering a number of things that IE8 doesn’t do that are “upgradeable” via javascript. I’m installing the js via a conditional so that I’m not loading it unless necessary.

Make it play nice with responsive design (bootstra) media queries: https://github.com/scottjehl/Respond

Make it understand cover/contain background images (logos): https://github.com/louisremi/jquery.backgroundSize.js (deprecated) or https://github.com/louisremi/background-size-polyfill

Of course, Modernizr.

more on single page/post JS

http://scribu.net/wordpress/optimal-script-loading.html

class My_Shortcode {
	static $add_script;

	static function init() {
		add_shortcode('myshortcode', array(__CLASS__, 'handle_shortcode'));

		add_action('init', array(__CLASS__, 'register_script'));
		add_action('wp_footer', array(__CLASS__, 'print_script'));
	}

	static function handle_shortcode($atts) {
		self::$add_script = true;

		// actual shortcode handling here
	}

	static function register_script() {
		wp_register_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true);
	}

	static function print_script() {
		if ( ! self::$add_script )
			return;

		wp_print_scripts('my-script');
	}
}

My_Shortcode::init();

Javascript on just ONE Admin Page

I ran into this issue recently when I had a setting page that allowed a file upload (image for logo) and the script for it started overriding the general image uploader across the entire admin. Grrf. A better way to hook the .js is found on Justin Tadlock’s blog. (I wasn’t able to do this exactly, but I used the idea.)

add_action( 'admin_menu', 'my_example_settings_page' );

function my_example_settings_page() {
	global $my_settings_page;

	$my_settings_page = add_options_page( 'DevPress Example', 'DevPress Example', 'manage_options', 'my-example-page-name', 'my_callback_function' );

	add_action( 'admin_enqueue_scripts', 'my_admin_enqueue_scripts' );
}

function my_admin_enqueue_scripts( $hook_suffix ) {
	global $my_settings_page;

	if ( $my_settings_page == $hook_suffix )
		wp_enqueue_script( 'my-example' );
}

Making URL fields idiot resistant.

	jQuery(document).ready(function($) {
	    $('#url_field_id').blur(function(){
		    var myval = $(this).val().toLowerCase().replace(/[^a-z0-9]+/g,'');
			$(this).val(myval);
		    });
	});