Scrolling PDFs in iOS with iFrame - java

I'm trying to scroll this pdf: ifcharts.ml/KSAN.html
I've got this so far:
<section class="features section-padding" id="features">
<div class="container">
<div class="row">
<div class="feature-list">
<h3>San Diego</h3>
<p>Departure</p>
<div>
<iframe class="js/scroll-wrapper.js" src="http://flightaware.com/resources/airport/SAN/APD/AIRPORT+DIAGRAM/pdf" width="600" height="700"></iframe>
<iframe class="js/scroll-wrapper.js" src="https://flightaware.com/resources/airport/KSAN/DP/all/pdf" width="600" height="700"></iframe>
</div>
<p>Approach</p>
<div>
<iframe class="js/scroll-wrapper.js" src="https://flightaware.com/resources/airport/KSAN/STAR/all/pdf" width="600" height="700"></iframe>
<iframe class="js/scroll-wrapper.js" src="https://flightaware.com/resources/airport/KSAN/IAP/all/pdf" width="600" height="700"></iframe>
</div>
</div>
</div>
</div>
</section>
The class="js/scroll-wrapper.js" leads to this:
.scroll-wrapper {
position: fixed;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.scroll-wrapper iframe {
height: 100%;
width: 100%;
}
That is what the the script is meant to run, however it still is not scrolling on iOS.
I also have a problem where it is downloading the code on Android. How can I set it now to download?
Thanks

Related

Css not rendering in velocity template (JAVA)

I have written some HTML-CSS in a file, It works perfectly in the browser but when I change the extendion to vm ( for apache velocity) . some of the css doesn't work . why is velocity not able to understand the css.
CODE:
<html>
<head>
<title>Letter</title>
<style>
.row {
width: 100%;
display:flex;
height:80px;
}
.column1 {
width:33%;
float: left;
}
.column2 {
width:33%;
float: center;
}
.column3 {
width:33%;
float: right;
}
body {
padding: 20px;
font-size: 12px;
font-family: Arial,Arial Unicode MS,Quivira,sans-serif,Wingdings;
}
#rcorners2 {
border-radius: 25px;
align-items:center;
border: 1px solid grey;
padding: 20px;
width: 1000px;
height: 50px;
display:flex;
}
.vl {
border-left: 1px solid grey;
height: 50px;
}
.gap{width:200px;background:none;height:200px;display:inline-block;}
</style>
</head>
<body>
<div class="row">
<div class="column1">
<img src="https://www.iconfinder.com/data/icons/pictype-free-vector-icons/16/home-512.png" height="50px" width="250" />
</div>
<div class="column2">
<h1 style="text-align: center;"> Letter Head</h1>
</div>
<div class="column3">
<h2 style="color:#AE275F;text-align: right;">SAMPLE</h2>
</div>
</div>
<div>
<div id="rcorners2" > </div>
<div>
<p>Date </p>
<p>MAY 28,2020</p>
</div>
<div class="gap">
</div>
<div class="vl"></div>
</div>
</body>
</html>
The problem was not with my velocity template. I was using Itext5 to convert HTML to PDF and as Itext5 does not support HTML5 , some of the features weren't working.
I am using openHtmlToPdf library for converting HTML to PDF and the css works perfectly now.

Open a Record from MSCRM Dashboard by Selenium Webdriver

