I need to use something which is compatible with IE10 and not with IE9.
My HTA was made for IE9 and worked fine : visible icon and maximized windows.
By changing <meta http-equiv="x-ua-compatible" content="ie=9"/> to <meta http-equiv="x-ua-compatible" content="ie=10"/>, there is no icon and the windows is not maximized.
Any idea please ?
NOT working :
<html>
<head>
<title>test</title>
<HTA:APPLICATION ID = "1"
APPLICATIONNAME="1"
BORDER="thin"
BORDERSTYLE="normal"
ICON="icon.ico"
MAXIMIZEBUTTON="yes"
MINIMIZEBUTTON="yes"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="yes"
WINDOWSTATE="maximize">
<meta http-equiv="x-ua-compatible" content="ie=10"/>
</head>
<!---->
<body style="overflow:hidden;">
No icon and not maximized, with ie=10
</body>
</html>
Working : but I need IE10 now.
<html>
<head>
<title>Test</title>
<HTA:APPLICATION ID = "1"
APPLICATIONNAME="1"
BORDER="thin"
BORDERSTYLE="normal"
ICON="icon.ico"
MAXIMIZEBUTTON="yes"
MINIMIZEBUTTON="yes"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="yes"
WINDOWSTATE="maximize">
<meta http-equiv="x-ua-compatible" content="ie=9"/>
</head>
<!---->
<body style="overflow:hidden;">
Icon showing correctly with ie=9
</body>
</html>
What usually works for me, is to have an HTA with NAVIGABLE set to yes, and changing the window.location to an HTML file using standard HTML. This allows the use of the HTA properties on the one hand, and the use of IE=edge (or another targeted IE version) on the other:
myHTA.hta
<html>
<head>
<title>test</title>
<HTA:APPLICATION ID = "1"
APPLICATIONNAME="1"
BORDER="thin"
BORDERSTYLE="normal"
ICON="icon.ico"
MAXIMIZEBUTTON="yes"
MINIMIZEBUTTON="yes"
NAVIGABLE="yes"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="yes"
WINDOWSTATE="maximize">
<script>
window.location = 'htaContent.html';
</script>
</head>
</html>
htaContent.html
<html>
<head>
<title>test</title>
<meta http-equiv="x-ua-compatible" content="ie=10"/>
</head>
<body style="overflow:hidden;">
Put your HTML content here
</body>
</html>
See here.
Related
I have read a post, link here: Render-tree Construction, Layout, and Paint
A demo page:
<!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.0" />
<title>No JS</title>
<link rel="stylesheet" href="http://127.0.0.1:3000/static/css/style.css" />
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
The Performance Panel:
Enlarge the red part:
As you see, there is no step of Render-tree Construction.
Why? Does the post wrong or the Render-tree Construction part is in Recalculate Style?
I have a mobile web application which has the following view-port.
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
In one of the pages of our mobile web app, we are embedding another website using an iframe. This web application is not responsive and doesn't have a viewport meta tag in the head.
We wanted the embedded site's view to be without any initial-scale, but unfortunately, it is having an initial scale (may be 1.0) which attached to it. Looks like it's inheriting from the parent frame. Browser is not letting me to zoom out the iframe content. Both the parent and embedded webpage is in the same domain as well.
Below is the generated code from the browser.
<!DOCTYPE html>
<head>
<base href="/">
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>title</title>
</head>
<body>
<!-- some content -->
<div>
<div class="iframe-wrapper">
<iframe frameborder="0" src="url ot the site>
#document
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=0">
..
</head>
<body>
...
</body>
</html>
</iframe>
</div>
</div>
</body>
</html>
Would it be possible to have a different viewport for the iframe rather than reusing the one from the parent?
I have an chrome app,with and iframe inside
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<title>Title</title>
</head>
<body >
<div class="container-fluid">
<iframe id="iframe" src="home.html" frameborder="0" height="150%" style="width: 100%;"></iframe>
</div>
</div>
</body>
</html>
in web is loading, but when it is called from index in the chrome app ,bootstrap-theme.css is not loading
I've tried too adding type="text/css" , but neither.
<link rel="stylesheet" type="text/css" href="/css/bootstrap-theme.css">
Does this work for you?
solution:
as #SaucedApples said but without the dot.
<link href="/css/bootstrap-theme.css" rel="stylesheet" />
I think you should allow this files to be appended at the manifest.json, something like this:
"content_scripts": [
{
"matches": ["http://test-website.com/*"],
"js": ["js/content-script.js"],
"css" : ["yourcss.css"]
}
],
In brackets now I can only code jQuery inside the lines of my html file.
But now I want to code jQuery in another file, but of course I stall want that it interact with the html, for example that I can still target the divs:
$(".navbar")
HTML File :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javscript" src="Javascript.js"</script>
</head>
<body>
<div class="navbar">
<p>Hello</p>
</div>
</body>
JS File :
$(document).ready(function(){
$(".navbar").click(function(){
$(".navbar").hide();
});
});
Apparently the reason why I can't have the jQuery-code in another file is a glitch in Brackets.
I have written a website using HTML and CSS and, basically, I'm trying to get it to display now. The code is just a page of text and a few images. Currently when I go to the domain, the source code from start to finish is displayed instead of the actual content.
I just got cPanel hosting with godaddy (who naturally weren't of any help). I downloaded cyberduck. Uploaded the file containing the HTML text and called it index.html.
A CSS file was uploaded, and saved as index.css This might be the issue if something was incorrect.
On cyberduck it says there is a file called layout-style.css, perhaps I should edit that and add my CSS code to it?
Possibly the top few lines of the HTML code are missing some important command? [updated]:
<!DOCTYPE html>
<html lang="en">
<body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div class = enterprise> <br>
<p>text<p>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Also, does Bootstrap have to be installed anywhere?
I appreciate your responses.
The content must be in the body tag
The structure of an HTML document is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Article</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<!-- CONTENT HERE -->
<div >
<h1>Site name</h1>
</div>
</body>
</html>
You should not have in the part.
This is a html5 structure :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Then you should put inside the part like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class= top>
</div>
<div class = enterprise>
<p> text goes here </p>
</div>
</body>
</html>