Merge pull request marcj#129 from TehCanadian/master

Options out of viewport detection and class customizing
gyduxa · Jul 31, 2013 · c6873d8 · c6873d8
2 parents 3a539ca + fee8d85
commit c6873d8
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 10 deletions.
diff --git a/jquery.selectBox.css b/jquery.selectBox.css
@@ -28,7 +28,7 @@
     border-color: #666;
 }
 
-.selectBox-dropdown.selectBox-menuShowing {
+.selectBox-dropdown.selectBox-menuShowing-bottom {
     -moz-border-radius-bottomleft: 0;
     -moz-border-radius-bottomright: 0;
     -webkit-border-bottom-left-radius: 0;
@@ -37,6 +37,15 @@
     border-bottom-right-radius: 0;
 }
 
+.selectBox-dropdown.selectBox-menuShowing-top {
+    -moz-border-radius-topleft: 0;
+    -moz-border-radius-topright: 0;
+    -webkit-border-top-left-radius: 0;
+    -webkit-border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
 .selectBox-dropdown .selectBox-label {
     padding: 2px 8px;
     display: inline-block;
@@ -97,6 +106,26 @@
     margin: 0;
 }
 
+.selectBox-options.selectBox-options-top{
+    border-bottom:none;
+	margin-top:1px;
+	-moz-border-radius-topleft: 5px;
+    -moz-border-radius-topright: 5px;
+    -webkit-border-top-left-radius: 5px;
+    -webkit-border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+}
+.selectBox-options.selectBox-options-bottom{
+	border-top:none;
+    -moz-border-radius-bottomleft: 5px;
+    -moz-border-radius-bottomright: 5px;
+    -webkit-border-bottom-left-radius: 5px;
+    -webkit-border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
 .selectBox-options LI A {
     line-height: 1.5;
     padding: 0 .5em;
@@ -144,4 +173,4 @@
 
 .selectBox-inline.selectBox-disabled .selectBox-options A {
     background-color: transparent !important;
-}
+}
diff --git a/jquery.selectBox.js b/jquery.selectBox.js
@@ -445,15 +445,29 @@
         }
 
         this.hideMenus();
+
+        // Get top and bottom width of selectBox
         var borderBottomWidth = parseInt(control.css('borderBottomWidth')) || 0;
-
+        var borderTopWidth = parseInt(control.css('borderTopWidth')) || 0;
+
+        // Get top or bottom position for menu
+        var top = control.offset().top + control.outerHeight() - borderBottomWidth
+            , posTop = top+options.outerHeight()>$(window).outerHeight();
+        top = posTop?control.offset().top - options.outerHeight() + borderTopWidth:top;
+
+        // Save if position is top to options data
+        options.data('posTop',posTop);
+
+
         // Menu position
         options
             .width(control.innerWidth())
             .css({
-                top: control.offset().top + control.outerHeight() - borderBottomWidth,
+                top: top,
                 left: control.offset().left
-            });
+            })
+            // Add Top and Bottom class based on position
+            .addClass('selectBox-options selectBox-options-'+(posTop?'top':'bottom'));
 
 
         if (select.triggerHandler('beforeopen')) {
@@ -487,7 +501,7 @@
         var li = options.find('.selectBox-selected:first');
         this.keepOptionInView(li, true);
         this.addHover(li);
-        control.addClass('selectBox-menuShowing');
+        control.addClass('selectBox-menuShowing selectBox-menuShowing-'+(posTop?'top':'bottom'));
 
         $(document).bind('mousedown.selectBox', function (event) {
             if (1 === event.which) {
@@ -512,7 +526,8 @@
             var options = $(this)
                 , select = options.data('selectBox-select')
                 , control = select.data('selectBox-control')
-                , settings = select.data('selectBox-settings');
+                , settings = select.data('selectBox-settings')
+                , posTop = options.data('posTop');
 
             if (select.triggerHandler('beforeclose')) {
                 return false;
@@ -523,7 +538,6 @@
                     _selectBox: true
                 });
             };
-
             if (settings) {
                 switch (settings.menuTransition) {
                     case 'fade':
@@ -539,14 +553,17 @@
                 if (!settings.menuSpeed) {
                     dispatchCloseEvent();
                 }
-                control.removeClass('selectBox-menuShowing');
+                control.removeClass('selectBox-menuShowing selectBox-menuShowing-'+(posTop?'top':'bottom'));
             } else {
                 $(this).hide();
                 $(this).triggerHandler('close', {
                     _selectBox: true
                 });
-                $(this).removeClass('selectBox-menuShowing');
+                $(this).removeClass('selectBox-menuShowing selectBox-menuShowing-'+(posTop?'top':'bottom'));
             }
+            //Remove Top or Bottom class based on position
+            options.removeClass('selectBox-options selectBox-options-'+(posTop?'top':'bottom'));
+            options.data('posTop' , false);
         });
     };