[RESOLVED]How to customize a custom jquery plugin for flexible direction

i have developed a plugin which will cover div just slide from top to bottom. the plugin is working fine. i need to make more flexible like i want to pass argument for appearance like "Top-bottom" or "left-right" or "right-left" etc. right logic is not coming
to mind to achieve my goal. so here i am pasting full code and js fiddle link. so anyone can see and guide me how to achieve my goal.

<div id="box-outer">
    <div id="data-box">
        This is your data.
    </div>
    <div id="Div1">
        This is your data22222.
    </div>
 </div>
<input type="button" ID="blinddwn" value="BLIND-2-DOWN" >

#box-outer
    {
        overflow: hidden;
        height: 200px;
        width: 200px;
        margin: 20px;

        background-color:Green;
        position:relative;
    }

$(document).ready(function () {
            jQuery.fn.exists = function () { return this.length > 0; }

            jQuery.fn.blindToggle = function (divID, speed, easing, callback) {

                var oDiv;
                var allChildDivHeight = 0;
                $(this).children('div').each(function (e) {
                    //alert($(this).attr('id'));
                    if ($(this).attr('id') != divID) {
                        allChildDivHeight = allChildDivHeight + $(this).outerHeight();
                    }
                });

                //alert(allChildDivHeight );

                var margin_top = this.outerHeight() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));

                if ($("#" + divID).exists() == false) {
                    var _height = this.outerHeight();
                    var _width = this.outerWidth();

                    oDiv = $("<div id='" + divID + "'></div>");
                    oDiv.css("height", _height + 'px');
                    oDiv.css("width", _width + 'px');
                    oDiv.css("margin-top", ('-' + (margin_top + allChildDivHeight) + 'px'));
                    //oDiv.css("padding", "10px");
                    oDiv.css("background", "#e459e9");
                    oDiv.css("position", "relative");
                    oDiv.addClass('test');
                    oDiv.css("display", "none");
                    this.append(oDiv);
                }
                else {
                    oDiv = $("#" + divID);
                    //$("#" + divID).addClass('test');
                }


//                if (parseInt(oDiv.css('marginTop')) < 0) {
//                    oDiv.css('display', 'none');
//                }

                //alert(oDiv.attr('class'));

                if (oDiv.hasClass("test")) {
                    //alert('class' + allChildDivHeight);
                    $("#" + divID).removeClass('test');

                    return oDiv.animate({ opacity: 'toggle', marginTop: ('-' + allChildDivHeight + 'px') }, speed, easing, callback);
                }
                else {
                    //alert('no class' + (margin_top + allChildDivHeight));
                    $("#" + divID).addClass('test');
                    return oDiv.animate({ opacity: 'toggle', marginTop: ('-' + (margin_top + allChildDivHeight) + 'px') }, speed, easing, callback);


                }


                /*
                return oDiv.animate({ opacity: 'toggle',
                marginTop: parseInt(oDiv.css('marginTop')) < allChildDivHeight  ? ('-' + allChildDivHeight + 'px') : ('-' + (margin_top+allChildDivHeight ) + 'px')
                }, speed, easing, callback);
                */



            };
        });

        $(document).ready(function () {
            $('#blinddwn').click(function () {
                $('#box-outer').blindToggle('BlindBox','slow');
                return false;
            });
        });

js fiddle link http://jsfiddle.net/tridip/E9xTL/

just see my plug in and if possible modify my code just to add another argument for direction like "Top-bottom" or "bottom-top" or "left-right" or "right-left" . as per the direction the dynamic div will appear and cover the target div. looking for help.
thanks

Hi mou_inn,

Thanks for your post.

mou_inn

i have developed a plugin which will cover div just slide from top to bottom.

Firstly, according to your description, you could slide the element from top to bottom.

Secondly, the below sample could slide the element from right to left.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        #main {
            display: block;
            width: 45%;
            height: 600px;
            float: left;
            background-color: #ccc;
        }

        #cover {
            display: block;
            width: 44.5%;
            height: 600px;
            left: 0.5%;
            background-color: #ff0000;
            position: absolute;
            z-index: -1000;
        }

        #btndiv {
            display: block;
            position: absolute;
            left: 45%;
        }
    </style>
    <script src="../../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            var RTL = 0;
            $("#btncover1").click(function () {
                if (RTL % 2 == 0) {
                    $("#main").animate({ "width": "0px" }, 1000);
                }
                else {
                    $("#main").animate({ "width": "45%" }, 1000);
                }
                RTL++;
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="main"></div>
            <div id="cover"></div>
            <div id="btndiv">
                <input id="btncover1" type="button" value="RightToLeft" />
            </div>
        </div>
    </form>
</body>
</html>   

Thirdly, in this thread you posted before, I gave you a sample which could slide the element from left to right.

Based on above samples, you could integrate those sub functions together to meet your requirement.

Hope it will be helpful to you.

Best Regards,

Fei Han

Leave a Reply