Change Image orientation between portrait and landscape using JavaScript in ASP.Net

George61...

SOLVED CLOSED ACTIVE ANSWERED
User: George616
Posted: on Jul 02, 2020 11:21 PM
Forum: JavaScript
Answer: 1
Views: 7002
Sample Code: Download

I have a web form with a portrait-size picture frame on it, and I want to add a label that will be switching from portrait to landscape, this label will be under the navbar and will be responsive.

I want to ask if I should add a landscape picture frame too to be switching when clicking landscape label, and if so how will it be done so that it will switch when I click on landscape?

Here is my HTML 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>
        #parent {
            position: relative;
            width: 340px;
            height: 450px;
            border: solid 2px #00003D;
            font-size: 24px;
            text-align: center;
        }
        #child {
            position: absolute;
            right: 40px;
            top: 100px;
            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; background-image:url('images/Dox.png'); 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: 'Comfortaa';">
            <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>
                    <a class="navbar-brand" style="color: white; margin-top: -3%; font-family: 'Nunito';"><span>
                        <img alt="LOGO22" src="images/LOGO22.png" height="40" />&nbsp;</span>JOSCHECK</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="Home.aspx" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">Home</a></li>
                        <li><a href="AcustomID.aspx" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">About</a></li>
                        <li class="dropdwon">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">QR Code <b class="caret"></b></a>
                            <ul class="dropdown-menu" style="background-color: #00003D;">
                                <li class="dropdown-header"><a href="QRCode.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Generate QR Code</a></li>
                                <li class="dropdown-header"><a href="QRScan.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Check QR Code</a></li>
                            </ul>
                        </li>
                        <li class="dropdwon">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">Car<b class="caret"></b></a>
                            <ul class="dropdown-menu" style="background-color: #00003D;">
                                <li class="dropdown-header"><a href="RegisterVehicle.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Register Vehicle</a></li>
                                <li class="dropdown-header"><a href="Report.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Report Stolen Car</a></li>
                                <li class="dropdown-header"><a href="Verification.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Verify Vehicle</a></li>
                            </ul>
                        </li>
                        <li class="dropdwon">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">Phone<b class="caret"></b></a>
                            <ul class="dropdown-menu" style="background-color: #00003D;">
                                <li class="dropdown-header"><a href="PhoneRegistration.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Register Phone</a></li>
                                <li class="dropdown-header"><a href="PhoneReport.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Report</a></li>
                                <li class="dropdown-header"><a href="PhoneVerification.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Phone Check</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><asp:Label ID="user" runat="server" Font-Size="smaller" Text="" ForeColor="White"></asp:Label><img alt="" src="images/img1.jpg" height="20" /><b class="caret"></b></a>
                             <ul class="dropdown-menu" style="background-color: #00003D;">
                                <li class="dropdown-header"><a href="DashBoard.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Admin Dashboard</a></li>
                                <li class="dropdown-header"><a href="#" style="color: #FFFFFF; font-size: small; background-color: #00003D;">xxxxx</a></li>
                             </ul>
                        </li>
                        <li>
                            <a><asp:Label ID="Units" runat="server" Font-Size="smaller" ForeColor="White"></asp:Label></a>
                        </li>
                        <li class="dropdown" style="margin-right: 10px;">
                            <script src="https://js.paystack.co/v1/inline.js"></script>
                            <asp:Button type="button" ID="paybutton" runat="server" class="btn btn-primary navbar-btn" Text="Wallet Deposit" Style="width: 115px; font-size: smaller;" OnClick="paybutton_Click" />
                        </li>
                        <li class="dropdown" style="margin-right: 10px;">
                            <asp:Button ID="btnSignOut" runat="server" class="btn btn-primary navbar-btn" Text="Sign Out" Style="font-size: smaller" OnClick="btnSignOut_Click" />
                        </li>
                    </ul>
                </div>
            </div>
        </div>
                &nbsp;&nbsp;&nbsp;
        <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-primary navbar-btn" Font-Size="Medium" Text="Print" OnClientClick="return PrintPanel();" />
        </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>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Jul 03, 2020 01:03 AM
Report

Hi George616,

Add a Lebel control and set the click event. Inside the click event change the Label to portrait if landscape and vice versa.

Then set the height and width of parent div and image based on the image height and width.

