jquery-ui switchClass fails under Chrome - jquery-ui

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'.

Related

pgfplotstabletypeset to html with pandoc

I'm trying to convert a latex table made with pgfplotstable typeset to html with pandoc, for example:
\begin{table}
\centering
\pgfplotstableset{
every head row/.style={before row=\toprule,after row=\midrule},
every last row/.style={after row=\bottomrule}}
\pgfplotstabletypeset[
fixed zerofill,
precision=2,
display columns/0/.style={string type},
col sep=comma]{images/prvsflow.txt}
\caption{Variation of pressure drop with flow rate (m/s)}
\label{tab:pvv}
\end{table}
. If I just use it straight with
pandoc -s example.tex -o example.html
then it gives
<!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" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="pandoc" />
<title></title>
<style type="text/css">code{white-space: pre;}</style>
</head>
<body>
<p>[tab:pvv]</p>
</body>
</html>
Has anyone had any experience with this?
I just found htlatex, which seems to do a much better job with tables than pandoc, and also works quite nicely with tables made with pgfplotstabletypeset

Jquery Mobile default themes are reversed, a = black and b = white

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.

How to scroll an iframe containing a pdf in Ipad/iPhone/iOS?

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...

Opening links in a frame target IE10 Start app for Windows 8

I have a page being showed in two frames
<frameset cols="140,*">
<frame src="resources/nav-bar.html" id="nav-bar" frameborder=0 scrolling="no" noresize="noresize" />
<frame src="resources/home.html" id="main" frameborder=0 scrolling="yes" noresize="noresize" />
</frameset>
Then in the frame named nav-bar I have links targeted to main like this:
Personal details
In Google Chrome and Safari this works with no issues but IE10 for Windows 8 when run from the Start opens the link in a new tab instead. Nevertheless if I run IE10 from the desktop I have no such issue. How can this be fixed? Thanks in advance.
EMILIO!
It's a sad little problem and apparently Microsoft is aware of it. (See http://support.microsoft.com/kb/2793437, for example.) What makes it even sadder is it seems to only appear on Windows 8, IE10 running on Windows 7 does not exhibit this problem. I manage to solve it by replacing the markup for the page I am using to navigate around, in your example the resources/nav-bar.html file. I changed:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or/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>Blah blah</title>
<link rel="stylesheet" href="./some.css" type="text/css" media="screen" />
</head>
...
to
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Blah blah</title>
<link rel="stylesheet" href="./some.css" type="text/css" media="screen" />
</head>
...
Give it a go.
Try using property name.
name="main"

Vaadin Warning: widgetset version 6.7.2 does not seem to match theme version

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?

Resources