I am writing Script to open a Record from Dash Board of MSCRM 2011. Those Records are arranged in table as Checkbox inside a Frame. So on double click of Checkbox Record Page will open
Below is Exception which i am getting
java.util.NoSuchElementException
at java.util.LinkedHashMap$LinkedHashIterator.nextEntry(Unknown Source)
at java.util.LinkedHashMap$KeyIterator.next(Unknown Source)
at Ford_Account.main(Ford_Account.java:112)
Below is Webdriver Code
WebElement link = w1.findElement(By.xpath("html/body/div[5]/div[1]/div[2]/span/ul/li[2]/ul/li[1]/a[1]")); //COntact click
link.click();
w1.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
try {
windows= w1.getWindowHandles();
iterator=windows.iterator();
while((iterator.hasNext())){
parent=iterator.next();
child=iterator.next();
w1.switchTo().window(child);
System.out.println("Swicthed to child");
Thread.sleep(1000);
}
w1.switchTo().frame("contentIFrame");
Actions ac = new Actions(w1);
WebElement element = (WebElement) ac.moveToElement(w1.findElement(By.id("checkBox_{EE9744AC-6737-E511-8459-E4115BDF9DFD}")));
ac.doubleClick(element).perform();
I am Getting Exception on
child=iterator.next();
Below is HTML Structure
<iframe id="contentIFrame" frameborder="0" name="contentIFrame" style="border: 0px none; overflow: hidden; position: absolute; left: 0px; right: 0px; height: 100%; width: 100%; opacity: 1; display: inline;" title="Content Area" src="/_root/homepage.aspx?etc=1&pagemode=iframe&sitemappath=CS%7cCS%7cnav_accts&whr=https%3a%2f%2fmscrm00b.hpuscrmpoc.com%2fadfs%2fservices%2ftrust">
<!DOCTYPE html>
<html webdriver="true">
<head>
<body class="stage">
<div class="stdTable">
<span id="__Page_crmEventManager" style="display:block;height:0px;"></span>
<div></div>
<div>
<div style="height:0px;">
<div id="homepageTableCell" class="ms-crm-absolutePosition" style="top:27px;">
<div class="ms-crm-IE7-Height-Fix-Dummy-Container">
<div id="crmGrid_visualizationCompositeControl" style="height:100%;">
<div id="crmGrid_compositeControl" style="height:100%;width:100%;position:relative;">
<div id="crmGrid_crmGridStrip" class="ms-crm-CC-GridSS-All-0-LR">
<div id="crmGrid_crmGridTD" class="ms-crm-CC-grid-All-0-LR">
<div class="ms-crm-IE7-Height-Fix-Dummy-Container">
<div id="crmGrid_filterSet" gridid="crmGrid"></div>
<div class="ms-crm-grid-BodyContainer" style="width:100%;height:100%;position:relative;overflow:hidden;">
<div id="crmGrid" class="ms-crm-ListControl" type="crmGrid">
<div class="ms-crm-grid-body" style="bottom:25px;">
<div class="ms-crm-IE7-Height-Fix-Dummy-Container">
<div id="crmGrid_gridBodyContainer" class="ms-crm-grid-BodyContainer" style="height:100%;position:relative">
<div id="refreshButton" class="ms-crm-List-RefreshButton" style="left: auto; right: 0px; display: inline;">
<div class="ms-crm-ListArea" style="position:relative">
<div class="ms-crm-grid-BodyContainer" style="height:22px;OVERFLOW-X:hidden;">
<div class="ms-crm-grid-databodycontainer" style="top:22px;bottom:22px;vertical-align:top">
<div class="ms-crm-IE7-Height-Fix-Dummy-Container">
<div id="crmGrid_divDataBody" class="ms-crm-List-DataBody">
<div id="crmGrid_divDataArea" class="ms-crm-List-DataArea" expandable="0">
<div>
<table id="gridBodyTable" class="ms-crm-List-Data" cellspacing="0" cellpadding="1" border="1" style="border-style:None;border-collapse:collapse;" summary="This list contains 7 Account records." primaryfieldname="name" tabindex="0" numrecords="7" oname="1" allrecordscounted="1" totalrecordcount="7" morerecords="0" rules="rows">
<colgroup>
<thead>
<tbody>
<tr class="ms-crm-List-Row" otypename="account" otype="1" oid="{21C2F87E-9E36-E511-8459-E4115BDF9DFD}">
<td class="ms-crm-List-NonDataCell" align="center">
<input id="checkBox_{21C2F87E-9E36-E511-8459-E4115BDF9DFD}" class="ms-crm-RowCheckBox" type="checkbox" style=" " title="ford Account123" tabindex="0">
</td>
Can anyone Suggest me how to open a record from dashboard of MSCRM 2011

Vaadin : CustomLayout don't generate <div> content

I'm using Vaadin 7. When I try to add html content to CustomLayout it does not generate a paragraph inside a div element. Here is the input :
<div style="margin-top: 10px; padding-left: 50px;" class="col-lg-10">
<div class="bs-component">
<ul class="nav nav-pills">
<li class="active"><a href="#Myprofile" class="active"
data-toggle="tab">Profile</a></li>
<li class="">setting</li>
<li class="">Tasks</li>
</ul>
<div class="tabbable">
<div class="tab-content">
<div id="Myprofile" location="Myprofile" class="tab-pane active"></div>
<div id="setting" location="setting" class="tab-pane">
<p>My paragraph</p>
</div>
</div>
</div>
</div>
In java I use this :
String html; //This var contain my input
InputStream is = new ByteArrayInputStream(html.getBytes());
CustomLayout custom = null;
try {
custom = new CustomLayout(is);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
Finaly I add the customLayout to my mainLayout. When I run the application I get this output :
<div style="margin-top: 10px; padding-left: 50px;" class="col-lg-10">
<div class="bs-component">
<ul class="nav nav-pills">
<li class="active"><a href="#Myprofile" class="active"
data-toggle="tab">Profile</a></li>
<li class="">setting</li>
<li class="">Tasks</li>
</ul>
<div class="tabbable">
<div class="tab-content">
<div id="Myprofile" location="Myprofile" class="tab-pane active"></div>
<div id="setting" location="setting" class="tab-pane">
</div>
</div>
</div>
</div>
My paragraph inside div with id=setting was not generated by Vaadin. Any Ideas to fix this problem ?
I found the source of the problem. I removed the location="setting" part in the div element and it worked. I don't know why It does that. Probably because CustomLayout when generating the html looks for elements to put in the location, if it does not find one it clean all the element content.
Don't you need the location="setting" attribute? Don't you insert a component for that attribute?

Confusion with Remember username codes(javascript)?

I started learning javascript and i have a question with a webpage that i created. The webpage is a login page that shows some tableau reports when logged in. I need to create a remember me checkbox just like any other website like gmail or salesforce. I have copy pasted the codes below.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%
ServletContext context = getServletContext();
String app = context.getInitParameter("appName");
String errorMessage = "";
if ( session.getAttribute("error-message")!=null){
errorMessage = (String) session.getAttribute("error-message");
}
%>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title><%=app%> - Please login</title>
<link href="styles/bootstrap-theme.min.css" rel="stylesheet">
<link href="styles/bootstrap.min.css" rel="stylesheet">
<link href="styles/sidebars.css" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico">
<style type='text/css' media='screen'>
body {
font-family: Tahoma;
font-size: 12px !important;
padding-top: 40px;
padding-bottom: 40px;
background-color: #fff;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.navbar{
border-color: #ccc;
}
.alert-warning{
margin-top: 15px;
}
.validation-summary-errors{
font-family: Tahoma !important;
font-size: 12px !important;
color: #b94a48;
margin-top: 35px;
margin-bottom: -15px;
}
.col-md-8{
padding-left: 5px;
}
/* .navbar-inverse{
border-color: #ccc;
background: #ddf0f8; Old browsers
background: -moz-linear-gradient(top, #ddf0f8 0%, #ffffff 63%); FF3.6+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ddf0f8), color-stop(63%,#ffffff)); Chrome,Safari4+
background: -webkit-linear-gradient(top, #ddf0f8 0%,#ffffff 63%); Chrome10+,Safari5.1+
background: -o-linear-gradient(top, #ddf0f8 0%,#ffffff 63%); Opera 11.10+
background: -ms-linear-gradient(top, #ddf0f8 0%,#ffffff 63%); IE10+
background: linear-gradient(to bottom, #ddf0f8 0%,#ffffff 63%); W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddf0f8', endColorstr='#ffffff',GradientType=0 ); IE6-9
}*/
</style>
</head>
<body>
<div class="navbar navbar-fixed-top" role="navigation">
<div class="navbar-header">
<img class="logo" src="img/Nexius_logo.png"/>
</div>
</div>
<div class='inner col-md-8'>
<%=errorMessage%>
<form action='LoginServlet' method='POST' id='loginForm' class='form-horizontal' role='form' autocomplete='off'>
<h4 class="form-signin-heading"> </h4>
<div class="form-group">
<label for='username' class='col-md-2 control-label'>User name</label>
<div class="col-md-4">
<input type='text' class="form-control" name='user' id='username' />
</div>
</div>
<div class="form-group">
<label for='password' class='col-md-2 control-label'>Password</label>
<div class="col-md-4">
<input type='password' class="form-control" name='pwd' id='password' />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-default" type="submit">Login</button>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10"><div style="position: absolute; top: -45px; left: 100px; width: 240px;">
<input onClick="checkCookie()" type="checkbox" value="Remember me">Remember username<br>
</div>
</div>
</form>
</div>
<script type='text/javascript'>
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)===0) return c.substring(name.length,c.length);
}
return "";
}
function checkCookie()
{
var user=getCookie("user");
if (user!=="")
{
document.getElementById("username").value = user;
}
else
{
if (user!=="" && user!=null)
{
setCookie("user",user,30);
}
}
}
</script>
</body>
</html>
Mostly the upper part is just CSS. In the below part i have writtten the codes to get the username on the text box and pass it to the setcookie function below. So i need it like an usual page like when remember username check box was checked, the username should show up when the page is opened, but for me what it does is, when i open the webpage only when i click on the "remember username" checkbox the username pops up in the username textbox. Now sure what to do about this? Can someone please help me?
You're checking for cookies only when user clicks on the remember me button. You need to check for cookie on document load, for instance.
Add onload handler on body tag this way: <body onload=checkCookie()>. You need to also remove onClick="checkCookie()" from your remember me button.

