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:
2. Then the CSS for styling
3. The placeholder where things will show up:
4. Call the API!
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):
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 http://ift.tt/1d1we5Q
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);
}
.fn
{
font-family: "HelveticaNeue-Bold", "Helvetica Neue Bold","Helvetica Neue", sans-serif;
font-weight: 600;
text-decoration: none;
color: #444 !important;
font-size: 18pt;
}
.inputForm
{
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;
}
</style>
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>
<div class="searchResults" id="searchResults">
<ul id="baraja-el" class="baraja-container">
</ul>
</div>
...
4. Call the API!
<script>
var $el = $( '#baraja-el' ),
baraja = $el.baraja();
baraja.add( searchResults ) );
baraja.fan( {
speed : 500,
easing : 'ease-out',
range : 100,
direction : 'right',
origin : { x : 50, y : 200 },
center : true
} );
</script>
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="http://ift.tt/1d1wba7" alt="image1"/><br/><br/><div><span class="fn">Bill Ranney</span> <span class="bullet">•</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 http://ift.tt/1d1we5Q
