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.... Please can this be done? And if yes, how can it be done?
Also when printing, I do not want the selection box to appear in the print preview window.
Thank you in anticipation of your help.
HERE IS THE CODE I HAVE:
<!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{
position:absolute;
}
#parent {
position: relative;
width: 340px;
height: 450px;
border: solid 2px #00003D;
font-size: 24px;
text-align: center;
}
#child {
position: absolute;
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>