How to reload a jsp from a servlet using Post?

Upload.jsp
<form id="upload" name="upload" method="post"
action="UploadServlet"enctype="multipart/form-data">
<br />
<div class="obrazek" id="img-4049424"
style="position: relative; z-index:0;">
<div>
<%=request.getAttribute("mensaje")%> <img src="img/upload/<%=request.getAttribute("logotipo")%>"
alt="" style="float: left;width: 120px; height: 120px;">
</div>
<span class="upload-wrapper">
<img src="img/up_16.gif" alt="" style="margin-top: 50px;">
<a href="javascript:doClick()" id="fileSelect" style="font-weight: bold;" >Cargar logotipo...</a>
</span>
</div>
<div id="uploadfile" style="position: absolute; background-color:transparent;
width: 210px; height: 215px;
overflow: hidden;
z-index: -1; opacity: 0;
top: 5px; left: 5px;
background-position: initial initial; background-repeat: initial initial;" >
<input id="file" name="file" type="file" accept="image/jpeg,image/png"
style="font-size: 15px; position: absolute; width: 100%;
height: 100%;" onchange="handleFiles(this.files)">
</div>
<input type="submit" value="Subir logotipo" />
</form>
UploadServlet.java
mensaje="successfully";
request.setAttribute("logotipo", fileName);
request.setAttribute("mensaje", mensaje);
request.getRequestDispatcher("vistas/Upload.jsp")
.forward(request, response);
What I need is reload to Upload.jsp to display the uploaded image, because now I no image appears on the jsp and the file is loaded successfully...

Categories