One of the most commonly cited arguments against using tables for layout is that it slows down the rendering of a page. The conventional wisdom appears to be that if a page loads slowly, it's better to load the page step-by-step so the user can see what's happening, than it is to wait for everything to be loaded and then render it all at once. Fair enough.
So, how would you achieve this with a slow/cumbersome PHP script? If you have a page that needs to do an insane number of calculations/mysql queries or something, but you want it to show the progress as it works through them? For example..
<?
echo "<p>counting to a million (repeatedly)...</p>";
$foo = 0;
for ($c=1; $c<=10; $c+=1) {
for ($b=1; $b<=10; $b+=1) {
for ($a=1; $a<=1000000; $a+=1) {
$foo+=1;
}
}
echo "<p>still counting... ($c of 10)</p>";
}
echo "<p>all done!</p>";
?>
This code would leave you waiting a while (e.g. 10s), then load all the paragraphs in one go. Is it possible to make it render "still counting..." one by one (e.g. one per second) as the PHP was still executing the rest of the code?
The first part of your question doesn't make much sense. The browser is slow at rendering a page once it has fetched all HTML source. The slow rendering isn't due to PHP. PHP just outputs HTML source code. It can do that with tables as fast as with any other HTML of the same size.
However, when outputting the HTML is slow (regardless of tables or not), you may use the flush command to "flush" the content PHP has rendered so far.
Note though, that there may be buffering in the server software, in the browser, and maybe in other steps inbetween, so it's not guaranteed that every outputted table row will appear right away in the browser.
A different approach would be to use JavaScript to show a 'splash' screen. The disadvantage is that that you cannot tell using JavaScript how far the loading is. Anyway, an example, using a slow loading image.
Right at the start of the body is a script that adds a class to the body. That class makes sure a 'splash screen' (body::before) is shown. When the whole page is loaded, an event fires which removes the splash screen. I used a slow loading image from Deelay.me, but a similar feature could work for you. However, take into account what I said about buffering. It's not guaranteed that the first part of the document is already going to be processed by the browser, even when you use flush().
window.addEventListener("load", function(){
document.body.className = "";
});
body.js.loading::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: table-cell;
font-size: 500%;
vertical-align: center;
background-color: rgba(50,0,0,0.5);
color: white;
content: "Loading...";
}
<body>
<script>document.body.className="js loading";</script>
<p>Chunk of text content before a very slow image.
<p><img src="http://deelay.me/1000/http://deelay.me/img/1000ms.gif">
<p>Chunk of text after very slow image.
</body>
A completely different approach might be to load parts of your page using JavaScript and Ajax. You can load a simple, light page and load the heavier part in a separate request. You could load these in iframes, but that can be a bit icky. Loading them through JavaScript is cleaner, but take into account that you may exclude a small part of your target audience if they don't have JavaScript enabled for whatever reason.
Related
I am thinking about making a forum with users.
When a user uses the Google Chrome web browser and tries to print a part of my web page(Article) can I record that?
For instance, store the information as 1(used CTRL+P) and 0(didn't use CTRL+P).
If you want only track this for statistics purposes then you can use CSS media print that will be triggered only for printing.
https://www.w3schools.com/css/css3_mediaqueries.asp
<div id="print_stats"></div>
<style>
#media print {
#print_stats {
background-image: url(URL_TO_BACKEND_SCRIPT);
}
}
</style>
PHP side depends of your needs - what you want to track.
site in progress: http://www.modernfuture.net/wordpress
I've been trying to maintain cross-browser continuity and I came across a media query hack that targets chrome 1+/safari 3+
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* ... */
}
I've used this to restyle #social .logo-img and .featuredThumb differently in chrome/safari as they were positioning these elements differently than in Firefox 23. Using this awesome bit of code I was able to restyle #social, and .logo-img but not .featuredThumb. My guess for the cause of this is that the .featuredThumb class was generated in PHP but I'm not sure why this is happening.
Here's the piece of PHP code that's generating the .featuredThumb class
<?php the_post_thumbnail(array(287,250), array('class' => 'featuredThumb')); // Declare pixel size you need inside the array ?>
I could really use some assistance with this matter please! Thank you all!!
I think you need to change
top: 92px;
to:
top: -92px;
that works for me. Not sure if this is what youre after :/
In my responsive WordPress theme using Twitter Bootstrap, I'm trying to use a technique similar to CSS Conditional loading but relying on PHP instead of Javascript minimize from so many requests loading.
What I'd like to do is use PHP to detect the :after pseudo element content property to see which element is loading based upon the media query/viewport size of the browser.
Here's example CSS:
body:after {
display: none;
/* Default */
content: "A";
}
#media (min-width: 35em) {
body:after {
content: "B";
}
}
To be very specific, if PHP can detect that content: "A" is active, it will load custom_mobile_content() hook which renders mobile content. If it detects content: "B", it will load custom_desktop_content() hook which renders more desktop content.
I tried using the javascript version but it requires I put a large block of formatted HTML into a javascript variable and upon rendering of the page there's a huge block of text that's inactive and unused on the page contained within the javascript. PHP seems to be a better fit.
Is there code which can produce this easily?
EDIT: It appears that I'd have to pass a JS variable or function to PHP in order for this to work, and I suppose that's pretty complicated.
Here's the javascript I'm trying to work with:
$(function() {
var currentSize = "A";
$(window).resize(function() {
var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content');
/* Ridiculous thing to deal with inconsistent returning of
value from query. Some browsers have quotes some don't */
size = size.replace(/"/g, "");
size = size.replace(/'/g, "");
if (size != currentSize) {
if (size == 'B') {
$(".content").load('<?php custom_hook(); ?>');
currentSize = 'B';
}
}
}).resize();
}
I've included the above code in the WordPress page itself because it doesn't need to be cached in a file. It is only used once and on this page. However, the problem with this is that the custom_hook() code is rendered on the page and that hook includes a bunch of markup. If the javascript determines that I'm using A, all that markup is on the page in the source code for no reason. I want to find a way to prevent the custom hook from rendering UNLESS it's being used in B. Hope that makes sense.
At the moment there's no reliable way to detect pseudo-elements, even in JavaScript. They have no CSS Object Model (CSSOM). PHP can't help you in this situation either because it acts only server-side.
For an alternate workflow, you can use JavaScript to find out which media query is currently active. Based on this you can load other resources if necessary.
See this article on MDN for details on how to work with media queries from JavaScript.
coding a responsive site I want to implement a switch between a mobile version and a standard desktop version like the Wikipedia site does.
For this I should have to re-load the current HTML file but force it to use the CSS file for desktops although it is on a mobile screen such as an iPhone.
Is there any possibility to do so? I think Wikipedia uses PHP. But perhaps there is also a way with JS.
I would be very thankful for help. Thanks in advance.
#media handheld {
#foo { position: static; }
}
http://www.w3schools.com/css/css_mediatypes.asp
I think with USER_AGENT you can find if the user is using the site using web or mobile.
Detect the user agent look for some specific information and on the basis of that load different css
$_SERVER['HTTP_USER_AGENT'];
You could also use a php script that checks for the end device, loading a corresponding css file, or even a completely different html document. I worked from this script.
<style>
#media screen
{
p {font-family:verdana} //an example with a paragraph
}
#media handeld
{
p {font-family:arial} //an example with a paragraph
}
</style>
This should work for both!!
read up http://www.w3schools.com/css/css_mediatypes.asp
I have a small problem with my PHP code and It would be very nice if someone could help me. I want to display an image when hovering over a link. This is the link with the PHP code that I have now:
<?php if ( has_post_thumbnail() ) {the_post_thumbnail();} else if ( has_post_video() ) {the_post_video_image();}?>
This code shows a image, but I want to execute this code when hovering over the link with the image:
<?php echo print_image_function(); ?>
The code also shows a image that belongs to a category. I don't want the initial image to disappear I simply want to show the second image on top off the first image when hovering over the first image.
I don't know if it is helpful but I use Wordpress and I am not a PHP expert. I even don't know if this is going to work. Thats why I am asking if somebody can help me with this.
Thanks in advance
THANKS EVERYONE
I want to thank everybody that took the time to read my post and helped me by giving their solution.
I didnt exspect so many answers in such a fast time. After spending a few hours trying it to get it to work with PHP, CSS and Javacript, I stumbled upon the following question on this website: Solution
It was exactly where I was looking for and with a few modifications to fit my needs, I got it to work. Sometimes things can be so easy while you are looking for the hard way. So for everyone that has the same problem: You can use one of the solutions that where given by the awesome people here or take a look at the link above.
Thanks again! :)
You can do this with CSS (if you so please and this fits with your overall architecture) - here is an example using the :hover condition and :after pseudo element.
html
<img src="http://www.gravatar.com/avatar/e5b801f3e9b405c4feb5a4461aff73c2?s=32&d=identicon&r=PG" />
css
.foo {
position: relative;
}
.foo:hover:after {
content: ' ';
background-image: url(http://www.gravatar.com/avatar/ca536e1d909e8d58cba0fdb55be0c6c5?s=32&d=identicon&r=PG);
position: absolute;
top: 10px;
left: 10px;
height: 32px;
width: 32px;
}
http://jsfiddle.net/rlemon/3kWhf/ demo here
Edit:
Always when using new or experimental CSS features reference a compatibility chart http://caniuse.com/ to ensure you are still in your supported browsers. For example, :after is only supported starting IE8.
You cannot randomly execute server side code on the client side.
Try using javascript AJAX requests instead.
PHP is a server-side language; you can't get PHP to execute after the page has loaded (because PHP completely finishes parsing before the page loads). If you want hover events, you need JS.
Firstly you don't need the elseif statement. An else will serve the same purpose, unless you intend to have blank tags where neither a thumbnail or a video image are present.
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() )
{
the_post_thumbnail();
}
else
{
the_post_video_image();
}
?>
</a>
You can't explicitly use PHP for client side functionality. You will need to use javascript or jquery to supply the on hover capability.
Jquery example:
$(function() {
$('a').hover(function() {
// Code to execute whenever the <a> is hovered over
// Example: Whenever THIS <a> tag is hovered over, display
// the hidden image that has a class of .rollover
$(this + ' .rollover').fadeIn(300);
}, function() {
// Execute this code when the mouse exits the hover area
// Example (inline with above example)
$(this + ' .rollover').fadeOut(300);
});
});
To have an image placed on top of another image you would need to make sure your CSS uses absolute positioning for the images with the image that is to overlay the other on hover is given a z-index value higher than the image to sit underneath it.
Hope this helps.
You'll need some JavaScript and/or CSS to make this work, since PHP is on the server side, not in the client browser.