Thursday, February 6, 2014

The Code Behind My IBM Connect 2014 Keynote Demo - Part 3

A new post on SocializeMe:Alright, let's move on to the next piece shown at the OGS. If you want to know what this is, I would suggest you catch up with Part 1 and Part 2.

The next part I got ready for the keynote was people search. But I wanted to move away from the typical search results list. I wanted something more visual and easier to digest. I wanted results to be more visual, maybe like a slideshow of people cards that I could flip through.

After doing a bit of searching, I landed on another jQuery plugin, this time the Baraja plugin and it got me something like this:

So what's the magic here? Let's walk through the parts:

1. As usual, include the right JavaScript:

<script src="jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="Baraja/js/modernizr.custom.79639.js"></script>

<script type="text/javascript" src="Baraja/js/jquery.baraja.js"></script>

2. Then the CSS for styling

<style type="text/css">

.homepage {

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;

font-weight: 300;

color: #444;

line-height: 1.2;

background-color: #f0f0f0;


a {

color: #1c8aae !important;

text-decoration: none !important;


.photo {

width: 100px;

height: 100px;

border-radius: 55px;

-webkit-border-radius: 55px;

-moz-border-radius: 55px;

border-color: #fff;

border-style: solid;

box-shadow: 0 0 3px rgba(0, 0, 0, .4);

-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .4);

-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .4);




font-family: "HelveticaNeue-Bold", "Helvetica Neue Bold","Helvetica Neue", sans-serif;

font-weight: 600;

text-decoration: none;

color: #444 !important;

font-size: 18pt;




border: solid 1px #e9ecef;

width: 280px;

height: 30px;

padding: 8px;

-webkit-border-radius: 15px; //For Safari, etc.

-moz-border-radius: 15px; //For Mozilla, etc.

border-radius: 15px; //CSS3 Feature

box-shadow: 0 0 4px rgba(0, 0, 0, .2);

-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .2);

-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .2);


.searchEntry {

text-align: center;

margin: auto;

padding-top: 20px;


.searchResults {

padding-top: 20px;

width: 260px;

height: 600px;

margin: 30px auto;


ul.baraja-container li {

border-radius: 10px;

padding: 5px;

box-shadow: 0 0 4px rgba(0, 0, 0, .1);

-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .1);

-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .1);

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

width: 250px;

height: 250px;

margin: 0;

position: absolute;

top: 0;

left: 0;

cursor: pointer;

background: #f0f0f0;

font-size: 12pt;

text-align: center;

pointer-events: auto;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

-o-backface-visibility: hidden;

backface-visibility: hidden;


ul.baraja-container li img {

margin-top: 20px;


ul.baraja-container li p {

line-height: 1.0px;


ul.baraja-container li div {

text-align: center;


ul.baraja-container {

list-style-type: none;

width: 260px;

height: 310px;

margin: 0 auto 30px;

position: relative;

padding: 0;


.score {

font-size: 18pt;

color: #1c8aae !important;

text-decoration: none !important;


.bullet {

font-size: 8pt;

color: #666;



3. The placeholder where things will show up:

<body style="margin: 0;">

<div class="homepage">

<div class="searchEntry">

<input type="text" class="inputForm" id="searchBox" />


<div class="searchResults" id="searchResults">

<ul id="baraja-el" class="baraja-container">




4. Call the API!


var $el = $( '#baraja-el' ),

baraja = $el.baraja();

baraja.add( searchResults ) ); {

speed : 500,

easing : 'ease-out',

range : 100,

direction : 'right',

origin : { x : 50, y : 200 },

center : true

} );


The missing piece here is the call to the People Search API of IBM Connections to generate searchResults. I'll leave that as an exercise to the reader. Once I gathered all the data, I created a searchResult which would look like this (so that it matches the CSS I shared above):

<li><img class="photo" src="" alt="image1"/><br/><br/><div><span class="fn">Bill Ranney</span> <span class="bullet">&bull;</span> <span class="score">10</span></div><p>Sr. Business Manager</p><p>10 followers</p></li>

In terms of the score, that was work that we did based on the work with Marie Wallace. Check out her blog for more details.

from Socialize Me