I've made a mobile version of my site. When loading the page however, the site is first shown without the CSS applied, and after a second (at most) it applies the CSS and renders it properly. This behaviour is consistent across all browsers (including mobile ones).
Do you have any idea, how I could force browsers to load the CSS first (which is really tiny in size) and then render the content? I've seen something about including the CSS files outside the head, but as far as I know it's against the specs, and I am afraid such hack may brake things on some mobile browsers.
Thanks!
Update
Here's the source
<?xml version="1.0" encoding="UTF-8"?>
<!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>Albite BOOKS mobile</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<meta name="description" content="Free e-books for Java Mobile phones."/>
<meta name="keywords" content="free ebooks, free books, book reader, albite reader, albite books, java mobile"/>
<meta name="language" content="en_GB"/>
<meta name="classification" content="public"/>
<link rel="shortcut icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href="/stylesheets/mobile.css?1289644607" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- .... -->
</body>
</html>
I believe I have found a better way to handle this...
At the top of your output file put the following:
<body>
<div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div>
...
</body>
Then on the last line of your last loaded CSS file put:
#loadOverlay{display: none;}
This basically uses the problem against itself. The first bit of displayable html that is loaded places a blank canvas over top of everything while CSS loads and processes, the last bit of CSS to load and process removes the canvas. From my testing this solves the problem completely.
Have you ever used requirejs?
you could set after your
requirejs.config(<confObj>);
something like this
require(Array[<all your CSS & JS >]);
requirejs will do the cache (like) stuff for you!
requirejs api
You can ensure that an HTML element isn't displayed until its CSS is loaded with this simple technique:
// CSS
#my-div { display:block !important; }
// HTML
<div id = "my-div" style = "display:none;">
<p>This will be display:none until the CSS is applied!</p>
</div>
Because the div tag has display:none as an inline style, it will not be displayed until after the CSS is applied. When the display:block !important rule is applied, the div's inline style will be overridden and the div will appear fully styled.
Nathan Bunney - good idea that ispired me, but i think better way is to remove overlay with javascript after document is fully loaded.
$(document).ready( function() {
$("#loadOverlay").css("display","none");
});
Browsers read code from the top to the bottom, so the higher the code is on page, and how compact the code is, will affect the load time on the page. You can't really pre-load it like you would with images or something, so I would really look into caching the file, it's probably the best solution. Sorry theres no better alternative for this. But to be honest, one second load time isn't really too bad.
Related
I am creating mvc4 application. I want to set background in layout.cshtml. Issue is that my background image is repeating even after setting a tag of background-repeat:no-repeat. I Google it a lot and tried different approaches told there. But none of them helped me out. Any help in this regard? My background image is paced in the Images folder created in my app. Here is the simple code of my layout.cshtml file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="bootstrap.css" rel="stylesheet" />
<script src="bootstrap.js"></script>
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body style="background-image:url(Images/blue.jpg)" "background-repeat:no-repeat">
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
You error is in the line:
<body style="background-image:url(Images/blue.jpg)" "background-repeat:no-repeat">
in which you're using too many ".
You need to use semi-colons instead to differentiate between one style and the next. So instead, make it:
<body style="background-image:url(Images/blue.jpg); background-repeat:no-repeat">
for it to work.
Side Note
Styling inline is generally avoided, as it leads to multiple problems from a css point of view. Try setting this inside your css file instead.
Your css would then include:
body{
background:url(Images/blue.jpg);
background-repeat: no-repeat;
background-size:100%; /*if you wanted to 'fill' the page to max size without cropping*/
}
DEMO
To completely 'fill' the page, you need to add a size to your html as well,
DEMO
Give inline style as follows:
<body style="background-image:url(Images/blue.jpg);background-repeat:no-repeat;">
The problem is to, you need to put the single quotations between inside the url also you missed one forward slash as well.
<body style="background-image:url('/Images/blue.jpg'); background-repeat:no-repeat;">
for an application I am showing emails that have been sent out, and some of them (as stored in my system) or multipart/html, so the content will normally be something like
<!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" />
etc..
I need to have a div at the top something like this that does not interfere with the HTML content:
<div id="stats"> (list subject, to, from, date, etc) </div>
It's an app obviously, so not publicly viewable. It only needs to work in a few browsers, and yes, it may use jQuery in the future - so I wanted to ask the community if there are any things to consider or accommodate when putting HTML elements ABOVE the actual and tags.
Place the element immediately within the <body> element. Otherwise, the browser will likely do this for you. Placing it outside the <html> element is invalid. If you wish for the elements to be hidden, hide them with CSS.
<!DOCTYPE html>
<html>
<head>
<title>Hidden Element</title>
</head>
<body>
<div hidden>This is hidden.</div>
</body>
</html>
The above uses the hidden attribute. It's presently not well supported, so you may prefer to use display:none instead.
What you are doing may work most of the time, but it will lead to invalid HTML, and may cause unexpected behaviour further down the line. Even though it will probably work, I wouldn't advices it.
The better approach is, as Jonathan already says, to place the element directly inside the body element.
To avoid it overlapping the other content, you could force something like margin-top: 80px on the body.
Seeing as E-Mails are unlikely to contain anything funky like absolutely positioned elements (that would collide with your info bar), that should work for the vast majority of cases.
Firstly, I've done some Google'ing and found the IE 'conditional comment' and understand it's non-standard. I also get the impression there is no standard HTML 'IF' so my question is about what I need to do to achieve the same effect (Javascript perhaps?)...
I'd like to conditionally include an external .html file (from a selection of external .html files). Specifically, the external files each contains nothing but a <meta> element on a single line. Alternatively is it possible to have multiple inline <meta> elements in a HTML file and to 'choose' one conditionally (effectively ignoring the others)?
Basically, can I do something that would achieve the same as one of either of these pseudo code examples?
Example using pseudo code for external files...
<html>
<head>
if some-condition
<!--#include file="meta1.html" -->
else
<!--#include file="meta2.html" -->
...
</head>
...
</html>
Alternative example (again pseudo code) for selecting alternative elements directly...
<html>
<head>
if some-condition
<meta name="viewport" content="abc" />
else
<meta name="viewport" content="def" />
...
</head>
...
</html>
NOTE: In all cases the <meta name attribute will always be viewport - it's just the content attribute which needs changing perhaps with some other attributes.
EDIT: The main condition would be the type of client. One example is that to help correctly size web app pages on an Android device you can use certain content data for the viewport that only Android devices understand. For conventional browsers, I would set a default set of data for content (for width/height for example). This could also be expanded for other clients such as Google TV, iOS etc etc.
Using Javascript:
document.head.insertAdjacentHTML( 'beforeEnd', '<meta name="viewport" content="abc" />' );
Demo: http://jsfiddle.net/ThinkingStiff/ccX5p/
You could do this with javascript / jQuery quite easily.
Set your conditions and then append() to the head.
Example:
if(//condition here){
$('head').append('<meta name="viewport" content="abc" />')
}
else{
$('head').append('<meta name="viewport" content="def" />')
}
if you are using a server side, like asp or java, the thing becomes lot easier for you.
i shall consider you are not using server side coding.
use javascript for getting the browser name (navigator.appname I guess).
then you may use DOM to add <meta ..../> tags inside <head> element.
document.getElementsByTagNam('Head').appendChild(metaChild);
This is a question more out of curiosity rather than being stuck. I know in html id needs to be unique and I can see the error in html validation. Yet the browsers happily apply style sheets to both elements. Is it because they are more relaxed in parsing or what. Does that mean I can use this for styling etc or does it have side effects.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
#abc { color: red; }
</style>
</head>
<body>
<div id="abc">Hello Div 1</div>
<div id="abc">Hello Div 2</div>
</body>
</html>
Output in browsers.
If your browser died every time it loaded an HTML page with errors, it'd be dying all the time. And you wouldn't think very much of the browser.
It's important for a browser to be as forgiving as possible and work as best it can with what it has. For this reason, all browsers tend to be very lenient in how they handle markup.
Of course, that doesn't mean you shouldn't write valid HTML.
I would not rely on that behaviour. Having two elements with the same ID is just wrong as you already know.
And yes, the tolerate errors in HTML to some extend and try to compensate. For example missing closing tags. This works more or less good, depending on the error.
Styling several elements should be done with CSS classes.
use "class" for adjusting css.
side effect: you'll feel less comfortable when you want use getElementById and add dynamic functionality. from design perspective doesn't matter.
I am using DreamWeaver to code xHtml docs. in the program the code is valid but when I upload it in the inspect element I see double <head> tags and when I right-click to see the source file it seems o.k.
Is it because I'm using dreamweaver? what can be wrong?
the first error is : "Extra <html> encountered. Migrating attributes back to the original <html> element and ignoring the tag." - in line 3
The 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" />
<meta name="keywords" content="the content of my doc" />
<meta name="description" content="this is an example document" />
<link rel="alternate" type="application/rss+xml" title="rss feeds" href="linkto/xml/feeds.xml" />
<!-- scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>The Title</title>
</head>
<body>
<!-- content -->
</body>
</html>
Thank you very much.
No problem in Chromium 5.0.307.9 (Developer Build 39052) under Linux. I can't test it in Safari now.
EDIT: Proposed test case had nothing to do with this problem, neither could see any extra <head> tags. However, I looked at the Developer Tools of Safari and Chrome under Windows and Firebug in Firefox and all three rendered the DOM incorrectly. Just have a look at this picture and see that the first <link> tag has jumped into the body.
This problem also has nothing to do with Javascript because when turning off Javascript the result is the same, even more clear when comparing with the source code. Strange I didn't notice this under Linux.
The Developer Tools of the WebKit browsers give an even clearer picture (also notice the jQuery error message). I suspect the Unicode Byte-Order Mark (BOM) at the beginning of the file causing the problem: as you can see the BOM is moved to the <body> of the document, perhaps dragging several elements in the <head> with it. But also the unclosed <link> elements, as shown by the W3C validator, might give some issues, although browsers usually handle this without any problems. First get rid of the BOM in your file and see if the problem persists.
And I see another error: those tags beginning with <meta ... are called meta tags, not "meat tags". ;-)
You should have a title element what you write between
the <title></title> tags will been displayed in top bar of your browser
Just make sure your
</head>
tag has the slash in the actual file you're working on. That's an easy typo.
To remove BOM from your document, you can use this php function:
function removeBOM($str=""){
if(substr($str, 0,3) == pack("CCC",0xef,0xbb,0xbf)) {
$str=substr($str, 3);
}
return $str;}