i wonder if i could embed js and css files above the html document scope:
<script type="text/javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" src="../../media/js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="../../media/css/cupertino/jquery-ui.css" />
<html>
<head>
</head>
<body>
<body>
</html>
this is because i want to put them in same php file where i include all files (php, js and css). i have tried this and it seems to work. the output of the html file will be shown just like the above code, with the include rows above the html tag.
are there any hidden cons in this?
Even if it works, you shouldn't do it. This type of stuff is sloppy, and as such isn't guaranteed to work tomorrow, or in future browsers. If you don't feel the agony of this method now, you will eventually. There's no reason that you should be doing this anyway.
This isn't valid html. The best place to put the javascript would be before the body close (unless there's in-line scripts that need those scripts to be loaded). This prevents blocking as the page loads.
Will not be valid (X)HTML.
This will work in most all browsers, but that's not to say it isn't wrong. It is wrong.
It's not valid HTML, and will confuse just about everyone who comes across your code, and though I don't know what browsers could possibly fail to overcome the inherent wrongness about this style, I make no promises that it will work. In a sense, it should, but in another, it most definitely should not.
Perhaps output buffering will work in this situation? Buffer the output from your "includes" file, then grab the contents of the buffer to output later, after the <html> declaration. Something roughly like this:
In your includes.php file:
<?php
ob_start();
// here is where you output your css and js declarations
$includes = ob_get_clean();
?>
And here is your main page:
<html>
<head>
<title>Hello</title>
<?php echo $includes ?>
</head>
<body>
...
I know this is very old now, but I want to add that Google is recommending to do this in certain cases.
Take a look at this: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example
Any thoughts as to why Google is advocating improper HTML coding?
Related
I'm building a site that allows users to make games within it. I wanted to know if the in the main .html file, could I have a set file that has all the scripts and stylesheets and then link that file in my main .html file? It's kind of like:
index.html
<head>
<link rel="???package???" href="package.php">
<title>Make a Game!</title>
</head>
package.php
<head>
<link rel="stylesheet" href="standard.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
... etc ...
</head>
My main reason for doing it in PHP is so I can control if the current developer is premium or not and if they are, give them a couple more libraries to work with.
looks like you just want to include one file in another so :
include 'package.php';
is all you need, remove the <head> </head> as you don't want them twice
You can use ajax you have to read that file with AJAX and set the output of ajax wherever you want in your html.
But for that you have to echo your whole php file.
In my login system in my site I wanted the user's selected CSS to be loaded after validation was complete. The only problem is that my PHP is located in the body element and I ECHOed the user's CSS link there. I know this is "bad", but what else can I do?
if (isset($_SESSION['loggedin'])){
ECHO $_SESSION['style'];
}
else
{
ECHO 'green';
}
ECHO ".css' />";
The PHP script echos some text in the body after the user is logged in, this is why I cannot put the PHP script in the header.
I'm under the assumption that you're not at all familiar with the basics of PHP, so I'll break it down as simply as I can. If your document is able to execute PHP (which it sounds like it can because you have things happening in the body), all you need to do is wrap the PHP code with <?php and ?> for it to parse as PHP.
You shouldn't put stylesheets inside your body. Indeed, that is something that no one will recommend. What you can do, however, is execute PHP in the head of your document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<?php
echo "<link rel='stylesheet' href='{$_SESSION['user_css']}'>";
?>
<script src="script.js"></script>
</head>
<body>
<?php
echo 'body text';
?>
</body>
</html>
It doesn't matter where you decide to inject PHP code into your document, it will render as you wish. I'd suggest an MVC solution, but if this is just a small, one-off file, feel free to inject PHP wherever you want it, as often as you need it.
http://php.net/manual/en/language.basic-syntax.phptags.php
You can load the user css after the document is loaded using jQuery.
<script>
$(document).ready(function() {
$(head).append('<style>
<?php echo($user_css); ?>
</style>');
});
</script>
Though just adding a section to output the CSS in the head would be easier to maintain in the future and doesn't need the page to load. A dramatic enough change on a slow(ish) connection and the user will see the flicker as the CSS loads their style.
you could use some jQuery to append the style in the <head>:
$(head).append('<style><?php echo user_css ?></style>');
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/homepage.css"/>
<link rel="stylesheet" type="text/css" href="css/header.css"/>
<link rel="stylesheet" type="text/css" href="css/footer.css"/>
<link rel="stylesheet" type="text/css" href="css/navmenu.css"/>
<!-- more css here -->
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/navmenu.js"></script>
<!-- more js here -->
</head>
i have all of that external css and javascripts inside the <head></head> tag in all of my pages and all of that are important in all pages.. is it appropriate to put all of that in a separate file and just include that using php? so if i want to make some changes on those externals it would be easy for me, because it will affect all my pages.. i just want to know if it is a good practice.. thanks in advance
Yes, it is. But why stop there? Ideally you should have all of your repetitive markup in a single file.
There are numerous approaches to sharing common markup in PHP, but the simplest way is to have a global "Top.php" and "Bottom.php" files, like so:
In Top.php:
<html>
<head>
<title><?php echo $pagetitle; ?></title>
<!-- your <meta /> elements go here -->
</head>
<body>
<!-- common page elements go here -->
In Bottom.php:
</body>
</html> <!-- This ensures all of the common markup is closed -->
Then for each page, do this:
<?php $pageTitle = "This page's title";
require("Top.php"); ?>
<!-- put your per-page markup and PHP code here -->
<?php require("Bottom.php"); ?>
Simples.
Now how I use require() instead of include(). The require function is more strict and basically ensures that the included files exist. I think it's better for an application to visibly break than to fail silently.
Save your snippets to separate files and then include() them.
And yes, it is a good practice, but much better is to use some decent templating system.
Look at Latte templating system from Nette Framework
Sure It is good practice. Put this in a separate PHP script ie head.php then include in all other pages using
<?php include('head.php'); ?>
To answer your question straight forwardly.
YES! It is a good practice.
A good programmer will not re-code everything at every page (one of the necessity lead to the invention of CLASS). So. Carry on! :)
Yes, it's appropriate to pull common data like that into separate files. The question really is, now that it's in a separate file, what do you do with it?
You have at least four options.
server-side (host-based) include files
php include statement
php require or require_once statement
make
Server-side includes are generally believed to hurt performance, especially on low-cost (oversold?) shared web hosting servers. There are other issues.
The include and the require statements in php differ mainly in how they respond to missing files. The include statement produces a warning; require produces a fatal error.
The make utility is less commonly used, but it's very useful. Using make, you can include any file within another file, producing output that has static content when it makes sense to have static content, and dynamic content when it makes sense to have dynamic content.
For information like you're talking about, you could use make to produce files in which the stylesheets and javascript references are static (so there's no performance hit), with all the maintainability of a single source file. A properly built makefile guarantees that any change to the stylesheet/javascript file will be incorporated in the next build.
Other text utilities can do some of the same things, especially if you're only talking about file inclusion. (m4, for example.)
I have a HTML file styled with external CSS. It works fine but when I change the HTML file to PHP (with the same code), the CSS seems not working with my PHP file.
The files are almost exactly identical, and they look like this:
<html>
<head>
<link href="css/style.css" media="all" rel="stylesheet" type="text/css"/>
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jqueryactions.js" type="text/javascript"></script>
<script src="scripts/mousetrail.js" type="text/javascript"></script>
</head>
<body>
<!-- content here -->
</body>
</html>
The full code of the HTML and of the CSS, and a diff between the HTML-version and the PHP-version can be found on pastebin:
Full HTML
Full CSS
diff between HTML and PHP
As you can see, the HTML and PHP code are the same. But they give different output. Please help me figure this out.
the html and php code are thesame but they give different output
This isn't entirely true. A PHP will be processed by the PHP interpreter when a HTML won't (by standard/traditional setups).
If you have PHP code in your file, it could have a syntax error which might cause things to not load properly.
With that said, the only PHP code I see is:
<?include('try.php');?>
I'm guessing this could be the problem. Try these steps in troubleshooting:
Change your code to PHP 5 compliance by adding "php" after the first '?' along with an extra space between <?php include... like so:
<?php include('try.php'); ?>
Refresh the page to see if that worked. If it did, it's a syntax issue with your version of PHP.
Comment out the PHP code to see if the PHP page will run as straight HTML.
<?php //include('try.php'); ?>
If this did the trick, there's likely an issue in the try.php file that's causing the issue.
Try those troubleshooting steps to see if that helps. And, as Alex FI points out, add a DocType to your HTML.
I hope that helps!
I currently have a webpage that's taking a while to load. The php side of the page does a lot of data processing and computation, and that's (unfortunately) unavoidable. I would like to display something on the page while the php is processing. Unfortunately, the majority of the page depends on the php computation.
The current solution I have is the following:
The HTML/PHP (beginning):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title id="title">Loading</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="preLoading.js"></script>
</head>
<body onload="onLoad()">
<?php
flush();
?>
<?php
// computation.
?>
The javascript:
document.write('<span id="loading">Please wait... Loading and processing data.</span>');
function onLoad() {
if (document.getElementById) {
var loading = document.getElementById("loading");
loading.style.display="none";
}
}
It works well in the sense that while the page is rendering, there's a little waiting message displayed while the page renders. But it does not work in the sense that the page still waits for all the data to be received before rendering anything. How can I accomplish the latter?
One thing of note: the blank line before the doctype contains 1024 spaces, because I read in some places (including StackOverflow) that browsers wait until reading a certain number of characters before attempting to render anything.
Any ideas would be appreciated. Browsers are filled with arcane tricks and hacks that mystify me.
A better choice would be to have only the page's skeleton sent out, and then fetch the computational expensive data via AJAX calls. That way you can put up a placeholder page and fill in things as they become available.
The upside of this is that you're not dependent on flushing buffers - which do not guarantee that the data will actually be sent to the client, only that the next higher layer in the software stack should get everything that's available right now.
The downside is that now you'll have at least two HTTP requests to generate the page - one to fetch the page's skeleton, and at least one or more for the AJAX request(s) to fetch the "fill in the blanks" data.
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title id="title">Loading</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script type ="text/javascript" src="jquery.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$.get('data.php',
function(output) {
$('#dataDiv').html(output).fadeIn(250);
});
});
</script>
</head>
<body>
<div id="dataDiv"> Please wait while loading... </div>
<?php
// computations placed in data.php file
?>
Please note this requires the use of jQuery and you to move your php computations to the "data.php" file.
Try using
flush(); ob_flush();
as stated in the php manual. This brings the output as close to the browser as possible.
More information about pushing the buffer to the browser can be read in the php manual for flush();
For the beginning try placing the loader message straight after body tag. This way browser should display it asap.
Check configuration for not having compression (e.g. gzip) on by default.
Don't use tables. They are not rendered before fully loaded.
Load the content that takes forever with an Ajax call.
You need to turn output buffering off and implicitly flush output as your PHP process does its job.
You might want to checkout Output Buffering. Also note that flushing the buffer is dependent on the browser and how much it expects before it shows output.
A related question that you might find useful.