How to Center Anything With CSS

css3How to center a div, image, text are mainstream topics on the web without question these days, but find a nice tutorial/post that explains how to do that is no so common, well, not any more!. I came across with an excellent post on smashing magazine, called Absolute Horizontal And Vertical Centering In CSS that does that in a very easy way!. Kudos to

Inside this post you will find a link to another excellent post: How to Center Anything With CSS by  and most important, both articles cover various common scenarios, so, what are waiting for!? xD

Hope you find this information useful!

What is a client-side template?

options_0This post is an introduction to learn about client-side templates and It’s not always good to reinvent the wheel, and that applies to this article too.

I have found a very good article that explain what I wanted to write here, is called From The Server To The ClientClient-Side Templating. I truly recommend to read this article in detail if you want learn how to deliver dynamic content via client-side and maximize code reusability and maintainability using JavaScript/jQuery, HTML, CSS, Ajax, JSON and of course, client-side templates.

Also, my teammate, Osvaldo Flores, has wrote about the same topic, he focused on Trimpath that is still our current JavaScript Templating engine here on Base22, but as all has to evolve, we are currently working on a new version of our assets using dust as our new engine, but that is another topic.

If you want to see a live demo of this client-side development technique, please visit our website Base22.com, there we use our xWidgets assets to show dynamic content that live in IBM WCM v8.

Future readings:

Hope you find this information useful!!

Hack background-position using sprites in IE7

IEYup, is time for another hack for IE 7, this time I needed to find a way to correct an issue with a sprite that is used as background image to display a set of icons in a list of links (a set of <a> inside a <li>) and depending of the type of recourse is the icon that is displayed. (using the CSS background-position Property)

As usual all works perfect in FF, Chrome, Safari, Opera, and even IE8+, but since IE 7 doesn´t support inline-block property, in some cases, not only the icon of the resource was displayed but some of the rest of the icons in the sprite too!, that happened only in the items where the text of the link was longer that the defined width of the container, in my case an <a> tag (see the image below), so in that cases, I needed to find a way to display only the correct icon.background_images_icons_1The fist step of my solution was to use the hack to mimic inline-block on block elements, since that is what I needed, be able to use inline-block in IE7:

CSS:

.the_rule
{
// more declarations ...
*display: inline;
*zoom: 1;
}

Once applied those declarations in the css rule that is applied to all <a> tags only the text of the links was lined up correctly (see the next image), well, apparently I needed to do something more, ok, the next step was to find a way to only display the correct icon and hide the rest of them (that should not appear from the beginning and are not displayed in others browsers even IE8+ ) and at the same time show all the text of the URL, interesting isn’t?

background_images_icons_2After sometime, the final step of my solution was to add a height value in the css rule, in my particular case the same height of the icons (18px) to force to hide the rest of the icons that are part of the same sprite and also to display the complete URL,  as you can see in the next image, hoooray!!:

background_images_icons_3

Note: The blue border around the <a> tag shows the dimensions of the element <a>.

CSS:

.the_rule
{
// more declarations ...
*display: inline;
*zoom: 1;
height:18px;
}

Be careful with the rest of the elements that may be below the one you add the hack!!, depending of your HTML structure is possible you need to find a way to control or force the position of the elements since they could move up, as was my case, see the next image:

background_images_icons_4Hope you find this information useful!!

:after and :before css pseudo elements hack for IE 7

css3:after and :before css pseudo elements aren’t supported by IE 7 and if you need to offer the same user experience in many browsers as possible (included legacies) without create extra code css/javascript/html/etc.., you can use the following technique that I found in Stack Overflow, kudos to vieron who found this hack!!.

If you want to see how it’s done, read :after and :before css pseudo elements hack for IE 7 in the Base22 Knowledge Wiki.

Hope you find this information useful!!

How to combine Isotope Sort and Filter in a real example

jQuery

In this post I will share how can be implemented Isotope sorting and combine it with a filter functionality in a real case.

But first, for those that doesn’t know, Isotope is a jQuery plugin that in resume, have the following features:

  • Layout modes: Intelligent, dynamic layouts that can’t be achieved with CSS alone.
  • Filtering: Hide and reveal item elements easily with jQuery selectors.
  • Sorting: Re-order item elements with sorting. Sorting data can be extracted from just about anything.
  • Interoperability: features can be utilized together for a cohesive experience.
  • Progressive enhancement: Isotope’s animation engine takes advantage of the best browser features when available — CSS transitions and transforms, GPU acceleration — but will also fall back to JavaScript animation for lesser browsers.

Requirement (simplified):

Be able to re-order a set of items based on a selected category and at the same time highlight at the top of the list (filtering) the items that matched that category.

Result:

In our new website our team section display a grid with thumbnails of the team members of the company and in the right side of the page is showing list of fields (categories) of expertise that the user can select to sorting and filter the thumbnails. In order to create that functionality, we decided to use Isotope, specifically the sorting capability and we added a modification to create a kind of filter:

team_grid

By default all the thumbnails are sorted by the field name every time the page is displayed:

The Isotope JavaScript code looks as follow:

itemSelector: '.team-member-grid',
getSortData : {
 // ...
 name: function($elem) {
   return $elem.find('.name').text();
 }
}

Note: getSorData is used by Isotope to create all the sorts that the user can applied to a set of items. getSorData accepts an object, whose values are the functions to extract the data. Each function receives one argument, which represents a jQuery object for each item element. With that argument, the function needs to return the data point.

