Bugzilla, Mozilla's issue tracker, has a nice loading screen while the search is being executed. In the days of Ajax, this is nothing special. They do it without any scripting, though, and I want to know how.
For example:
Disable JavaScript
Open the following URL: https://bugzilla.mozilla.org/buglist.cgi?short_desc=IDL&resolution=---&resolution=DUPLICATE&query_format=advanced&short_desc_type=allwordssubstr
You get a page with an animated image, the text "Please wait while your bugs are retrieved." and a title of "Bugzilla is pondering your search".
Update:
This is the entire DOM while the search is being executed. No meta refresh, no scripts.
<html>
<head>
<title>Bugzilla is pondering your search</title>
</head>
<body>
<div style="margin-top: 15%; text-align: center;">
<center>
<img width="160" height="87" alt=""
src="extensions/BMO/web/images/mozchomp.gif">
</center>
<h1>Please wait while your bugs are retrieved.</h1>
</div>
</body>
</html>
After a while, the results page appears. The previous HTML vanishes and a completely new DOM appears, including a new title "Bug List".
So my question is: how does this work exactly? Please don't list alternative techniques - I am not interested in loading screens at all, but want to use that exact mechanism for something completely different.
if you look at the souce of the page you see you actually get two responses each with its own header
WARNING: YOUR BROWSER DOESN'T SUPPORT THIS SERVER-PUSH TECHNOLOGY.
--------- =_y97AELt1tHMqcK8D
Content-Type: text/html; charset=UTF-8
<html>
<head>
<title>Bugzilla is pondering your search</title>
</head>
<body>
<div style="margin-top: 15%; text-align: center;">
<center><img src="extensions/BMO/web/images/mozchomp.gif" alt=""
width="160" height="87"></center>
<h1>Please wait while your bugs are retrieved.</h1>
</div>
</body>
</html>
--------- =_y97AELt1tHMqcK8D
Content-Type: text/html; charset=UTF-8
content-disposition: inline; filename="bugs-2011-08-30.html"
Set-Cookie: {data}
Set-Cookie: {data}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bug List</title>
{the rest of the request}
I'm not too sure about the browser support for this except for mozilla...
Use a meta refresh tag to reload the page every N seconds.
Return the "please wait page" (with the meta tag) as long as the search results are collected.
Return the results page (without the meta tag) when the results are ready.
You should be able to see what is happening when you open Firebug (or similar) and open the Network tab.
Related
I am trying to make WP theme out of a static HTML page to help out this non-profit that I'm volunteering for. Coding is not my forte so I am struggling. To learn how to do this, I watched this video: https://www.youtube.com/watch?time_continue=267&v=CZRgvAtwpxw&feature=emb_logo
To briefly summarize, I chopped the HTML up into a header, index, and footer section, each saved as header.php, etc.
In making the code, the HTML loads without the styling. I suspect the issue is in the header, so I have pasted it here:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>A2Empowerment.org</title>
<link href="style.css" rel="stylesheet" type="text/css">
<div id="Layer1">
<p align="center"><img src="a2e_banner.png" alt="banner" width="650" height="145" border="0" /></p>
</div>
</head>```
**The index page is as follows:**
```<?php get_header(); ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<!--#include virtual="title.html"-->
<div id="Layer1">
<p align="center"><img src="a2e_banner.png" alt="banner" width="650" height="145" border="0" /></p>
</div>...```
**The CSS opens as follows:**
```/*
Theme Name: Man Ching's Theme.
Theme URI: www.a2empowerment.org
Description: Based on the original static HTML and CSS
Version: 1.0
Author: Dan Araujo
Author URI: none
*/
#Layer1{position:relative;
top:0%;
width: 100%;
z-index:1;
} ```
Any help on this issue would be fantastic. Everything is saved in the same folder. Thanks!
First thing, you shouldn't have that div inside your head. It should be in your body only. And you shouldn't open another html tag after closing the head.
You have to check if the CSS is located on the same folder (path) as the current HTML file and being correctly loaded.
1) Open up your browser's developers tools (hit F12 or CTRL+Shift+I) and take a look at the 'Elements' tab. Inspect the 'head' part of the code and click the link to the CSS file (it will start with link href="style.css"...) - if the file doesn't load correctly on your browser and you can't see the CSS, then you'll have to adjust the path to it.
2) If it's already on the correct path, and you know it should be working, then maybe your .htaccess is redirecting all requests (even those to css files) to something else and it will need to be ajusted.
Those are the first things to check. After those are checked and answered we may be able to help you further.
New browsers are intelligent enough to add missing close tags. What is the performance impact due to this? Does browser take more time to parse compared to downloading in decent speed network. Any impact in SEO
In the below snippets, both produce the same output. Bytes are calculated after minification.
HTML with Missing Tags (164 bytes)
<!DOCTYPE html>
<html>
<head>
<body>
<div id=content>
<h2><s><span>Copy + Paste</s> CODING in Progress (Zzzz...)
</div>
<div id=mail>
<h3><a href=mailto:#>#<title>Home
Valid HTML (227 bytes)
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<div id="content">
<h2><s><span>Copy + Paste</span></s> CODING in Progress (Zzzz...)</h2>
</div>
<div id="mail">
<h3>#</h3>
</div>
</body>
</html>
To see a website in action with missing tags.
Disclaimer: This is my personal website.
I tried both the code snippets:
for one with missing code I got this:
for one with proper closing tags I got this:
You can eliminate the scripting time, and there is no network request or additional rendering.
And see the overheads in Paint and Render methods.
"This won't transfer to the FileZilla correctly from Notepad++ the images won't show? I asked the teacher for help, but he doesn't know the material well enough to trouble shoot the problem. Internet Explorer will run the module and the text runs just fine, but Google Chrome say Error 2, and FileZilla won't register the pictures, they only show as black box icons, pls help"
<html>
<head>
<img src="images/images12.jpg" style="padding:6px" align="center" height="400px" width="400px">
<style>
#this is the set up for the text body {
font-family: Papyrus, fantsy;
text-align: center;
}
h1 {
font-family: Papyrus, fantsy;
text-align: center;
}
h2 {
font-family: Papyrus, fantsy;
text-align: center;
}
</style>
header for the home page
<title> Woody's Wondering's</title>
<header>
<h1>Which way did Woody Go?</h1>
</header>
<nav>
<b>
Home
Places To Go
Whats Free
<br>
<br>
Kids....Cheap easy Fun!
<br>
Adults Only
</b>
</nav>
<main>
<h2>You Next Adventure is only a click away!!!</h2>
<p>Welcome to Woody's Wonderings were everything is cheep and easy to find in Ohio.....How Cheap, well pracically 20 dollars to free. </p>
<h2>Meeting all your fun fun needs!!!</h2>
<p>Keeping the site updated with new and improved places & Events year around
</p>
</main>
<footer>
<small><i>
Jessica Harper</i></small>
</footer>
</body>
</html>
Your image is in the head of the html document. Correct structure for html is,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Template</title>
<!–– Style sheets & other importations go here ––>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!–– Your content goes here ––>
<!–– Javascript files go here ––>
<script src="js/scripts.js"></script>
</body>
</html>
From w3schools,
The element is a container for metadata (data about data) and
is placed between the tag and the tag.
HTML metadata is data about the HTML document. Metadata is not
displayed.
Metadata typically define the document title, character set, styles,
links, scripts, and other meta information.
But I tested myself, and the images do work if the image exists in the path. Please check the image exists in the location you have in the img tag.
I am assuming you have uploaded the images along with the html file. If not please upload the images through filezilla to the correct location.
The best way to find what is the issue is to check the browser console. You may find an error saying no image found in path/to/your/image and that is where you have to put your image!
Your HTML is malformed and does not have an opening <body> tag, which could be causing some issues. I'd recommend using the W3C HTML Validator to validate your code.
Errors like this are easier to visually spot if you use some sort of code-formatting/"pretty-print" tool (I like this one).
Notepad++ probably has a plugin for this as well.
I receive XHTML documents that sometimes contain the following code:
<div align="center" />
My problem is that browsers (Firefox 38.0.1, Chrome 43.0.2357.65) display this code as an opening <DIV> tag and not, as I expected, as an empty div (<DIV></DIV>). The rest of the document is, therefore, completely messed up.
Is it a browser bug or an XHTML feature? The code looks perfectly legal (although meaningless, but I am not the producer) and is accepted by XML parsers (Perl XML::LibXML, https://validator.w3.org/check).
You can check what it looks like in your browser with the following XHTML code (validated by https://validator.w3.org). The last DIV is displayed as bordered text, which it shouldn't.
<!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>
<title>Foo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div style="border: 1px solid black; color: red;">
<div />
<div>Should be red and inside the border.</div>
</div>
<div>Should be outside the border and not red.</div>
</body>
</html>
It is the same with an XHTML Strict Doctype.
The solution is, don't do this!
In HTML, a <div> tag is a start tag, no matter if it contains a / or not. The / is viewed as an error and is discarded.
In XHTML, this would be a complete div, yes. However, XHTML files are only XHTML files if they are served up with the application/xhtml+xml MIME type.
It does not matter what the contents of the file are; if the file is served up with a MIME type of text/html, it's a HTML file as far as the browser is concerned.
Plain files with a file name extension of .xhtml are treated as XHTML, .html is treated as HTML. If you are using systems like PHP or ASP.NET etc, you will need to send the appropriate HTTP header for the MIME type, otherwise it will use the default (usually text/html).
I've got this weird issue going on. I'm using Codeigniter 3.0-dev and Smarty 3.1.4 in the backend, but I don't think it's relevant.
I have this really simple html:
<!DOCTYPE HTML>
<html>
<head>
<title>some page</title>
</head>
<body>
asd
</body>
</html>
now. when I view the source of this page, on any browser (tried Opera 10.52, Firefox 7.0.1, Chrome 14 and 15, IE9) the markup is exactly like above. now, when I use firebug or chrome's dev tools it moves the title tag in the <body>, and if I have meta or anything else in the <head>, it moves those items in the <body> aswell. firefox's firebug shows me this:
<html>
<head></head>
<body>
<title>test</title>
asd
</body>
</html>
why does this happen? any ideas, at all?
Elements that appear to be in head in the mark-up, can end up inside body in the DOM, if the parser sees something before the moved elements that is only permissible in the body of HTML. For example, a double BOM (byte-order-mark) at the start of the file may not show up in View Source, but will cause the parser to think that it has entered the html body section, and all the head elements in the mark-up will end up in the body in the DOM.
What Alohci said, plus both Firebug and the Chrome debugger often move things around to suit themselves. The source then looks wrong when viewed in those debuggers.