Conflict with Uber Menu and shift nav

[chrisdm]

Hi,
Im using shiftnav and uber menu and when viewing the events page with uber menu in calendar setting there is a conflict with wp-events calendar that is preventing the shift nav from loading.

The developer from uber menu looked into this and below is what he said:

You have a javascript error from the tribe-events plugin, which looks like it’s preventing ShiftNav’s javascript from being able to run.

It’s tough to tell what’s going on since the file is compiled, but I compared it to the non-minified version, and it looks like this is the javascipt where the error occurs:

tribe_tmpl.get = function (id) {
var fun = tribe_tmpl_extended.get;
return fun ? fun(id) : document.getElementById(id).innerHTML;
};
So my guess is that getElementById is returning null meaning the ID doesn’t exist in the DOM. Beyond that, I think you’d need to ask the author of that plugin, as I don’t have any insight into what their code is supposed to be doing. Either that element ID needs to be guaranteed to be present, or the script should be doing an existence check before trying to get the innerHTML.

Does anyone have any suggestions of how to get these to work together, or is it possible to only show list view when on a mobile device?

[Barry]

Hi – sorry to hear you are facing difficulties.

I love the idea behind what you’re doing in the menu, though – I don’t think I’ve seen anything quite like that previously.

The first thing that’s worth confirming is if this is indeed a problem stemming purely from The Events Calendar or if a secondary conflict might be at work.

Can you try deactivating all other plugins except for ours and Shift Nav / UberMenu – let’s leave those all active – and additionally switch away from your current theme to a default, unmodified theme like Twenty Thirteen: does the same Javascript error still occur?

Beyond that, can you give me some step-by-step instructions on how to see this error? I played around at the URL you provided but was unable to trigger the same error cited above – can you describe on a functional level what isn’t working?

[chrisdm]

Hi,

It happens on the page http://starfiredev.wpengine.com/events/. If you resize the browser the shift nav opens from the left. Sometimes on the desktop it seems to work but it never works on a mobile device.

I’ve mad a movie where you can see what happens, http://starfiredev.wpengine.com/events-shift.mov (please download if doesn’t play in browser). Basically when you click on the three lines in the top left the menu opens up from the side. This doesn’t work in map view but does in list view.

It works on all other pages on our site except the page with map view.

Thanks

[Barry]

OK – so I’d need to look at map view to see the problem? Can you enable it if so?

[chrisdm]

Hi Barry,

I’m not sure what you’re asking. If you go to http://starfiredev.wpengine.com/events/ map view is the default setting.

[Barry]

What I see is month view, by default, and map view appears not to be enabled:

I’m unsure why we would be seeing different things unless perhaps aggressive caching is enabled and impacts me (as an unauthenticated user) but not you (as an authenticated user), or something of that order.

Can you confirm if that’s a possibility?

[chrisdm]

You are seeing it correctly. The problem is in month view there is a conflict that is keeping the shift nav javascript from executing. If you watch the video i attached you can see how it doesn’t work in month view but does in list view.

I’m not sure if I said map view somewhere in the thread, I meant month view.

[chrisdm]

sorry, doing to many things at once, I see where we were talking about map view, I meant to say month view.

[Barry]

OK – thanks for clarifying. At this point, can we go back a few steps – previously I had asked you:

Can you try deactivating all other plugins except for ours and Shift Nav / UberMenu – let’s leave those all active – and additionally switch away from your current theme to a default, unmodified theme like Twenty Thirteen: does the same Javascript error still occur?

Can you confirm what the answer to this is?

[chrisdm]

I can’t really turn off all plugins and go back to normal theme because then there wouldn’t be any thing to test and I need all the plugins running, but if I go to any other page on the website or the events page in list view the shift nav works. You can see this happening in the video I sent or experience it yourself by going to the page on a mobile device. Also see the original where the developer of shift nav gives the error he’s seeing.

If we aren’t able to trouble-shoot why this is happening the possibility of remove the month view only on mobile devices (or smaller) breakpoints would be a solution.

[Barry]

I can’t really turn off all plugins and go back to normal theme because then there wouldn’t be any thing to test and I need all the plugins running

So what we’d be potentially establish by doing this is whether or not our plugins work well with the menu plugins – independently of other factors.

Is it possible to simply set up a test site – it could be as simple as creating a fresh WordPress installation in a subdirectory – and test this out there?

If we aren’t able to trouble-shoot why this is happening the possibility of remove the month view only on mobile devices (or smaller) breakpoints would be a solution.

The list of available views can be modified using the tribe-events-bar-views hook – so you could potentially combine this with a call to wp_is_mobile() to remove the view from what seem to be mobile devices:

add_filter( 'tribe-events-bar-views', 'remove_month_view_from_mobile' );

function remove_month_view_from_mobile( $views ) {
	if ( ! wp_is_mobile() ) return $views;

	foreach( $views as $index => $view )
		if ( 'month' === $view['displaying'] ) unset( $views[$index] );

	return $views;
}

Does that help?

[chrisdm]

Hi Barry,

I set up a staging site with wp-engine and de-activated all plugins except the ones we’re discussing and using 2013 theme there isn’t a conflict.

I then re-activated the theme we’re using and the conflict reoccurred.

So I think we can narrow it down to there being a theme conflict with month view.

Here’s the url http://starfiredev.staging.wpengine.com/events

Let me know if you want log in credentials to further test.

thanks, chris

[Barry]

Hi Chris,

I’ve got a couple of thoughts here.

One is that this is nothing more than an issue with badly formed markup – checkout the following HTML from the URL you linked to:

<div class="textwidget"><a href=https://secure.sports-it.com//mysam/index.php?cid=starfire&time=1404776630= target=_blank>Log In To Your Account</a><br>
<a href=https://secure.sports-it.com//mysam/index.php?cid=starfire&time=1404776630= target=_blank>Create a Starfire Account</a><br>

So we’ve got attributes that aren’t in quotes and that may be causing issues when the browser builds its document object model. Perhaps correcting that will resolve this?

Other than that, this seems to be a Genesis child theme: can you confirm if the same problem occurs using just Genesis by itself? If not, and if you can’t solve it by correcting the bad HTML, it could be worth discussing this issue with the author of the child theme.

Does that help?

[chrisdm]

hi barry,

I went back to normal genesis theme and the conflict is still happening.

best, chris

[Barry]

Can you leave it in that condition (ie, just Genesis running and not the child theme) so I can take a quick peek?

[Author]

Posts