I am working on html5 offline mode in sales-force. I added following line to cache current page.
<html manifest="{!$Page.offlineCache}">
I turn off the developer mode and check the console. It is by default taking parent tag as follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!DOCTYPE html>
<html manifest="/apex/offlineCache">
<head>
As parent tag is not taking manifest attribute, Current page is not getting cached.
How can I remove that auto appended <html> parent tag?
Apex page code :
<apex:page standardStylesheets="false" cache="true" showHeader="false" sidebar="false" controller="offlineCon" title="Offline Page" docType="html-5.0">
<html manifest="/apex/offlineCache">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Offline page</title>
<apex:includeScript value="{!$Resource.all}"/>
</head>
<body>
<label >Contact First Name</label>
<input type="text" id="FirstName"></input>
<button id="savebtn">Save</button><br/><br/>
<label>Contact Last Name </label>
<input type="text" id="LastName"></input>
<button id="test">test</button>
<ol id="state"></ol>
</body>
</html>
</apex:page>
In the apex:page tag, add applyHtmlTag="false". Reverting back to a very old API version is not a very good idea!
You should have something like this:
<apex:page docType="html-5.0" showHeader="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false" controller="AppController">
try by setting the docType attribute on apex:page
sample:
<apex:page sidebar="false" showHeader="false" standardStylesheets="false" docType="html-5.0" >
<html manifest="/apex/offlineCache">
<head>
<style> body{color : red;}</style>
</head>
<body>
<h1>Congratulations</h1>
This is your new Page: :)
</body>
</html>
</apex:page>
Related
I want to update an existing/simple holding page on my domain in html.
Unfortunately, I've noticed that this page doesn't seem to appear on newer browsers such as Chrome and Firefox and only seems to load up properly on Internet Explorer.
Is there any advice you could give me to help overcome this issue please?
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>"TITLE HERE"</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="background:ffffff url('LOGO.jpg') no-repeat center center">
</a>
</body>
</html>
<!--#easybanner4-->
To make a simple HTML page visible by most modern browsers it's better to use HTML5 so first, instead of using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> just use <!DOCTYPE html>...
About your code, you can fix it by using something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- or <meta charset="iso-8859-1"> -->
<meta name="viewport" content="width=device-width">
<title>"TITLE HERE"</title>
<style>
body {
background:#ffffff url('LOGO.jpg') no-repeat center fixed;
}
</style>
</head>
<body>
link
</body>
</html>
Hi I'm trying to render below html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body >
<select id="countrySelect" size="1">
<option></option>
<option>USA</option>
<option>Singapore</option>
</select>
<button >show selected</button>
</body>
</html>
But getting following error in browser console:
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.
Please try below Html code
<!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>
</head>
<body>
<select id="countrySelect" size="1">
<option></option>
<option>USA</option>
<option>Singapore</option>
</select>
<button>show selected</button>
</body>
</html>
GitHub layout uses such constructs for CSRF protection of forms (can be seen in sign up form on main page for example):
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="somerandombase64" name="authenticity_token">
</div>
What is the reason to fold <input type="hidden" ...> with inline-styled <div>?
Isn't that <div> redundant?
As explained here: LINK
Rails’ form tag helper helpfully puts a hidden field in with an authenticity token. Unfortunately, it wraps the hidden field in a div! So even if your form has style=”display:inline”, the div won’t.. and you won’t be able to display a form that doesn’t force a newline.
In other words, the safest way to prevent a newline is by adding those styles margin:0;padding:0;display:inline to the wrapper div.
It's necessary [to be valid] according to the DTD for HTML 4. While it doesn't matter what the descendants of form elements are, the direct child elements must be block-level elements.
Run this against the W3C Validator Service for further proof:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<form action="" method="get">
<input type="hidden">
</form>
</body>
</html>
as opposed to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<form action="" method="get">
<div>
<input type="hidden">
</div>
</form>
</body>
</html>
At chrome, I focus at "A" iframe. There is element setted accesskey attribute on other iframe. I can't use accesskey to focus on the element. This problem doesn't exist at IE,FF.
Is there some trick can solve this problem? my code is below:
index.html:
<!doctype html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Index</title>
</head>
<body>
<input type="text" accesskey="b" name="some_name" value="">
<iframe src="a.html"></iframe>
<iframe src="b.html"></iframe>
</body>
a.html:
<!doctype html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Index</title>
</head>
<body>
<input type="text" accesskey="e" name="some_name" value="">
</body>
b.html:
<!doctype html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Index</title>
</head>
<body>
<input type="text" accesskey="t" name="some_name" value="">
</body>
The problem will be to do with what context the current focus is looking at. So if the user has not clicked inside the respective iframe then the access key will not work. One way to implement this would be to trigger a javascript keyevent, which forwards the key event into each of the iframes until it has met a corresponding access key attribute.
Here is my html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
kjkj
</div>
</body>
</html>
Lve demo:
http://tinkerbin.com/O2MwkUTj
Why is there a blank line at the top of my web page?
I noticed that removing the div, or removing the doctype fixes the problem...
It is because Tinkerbin is getting confused.
If you put your HTML into a file it works fine. In Tinkerbin, the following happens in the preview:
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div>
kjkj
</div>
</body>
I presume it is removing some tags such as <html>, <head> and <body> when outputting your page in order to display inside a page created for the preview.