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"
Related
What code do I need to add to my website in order to get a rich link when someone sends a link of my website via iMessage and not just the standard icon, title, hyperlink?
The code you need is the following:
<html>
<head>
<title> </title>
<meta name="og:title" content="Insert Titel for iMessage"/>
//Will be used if internet is to slow to load image or video
<link rel="icon" href="link to your icon" type="image/png" />
<meta name="og:image" content="link to your image"/>
<meta name="og:video" content="link to your video"/>
</head>
...
</html>
I'm a beginner to coding and have what seems to be a beginner question. I'm working in Ruby on Rails.
It appears that (all of a sudden) my application is ignoring my section across all of my pages. The implications are that the title is not appearing on the browser tabs and the css is not rendering in the mobile production environment (although it is working on desktop dev/prod and mobile prod). the code is below. Can someone help me? Thanks in advance!
<!DOCTYPE html>
<head>
<title>Home | XXXX</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
It must be inside tag. Please check your code. Hope this will help you.
<!DOCTYPE html>
<html>
<head>
<title>Home | XXXX</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
</html>
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 got a single page html5 application with a manifest file and many resources to be cached. When I open the page from the browser (both android chrome and ios safari) it starts downloading the file listed in the manifest. After that, I press "add to home screen" and the app-like icon is created but on iOS if I open the app from the icon in the home screen it downloads again every file listed in the manifest, this doesn not happen on android.
Is it supposed to behave like this or I am missing something?
<!DOCTYPE html>
<html manifest="manifest.appcache" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>app</title>
<meta name="viewport" content="width=768, initial-scale=1.0, user-scalable = no">
<link rel="shortcut icon" href="/icona.png">
<link rel="apple-touch-icon-precomposed" href="/icona.png">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body>
...
manifest.appcache
<?php
header('Content-Type: text/cache-manifest');
?>
CACHE MANIFEST
CACHE:
#lastupdate <2014 Jul 16 Wednesday 18:37:18>
/myresource1.png
/myresource2.png
NETWORK:
/myresource3.png
/myresource4.png
FALLBACK:
UPDATE
Before pressing add to home screen I wait the "cached" event, I know it has been fired because it close my progress bar
function cachedEvent(e) {
$('#progressBar').css('display','none');
}
applicationCache.addEventListener('cached', cachedEvent);
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;
}