Browsing "Javascript"
Sep 8, 2017 - jQuery, WordPress    Comments Off on JS for iconifying menu tiems

JS for iconifying menu tiems


$('li.menu-item.icon').each(function(){
var cont = $(this);
var list = $(this).attr('class').split(/\s+/);
var link = $(this).find('a');
console.log(list);
$.each(list, function(index, item) {
console.log(item);
if (item.match(/fa-(.*)/)) {
//do something
link.addClass('fa');
link.find('span').addClass('screen-reader-text');
link.addClass(item);
cont.removeClass(item);
}
});
});

Aug 14, 2015 - Meteor, Node.js    Comments Off on Meteor Deploy Notes

Meteor Deploy Notes

First need an Ubuntu server

Setup with Ubuntu:

curl --silent --location https://deb.nodesource.com/setup_0.12 | sudo bash -

Then install with Ubuntu:

sudo apt-get install --yes nodejs

Optional: install build tools

To compile and install native addons from npm you may also need to install build tools:

apt-get install --yes build-essential

1. Installing Meteor-Up.

Meteor-Up can be easily installed with NPM. Don’t forget the -g to make the package global.

npm install mup

You should now be able to display every MUP command with:

mup —help

If that’s all ok, then we can init a project:

mup init
Jul 14, 2014 - Javascript    Comments Off on Safari and Hash URLs

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.

Mar 6, 2014 - Javascript, jQuery    Comments Off on Make all external links target to blank

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';
        }
    });
});
Feb 17, 2014 - Genesis, jQuery    Comments Off on Making Genesis & Bootstrap play nice together

Making Genesis & Bootstrap play nice together

This is going to be a multi-post solution set, I’m sure. I started out with a jQuery solution. It worked ok, but wasn’t really what I wanted:

//bootstrap
    $('.site-inner').addClass('container');
    //$('.wrap').addClass('row');
    $('.content-sidebar .content-sidebar-wrap').addClass('row');
    $('.content-sidebar .content').addClass('col-md-8 col-sm-12');
    $('.content-sidebar .sidebar').addClass('col-md-4');

Then I started digging into the Genesis context filters. This will probably work better and be more portable in the future. (Obviously this is jsut a part of it.)

/*** Bootstrappin **/

add_filter( 'genesis_attr_site-inner', 'msdlab_bootstrap_site_inner', 10);
add_filter( 'genesis_attr_breadcrumb', 'msdlab_bootstrap_breadcrumb', 10);
add_filter( 'genesis_attr_content-sidebar-wrap', 'msdlab_bootstrap_content_sidebar_wrap', 10);
add_filter( 'genesis_attr_content', 'msdlab_bootstrap_content', 10);
add_filter( 'genesis_attr_sidebar-primary', 'msdlab_bootstrap_sidebar', 10);

function msdlab_bootstrap_site_inner( $attributes ){
    $attributes['class'] .= ' container';
    return $attributes;
}

function msdlab_bootstrap_breadcrumb( $attributes ){
    $attributes['class'] .= ' row';
    return $attributes;
}

function msdlab_bootstrap_content_sidebar_wrap( $attributes ){
    $attributes['class'] .= ' row';
    return $attributes;
}

function msdlab_bootstrap_content( $attributes ){
    $layout = genesis_site_layout();
    switch($layout){
        case 'content-sidebar':
        case 'sidebar-content':
            $attributes['class'] .= ' col-md-7 col-sm-12';
            break;
        case 'content-sidebar-sidebar':
        case 'sidebar-sidebar-content':
        case 'sidebar-content-sidebar':
            break;
        case 'full-width-content':
            $attributes['class'] .= ' col-md-12';
            break;
    }
    return $attributes;
}

function msdlab_bootstrap_sidebar( $attributes ){
    $layout = genesis_site_layout();
    switch($layout){
        case 'content-sidebar':
        case 'sidebar-content':
            $attributes['class'] .= ' col-md-4 col-md-offset-1 hidden-sm hidden-xs';
            break;
        case 'content-sidebar-sidebar':
        case 'sidebar-sidebar-content':
        case 'sidebar-content-sidebar':
            break;
        case 'full-width-content':
            $attributes['class'] .= ' hidden';
            break;
    }
    return $attributes;
}
Jan 30, 2014 - Javascript, jQuery    Comments Off on IE8 Javascript Upgrades

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.

Aug 8, 2012 - Javascript, WordPress    Comments Off on more on single page/post JS

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();
Jun 25, 2012 - Javascript, WordPress    Comments Off on Javascript on just ONE Admin Page

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' );
}
Jun 11, 2012 - Javascript, jQuery    Comments Off on Making URL fields idiot resistant.

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);
		    });
	});
Pages:12»