I am very new to razor I always workder with aspx pages, I am trying to have a login form with 2 text and a submit button and down of it I am trying to add a square menu with gradients and hoover but I got stuck.
this is my Login.cshtml:
#model Magazzino.Models.LoginViewModel
#{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#if (TempData["message"] != null)
{
<script type="text/javascript">
alert(#Html.Raw(Json.Encode(TempData["message"])));
</script>
}
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
#Html.AntiForgeryToken()
<div>
<table>
<tr>
<td>#Html.LabelFor(a => a.Username)</td>
<td>#Html.TextBoxFor(a => a.Username)</td>
<td>#Html.ValidationMessageFor(a => a.Username)</td>
</tr>
<tr>
<td>#Html.LabelFor(a => a.Password)</td>
<td>#Html.PasswordFor(a => a.Password)</td>
<td>#Html.ValidationMessageFor(a => a.Password)</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Login" />
</td>
<td></td>
</tr>
</table>
</div>
}
<div style="background: grey">
<div style="float: left; margin-left: 35%; width: 15%; background: linear-gradient(red, orange);">
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Contatti", "Contatti")
</div>
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Dove Siamo", "DoveSiamo", null, new { #style = "position: relative; top: 90%;" })
</div>
</div>
<div style="float: right; margin-right: 35%; width: 15%; text-align: right; background: linear-gradient(green, yellow);">
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Informazioni", "Informazioni")
</div>
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Chi Siamo", "ChiSiamo", null, new { #style = "position: relative; top: 90%;" })
</div>
</div>
In this ways google and firefox render the div with the actionlink in a normal way but IE doesn't render the height so I added a layout page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
</head>
<body>
<div>
#RenderBody()
</div>
</body>
</html>
#RenderSection("scripts", required: false)
And now IE, Chrome and Firefox are rendering the div with the action without height, I guess it's not the right way to put HTMl elements that are not linked to the form, but How do I put other HTML elements inside a razor page which has got already a form?
Thank you
I think this is mostly css and html problem.
I don't see the closing tag for <div style="background: grey">, I would verify that it is closed properly.
You have two floating divs, I would put an extra tag <div style='clear:both'> before closing the <div style="background: grey"> tag. This will clear the floating after that point.
After 1. and 2., if you don't see the grey background, I would suspect that the inner divs covered the background, if so, I would add some padding in the parent tag, for example <div style="background: grey; padding: 10px;">
Related
I'm working on ASP.NET MVC app. On one of the views (created by using Razor pages) I have a list of elements and I have to make them appear in random order on every request. So, for example on one request Google Chrome needs to be first, on next it should be Opera and so on. My question is, what is the best, most clean way to do it?
My code:
<div id="icons" style="flex-direction: row; display: flex; align-items: center; justify-content: space-around; margin-top: 3em; margin-right: 9em; margin-bottom: 3em; margin-left: 9em">
<div>
<img src="../../app/assets/images/svg/chrome.svg" alt="Chrome" width="100" height="100">
<p style="text-align: center;">Google Chrome</p>
</div>
<div>
<img src="../../app/assets/images/svg/firefox.svg" alt="Firefox" width="100" height="100">
<p style="text-align: center;">Mozilla Firefox</p>
</div>
<div>
<img src="../../app/assets/images/svg/edge.svg" alt="Edge" width="100" height="100">
<p style="text-align: center;">Microsoft Edge</p>
</div>
<div>
<img src="../../app/assets/images/svg/opera.svg" alt="Opera" width="100" height="100">
<p style="text-align: center;">Opera</p>
</div>
</div>
Just in case, entire file:
#using EPiServer.Core
#using EPiServer.Web.Mvc.Html
#model UnsupportedBrowserViewModel
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>
#Model.Title
</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="http://fonts.cdnfonts.com/css/avenir" rel="stylesheet">
</head>
<body>
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: Avenir, Helvetica, 'Helvetica Neue', sans-serif">
<img src="#Model.BrandLogo" alt="Logo of the brand" width="" height="" style="display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto;">
<h1 style="font-weight: bold; font-size: 45px; ">
#Model.Headline
</h1>
<div style="color: rgb(99, 102, 106); font-size: 22px;">
#Model.TextBlock
</div>
<div id="icons" style="flex-direction: row; display: flex; align-items: center; justify-content: space-around; margin-top: 3em; margin-right: 9em; margin-bottom: 3em; margin-left: 9em">
<div>
<img src="../../app/assets/images/svg/chrome.svg" alt="Chrome" width="100" height="100">
<p style="text-align: center;">Google Chrome</p>
</div>
<div>
<img src="../../app/assets/images/svg/firefox.svg" alt="Firefox" width="100" height="100">
<p style="text-align: center;">Mozilla Firefox</p>
</div>
<div>
<img src="../../app/assets/images/svg/edge.svg" alt="Edge" width="100" height="100">
<p style="text-align: center;">Microsoft Edge</p>
</div>
<div>
<img src="../../app/assets/images/svg/opera.svg" alt="Opera" width="100" height="100">
<p style="text-align: center;">Opera</p>
</div>
</div>
</div>
</body>
</html>
You can put the data into a collection and then order by Guid.NewGuid()
#{
var d = new Dictionary<string, string>
{
{"Chrome", "chrome.svg"},
{"Mozilla Firefox", "firefox.svg"},
{"Microsoft Edge", "edge.svg"},
{"Opera", "opera.svg"}
};
}
#foreach (var item in d.OrderBy(x => Guid.NewGuid()))
{
<div>
<img src="../../app/assets/images/svg/#item.Value" alt="#item.Key" width="100" height="100">
<p style="text-align: center;">#item.Key</p>
</div>
}
I have a view displays review from the database Reviews Table. Brief information for each item is display at first (ReviewID, Author and Date Create), then if you click on the ReviewID, the Rating and Feedback is displayed in a pop-up. The problem is pop-up gives the same details(Rating and Feedback) as the first item displayed. The pictures below give a visual representation of the problem
When on you click on Review Number: 5002(This is the ReviewID (ID:5002) in the table) a pop up is produced display the ReviewID's Rating and Feedback
However if you click on Review Number: 5006 (ID:5006), the content on the pop-up is not the corresponding to 5006 but to 5002
Here is my code for the View
#{
ViewBag.Title = "Index";
Layout = "";
}
#model PagedList.IPagedList<Siza.Models.Review>
#using PagedList.Mvc;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon"s
type="image/png"
href="~/Content/favicon.ico" />
<title>Siza</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/Content/css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--Demo-->
<link rel="stylesheet" type="text/css" href="~/Content/css/normalize.css">
<style>
textarea {
overflow-y: scroll;
height: 100px;
resize: none;
}
.demo-3 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px
}
.demo-3 figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-50px
}
.demo-3 figure img {
display:block;
position:relative;
z-index:10;
margin:-15px 0
}
.demo-3 figure figcaption {
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.demo-3 figure h2 {
font-family:'Lato';
color:#fff;
font-size:20px;
text-align:left
}
.demo-3 figure p {
display:block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:left
}
.demo-3 figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:29px 44px;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
.full-width {
width: 100%;
}
.carousel-caption {
position: absolute;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 100%;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
</style>
</head>
#foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: #Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li href="#reviewpopup">
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
<table class="table text-center width:50%">
<tr>
<td>
#Html.PagedListPager(Model, Page => Url.Action("StudentWellnessReviews",
new { Page, pageSize = Model.PageSize }))
Showing #Model.FirstItemOnPage to #Model.LastItemOnPage of #Model.TotalItemCount Reviews
</td>
</tr>
</table>
I really not sure how to solve this issue. Help would be greatly apprececiated
On HTML page there can be only one element with specific id. In your case I would add Model.ReviewId to the id attribute of your popup and href attribute of your <a> element.
#foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup_#Model.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: #Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
Also href attribute in <li> element is invalid, so you should remove it.
Desired result would be
<div id="reviewpopup_1">
//div content here
</div>
and later
Review Number: #Html.DisplayFor(modelItem => item.ReviewID)
I managed to figure it out:) You can use the item.ReviewID as a div ID
{
//Popup window content
<div id="#item.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: </h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
I have following image for the Create_Brochure ActionResult in Brochure Contrller Class
Here the whole URL of that Action
http://localhost:49669/Brochure/Create_Brochure?%5B0%5D.Property_ID=1&%5B0%5D.IsChecked=true&%5B0%5D.IsChecked=false&%5B1%5D.Property_ID=2&%5B1%5D.IsChecked=true&%5B1%5D.IsChecked=false&%5B2%5D.Property_ID=3&%5B2%5D.IsChecked=true&%5B2%5D.IsChecked=false&%5B3%5D.Property_ID=4&%5B3%5D.IsChecked=false&%5B4%5D.Property_ID=5&%5B4%5D.IsChecked=false&%5B5%5D.Property_ID=6&%5B5%5D.IsChecked=false&%5B6%5D.Property_ID=7&%5B6%5D.IsChecked=false&%5B7%5D.Property_ID=8&%5B7%5D.IsChecked=false&%5B8%5D.Property_ID=9&%5B8%5D.IsChecked=false&%5B9%5D.Property_ID=10&%5B9%5D.IsChecked=false
Once I click I want to save this view page as PDF , to do that I followed this tutorial
So this is the cshtml view page , so it doesn't have a model class
#model IEnumerable<int>
#{
ViewBag.Title = "Create Template";
}
<!DOCTYPE html>
<html>
<head>
<title>Create a Template</title>
</head>
<body>
<div style="width:100%; padding:10px; float:left;">
<table width=1100 cellpadding=10>
<tr>
<td colspan="2">
<div id="topper" style="font-family:'Segoe UI';background-color: black;color: white;clear: both;text-align: center;padding: 5px;border-radius:15px 15px 0px 0px;">
Bank Brochure
</div>
</td>
</tr>
#if (Model.Contains(1))
{
<tr>
<td colspan="2">
<div id="header" style="font-family: 'Segoe UI';background-color: slategray; color: white; text-align: center; padding: 5px;">
<h1 style="font-family: 'Segoe UI'; color: black; text-align: center;" contentEditable='True'>Product Name</h1>
</div>
</td>
</tr>
}
#if (Model.Contains(2))
{
<tr>
<td colspan="2" style="background-color:lightgrey">
<div id="header" style="font-family: 'Segoe UI';color: white; text-align: center; padding: 5px;border-radius">
<h2 style="font-family: 'Segoe UI'; color: black;float:left" contentEditable='True'>Product Description</h2>
<p style="font-family: 'Segoe UI'; color: black;float:left" contentEditable='True'>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.Standing on the River Thames London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</td>
</tr>
}
#if (Model.Contains(3))
{
<tr>
<td colspan="2">
<div id="header" style="font-family: 'Segoe UI';background-color: steelblue; color: white; text-align: center; padding: 5px;">
<h3 style="font-family: 'Segoe UI'; color: white; text-align: center;font-style:italic" contentEditable='True'>"Unique Selling Propositions It enables ASP.NET Web developers to replace any textbox with an intuitive Word-like WYSIWYG html editor.
"</h3>
</div>
</td>
</tr>
}
#if()....
<tr>
<td colspan="2">
<div id="footer" style="font-family:'Segoe UI';background-color: black;color: white;clear: both;text-align: center;padding: 5px;border-radius:0px 0px 15px 15px;">
Copyright © 2015 Zoo Group , Solution by kelum.
</div>
</td>
</tr>
</table>
</div>
<br />
<button id="btn_sumbit" type="button" class="btn btn-danger submit">Save as PDF</button>
</body>
</html>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript">
$('#btn_sumbit').on('click', function () {
$.ajax({
type: "POST",
url: '#Url.Action("DownloadActionAsPDF", "Brochure")',
dataType: "text",
data: null,
success: function (data) {
},
error: console.log("it did not work"),
});
});
</script>
}
this is controller class method to save to PDF
[HttpPost]
public ActionResult DownloadActionAsPDF()
{
string path = Request.Url.ToString();
//Request.Url.ToString() using to get current page URL
return new Rotativa.UrlAsPdf(path) { FileName = "UrlTest.pdf" };
}
but once I click this button it doesn't save to PDF file,
As i already commented that your code is calling the same Method again and again..
You can do the same thing by using ActionAsPdf and point it to the Create_Brochure Action method of yours
Ex:-
public ActionResult DownloadActionAsPDF()
{
return new Rotativa.ActionAsPdf("Create_Brochure") { FileName = "TestPdf.pdf"};
}
public ActionResult Create_Brochure()
{
//Your logic....
return View()
}
and in your view page no need of a button or a Ajax call can be done by a anchor tag
View:-
<a href="#Url.Action("DownloadActionAsPDF", "MyDiary")" class="btn btn-danger submit" download>SaveAsPdf</a>
I am using the below html & css to create and align textboxes. It does the job perfectly, but anytime I Try to access the text from my C# code behind by using txtfield1.Text I get a compile error of txtfield1 does not exist in the current context.
This is my css
.left
{
padding:2px;
width: 30%;
float: left;
text-align: right;
}
.right
{
padding:2px;
width: 60%;
margin-left: 10px;
float:left;
}
.text1
{
width: 70px;
}
.text2
{
width: 150px;
}
and this is my html markup
<div>
<div class="left">Option One:</div>
<div class="right"><input class="txtfield1" type="text" runat="server"/></div>
</div>
<div>
<div class="left">Option Two:</div>
<div class="right"><input class="text2" type="text" runat="server"/></div>
</div>
<div>
<div class="left">Option Three:</div>
<div class="right"><input class="text2" type="text" runat="server"/></div>
</div>
See your html carefully.
<div class="right"><input class="txtfield1" id="txtfieldid1" type="text" runat="server"/></div>
You need to assign an id then you can access the variable at c# code behind
txtfieldid1.text
You are not using txtfield1.That's why you get compile error.
I have an image to print on a web form. The image control loads the image dynamically at runtime. There is a print button on the page which gives me print to pdf option. The pdf which gets created generates an extra page along with the image to print
The size of the image is 649*602 in px.
the javascript code for print is as follows
function printDiv(divName) {
var title = document.title;
document.title = '';
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
document.title = title;
return false;
}
The aspx page contains the following
<body style="background: none; padding-top: 8%; padding-left: 2%;">
<form id="form1" runat="server">
<div style="float: left; padding: 1%; width: 55%;" id="divInstructions">
<asp:Image ID="imgInstructionSheet" runat="server" />
</div>
<div style="padding-left: 3%; float: left;">
<asp:ImageButton runat="server" ID="imgBtnPrint" SkinID="Print" OnClientClick="return printDiv('divInstructions')"
ToolTip="Print" />
<%-- <asp:ImageButton runat="server" ID="imgBtnPrint" SkinID="Print" OnClientClick="return window.print();"
ToolTip="Print" />--%>
</div>
<div class="wrapper" style="float: left; width: 36%; padding-top: 1%;">
Display Instructions
<div style="display: none; padding-top: 8%; margin-left: -8%; float: left; overflow: hidden;"
id="printinstruction">
<table style="background-color: lightgray; padding: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;">
<tr>
<td>
<img src="../Images/PageSetUp.jpg" />
</td>
</tr>
<tr>
<td>
<ul>
<b style="font-family:Verdana;font-size:14px;"><u>For Proper Printout Follow The Instructions:</u></b>
<br />
<li class="cssLi">Click on File Menu Goto Page Setup.</li>
<li class="cssLi">In Page Setup Dialog Box.</li>
<li class="cssLi">Set Paper Size To Letter (8.5x11").</li>
<li class="cssLi">Set Left Margin as 0.5 and Right Margin as 0.5.</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
Is there any way I can eliminate the extra blank page?
I tried reducing the image size but no effect.
the rendered html is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Instruction Sheet
</title>
<script type="text/javascript" src="../Javascript/jquery-1.7.2.min.js"></script>
<style type="text/css">
a:hover + div#printinstruction
{
visibility: visible;
}
.cssLi
{
position: relative;
left: 16px;
font-family: verdana;
font-size: 14px;
}
</style>
<script type="text/javascript">
function HideFromAnchor() {
setTimeout(function () {
$('#printinstruction').slideUp();
}, 1000);
}
$(document).ready(function () {
$('a.instrulink').mouseover(function () {
$('#printinstruction').slideDown();
$('#printinstruction').css('margin-top', '26px')
$('#printinstruction').css('width', '395px');
$('#printinstruction').css('height', '510px');
});
$('div.wrapper').mouseleave(function () {
$('#printinstruction').slideUp();
});
});
function DisplayInstruction() {
$('#printinstruction').slideDown();
$('#printinstruction').css('margin-top', '26px')
$('#printinstruction').css('width', '395px');
$('#printinstruction').css('height', '510px');
}
function RemoveInstruction() {
$('#printinstruction').slideUp();
}
function printDiv(divName) {
var title = document.title;
document.title = '';
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
document.title = title;
return false;
}
</script>
<link href="../App_Themes/default/1.9.1-jquery-ui.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/Default.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/form-field-tooltip.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/InquiryStyles.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/iqbackoffice.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/IQGLInputControl.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/jquery.ui.autocomplete.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/jquerydcss.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/popup.css" type="text/css" rel="stylesheet" /></head>
<body style="background: none; padding-top: 8%; padding-left: 2%;">
<form name="form1" method="post" action="InstructionsSheet.aspx?CompanyId=evh&CheckRequestType=CHECKREQUESTFAX" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MjQwOTYzMTgPZBYCAgMPZBYCAgEPDxYCHghJbWFnZVVybAUqQ2hlY2tSZXF1ZXN0SW1hZ2UvQ2hlY2tSZXF1ZXN0SW5zdF92ZWcuanBnZGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFC2ltZ0J0blByaW50Ibf/odbg0lrXs/vlUgzr3pUnWxPgOvUSkGEiBBhsVNk=" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAIycRPb8aWzu8amhADzp9D7vxA7O73wp6e8dR9A7rKNQ6U+XW+JbgNalutolAAvvabl2zSBHocsK8wmZxrQUUtL" />
</div>
<div style="float: left; padding: 1%; width: 55%;" id="divInstructions">
<img id="imgInstructionSheet" src="CheckRequestImage/CheckRequestInst_veg.jpg" style="border-width:0px;" />
</div>
<div style="padding-left: 3%; float: left;">
<input type="image" name="imgBtnPrint" id="imgBtnPrint" title="Print" class="Buttons" onmouseout="this.src=window.location.protocol + '//' + window.location.host + '/' + 'ClientWeb/Images/Print_over.png';" onmouseover="this.src=window.location.protocol + '//' + window.location.host + '/' + 'ClientWeb/Images/Print_on.png';" onfocus="this.src=window.location.protocol + '//' + window.location.host + '/' + 'ClientWeb/Images/Print_on.png';" onblur="this.src=window.location.protocol + '//' + window.location.host + '/' + 'ClientWeb/Images/Print_over.png';" src="../Images/Print_over.png" alt="Print" onclick="return printDiv('divInstructions');" style="border-width:0px;" />
</div>
<div class="wrapper" style="float: left; width: 36%; padding-top: 1%;">
Display Instructions
<div style="display: none; padding-top: 8%; margin-left: -8%; float: left; overflow: hidden;"
id="printinstruction">
<table style="background-color: lightgray; padding: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;">
<tr>
<td>
<img src="../Images/PageSetUp.jpg" />
</td>
</tr>
<tr>
<td>
<ul>
<b style="font-family:Verdana;font-size:14px;"><u>For Proper Printout Follow The Instructions:</u></b>
<br />
<li class="cssLi">Click on File Menu Goto Page Setup.</li>
<li class="cssLi">In Page Setup Dialog Box.</li>
<li class="cssLi">Set Paper Size To Letter (8.5x11").</li>
<li class="cssLi">Set Left Margin as 0.5 and Right Margin as 0.5.</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>