dynamic css generated with php - style vanishes - help needed please!!

ioloop

i have a style sheet that is generated by php. most of the time this renders ok but ocassionally, when clicking a link on the index page that reloads itself, the page reloads with content present but without any of the style being applied - it appears to be random once every ten clicks or so - is there anything anybody can suggest to rectify this or make sure the style sheet is applied everytime?

thanks for any help 🙂

krotkruton

You'll probably want to supply some code to get any responses. Wish I had something to contribute here, but I'm looking to do the same thing soon but haven't tried it yet. I will be watching this thread for more info though.

bpat1434

Well, Krokruton...

Basically you can just create your php page as normal, and send the header of "Content-type: text/css" before you output anything. Then you can get dynamic CSS!!

And yes, code would be extremely helpful!!

Well, here's some simple steps to follow:

1.) Copy & paste the following into a PHP Document. Save it as "css.php"

<?php
/* Dynamic CSS for phpBuilder */

function rand_color(){
	$car = array('#fff', '#abd', '#069', '#f90', '#000', '#090', '#f7f7f7', '#fe8c96');
	return $car[rand(0,7)];
}

function rand_align(){
	$aar = array('left', 'center', 'right');
	return $aar[rand(0,2)];
}

function rand_int(){
	return rand(5,15);
}

function rand_border(){
	$bar = array('solid', 'dashed', 'dotted', 'groove');
	return $bar[rand(0,3)];
}

function rand_large_int(){
	return rand(100,730);
}

function rand_weight(){
	$war = array('bold', 'normal');
	return $war[rand(0,1)];
}

function rand_med_int(){
	return rand(25,99);
}

$css = '
body{
	background-color: '.rand_color().';
	padding: 0;
	margin: 0;
}

#wrapper{
	background-color: '.rand_color().';
	margin: '.rand_med_int().'px auto;
	width: '.rand_large_int().'px;
	padding: 0;
	border: '.rand_int().'px '.rand_border().' '.rand_color().';
	text-align: '.rand_align().';

color: '.rand_color().';
font-weight: '.rand_weight().';
}';

header("Content-Type: text/css");
print $css;
?>

2.) Copy & Paste the following into an HTML file and save it as index.html

<html>
<head><title>Random CSS</title>
<link rel="stylesheet" type="text/css" href="css.php" />
</head>
<body>

<div id="wrapper">
<br><br><br><br><br><br>
Some general text for randomness!!
<br><br><br><br><br><br><br>
</div>

</body>
</html>

3.) Upload to server, and surf to index.html

It works for me. Totally randomizes the border, colors, alignment, and padding!!

~Brett

ioloop

yes thats what i have done and yes it works BUT it works patchily - i realise what is happening but have no idea how to prevent it....

the index page is called
in most cases the css.php file linked in the header is parsed and the style is applied before the rest of the index page renders
in some cases the rest of the index page is rendering before the server has had a chance to parse the css.php file and feed it to index as a style sheet

what i need is for some means of checking that the style sheet is available (i.e parsed by php) before the rest of the page that uses the style is loaded... ideas anyone??

here is the code in my index.php:

<?php
	session_start();
	error_reporting(E_ALL);	

include_once ("logic.php");

if(!session_is_registered ('coords'))
{
	$coords = create_coords();
	$projects = listdirs('/img');
	$projectsno = count($projects);
	$arrow = get_arrow($projectsno);

	session_register ('coords');
	session_register ('projectsno');
	session_register ('projects');
	session_register ('arrow');

	$HTTP_SESSION_VARS ['coords'] = $coords;
	$HTTP_SESSION_VARS ['projectsno'] = $projectsno;
	$HTTP_SESSION_VARS ['projects'] = $projects;		
	$HTTP_SESSION_VARS ['arrow'] = $arrow;

} 


?>

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 
'http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd'> 
<html xmlns='http://www.w3.org/1999/xhtml'> 
<head>
<link href='counterspace_4_css.php' rel='stylesheet' type='text/css'/>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<title>c o u n t e r s p a c e</title>


</head>

<body>

and here is the code in my css.php file that generates the style sheet:

<?php
	session_start();
	header('Content-type: text/css');

?>

<?php

for ($i = 0; $i < $projectsno; $i++)
{
	$place = $coords[$i];
	echo "	#link$i {
			width: 16px;
			height: 16px;
			position: absolute;
			z-index: 3;
			border: 0px;
			margin-left: $place[0]px;
			margin-top: $place[1]px;}

			";
}
?>

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin:	0px 0px 0px 0px;
	color: #99cccc;
}
.content {
	margin: 0px 0px 0px 0px;
	background-color: #1e120c;
	width: 100px;
	height: 500px;	
	}

