0

I was trying to style a select but gave up for incompatibility issues with IE8 and Safari. So I thought to use a dropdown instead of the select and then another problem appeared. When a select is near the bottom of a page, the options appear above the select rather than the bottom, which is the default. What I want to know is if anyone has a solution using jQuery to make the dropdown options appear above it as the select options

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Dropdown Menu</title>
        <meta charset="UTF-8">
        <style type="text/css">
            * {border: 0; margin: 0; padding: 0;}

            div {
                background-color: #09C;
                width: 200px;
                line-height: 40px;
                bottom: 40px;
                left: 300px;
                display: block;
                position: absolute;
                text-indent: 15px;
                cursor: pointer;
            }

            div span {
                font-weight: bold;
                font-family: sans-serif;
                font-size: 16px;
                color: #FFF;
            }

            div:hover ul {display: block;}

            div ul {
                background-color: #0f0;
                width: 200px;
                height: 300px;
                position: absolute;
                display: none;
                list-style: none;
            }

            div ul li {
                background-color: #000;
                width: 200px;
                line-height: 30px;
                font-weight: bold;
                font-family: sans-serif;
                font-size: 16px;
                color: #FFF;
            }
        </style>
    </head>
    <body>
        <div>
            <span>Dropdown</span>
            <ul>
                <li>Link 01</li>
                <li>Link 02</li>
                <li>Link 03</li>
                <li>Link 04</li>
                <li>Link 05</li>
                <li>Link 06</li>
                <li>Link 07</li>
                <li>Link 08</li>
                <li>Link 09</li>
                <li>Link 10</li>
            </ul>
        </div>
    </body>
</html>
Learning
  • 25
  • 5

4 Answers4

0

There's a pure CSS solution. In your current rule add the rule 'bottom: 100%;'. (see below)

div ul {
  background-color: #0f0;
  width: 200px;
  height: 300px;
  position: absolute;
  display: none;
  list-style: none;
  bottom: 100%; /* <- add this */
}

Cool, right?

This is a possible duplicate of this question.

Community
  • 1
  • 1
bazeblackwood
  • 1,127
  • 6
  • 16
  • @pizzasynthesis-Pure CSS is also good, but in this particular case does not solve my problem, unfortunately, but thank you for your response. – Learning Apr 01 '14 at 20:16
0

working solution: http://jsfiddle.net/avi_sagi/5dzme/1/

Extra CSS:

div ul{
margin-top:-10px;
}
div ul li{
margin-top:-60px;
}

See what this does is it pulls each list item up by double its height so in turn reversing the order from top-bottom to bottom-top so u get what u want.

Hope this helps!

Sagi_Avinash_Varma
  • 1,489
  • 11
  • 23
0

HTML

<div id="dropdown"> <span>Dropdown</span>

    <ul>
        <li>Link 01</li>
        <li>Link 02</li>
        <li>Link 03</li>
        <li>Link 04</li>
        <li>Link 05</li>
        <li>Link 06</li>
    </ul>
</div>

CSS

* {
    border: 0;
    margin: 0;
    padding: 0;
}
div {
    background-color: #09C;
    line-height: 40px;
    bottom: 40px;
    width: 200px;
    left: 300px;
    display: block;
    position: absolute;
    text-indent: 15px;
    cursor: pointer;
}
div span {
    font-weight: bold;
    font-family: sans-serif;
    font-size: 16px;
    color: #FFF;
}
div:hover ul {
    display: block;
}
div ul {
    background-color: #0f0;
    width: 200px;
    position: absolute;
    display: none;
    list-style: none;
}
div ul li {
    background-color: #000;
    width: 200px;
    line-height: 30px;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 16px;
    color: #FFF;
}

jQuery

$(document).ready(function () {
    var ul_h = $('ul').height();
    var dd_h = $('#dropdown').height();
    var doc_h = $(document).height();
    var offsetTop = $('#dropdown').offset().top;
    if (doc_h - offsetTop - dd_h < ul_h) {
        $('#dropdown ul').css('bottom', '100%');
    }
});

This jQuery will calculate current position of div and height of menu, and if space between div and bottom of the page is smaller than dropdown height, then dropdown will show up above.

Here is demo with dropdown above (div {bottom: 40px;}) http://jsfiddle.net/wxA2u/

and here is demo with dropdown below (div {top: 40px;}) http://jsfiddle.net/wxA2u/1/

Miljan Puzović
  • 5,840
  • 1
  • 24
  • 30
  • @MiljanPuzovićPerfect, exactly what I wanted. I am immensely grateful for your help. My special thanks to you and also to all who responded. – Learning Apr 01 '14 at 19:31
  • @Learning, you're welcome. If this is right answer, please accept it (green check sign). You can vote up, also :) – Miljan Puzović Apr 01 '14 at 19:38
0

Here i have updated the top value based on the current window size.. Please check this Fiddle... this might helps you..

Script:

function calculateTop(element, popup) {
    var height = element.outerHeight(), 
    popupHeight = popup.height(),
    pos = element.offset(),
    top = pos.top, bottom = $(window).height() - (top + height);

    if (bottom > popupHeight || top < popupHeight)
        return height;
    else
        return -popupHeight;
}

Here is the script i have used to calculate the top value..

Soundar
  • 2,569
  • 1
  • 16
  • 24