I have written a simple app. I put it on pythonanywhere. It's works. But I have a problem. When I click on buttons on my app the background become white for one second. It's happening only in Chromium and Opera . In Firefox no problem with that. How do I fix it?
Please, look at my app
You have some not so good design choices.
Color is okay for me when run a couple of time.
You should separate HTML,CSS,JavaScript so not all is in one file.
It's a little messy to look at now.
When you click button the whole site reload(this can cause the color problem).
Ajax for not reloading page,had been a much better choice for this kind of app.
Look at
Responsive web design,if resize you site it become a mess.
So either you write the CSS yourself to fix this,
or use a grid system.
My favorite simple responsive CSS grid is
gridism..
(Oct-19-2016, 01:54 AM)snippsat Wrote: [ -> ]You have some not so good design choices. Color is okay for me when run a couple of time. You should separate HTML,CSS,JavaScript so not all is in one file. It's a little messy to look at now. When you click button the whole site reload(this can cause the color problem). Ajax for not reloading page,had been a much better choice for this kind of app. Look at Responsive web design,if resize you site it become a mess. So either you write the CSS yourself to fix this, or use a grid system. My favorite simple responsive CSS grid is gridism..
Thanks I got it. I'll try Ajax.
<html>
<head>
</head>
<meta charset='utf-8'>
<style>
body {
background: #2AA9E6;
}
</style>
<body>
<div align="left">
<p><font color="white">Learn English Verbs. Common Irregular Verbs. Top 100 English Verbs.</font></p>
</div>
<div align='center'>
</br>
<!DOCTYPE html>
<html>
<head>
<title>English Verbs</title>
</head>
<script type="text/javascript">
function setFocus(){
document.getElementById("name").focus();
}
</script>
<link rel="prefetch" href="[url=https://mikeru.pythonanywhere.com/]https://mikeru.pythonanywhere.com/[/url]"
<!--filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBD6', endColorstr='#EBFFFF');-->You probably shouldn't start the html document twice. And the "prefetch" link doesn't have a closing tag, so it also is the entire next line until THAT closing tag.
But that's not the point. This issue you're seeing is actually a known problem with css styling. It's known as the Flash Of Unstyled Content. There are workarounds :)
I believe the original site to talk about the fouc was BlueRobot, but that site appears to have disappeared. Here's the WebArchive link:
https://web.archive.org/web/201505130550.../fouc.asp/
But now that you know what to search for, you should be able to find sites that talk about how to fix it.
I have rewritten and have changed the app. Now it is available here
http://mikeru.pythonanywhere.com/
PS: Now I noticed that sometimes my app hang up after hit a button "ok". On the localhost is no problem with that.