|
Brett McCumber
|
February 13, 2015 at 12:12 pm
We are using phone to try and register from the calendar. We click on the event and see tooltip only for a second before it loads registration page. How would we change that so visitors can see the even details before deciding to register? Right now they can’t even click “Add to cart”.
Is there a way to maybe show tooltip on-click instead of hover? Any other suggestions?
Thank you
|
|
Josh
|
February 16, 2015 at 9:45 am
Hi Kat,
It turns out that some mobile browsers will display the tooltip when a date is tapped. Not all of them will though. So I can advise adding EE3’s [EVENT_LIST] shortcode on the calendar page so there’s a fallback.
|
|
Brett McCumber
|
February 17, 2015 at 7:33 am
Is there a way to display calendar on desktop and event list on mobile? What file would I need to modify?
Thank you
|
|
Brett McCumber
|
February 17, 2015 at 10:45 am
Also is there a way to make tooltip open on click instead of hover?
Events list doesn’t work well for us because sometimes we display 5 courses a day or more and by the time user even finds the right date for them it will be a lot of scrolling…
|
|
Lorenzo Orlando Caum
|
February 17, 2015 at 12:14 pm
Hi,
Is there a way to display calendar on desktop and event list on mobile?
You could set a div with a unique CSS class to wrap around both shortcodes. Then use media queries to hide or show information:
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
—
Lorenzo
|
|
Josh
|
February 17, 2015 at 12:23 pm
Hi Kat,
I mentioned this before, the tooltips will open with a tab for some but not all mobile browsers.
Here are a few ideas that you can try out:
1) Make the standard event list display on a page when it’s mobile, calendar when it’s desktop. You place this content on the page (in WP’s text editor mode) :
<div class="mobile-event-list">[EVENT_LIST]</div>
<div class="desktop-event-calendar">[ESPRESSO_CALENDAR]</div>
Then you place this CSS in your custom stylesheet:
@media (min-width: 481px) {
.mobile-event-list {
display: none;
}
}
@media (max-width: 480px) {
.desktop-event-calendar {
display: none;
}
}
2) Similar to the above, but for less scrolling, you can use another type of event list shortcode. Like the one that is included with the Custom Template add-on plugin.
So you’d place this on the page instead:
<div class="mobile-event-list">[EVENT_CUSTOM_VIEW]</div>
<div class="desktop-event-calendar">[ESPRESSO_CALENDAR]</div>
|
|
Brett McCumber
|
February 17, 2015 at 1:19 pm
Oh. I mean on the website in general. On desktop and mobile. Just make tooltip come up on click instead of hover.
I just can’t imagine anybody wanting to scroll through 100+ event to register for a one-hour course. Even with a filter by category it could be 30+ events per month so if they need to register for the end of the month or next month – it’s a lot of scrolling.
|
|
Dean
|
February 18, 2015 at 4:39 am
Hi,
The EE3 calendar tooltip already triggers on the click event as well as the mouseover.
You would have to stop the default click action of sending the user to the event and that would involve modifying core files to remove the link or using additional JavaScript to disable those links on click.
If you were to do this I would recommend using additional JavaScript as modifying core files is not recommended.
|
