Permalink
Browse files

Updated the plugin to just use the display:table method for modern br…

…owsers
  • Loading branch information...
1 parent b84e007 commit 7c257a17715e8955a94c94284f9d9056cb023be9 @sebnitu committed Jun 21, 2012
Showing with 50 additions and 29 deletions.
  1. +4 −1 README.md
  2. +46 −28 jquery.horizontalNav.js
View
@@ -1,5 +1,5 @@
# HorizontalNav
-HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it's container. If you've ever had to create this effect on a project, you'll know it's pretty annoying to do. But this plugin makes it easy, even on responsive designs.
+HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it's container. If you've ever had to create this effect on a project, you'll know it's pretty annoying to do. But this plugin makes it easy and adds support for IE7.
*By Sebastian Nitu*
@@ -41,6 +41,9 @@ $(document).ready(function() {
5) That's it! Your navigation never looked so good :)
+## But wait, can't I just do this effect using `display: table`?
+
+Yes, you totally can! And if you don't need to support IE7 then that is the best way that I've found to create this effect. And that's exactly what this plugin uses to create the effect for modern browsers. But if you **DO** need to support IE7, this plugin is a great polyfill for you. Thanks to [hitsthings](https://github.com/hitsthings) for bringing this issue up :)
## I can't figure out how this works. Is this thing broken?
@@ -41,15 +41,18 @@
});
// Grab elements we'll need and add some default styles
- var ul = ul_wrap.find('> ul').css({ 'float' : 'left' }), // The unordered list element
- li = ul.find('> li').css({ 'float' : 'left' }), // All list items
+ var ul = ul_wrap.find('> ul'), // The unordered list element
+ li = ul.find('> li'), // All list items
li_last = li.last(), // Last list item
li_count = li.size(), // The number of navigation elements
- li_a = li.find('> a').css({ 'padding-left' : 0, 'padding-right' : 0 }); // Remove padding from the links
+ li_a = li.find('> a'); // Remove padding from the links
// If set to responsive, re-construct after every browser resize
if ( o.responsive === true ) {
- resizeTrigger( _construct, o.responsiveDelay );
+ // Only need to do this for IE7 and below
+ if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {
+ resizeTrigger( _construct, o.responsiveDelay );
+ }
}
// Initiate the plugin
@@ -80,33 +83,48 @@
// The heavy lifting of this plugin. This is where we
// find and set the appropriate widths for list items
function _construct() {
- // Reset some styles
- li.css({ 'width' : 'auto' });
-
- // Grabbing widths and doing some math
- var ul_width = trueInnerWidth(ul),
- ul_width_outer = ul.outerWidth(true),
- ul_width_extra = ul_width_outer - ul_width,
+
+ if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {
- full_width = trueInnerWidth(ul_wrap),
- extra_width = (full_width - ul_width_extra) - ul_width,
- li_padding = Math.floor( extra_width / li_count );
-
- // Cycle through the list items and give them widths
- li.each(function(index) {
- var li_width = trueInnerWidth( $(this) );
- $(this).css({ 'width' : (li_width + li_padding) + 'px' });
- });
+ // IE7 doesn't support the "display: table" method
+ // so we need to do it the hard way.
+
+ // Add some styles
+ ul.css({ 'float' : 'left' });
+ li.css({ 'float' : 'left', 'width' : 'auto' });
+ li_a.css({ 'padding-left' : 0, 'padding-right' : 0 });
+
+ // Grabbing widths and doing some math
+ var ul_width = trueInnerWidth(ul),
+ ul_width_outer = ul.outerWidth(true),
+ ul_width_extra = ul_width_outer - ul_width,
+
+ full_width = trueInnerWidth(ul_wrap),
+ extra_width = (full_width - ul_width_extra) - ul_width,
+ li_padding = Math.floor( extra_width / li_count );
+
+ // Cycle through the list items and give them widths
+ li.each(function(index) {
+ var li_width = trueInnerWidth( $(this) );
+ $(this).css({ 'width' : (li_width + li_padding) + 'px' });
+ });
+
+ // Get the leftover pixels after we set every itms width
+ var li_last_width = trueInnerWidth(li_last) + ( (full_width - ul_width_extra) - trueInnerWidth(ul) );
+ // I hate to do this but for some reason Firefox (v13.0) and IE are always
+ // one pixel off when rendering. So this is a quick fix for that.
+ if ($.browser.mozilla || $.browser.msie) {
+ li_last_width = li_last_width - 1;
+ }
+ // Add the leftovers to the last navigation item
+ li_last.css({ 'width' : li_last_width + 'px' });
- // Get the leftover pixels after we set every itms width
- var li_last_width = trueInnerWidth(li_last) + ( (full_width - ul_width_extra) - trueInnerWidth(ul) );
- // I hate to do this but for some reason Firefox (v13.0) and IE are always
- // one pixel off when rendering. So this is a quick fix for that.
- if ($.browser.mozilla || $.browser.msie) {
- li_last_width = li_last_width - 1;
+ } else {
+ // Every modern browser supports the "display: table" method
+ // so this is the best way to do it for them.
+ ul.css({ 'display' : 'table', 'float' : 'none', 'width' : '100%' });
+ li.css({ 'display' : 'table-cell', 'float' : 'none' });
}
- // Add the leftovers to the last navigation item
- li_last.css({ 'width' : li_last_width + 'px' });
}
}); // @end of return this.each()

0 comments on commit 7c257a1

Please sign in to comment.