Category: jQuery

Javascript for menu icons

jQuery(document).ready(function($) {
$('.menu-my-main-menu-container').each(function(){
var iconstr = false;
if($(this).hasClass('linkedin')){
iconstr = 'icon-linkedin';
}
if(iconstr){
var anchor = $(this).find('a');
var title = anchor.find('span').html();
anchor.attr('title',title).wrapInner('');
}
});
});

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);
            }
        });
	});

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';
        }
    });
});

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;
}

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.

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);
		    });
	});

jQuery add classes to lists and tables

jQuery(document).ready(function($) {	
	$('ul li:first-child').addClass('first-child');
	$('ul li:last-child').addClass('last-child');
	$('ul li:nth-child(even)').addClass('even');
	$('ul li:nth-child(odd)').addClass('odd');
	$('table tr:first-child').addClass('first-child');
	$('table tr:last-child').addClass('last-child');
	$('table tr:nth-child(even)').addClass('even');
	$('table tr:nth-child(odd)').addClass('odd');
	$('tr td:first-child').addClass('first-child');
	$('tr td:last-child').addClass('last-child');
	$('tr td:nth-child(even)').addClass('even');
	$('tr td:nth-child(odd)').addClass('odd');
});

Or better yet:

jQuery(document).ready(function($) {	
	$('*:first-child').addClass('first-child');
	$('*:last-child').addClass('last-child');
	$('*:nth-child(even)').addClass('even');
	$('*:nth-child(odd)').addClass('odd');
});

Inline Form Labels

jQuery(document).ready(function($) {
	// inline labels for form text fields.
	$('form input[type="text"], form textarea').val(function(index,value){
		$(this).siblings('label').css('display','none');
		return $(this).siblings('label').html();
	});
	$('form input[type="text"], form textarea').focus(function(){
		$(this).val('');
	});
	$('form input[type="text"], form textarea').blur(function(){
		if($(this).val() == ''){
			$(this).val(function(index,value){
				return $(this).siblings('label').html();
			});
		}
	});
});