locked
Changing Child Div tag Position in Panel RRS feed

  • Question

  • User-1994446809 posted

    Hello Forum,

    I have a web form and in the web form I have a panel with two div tags (Parent and child), a button and selection box. The selection box has four options (Top-right, Top-Left, Bottom-Right and Bottom-Left).I want to change the child position when a selection is made. That is, if I want the child to appear in the top- left corner of the parent, I will select “Top-Left” in the selection and the child will appear in the top-left corner and so on....How can I be changing the child position at the click of a selection in the selection box?

    Also when printing, I do not want the selection box to appear in the print preview window.

    I will be grateful if this is achieved, Thank you

    BELOW IS MY CODE:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
       <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
       <title></title>
         <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <link href="css/StyleSheet.css" rel="stylesheet" />
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script src="Scripts/popper.min.js"></script>
        <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
        <!--startPrint-->
        <style>
            .btnPrint{
                ;
            }
            #parent {
                ;
                width: 340px;
                height: 450px;
                border: solid 2px #00003D;
                font-size: 24px;
                text-align: center;
            }
            #child {
                ;
                right: 40px;
                top: 40px;
                background-color: #fafafa;
                border: solid 1px #00003D;
                font-size: 24px;
                text-align: center;
                backface-visibility:hidden;
                background:unset;
            }
        </style>
    </head>
    <body style=" background-color:#DCDCDC; overflow-x:no-display;">
        <form id="form1" runat="server">
            <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #00003D; font-family: Nunito;">
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color: #00003D; border-color:white; border-width:1px; color: white">
                                <span class="sr-only">Toggle Navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>                        
                        </div>
                        <div class="navbar-collapse collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="Home.aspx" style="color: #FFFFFF">Home</a></li>
                                <li><a href="AcustomID.aspx" style="color: #FFFFFF">About</a></li>
                                <li><a href="#" style="color: #FFFFFF">Mobile Phones</a></li>
                                <li><a href="#" style="color: #FFFFFF">Products</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            <br /><br /><br /><br />
            <div>
                <asp:Panel ID="pnlContents" runat="server">
                    <div id="parent" style="margin: 0 auto; margin-top: 0%;">
                        <asp:Image ID="Image3" runat="server" Width="340" Height="450" />
                        <div id="child">
                            <asp:Image ID="Image4" runat="server" BorderStyle="None" Width="105" Height="105" />
                        </div>
                    </div>
                </asp:Panel>
                <asp:Button ID="btnPrint" runat="server" CssClass="btn btn-success" Font-Size="Medium" Text="Print" OnClientClick="return PrintPanel();" />
                <select id="Select1" onchange="selectType(this)" style="width: 150px;">
                     <option value="1">Top-Right</option>
                     <option value="2">Top-Left</option>
                     <option value="3">Bottom-Left</option>
                     <option value="4">bottom-right</option>
                </select>
            </div>
        </form>
        <script>
            function PrintPanel() {
                var panel = document.getElementById("<%=pnlContents.ClientID %>");
                var startStr = "<!--startPrint-->";
    
                var headHtml = window.document.head.innerHTML;
                var headPrint = headHtml.substr(headHtml.indexOf(startStr) + 17);
    
                var printWindow = window.open('', '', 'height=400,width=800');
                printWindow.document.write('<html><head><title>Template</title>');
                // printWindow.document.write('</head><body >');
    
                printWindow.document.write(headPrint);
                printWindow.document.write(panel.innerHTML);
                printWindow.document.write('</body></html>');
                printWindow.document.close();
                setTimeout(function () {
                    printWindow.print();
                }, 5000);
                return false;
            }
        </script>
         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
    </html>

    -georgeakpan13

    Friday, June 12, 2020 9:40 AM

Answers

  • User288213138 posted

    Hi georgeakpan13,

    I have a web form and in the web form I have a panel with two div tags (Parent and child), a button and selection box. The selection box has four options (Top-right, Top-Left, Bottom-Right and Bottom-Left).I want to change the child position when a selection is made. That is, if I want the child to appear in the top- left corner of the parent, I will select “Top-Left” in the selection and the child will appear in the top-left corner and so on....How can I be changing the child position at the click of a selection in the selection box?

    You can try below code:

    $(document).ready(function () {
                $("#Select1").change(function () {
                    var a = $("#Select1").val();
                    if (a == 1) {
                        $("#child").css("left", "auto");
                        $("#child").css("right", "auto");
                        $("#child").css("top", "auto");
                        $("#child").css("bottom", "auto");
                        $("#child").css("right", "40px");
                        $("#child").css("top", "40px");
                    }
                    else if (a == 2) {
                        $("#child").css("left", "auto");
                        $("#child").css("right", "auto");
                        $("#child").css("top", "auto");
                        $("#child").css("bottom", "auto");
                        $("#child").css("left", "40px");
                        $("#child").css("top", "40px");
                    }
                    else if (a == 3) {
                        $("#child").css("left", "auto");
                        $("#child").css("right", "auto");
                        $("#child").css("top", "auto");
                        $("#child").css("bottom", "auto");                 
                        $("#child").css("left", "40px");
                        $("#child").css("bottom", "40px");
                    }
                    else if (a == 4) {          
                        $("#child").css("left", "auto");
                        $("#child").css("right", "auto");
                        $("#child").css("top", "auto");
                        $("#child").css("bottom", "auto");
                        $("#child").css("right", "40px");
                        $("#child").css("bottom", "40px");
                    }
                });
            });

    The result:

    Also when printing, I do not want the selection box to appear in the print preview window.

    I tested your code and the selection box doesn't appear in the print preview window.

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 15, 2020 7:29 AM