How to open an ddslick-list in different direction

StackOverflow https://stackoverflow.com/questions/22170653

Pergunta

I use ddslick list, and I search how copy opening of classical list.

When I have place to open in down direction then open in classical mode but when i don't have place I want force the opening in up direction.

and I can't say to my ddslick list open up a table like a simple select.

I give a sample code

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="tableHautMax.aspx.vb"
Inherits="Jquery.tableHautMax" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script/jquery.ddslick.min.js"></script>
<style type="text/css">
    .MaxHeightPopup
    {
        border-style: solid;
        border-color: red;
        display: block;
        max-height: 100px;
        overflow: auto;
    }
</style>
<script type="text/javascript">
    $(function () {

        var ddData = [
            {
                text: "Facebook",
                value: 1,
                selected: false,
                description: "Description with Facebook",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
            },
            {
                text: "Twitter",
                value: 2,
                selected: false,
                description: "Description with Twitter",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
            },
            {
                text: "LinkedIn",
                value: 3,
                selected: true,
                description: "Description with LinkedIn",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
            },
            {
                text: "Foursquare",
                value: 4,
                selected: false,
                description: "Description with Foursquare",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
            }
        ];

        $("#btnAdd").click(function () {
            var row = '<tr height="50"><td>';
            row += '<select class="myDropdown"></select></td>';
            row += '<td>2</td><td>3</td><td >4</td></tr>';
            $('#tbdatas').append(row);

            $('.myDropdown').ddslick({
                zindex: 200,
                data: ddData,
                width: 300,
                selectText: "Select your preferred social network",
                imagePosition: "right"
            });

        });

        $("#btnAdd1").click(function () {
            var row = '<tr height="50"><td>';
            row += '<select class="myselect1"></select></td>';
            row += '<td>2</td><td>3</td><td >4</td></tr>';
            $('#tbdatas1').append(row);

        });
    });
</script>
</head>
<body>
<button id="btnAdd">
    Ajouter 1 ligne</button>
    <table class="MaxHeightPopup" id="tbdatas">
    </table>
    <br />
     <button id="btnAdd1">
    Ajouter 1 ligne</button>
    <table class="MaxHeightPopup" id="tbdatas1">
    </table>
</body>
</html>

Can someone help me please?

i just see if i add .dd-container { position:static; }

But after .dd-options not in good position

Foi útil?

Solução

it's better like that, but not perfect

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="tableHautMax.aspx.vb"
Inherits="Jquery.tableHautMax" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script/jquery.ddslick.min.js"></script>
<style type="text/css">
    .MaxHeightPopup
    {
        border-style: solid;
        border-color: red;
        display: block;
        max-height: 100px;
        overflow: auto;
    }

    .dd-container
    {
        position: static;
    }
</style>
<script type="text/javascript">
    $(function () {
        var mypositions = [];
        var ddData = [
            {
                text: "Facebook",
                value: 1,
                selected: false,
                description: "Description with Facebook",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
            },
            {
                text: "Twitter",
                value: 2,
                selected: false,
                description: "Description with Twitter",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
            },
            {
                text: "LinkedIn",
                value: 3,
                selected: true,
                description: "Description with LinkedIn",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
            },
            {
                text: "Foursquare",
                value: 4,
                selected: false,
                description: "Description with Foursquare",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
            }
        ];

        $("#btnAdd").click(function () {
            var nbl = $('#tbdatas tr').length;
            var row = '<tr height="50"><td>';
            row += '<select class="myDropdown" id="' + nbl + '"></select></td>';
            row += '<td>2</td><td>3</td><td >4</td></tr>';
            $('#tbdatas').append(row);

            $('#' + nbl).ddslick({
                zindex: 200,
                data: ddData,
                width: 300,
                selectText: "Select your preferred social network",
                imagePosition: "right"
            });

            var windowpos = $("#tbdatas").scrollTop();
            mypositions.push(parseInt($('#' + nbl).position().top) + windowpos);
        });

        $("#tbdatas").scroll(function () {
            var windowpos = $("#tbdatas").scrollTop();
            $('.dd-container').each(function () {

                $('.dd-options', $(this)).css("top", parseInt(this.clientHeight) + parseInt(mypositions[this.id]) - windowpos);
            });

        });

    });
</script>
</head>
<body>
<button id="btnAdd">
    Ajouter 1 ligne</button>
<table class="MaxHeightPopup" id="tbdatas">
</table>
</body>
</html>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top