Browsing "jQuery"
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);
}
});
});

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.

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);
		    });
	});
Feb 26, 2012 - CSS, jQuery    Comments Off on jQuery add classes to lists and tables

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');
});
Feb 26, 2012 - jQuery    Comments Off on Inline Form Labels

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