|
Richard Duncan
|
May 23, 2015 at 10:42 am
Hello,
Layers Theme conflict with Event Espresso
When only Event Espresso 3.1.37.3 is active and Theme layers 1.1.4 are active, then embedded YouTube videos will not play on iPad/iphones.
However, the videos play fine on windows machines and android devices.
While Event Espresso is active and while the videos will not play on ipads and iphones, I switched to theme Twenty Fifteen and then videos play fine.
The issue returns when switching back to Layers Child theme or Layers main theme while Event Espresso is active.
The issue is only on iPADs/iphones.
I tested both parent and child theme to be sure the issue was not just child theme related and both exhibit the conflict with Event Espresso.
Can you help identify what in Event Espresso is conflicting?
I have also reported this to the Layers Theme Developers.
You can view the development site where issue is present
http://www.comedyguys.biz
viewing password: comedy
|
|
Dean
|
May 25, 2015 at 2:39 am
Hi,
So EE plus the default theme and everything works? Have you spoken to the Layer theme support regarding this at all?
Can you clarify, does this happen if EE is de-activated but the Layers them is still active? (I didn’t see you mention that in your post).
How did you embed the video? Did you use the “old embed code” or the URL or the iframe code?
|
|
Richard Duncan
|
June 1, 2015 at 3:29 pm
Hi Dean,
We are using the new .be urls for YouTube and pasting them directly in the WordPress editor which converts them to embeds.
We paid a developer to sort out the issues and modifications were required to different files to solve the ipad/iphone menu and YouTube embed issues.
./wp-content/plugins/event-espresso/templates/css/themeroller/redmond/style.css
/*.ui-widget :active { outline: none; }*/
./wp-content/themes/layers-child/assets/js/theme.js
if (!(“ontouchstart” in document.documentElement)) {
document.documentElement.className += ” no-touch”;
}
jQuery(function($) {
/**
* Apply fix to main menu for dropdowns on mobile devices without the hover state
*/
$(‘#menu-main-menu-1 > .menu-item-has-children > a’).on(‘click touchstart’, function (e) {
// Check sub menu state
var subMenu = $(this).next(),
parent = $(this).parent();
if(!$(document).hasClass(‘no-touch’) && subMenu.css(‘opacity’) == 0) {
// Display sub menu
$(‘#menu-main-menu-1 > .menu-item-has-children’).removeClass(‘hover’);
parent.addClass(‘hover’);
e.preventDefault();
return false;
}
else {
return true;
}
});
$(document).on(‘click touchstart’, function (e){
if(!$(e.target).closest(‘.menu-item-has-children’).length) {
$(‘.menu-item-has-children’).removeClass(‘hover’);
}
});
./wp-content/themes/layers-child/style.css
/* Dropdowns for touch devices */
.nav li.hover > .sub-menu {
visibility: visible;
opacity: 1;
top: 40px;
transition: all 0.2s ease-in-out;
}
|
|
Dean
|
June 3, 2015 at 4:20 am
Hi,
Glad to hear you got it resolved. I did some tests just to make sure, and didn’t come across any issues with the .be embeds and default WP themes, so it must be localised to that theme.
As such, thanks for sharing the fix!
|
