WPIntell

Source evidence

jQuery conflicts

WP Tabbed Widget · support · 2016-10-16T02:30:00+00:00

complaintsentiment
mediumseverity
0.86relevance
2replies
Evidence linked to opportunitycommercial context

Proof Health

Open evidence

Commercial opportunities need traceable source links before they are treated as build-worthy.

4 / 27 rows with source links

14.8% of this page's analysis has direct source links.

0 build-decision rows missing links

0 rows here require auditable proof before promotion.

23 rows with no attached evidence

0 rows have source counts but still need direct links.

Conversation

support
KTS915 unresolved
This is a very useful plugin — thanks! — but it causes jQuery conflicts with other plugins. May I therefore suggest you make the following changes: 1. In wp-tabbed-widget.php you make two calls to load jQuery. Both are completely unnecessary because WordPress automatically loads jQuery anyway. 2. More importantly, your trigger function in tabbed-js is the cause of jQuery conflicts. Could you therefore replace this line: $( '.wp-tabbed-nav li', tabs).eq( 0).trigger( 'click' ); with this: $( '.wp-tabbed-nav li:nth-child(1)').addClass('tab-active'); $( '.tab-active').closest('ul').next('div').children('div:nth-child(1)').addClass('tab-active'); Thanks again! Actually, there is a far superior way of initially setting the first tab and its contents as active. The current method, using jQuery, means that the tab and contents load only fter a short delay. Using PHP instead means that they load immediately, with the rest of the page. So we can get rid of that function in tabbed-js altogether. That whole file then looks like this: jQuery( document ).ready( function( $ ) { $( '.wp-tabbed-tabs').each( function() { var tabs = $( this ); tabs.on( 'click', '.wp-tabbed-nav li', function( e ) { e.preventDefault(); var tab = $( this ); var t = tab.attr( 'data-tab' ); if ( typeof t !== "undefined" ) { $( '.wp-tabbed-nav li', tabs ).removeClass('tab-active' ); tab.addClass( 'tab-active' ); $( '.wp-tabbed-cont', tabs).removeClass('tab-active'); $( '.wp-tabbed-cont.'+t, tabs).addClass('tab-active'); } }); }); }); In wp-tabbed-widget.php , we then need to change lines 312 to 314 from this: ?> <li data-tab="tab-<?php echo esc_attr($k) ?>"><a href="#"><?php echo esc_html($data['settings']['title']); ?></a></li> <?php to this: if( $k == 0 ) { ?> <li class="tab-active" data-tab="tab-<?php echo esc_attr($k) ?>"><a href="#"><?php echo esc_html($data['settings']['title']); ?></a></li> <?php } else { ?> <li data-tab="tab-<?php echo esc_attr($k) ?>"><a href="#"><?php echo esc_html($data['settings']['title']); ?></a></li> <?php } We also need to change what is currently line 333 from this: echo '<div class="wp-tabbed-cont tab-' . esc_attr($k) . '">'; to this: if( $k == 0 ) { echo '<div class="tab-active wp-tabbed-cont tab-' . esc_attr($k) . '">'; } else { echo '<div class="wp-tabbed-cont tab-' . esc_attr($k) . '">'; } While we’re about it, we should also make the plugin accessible for those with screen-readers. So the tabbed-js should actually look like this: jQuery( document ).ready( function( $ ) { $( '.wp-tabbed-tabs').each( function() { var tabs = $( this ); tabs.on( 'click', '.wp-tabbed-nav li', function( e ) { e.preventDefault(); var tab = $( this ); var t = tab.attr( 'data-tab' ); if ( typeof t !== "undefined" ) { $( '.wp-tabbed-nav li', tabs ).removeClass('tab-active' ).attr('aria-expanded','false'); tab.addClass( 'tab-active' ).attr('aria-expanded','true'); $( '.wp-tabbed-cont', tabs).removeClass('tab-active').attr('aria-hidden','true'); $( '.wp-tabbed-cont.'+t, tabs).addClass('tab-active').attr('aria-hidden','false'); } }); }); }); Then, in wp-tabbed-widget.php the upper bit of code should look like this: if( $k == 0 ) { ?> <li class="tab-active" tabindex="0" aria-expanded="true" data-tab="tab-<?php echo esc_attr($k) ?>"><a href="#"><?php echo esc_html($data['settings']['title']); ?></a></li> <?php } else { ?> <li tabindex="0" aria-expanded="false" data-tab="tab-<?php echo esc_attr($k) ?>"><a href="#"><?php echo esc_html($data['settings']['title']); ?></a></li> <?php } while the later bit of code should look like this: if( $k == 0 ) { echo '<div aria-hidden="false" class="tab-active wp-tabbed-cont tab-' . esc_attr($k) . '">'; } else { echo '<div aria-hidden="true" class="wp-tabbed-cont tab-' . esc_attr($k) . '">'; }