#top {
	background-color: #1e120c;
	width: 100%;
	height: 500px;
	position: relative;
	z-index: 3; 
}

help please! 😉

bpat1434

Well, it may stem from something of having PHP & CSS in the same document. Try to use this and see if it helps:

<?php
    session_start();
    header('Content-type: text/css');

?>

<?php

for ($i = 0; $i < $projectsno; $i++)
{
    $place = $coords[$i];
    echo "    #link$i {
            width: 16px;
            height: 16px;
            position: absolute;
            z-index: 3;
            border: 0px;
            margin-left: $place[0]px;
            margin-top: $place[1]px;}

            ";
}

echo 'body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin:    0px 0px 0px 0px;
    color: #99cccc;
}
.content {
    margin: 0px 0px 0px 0px;
    background-color: #1e120c;
    width: 100px;
    height: 500px;    

    }

#top {
    background-color: #1e120c;
    width: 100%;
    height: 500px;
    position: relative;
    z-index: 3;
}';
?>

And it could be that the header is sent and the file isn't done "parsing" yet. To alleviate that, you'd put all your CSS to be echoed into a variable, and then send the header, and echo the variable.

~Brett

Roger_Ramjet

You could just embed the style sheet in the page <head>. That is what one is supposed to do anyway with a page specific style sheet. :p

bpat1434

Actually, just because it's dynamic does not make it page specific. Rather, it makes it session or user specific. And making it an external link is the right move in this case. If the style is page specific, then it goes in the head, yes. But he's generating dynamic css, not static for that one page css.

~Brett

Roger_Ramjet

bpat1434 wrote:
Actually, just because it's dynamic does not make it page specific. Rather, it makes it session or user specific. And making it an external link is the right move in this case. If the style is page specific, then it goes in the head, yes. But he's generating dynamic css, not static for that one page css.

~Brett

Same same same. :rolleyes:

He's generating a css for every page, even if it's the same css for every page in a specific session. If not, if it was just generating a css for the session, then it would only need to be generated once, when the first page was sent for that session. All subsequent page requests would just refer to the same css.

And hey, there is the answer all by itself. Generate and send the css once, and just do the normal thing for the rest of the session. You could store a flag in the session vars that indicates css sent, look for it and don't generate another one.

Now, if this is not the case, if you are generating a css, with different setting each time a page is requested, then each css is page specific and so can and should be embedded in the <head>

Roger_Ramjet

And of course I forgot one thing, the first page sent calls the style sheet from a php script. The browser then caches the style sheet. Does it expire it after a while though?? That would explain why you get the problem intermittently. I've searched but can't find any info either way.

ioloop

what i am trying to do is generate random coordinates for a number of project links that then remain for that user's session - so yes the style sheet is only needed once..

you can see the issue in action here...

index page

click the arrow icons at the bottom and occassionally the whole page disappears and the arrow links appear in a list at the top of the page.

if i embed the style in the <head> tag the problem disappears .. so it is related to the external file link..

i will try the .css flag in session var - how do i check if it has been successfully sent?

thanks for your help btw 🙂

bpat1434

Why not add the CSS into a Session var, and echo the CSS in the head of each document?

i.e.

<?php
session_start();

if(!isset($_SESSION['style']['set']) || empty($_SESSION['style']['set'])){
    $_SESSION['style']['set'] = FALSE;
}

if($_SESSION['style']['set'] === FALSE){\
    include_once('style.php');
    $_SESSION['style']['css'] = create_css();
    $_SESSION['style']['set'] = TRUE;
}
?>
<html><head><title></title>
<style type="text/css">
<!--
<?php
echo $_SESSION['style']['css'];
?>
-->
</style>

~Brett

Roger_Ramjet

Good possibility Brett, if the normal linked style sheet does not work.

You could set the style flag at the end of your css.php script ioloop so that you know the css was generated, but I don't know how you would test if it was received and used by the client. Javascript perhaps??

My solution in cases like this is to look for what works, not what I think should work. Embedding the style sheet in the head of each page will only add a few K to the file size sent, not enough to be worried about. And it should not have any perceivable speed difference on the client. So, what difference does it make which you use? Well, one works and one has problems! No-brainer to me.

ioloop

hehe too true.. and thats probably what i will end up doing - even if i store the style as a var in linked php module and spit it out in the head .. but im a stubborn git and dont like to be beaten by a computer!! 😉

anyway thanks for your suggestions, ill let you know if i crack it 🙂