I have a pdf embedded through an iframe using the media plugin. When you bring it up on the ipad, the iframe does not stretch to fit the content of the pdf.
At this point I am simply running a test to see what I get.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="./ipad_files/jquery-1.7.min.js"></script>
<script type="text/javascript" src="./ipad_files/media.js"></script>
<style>
iframe{width:550px; height:100%;}
.media{width:630px !important; height:600px; overflow:scroll; -webkit-overflow-scrolling: touch;}
*:not(html) {
-webkit-transform: translate3d(0, 0, 0);
}
</style>
</head>
<body>
<div style="width:650px; height:630px;">
PDF LINK
</div>
<script type="text/javascript">
$('.media').media();
</script>
</body>
</html>
Whats rendered in the browser is a iframe.
Any ideas how I can scroll the iframe/containing div? I know that I can't scroll the iframe but the iframe isn't expanding out.
i've never used it but maybe iScroll4 will fix your problem...
Related
I'm using Paw to export my api calls to a swagger doc.
The "requests" are being generating correctly, but not the "responses". They all just say:
default no response description was provided for this operation
How can I add a response?
Example of my file:
<!DOCTYPE html>
<html>
<head>
<title>ReDoc</title>
<!-- needed for adaptive design -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
<!--
ReDoc doesn't change outer page styles
-->
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<redoc spec-url='MerchantApiSwag.json'></redoc>
<script src="https://cdn.jsdelivr.net/npm/redoc#next/bundles/redoc.standalone.js"> </script>
</body>
</html>
Screenshot of Paw:
Screenshot of output:
I decided that I wanted to learn Jquery Mobile so I set up a test site and instantly came across a weird bug, from what I've read and seen data-theme="a" should be the white theme and data-theme="b" should be the black/grey one. However, for me it's the other way around.. Have I perhaps done something wrong when downloading the library onto my site? And does this matter or should I just ignore it?
The markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div data-role="page" data-theme="a">
<h1>Testing</h1>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>
This is what I get with data-theme="a":
I think it might be because your using a pretty old version of jquery mobile, I see you're referencing version 1.2.1, try version 1.4.5.
I've found a strange issue when using JQM + IE10 and touchscreeen on a Windows 8 tablet. When using an external mouse och the trackpad everything works as expected but when I'm using the touch screen normal links in JQM are not working.
Having two very basic JQM pages, b.html:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
this is b.html
link to a.html
</body>
</html>
and a.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
this is a.html
link to b.html
</body>
</html>
Navigation gets stuck on the second one using the touch screen, mouse and trackpad working fine. I guess this is connected to JQM ajax navigation model and the new touch events in IE10, but can't figure out exactly how to solve this.
Chrome is working fine with both mouse/trackpad and touch screen.
EDIT: Might have found a possible workaround, adding this to the css
a {
-ms-touch-action: none;
}
I get a problem with the animation done by jquery-ui switchClass, when trying to change the 'right' attribute from a value in px to a value in percent. The problem happens only under Chrome (works under FireFox or IE).
The animation should just change the right attribute of a div from '90px' to '20%', but the div first goes to the other part of the screen. When i look into the debugger tools, the px seems to be interpreted as % : the sequence of values are 90px, 89%, 88%, ... 21%, 20%.
The following code reproduces the problem :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<style>
.class1 {width:100px; height:50px; position:absolute; right:90px; background-color:#F9EDBE;}
.class2 {width:100px; height:50px; position:absolute; right:20%; background-color:#F9EDBE;}
</style>
</head>
<body>
<div id="myDiv" class="class1" onclick="$('#myDiv').switchClass('class1', 'class2', 5000);">Click me</div>
</body>
Thanks in advance for your help.
You may try to use 'this' instead of jQuery selector. Also try to add 'name' attribute with the same value as 'id'.
I've been developing on 6.7.2 for quite some time and yesterday I noticed the weird looking version of my application. I went to the debug version and found this:
Starting Vaadin client side engine. Widgetset: Xinco
Widget set is built on version: 6.7.2
Warning: widgetset version 6.7.2 does not seem to match theme version
Starting application xincovaadin-1652339780
Vaadin application servlet version: 6.7.2
Application version: NONVERSIONED
inserting load indicator
Making UIDL Request with params: init
Server visit took 30ms
JSON parsing took 0ms
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
How can I fix this? I tried rebuilding my widgets without luck. Line 11 above repeats lots of times.
See: https://vaadin.com/forum/-/message_boards/view_message/953384
Edit:
From Firebug:
<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style type="text/css">
<link href="/xinco/VAADIN/themes/xinco/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon">
<link href="/xinco/VAADIN/themes/xinco/favicon.ico" type="image/vnd.microsoft.icon" rel="icon">
<title>Xinco</title>
<link rel="stylesheet" type="text/css" href="/xinco/VAADIN/themes/xinco/styles.css">
<link rel="stylesheet" href="http://localhost:8084/xinco/VAADIN/widgetsets/Xinco/easyuploads.css">
<link rel="stylesheet" href="http://localhost:8084/xinco/VAADIN/widgetsets/Xinco/expandingtextarea/expandingtextarea.css">
<link rel="stylesheet" href="http://localhost:8084/xinco/VAADIN/widgetsets/Xinco/stepper/stepper.css">
</head>
<body class="v-generated-body v-ff v-ff8 v-ff80 v-gecko v-win" scroll="auto">
<script type="text/javascript">
<iframe id="__gwt_historyFrame" src="javascript:false" style="position:absolute;width:0;height:0;border:0;overflow:hidden;" tabindex="-1">
<script src="/xinco/VAADIN/widgetsets/Xinco/Xinco.nocache.js?1323124855776" language="javascript">
<script src="http://localhost:8084/xinco/VAADIN/widgetsets/Xinco/swfupload.js" language="javascript">
<script defer="defer">
<script type="text/javascript">
<script type="text/javascript">
<div id="xincovaadin-1652339780" class="v-app v-theme-xinco v-app-Xinco">
<noscript>You have to enable javascript in your browser to use an application built with Vaadin.</noscript>
<iframe id="Xinco" src="javascript:''" style="position: absolute; width: 0pt; height: 0pt; border: medium none;" tabindex="-1">
</body>
</html>
This is what I see when looking at the page source:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">html, body {height:100%;margin:0;}</style><link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/xinco/VAADIN/themes/xinco/favicon.ico" /><link rel="icon" type="image/vnd.microsoft.icon" href="/xinco/VAADIN/themes/xinco/favicon.ico" /><title>Xinco</title>
</head>
<body scroll="auto" class="v-generated-body">
<script type="text/javascript">
//<![CDATA[
if(!vaadin || !vaadin.vaadinConfigurations) {
if(!vaadin) { var vaadin = {}}
vaadin.vaadinConfigurations = {};
if (!vaadin.themesLoaded) { vaadin.themesLoaded = {}; }
vaadin.debug = true;
document.write('<iframe tabIndex="-1" id="__gwt_historyFrame" style="position:absolute;width:0;height:0;border:0;overflow:hidden;" src="javascript:false"></iframe>');
document.write("<script language='javascript' src='/xinco/VAADIN/widgetsets/Xinco/Xinco.nocache.js?1323183529006'><\/script>");
}
vaadin.vaadinConfigurations["xincovaadin-1652339780"] = {appUri:'/xinco/vaadin', standalone: true, themeUri:"/xinco/VAADIN/themes/xinco", versionInfo : {vaadinVersion:"6.7.2",applicationVersion:"NONVERSIONED"},"comErrMsg": {"caption":"Communication problem","message" : "Take note of any unsaved data, and <u>click here<\/u> to continue.","url" : null},"authErrMsg": {"caption":"Authentication problem","message" : "Take note of any unsaved data, and <u>click here<\/u> to continue.","url" : null}};
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
if(!vaadin.themesLoaded['xinco']) {
var stylesheet = document.createElement('link');
stylesheet.setAttribute('rel', 'stylesheet');
stylesheet.setAttribute('type', 'text/css');
stylesheet.setAttribute('href', '/xinco/VAADIN/themes/xinco/styles.css');
document.getElementsByTagName('head')[0].appendChild(stylesheet);
vaadin.themesLoaded['xinco'] = true;
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
setTimeout('if (typeof Xinco == "undefined") {alert("Failed to load the widgetset: /xinco/VAADIN/widgetsets/Xinco/Xinco.nocache.js?1323183529006")};',15000);
//]]>
</script>
<div id="xincovaadin-1652339780" class="v-app v-theme-xinco v-app-Xinco" ><div class="v-app-loading"></div></div>
<noscript>You have to enable javascript in your browser to use an application built with Vaadin.</noscript></body>
</html>
The source code can be downloaded from here. The project is a NetBeans project.
Which theme are you using? Assuming that it's a custom theme, will the error messages disappear if you use the default theme?
Also make sure that:
You have cleaned your project and application server, and rebuilt the project
You don't have two different versions of the Vaadin JAR in your WEB-INF/lib directory
You haven't copied a theme directory from an older Vaadin JAR to your VAADIN/themes directory
Your (assumed) custom theme isn't inheriting any old theme
If you check the loaded css files in your browser (Firebug came in handy when I tried this), styles.css (or one of the styles.css') includes the following beginning part:
.v-theme-version:after {
content: "6_7_2";
}
.v-theme-version-6_7_2 {
display: none;
}
The only way I managed to produce this error was to inherit a custom theme from another Vaadin version's theme.
Update:
I checked your project and I think I know what's wrong. The servlet-mapping in web.xml should read /VAADIN/* instead of /vaadin/*. It should work without this change if you copy the themes from your vaadin.jar to VAADIN/themes in your project. Normally you should also copy the Vaadin widgetsets, but since you are using a custom widgetset, you don't have to do this.
Source: https://vaadin.com/book/-/page/application.environment.html#section.web.web-xml
Have you extracted the VAADIN/themes folder from vaadin.jar so that it is served statically? In that case, you need to update that directory with the contents from Vaadin 6.7.2.
Alternatively, have you created a folder under VAADIN/themes that has the same name as the Vaadin theme that you are using?