Comments

2 shown
KTS915 2016-10-16T18:38:00+00:00

Actually, there is a far superior way of initially setting the first tab and its contents as active. The current method, using jQuery, means that the tab and contents load only fter a short delay. Using PHP instead means that they load immediately, with the rest of the page. So we can get rid of that function in tabbed-js altogether. That whole file then looks like this: jQuery( document ).ready( function( $ ) { $( '.wp-tabbed-tabs').each( function() { var tabs = $( this ); tabs.on( 'click', '.wp-tabbed-nav li', function( e ) { e.preventDefault(); var tab = $( this ); var t = tab.attr( 'data-tab' ); if ( typeof t !== "undefined" ) { $( '.wp-tabbed-nav li', tabs ).removeClass('tab-active' ); tab.addClass( 'tab-active' ); $( '.wp-tabbed-cont', tabs).removeClass('tab-active'); $( '.wp-tabbed-cont.'+t, tabs).addClass('tab-active'); } }); }); }); In wp-tabbed-widget.php , we then need to change lines 312 to 314 from this: ?> <li data-tab="tab-<?php echo esc_attr($k) ?>"><a href="#"><?php echo esc_html($data['settings']['title']); ?></a></li> <?php to this: if( $k == 0 ) { ?> <li class="tab-active" data-tab="tab-<?php echo esc_attr($k) ?>"><a href="#"><?php echo esc_html($data['settings']['title']); ?></a></li> <?php } else { ?> <li data-tab="tab-<?php echo esc_attr($k) ?>"><a href="#"><?php echo esc_html($data['settings']['title']); ?></a></li> <?php } We also need to change what is currently line 333 from this: echo '<div class="wp-tabbed-cont tab-' . esc_attr($k) . '">'; to this: if( $k == 0 ) { echo '<div class="tab-active wp-tabbed-cont tab-' . esc_attr($k) . '">'; } else { echo '<div class="wp-tabbed-cont tab-' . esc_attr($k) . '">'; }

KTS915 2016-10-16T22:07:00+00:00

While we’re about it, we should also make the plugin accessible for those with screen-readers. So the tabbed-js should actually look like this: jQuery( document ).ready( function( $ ) { $( '.wp-tabbed-tabs').each( function() { var tabs = $( this ); tabs.on( 'click', '.wp-tabbed-nav li', function( e ) { e.preventDefault(); var tab = $( this ); var t = tab.attr( 'data-tab' ); if ( typeof t !== "undefined" ) { $( '.wp-tabbed-nav li', tabs ).removeClass('tab-active' ).attr('aria-expanded','false'); tab.addClass( 'tab-active' ).attr('aria-expanded','true'); $( '.wp-tabbed-cont', tabs).removeClass('tab-active').attr('aria-hidden','true'); $( '.wp-tabbed-cont.'+t, tabs).addClass('tab-active').attr('aria-hidden','false'); } }); }); }); Then, in wp-tabbed-widget.php the upper bit of code should look like this: if( $k == 0 ) { ?> <li class="tab-active" tabindex="0" aria-expanded="true" data-tab="tab-<?php echo esc_attr($k) ?>"><a href="#"><?php echo esc_html($data['settings']['title']); ?></a></li> <?php } else { ?> <li tabindex="0" aria-expanded="false" data-tab="tab-<?php echo esc_attr($k) ?>"><a href="#"><?php echo esc_html($data['settings']['title']); ?></a></li> <?php } while the later bit of code should look like this: if( $k == 0 ) { echo '<div aria-hidden="false" class="tab-active wp-tabbed-cont tab-' . esc_attr($k) . '">'; } else { echo '<div aria-hidden="true" class="wp-tabbed-cont tab-' . esc_attr($k) . '">'; }