Home/ Questions/Q 5989585
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T23:07:21+00:00

I have requirement of creating/splitting my div elements horizontally and vertically on click of

  • 0

I have requirement of creating/splitting my div elements horizontally and vertically on click of button at run time. I am able to create a div container in which splits the canvas according to the button clicked.

For example: When I click horizontalSplit button it should create two new div’s within the selected container. I am running into issue with nested child div element. When I am trying to select the innermost child code is selecting parent div also which is creating issue. I am not able to figure out why my nonSelectable class is automatically getting “ui-selected”

This is what I have done so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
                <link rel="stylesheet" href="css/themes/base/jquery.ui.all.css"> 
                <script type="text/javascript" src="scripts/jquery-1.6.js"></script>
                <script type="text/javascript" src="scripts/jquery-ui-1.8.13.custom.min.js" ></script>              
                    <style>

                        #canvasWrapper {
                            border: 1px solid #DDDDDD;
                            height: 500px;
                            vertical-align:top;
                            margin-left: auto;
                            margin-right: auto;
                            width:  90%; 
                        }
                        .Frame {
                            border: 1px solid #DDDDDD;
                            height: 500px;
                            margin-left: auto;
                            margin-right: auto;
                            width:  100%; 
                        }
                        .hFrame {
                            border: 1px solid #DDDDDD;
                            height: 50%;
                            width:  100%; 
                            position:relative;
                        }

                        .nonSelectable {
                            border: 1px solid #DDDDDD;
                            height: 50%;
                            width:  100%; 
                            position:relative;
                        }

                        .vFrame {
                            border: 1px solid #DDDDDD;
                            height: 100%;
                            width: 50%; 
                            position:relative;
                        }

                        .buttonBar {
                            position: relative;
                            margin-left: auto;
                            margin-right: auto;
                            width:90%;
                        }
                        .Frame .ui-selecting,.vFrame .ui-selecting ,.hFrame .ui-selecting  { background: blue; }
                        .Frame .ui-selected,.vFrame .ui-selected ,.hFrame .ui-selected  { background: grey; }
                        .hFrame ui-selectable { background: yellow; }
                        .hFrame ui-selected { background: green; }
                        .hFrame ui-selectable ui-selected { background: pink; }

                    </style>



</head>
<body>
    <div id="canvasWrapper">
        <div id="canvasFrame" class="Frame">
        </div>
    </div>
    <div class="buttonBar">
        <input id="B1" class="button" type="submit" value="Horizontal Split">
        <input id="B2" class="button" type="submit" value="Vertical Split">
    </div>

    <script>
        $(document).ready(function()
        {   
            $("#canvasFrame").addClass("ui-selected");
            $(function() {
                $( ".Frame" ).selectable({
                     // cancel: '.nonSelectable'
                });
                $( ".hFrame" ).selectable({
                    // cancel: '.nonSelectable'

                });
                $( ".vFrame" ).selectable();
                // $( ".nonSelectable" ).selectable("disable");
            });

            addHFrame();

            addVFrame();



        });

    function addHFrame(){
        $("#B1").unbind('click.addit').bind('click.addit',function()
        {

        var numSplits=2;
        var select="";

        $(".ui-selected ").each(function () {   
                for (var i=0; i<numSplits ; i++){
                        $(this).removeClass('ui-selected ui-selectable');
                        $(this).parent().removeClass('ui-selected ui-selectable');
                        var $newElement = '<div></div>';

                        $(this).append($newElement);
                        $(this).children().addClass("hFrame");

                        //$(this).unbind('ui-selected ui-selectable');
                        // $(this).parent().selectable("disable")   ;
                        // $(this).remove("hFrame").addClass("nonSelectable")   ;
                        addHFrame();
                    }
                $(this).hasClass("hFrame") ? $(this).removeClass("hFrame").addClass("nonSelectable") : $(this);                         
            });
        });

    }

    function addVFrame(){

                $("#B2").click(function()
                {

                    $("div.ui-selected").each(function () {
                        // $(this).append('<div class="vFrame"> </div>');       
                        alert("Button Vertical Split Clicked"); 
                    });
                });
    }

    </script>
</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Sounds like you need to prevent event propagation:
    http://api.jquery.com/event.stopPropagation/

    Similar question: jQuery UI Sortable — How can I cancel the click event on an item that's dragged/sorted?

    When the element is clicked, the event bubbles up the DOM until it hits the highest level HTML node. This is referred to as event propagation. So the event is fired on all of the element’s ancestors unless event propagation is halted. This can be done like so:

    HTML-

    <body>
    <div id="container">
        <a href="javascript:void(0);" id="click-element"></a>
    </div>
</body>

    Script-

    $('#click-element').click(function(event){

    //prevent container and body from triggering click event
    event.stopPropagation();

    //do stuff

});
    • 0