Refer below code.

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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
        rel="stylesheet" />
    <%--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.3/cjs/popper.min.js"></script>--%>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <!--startPrint-->
    <style>
        #parent
        {
            position: relative;
            width: 340px;
            height: 450px;
            border: solid 2px #00003D;
            font-size: 24px;
            text-align: center;
        }
        #child
        {
            position: absolute;
            right: 40px;
            top: 100px;
            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; background-repeat: repeat-y; background-image: url('images/Dox.png');
    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: 'Comfortaa';">
        <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>
                <a class="navbar-brand" style="color: white; margin-top: -3%; font-family: 'Nunito';">
                    <span>
                        <img alt="LOGO22" src="images/LOGO22.png" height="40" />&nbsp;</span>JOSCHECK</a>
                <asp:Label Text="Portrait" runat="server" Style="color: White;" onclick="ChangeOrientation(this)" />
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="Home.aspx" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555;
                        border-left: solid 1px #111;">Home</a></li>
                    <li><a href="AcustomID.aspx" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555;
                        border-left: solid 1px #111;">About</a></li>
                    <li class="dropdwon"><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: #FFFFFF;
                        font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">QR
                        Code <b class="caret"></b></a>
                        <ul class="dropdown-menu" style="background-color: #00003D;">
                            <li class="dropdown-header"><a href="QRCode.aspx" style="color: #FFFFFF; font-size: small;
                                background-color: #00003D;">Generate QR Code</a></li>
                            <li class="dropdown-header"><a href="QRScan.aspx" style="color: #FFFFFF; font-size: small;
                                background-color: #00003D;">Check QR Code</a></li>
                        </ul>
                    </li>
                    <li class="dropdwon"><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: #FFFFFF;
                        font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">Car<b
                            class="caret"></b></a>
                        <ul class="dropdown-menu" style="background-color: #00003D;">
                            <li class="dropdown-header"><a href="RegisterVehicle.aspx" style="color: #FFFFFF;
                                font-size: small; background-color: #00003D;">Register Vehicle</a></li>
                            <li class="dropdown-header"><a href="Report.aspx" style="color: #FFFFFF; font-size: small;
                                background-color: #00003D;">Report Stolen Car</a></li>
                            <li class="dropdown-header"><a href="Verification.aspx" style="color: #FFFFFF; font-size: small;
                                background-color: #00003D;">Verify Vehicle</a></li>
                        </ul>
                    </li>
                    <li class="dropdwon"><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: #FFFFFF;
                        font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">Phone<b
                            class="caret"></b></a>
                        <ul class="dropdown-menu" style="background-color: #00003D;">
                            <li class="dropdown-header"><a href="PhoneRegistration.aspx" style="color: #FFFFFF;
                                font-size: small; background-color: #00003D;">Register Phone</a></li>
                            <li class="dropdown-header"><a href="PhoneReport.aspx" style="color: #FFFFFF; font-size: small;
                                background-color: #00003D;">Report</a></li>
                            <li class="dropdown-header"><a href="PhoneVerification.aspx" style="color: #FFFFFF;
                                font-size: small; background-color: #00003D;">Phone Check</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <asp:Label ID="user" runat="server" Font-Size="smaller" Text="" ForeColor="White"></asp:Label><img
                            alt="" src="images/img1.jpg" height="20" /><b class="caret"></b></a>
                        <ul class="dropdown-menu" style="background-color: #00003D;">
                            <li class="dropdown-header"><a href="DashBoard.aspx" style="color: #FFFFFF; font-size: small;
                                background-color: #00003D;">Admin Dashboard</a></li>
                            <li class="dropdown-header"><a href="#" style="color: #FFFFFF; font-size: small;
                                background-color: #00003D;">xxxxx</a></li>
                        </ul>
                    </li>
                    <li><a>
                        <asp:Label ID="Units" runat="server" Font-Size="smaller" ForeColor="White"></asp:Label></a>
                    </li>
                    <li class="dropdown" style="margin-right: 10px;">
                        <script src="https://js.paystack.co/v1/inline.js"></script>
                        <asp:Button type="button" ID="paybutton" runat="server" class="btn btn-primary navbar-btn"
                            Text="Wallet Deposit" Style="width: 115px; font-size: smaller;" OnClick="paybutton_Click" />
                    </li>
                    <li class="dropdown" style="margin-right: 10px;">
                        <asp:Button ID="btnSignOut" runat="server" class="btn btn-primary navbar-btn" Text="Sign Out"
                            Style="font-size: smaller" OnClick="btnSignOut_Click" />
                    </li>
                </ul>
            </div>
        </div>
    </div>
    &nbsp;&nbsp;&nbsp;
    <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-primary navbar-btn" Font-Size="Medium"
            Text="Print" OnClientClick="return PrintPanel();" />
    </div>
    </form>
    <script type="text/javascript">
        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;
        }

        function ChangeOrientation(ele) {
            ele.innerHTML = ele.innerHTML == 'Portrait' ? 'Landscape' : 'Portrait';
            var img = document.getElementById('Image3');
            var height = img.height;
            var width = img.width;
            var dv = document.getElementById('parent');
            img.style.height = width + 'px';
            img.style.width = height + 'px';
            dv.style.height = width + 'px';
            dv.style.width = height + 'px';
        }
    </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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Change Image orientation between portrait and landscape using JavaScript in ASP.Net

Company

Explore

Follow us

Contact Us