Python Forum
Thread Rating:
  • 2 Vote(s) - 3.5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Django and browsers.
#1
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
Reply
#2
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..
Reply
#3
(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.
Reply
#4
<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.
Reply
#5
Thanks
Reply
#6
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.
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  Django: How to automatically substitute a variable in the admin page at Django 1.11? m0ntecr1st0 3 3,245 Jun-30-2019, 12:21 AM
Last Post: scidam

Forum Jump:

User Panel Messages

Announcements
Announcement #1 8/1/2020
Announcement #2 8/2/2020
Announcement #3 8/6/2020