I am moving a navigable site into an iframe that now has other frames surrounding it.
Everything works normally however now in Safari when a link is clicked in the main iframe the iframe goes blank momentarily then the pages loads. Usually the user would only notice changes in elements that have changed. So the main site template would appear to have not been reloaded.
This is how the site used to behave outside the iframe and in Firefox it behaves that way despite now being in an iframe.
Is there any way to stop Safari re-loading the entire page from scratch each time a link is clicked in the iframe?
The answer has been tested and is completely serious, be warned!
So the Safari white flicker only occurs when a Javascript file is called in the head or the body, and from the same domain.
So you can include Javascript files in the head as normal from an external domain and no flicker, change it to your own domain and it flickers.
To get even more weird if you include the local javascript files in the body there is a lesser flicker, after the body it completely goes away.
This must be a bug!
Below is a basic example, clicking the link causes the flicker.
Test page HTML:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="inzu.ico" >
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<iframe id="iframe" src="testframe.html" style="height:600px"/>
</body>
</html>
Frame with flicker:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="/something.js" type="text/javascript"></script>
<style>
body{
background:red;
}
</style>
</head>
<body>
TEST
</body>
</html>
Frame with no flicker:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<style>
body{
background:red;
}
</style>
</head>
<body>
TEST
</body>
<script src="/something.js" type="text/javascript"></script>
</html>
Related
I'm displaying an HTML overlay on a 1920x1080 stream.
Im trying to create a simple HTML page that has a centered image that shows on top but whenever i display it it's somewhere on the bottom right side.
This is my code, I rather not use CSS if that's an option
What am i missing?
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<center>
<img src="https://s10.gifyu.com/images/once-30-sec-5-min-99.gif" alt="Computer man" style="width:400px;height:100px;padding-bottom: 350;padding-right: 200px">
</center>
<script>
</script>
</body>
</html>
I don't think you can create a fixed resolution only using HTML
but you can put styles in the HTML image tag with maximum height and with instead of linking it to a CSS 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>Document</title>
</head>
<body>
<img href="address of image" style="width=100%; height:100%">
</body>
</html>
Hi i started learning html a say or two ago and i was just messing around with some features when i thought of making a website which stored my school stuff in a arranged manner then i wanted to make a button that opens a local file but i just couldn't make it happen but i tried searching it on web but nothing worked for me
here is the code
<!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>E</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<style>body{background-image: url(x.jpg);
background-size: cover;}
</style> <div id="red">
<button><a src="C:\Users\laksh\Mywebsite\jkoj.html">jkoj</a></button>
</div>
</body>
</html>
don't use src attribute in a tag, use href in place of src
It gives me "2.4.7 Focus Visible" AA error in Mac when I check my site with siteimprove chrome extension. Some times it works fine in windows systems some times it's not.
Here is my code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
a#login-as-guest:focus{ background-color: yellow; }
a#login-as-guest-active:active{ background-color: yellow; }
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
window.onload=function(){
}
</script>
</head>
<body>
<a tabindex="0" id="login-as-guest">Cancel and browse as guest</a>
<br />
<a id="login-as-guest-active">Active Cancel and browse as guest</a>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "t2hbS"
}], "*")
}
</script>
</body>
</html>
It's already running in my server "https://myappdemo.com/focus/test.html"
Please help me thanks in advance.
Your code sample just changes the focus background color and your demo link just sets the focus text color. A typical focus indicator is an outline border, which is provided by default by most (all?) browsers, but your color changes are sufficient to show a focus too. In fact, since you are only changing :focus{background-color} and a{color}, respectively in the two examples, you will get your color change and the browser's default focus border.
I don't see why siteimprove is flagging it. Can you post the error siteimprove is claiming and all relevant info it's complaining about?
Make sure that user interface elements, that can receive keyboard focus, are highlighted on focus.
a:hover, a:active, a:focus {
text-decoration: underline;
color: green;
}
My browser is showing a blank page when I open an html file with the following code
<!doctype html>
<html>
<head>
<title>Learning CSS</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
</head>
<body>
<p> test </p>
</body>
</html>
I originally copy pasted the source code from example.com and then deleted the css, but nothing was showing up, So i made this test, still nothing showing up
The <style> tag in the <head> is missing its expected matching </style>.
Works as expected when adding the closing </style> tag.
Note: A helpful method to debug HTML is W3C Validator. If you go here: https://validator.w3.org/#validate_by_input and copy/paste your code, it will also show the missing </style> tag error in its output.
Missing closing <style> tag, you have:
<style type="text/css">
But it should be removed or closed:
<style type="text/css">
</style>
I want use adobe edge animation in my website . I add required files into page head .Adobe edge worked with this div tag only
<div id="Stage" class="EDGE-7942973"> </div>
and add another elements dynamically into it .I test and understand that if this div tag placed into another tags animations don't run. . How to fix this problem?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script type="text/javascript" charset="utf-8" src="advertisement_anim_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-7942973 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-7942973">
</div>
</body>
</html>
Keep adobe edge published files in a folder folder_name and place following tag in your html file whatever you want. Don't forget to change folder_name & file_name.
<iframe src="folder_name/file_name.html"></iframe>
Set height & width of iframe according to stage size.