ansaurus

Question

Generating dynamic css using php and javascript

Answer 1

+3 A:

You seem to be asking two completely independent questions.

First, the way to pass a parameter would be in your <link> tag:

<link rel="stylesheet" href="css/my_css.php?index=3" type="text/css" media="screen" />

When the page loads, the browser will request the css/my_css.php?index=3 page from your server and use the CSS that gets returned.

However, you're also asking about setting this value with JavaScript. That suggests that you want the CSS to change throughout the request. In that case, PHP is absolutely the wrong technology to be using.

Instead, consider adding classes like:

.tooltip-background-1 {
    background-image: url(../bg_red.jpg);
}

Then you do not need any dynamic content in the CSS file. Just include all four (or more) rules at once, and use JavaScript to change which class applies to the element.

Finally, if you goal is simply to choose a random background color, you could just let PHP choose the random value, eliminating any need for a parameter or for JavaScript and PHP to interact at all.

VoteyDisciple 2010-06-16 19:57:34

Thanks for the answer VoteyDisciple. In case where I need to change the CSS throughout request, how should I go about it?

Onkar Deshpande 2010-06-17 13:55:39

Answer 2

A:

instead of specifying the background image in the css file, try just doing it all with JavaScript. So remove the background-image from the css file and remove all the php and remove the colour (if that is what you want to change when the background image changes), basically anything you need to change, remove from the css and change it with JavaScript.

Then use some code like this:

<html>
<head>
<script type="text/javascript">
var i = 0;

var cols = new Array(8);
cols[0] = "FFFFFF";
cols[1] = "EEEEEE";
cols[2] = "DDDDDD";
cols[3] = "CCCCCC";
cols[4] = "BBBBBB";
cols[5] = "AAAAAA";
cols[6] = "999999";
cols[7] = "888888";
cols[8] = "777777";

var imgs = new Array(8);
img[0] = "img1.jpg";
img[1] = "img2.jpg";
img[2] = "img3.jpg";
img[3] = "img4.jpg";
img[4] = "img5.jpg";
img[5] = "img6.jpg";
img[6] = "img7.jpg";
img[7] = "img8.jpg";
img[8] = "img9.jpg";

function change()
{
 document.getElementById("div").bgColor = cols[i];
 document.body.background = img[i];
 i++;
 if(i > 8)
 {
  i=0;
 }
}
</script>
</head>
<body onLoad="setInterval('change()',1000)">
<div id="div">Tooltip</div>
</body>
</html>

This code loops through the array of colors and background images, it will change once per second. It changes the color of the divs background and the backgrounds image.

Chief17 2010-06-16 20:20:12

Answer 3

A:

I suggest you for improve a part of the code use that:

$bg_image_path = '../bg_';
switch($i)
{
   case 0: $bg_image_path .= 'red.jpg';    break; 
   case 1: $bg_image_path .= 'yellow.jpg'; break; 
   case 2: $bg_image_path .= 'green.jpg';  break; 
   case 3: $bg_image_path .= 'blue.jpg';   break; 
}

shakaran 2010-06-16 20:20:21

ansaurus

tags:

views:

answers:

Generating dynamic css using php and javascript

related questions