Project Intro and Background
In Feb 2016, I’ve got an opportunity to work on an interesting project – an Agenda page for Salesforce’s World Tour Melbourne. The marketers would like the page to represent a “Perfect Day” for each of the 6 streams – “Sales”, “Marketing”, “Service” etc., and the functionality for the users to click each of the breakout sessions to read more about that session. Instead of creating a single page of each of the Perfect Days, our team decided to leverage the current “Agenda” page and add a “Filter” function to it, and I’ll be coding the page so that we have a beautiful and user-friendly web experience for the visitors to view that perfect day on a single page.
View the live page here >
My responsibilities and requirements of this project were:
- HTML/CSS RWD (Responsive Web Design) coding
- jQuery for filtering and lightbox functionalities
- jQuery for passing the parameters
- Implement the solution to Open CMS platform
The live web page is at: https://www.salesforce.com/au/events/sfwt16/agenda/ Please feel free to visit and have a play!
(Credit: UI/UX Designed by APAC Senior Creative Designer Tricia)
jQuery Filter functionality
The screenshot below shows the scenario when “Sales” track is selected, so all the recommended breakout sessions for “Sales” perfect day will be highlighted. And all the other sessions will all be faded out (with opacity=0.6).
All the sessions and personas are color coded based on the color theme of the product or section, and the tag color and border color are reflected accordingly.
Section hovering (pure CSS)
And while you are at this screen, if you’re interested in the other sessions, you can still feel free to use the cursor to roll-over on any session, so the respective session will be highlighted for you to explore more (using pure CSS):
(See the purple session was highlighted when you have your cursor hovering it)
Lightbox of session details
Once you click on any sessions, a lightbox will open with the session details:
Animated preview of the UI/UX
Passing parameter using jQuery to show up the respective session
To make it easy to maintain, instead of creating 24 files for the 24 sessions, all the session details are stored in one single file (session.jsp), and I used jQuery code to show up the exact session detail.
To do this, in session.jsp file, I set all the .session to be display:none, and only show the respective session’s detail.
The javascript for this is:
$(document).ready(function() {
var url = window.location.href;
option = url.match(/option=(.*)/)[1];
option = option.substr(0,2);
showDiv(option);
});
function showDiv(option) {
$('#' + option).show();
}
(Update: Code for this functionality has been improved in a more recent example)
The javascript basically finds the “option” parameter in the URL, passes it and get the first two digits (because some other parameters might also be passed based on system settings). Then the respective div with those two digits as the div id will show up.
For example, I stored the first session’s detail in a div id=a1. So the URL of the first session’s detail is:
/session.jsp?option=a1
So the div #a1 will show up in this case.
Passing parameter using jQuery for eDM CTAs
Another functionality is required because of the eDMs we send out. So we send out eDMs to each of the personas with the main CTA to be “Find Your Perfect Day”, so the CTA should link to the page, with the respective Perfect Day already highlighted.
So using similar ways, we pass that parameter through URL, such as:
https://www.salesforce.com/au/events/sfwt16/agenda/?option=sales
In this case, all the Sales sessions will be highlighted by default when the users land on this page.
I used the option and switch to trigger each of the filters. If nothing has been passed, then the “All” menu will be automatically highlighted/selected. (First line of the code below)
$(".label-type-all").addClass("highlight");
var url = window.location.href;
option = url.match(/option=(.*)/)[1];
if (option){
$(".label-type-all").removeClass("highlight");
switch (option) {
case 'sales' :
$(".label-type-sales").addClass("highlight");
$(".agenda-type-sales").addClass("selected");
$(".agenda-session").not(".agenda-type-sales").addClass("dim");
break;
case 'marketing' :
$(".label-type-marketers").addClass("highlight");
$(".agenda-type-marketers").addClass("selected");
$(".agenda-session").not(".agenda-type-marketers").addClass("dim");
break;
case 'service' :
$(".label-type-service").addClass("highlight");
$(".agenda-type-service").addClass("selected");
$(".agenda-session").not(".agenda-type-service").addClass("dim");
break;
case 'it' :
$(".label-type-itadmin").addClass("highlight");
$(".agenda-type-itadmin").addClass("selected");
$(".agenda-session").not(".agenda-type-itadmin").addClass("dim");
break;
case 'smb' :
$(".label-type-smb").addClass("highlight");
$(".agenda-type-smb").addClass("selected");
$(".agenda-session").not(".agenda-type-smb").addClass("dim");
break;
case 'recommended' :
$(".label-type-recommended").addClass("highlight");
$(".agenda-type-recommended").addClass("selected");
$(".agenda-session").not(".agenda-type-recommended").addClass("dim");
break;
}
}
(Update: Code for this functionality has been improved in a more recent example We should totally create a js function for this.)
Responsive Web Design – Mobile View
The code is 100% web responsive to any screen size. The below screenshot shows how it looks like on mobile interface:
The mobile version of the agenda and the desktop version are sharing the same HTML markup, which means I use pure CSS coding to make the interface responsive to the device size.
One thought on “HTML/CSS /jQuery Agenda filter for SF World Tour Melbourne”