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('');
}
});
});
$('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);
}
});
});
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';
}
});
});
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;
}
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.
Great article at Drupal with four different methods of getting around the jQuery conflicts.
jQuery(document).ready(function($) {
$('#url_field_id').blur(function(){
var myval = $(this).val().toLowerCase().replace(/[^a-z0-9]+/g,'');
$(this).val(myval);
});
});
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');
});
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();
});
}
});
});
©2024 Catherine M. O'Brien. All rights reserved.