To sort the items by name I diced to use the div that contains the name of the team member for this purpose and the HTML looks as follow:

<div class="widget team">
<div class="team-member-grid element">
<!-- more code here...-->
<div class="team-member-title name">Alex Arriaga</div>
 <!-- more code here...--></div>
<div class="team-member-grid element">
<!-- more code here...-->
<div class="team-member-title name">Alfonso Ramos</div>
 <!-- mode code here...--></div>
<div class="team-member-grid element">
<!-- more code here...-->
<div class="team-member-title name">Ben Shoemate</div>
 <!-- mode code here...--></div>

At this point, this is a default implementation of Isotope sorting, but now, if you click in one of the fields of expertise (right side of the page), you will see that the items that match that category are displayed (ordered by name) at the top of the list and the rest of the items at the bottom with a opacity: team_grid1 In order to achieve that, using Isotope, I needed that each of the items had a flag for each of the fields of expertise, why?, because Isotope requires that all the elements that are going to be sorted have the attribute/css class name that will be used for sorting and in our scenario a team member could have more than one field of expertise. So, I used as a  flag an integer value of 1 if “is in that field of expertise” and 2 for “is not in that field of expertise”. With that little trick I forced Isotope to move at the top of the Grid all the items that matched that field of expertise since all that items will have a value of 1 for that attribute, and at the same time Isotope will move at the bottom the rest of the items, since have a value of 2, and with that trick I covered the filter requirement.

Now my JavaScript code looks as follow:

itemSelector: '.team-member-grid',
getSortData: {
	manager: function($elem) {
		return parseInt($elem.attr('data-category-manager'), 10);
	},
	solarchitect: function($elem) {
		return parseInt($elem.attr('data-category-solarchitect'), 10);
	},
	analysis: function($elem) {
		return parseInt($elem.attr('data-category-analysis'), 10);
	},
	qualityassu: function($elem) {
		return parseInt($elem.attr('data-category-qualityassu'), 10);
	},
	//...
	name: function($elem) {
		return $elem.find('.name').text();
	}
}

And now, each of the items needs to have a data attribute for each of that filters I have created:

<div class="widget team">
<div class="team-member-grid element isotope-item" data-category-solarchitect="2" data-category-qualityassu="2" data-category-analysis="2" data-category-manager="2">
<div class="team-member-title name">Alex Arriaga</div>
 <!-- more code here...--></div>
<div class="team-member-grid element isotope-item" data-category-solarchitect="2" data-category-qualityassu="1" data-category-analysis="2" data-category-manager="2">
<!-- more code here...-->
<div class="team-member-title name">Alfonso Ramos</div>
 <!-- mode code here...--></div>
<div class="team-member-grid element isotope-item" data-category-solarchitect="2" data-category-qualityassu="2" data-category-analysis="2" data-category-manager="2">
<!-- more code here...-->
<div class="team-member-title name">Ben Shoemate</div>
 <!-- mode code here...--></div>

At this moment two things are missing, the list of fields of expertise and the JavaScript code (using jQuery) than can trigger the different sorts/filters when the user click in one of the fields of expertise of that list: team_grid3The HTML for that looks as follow:

<div class="nav-collapse collapse">
<ul class="option-set" data-option-key="sortBy">
<ul class="option-set" data-option-key="sortBy">
	<li class="active"><a href="#sortBy=name" data-option-value="name">By Name</a></li>
	<li><a href="#sortBy=manager" data-option-value="manager">Project Management</a></li>
	<li><a href="#sortBy=analysis" data-option-value="analysis">Business Analysis</a></li>
	<li><a href="#sortBy=qualityassu" data-option-value="qualityassu">Quality Assurance</a></li>
</ul>
</ul>
<ul class="option-set" data-option-key="sortBy">//...</ul>
</div>

And the JavaScript code looks as follow:


var $optionSets = $j('.team-filters .option-set'), $optionLinks = $optionSets.find('a');

$optionLinks.click(function() {
    var $this = $j(this);
    // don't proceed if already selected
    if ($this.hasClass('selected')) {
        return false;
    }
    var $optionSet = $this.parents('.option-set');
    $optionSet.find('.selected').removeClass('selected');
    //highlight the current filter
    $this.addClass('selected');

    // make option object dynamically, i.e. { filter: '.my-filter-class' }
    var options = {}, key = $optionSet.attr('data-option-key'), value = $this.attr('data-option-value');
    // parse 'false' as false boolean
    value = value === 'false' ? false : value;
    options[key] = value;
    if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
        // changes in layout modes need extra logic
        changeLayoutMode($this, options);
    }else{
        // otherwise, apply new sort/filter
        $container.isotope(options);
    }
    return false;
});

Each one of the values of the attribute data-option-value of the items in the list of fields of expertise correspond to the name of one of the sorts, and when a user click on one of the options, the sort selected is passed to Isotope in order to re-order the items:

// make option object dynamically
var options = {}, key = $optionSet.attr('data-option-key'), value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[key] = value;

$container.isotope(options); // re-ordering the items based on the option selected

And is done!!.. hope you find this information useful.

Note: would be great if Isotope could improve sort/filter and find a way to dynamically create all the sorts/filters within getSorData, as for example, right now if we add another field of expertise we have to write the code for that type inside getSorData. Also to remove the restriction that all elements must have the same element used to sort/filter, keep it simple, if it has that element/attribute applied sort/filter, otherwise, no.

Update: I have created a new post of How to create a dynamic getSortData function for Isotope jQuery plugin, hope you find this information useful!!