Dynamic CSS with PHP

[wtfsmd]

Hey guys I am making a "Progress" bar and i am having a little trouble here is my code.

 

<style type="text/css">
#progress-bar {
	background: url(img/percentage-bg.png) no-repeat left center;
	width: 50px;
	height: 10px;
}
#progress-level {
	background: url(img/progress.png) no-repeat left center;
	 <?echo "width: 24%;";?>
	height: 10px;
}

 

this works just fine focusing on the <?echo "width: 24%;";?> but if i put in:

<?echo "width: " . $relevance . "%;";?> it now longer works as intended. when i look at the source code it shows what you would expect:

#progress-level {
	background: url(img/progress.png) no-repeat left center;
	 width: 50%; height: 10px;
}

 

Anybody have any idea why this does not work as intended? the value of relevance is and will always be numerical between 0 - 100

[ToonMariner]

Not sure why you are doing this...

 

progress bars would normally demand the use of javascript - use that to manipulate the width based on an ajax request.

 

styles soul dbe in external css files - if ypou desperately need to amend some style based on the  computations performed by php then look at using the style="width: <?php echo $width; ?>;" attribute.

[wtfsmd]

Im using it like this because i am parsing XML not storing it to a database or anything ... it just seemed like it would be the easiest way to me and it works great except for the fact that it doesn't work with the echoed variable =/ lol

[trq]

Can you post the relevent code.

[wtfsmd]

Prepare yourself ...

 

mainSearch.php

<?php // Main Search page
?>
<div id="input-form">
<form  method='post' action='<?$_SERVER['php_self']?>'>
Char Name: <input class="tb" name="username" type="text" size="20" value="<?php echo $_POST["username"];?>" title="Enter your desired username here"/> 
Battle Group: <input class="tb" name="battlegroup" type="text" size="20" value="<?php echo $_POST["battlegroup"];?>" title="Enter your battlegroup here"/> 
<input id="search-button" type="submit" name="search" value="Search" title="Click here to Search WoW Armory"/>
</form>
</div>	
<?php
if(isset($_POST['search'])) {
$input_char_name = $_POST['username'];
?>
<table width="100%" border="0">
<tr>
<th>Name</th><th>BattleGroup</th><th>Class</th><th>Faction</th><th>Gender</th><th>Race</th><th>Guild</th><th>Level</th><th>Realm</th><th>Relevance</th><th>Search Rank</th>
</tr>
<?php
// Crawl WoW Armory and download into an XML file
ini_set("user_agent", "Mozilla/5.0 Gecko/20070219 Firefox/2.0.0.12");

// Main Search Page
$url='http://www.wowarmory.com/search.xml?searchQuery=' . $input_char_name . '&searchType=all';

// Get contents of the url
$xml = @file_get_contents($url);
if ($xml==TRUE) {
// Create a file called arena.xml
$datei = fopen("arena.xml" , "w+");
fwrite($datei, $xml);
fclose($datei); 

// Begin parsing of the XML file
if (! ($xmlparser = xml_parser_create("UTF-8")) )
{ 
   die ("Cannot create parser");
}
$current = "";
function start_tag($parser, $name, $attribs) {
   global $current;
   $current .= $name;

   if (is_array($attribs)) {
      while(list($key,$val) = each($attribs)) {
	// Names of the xml nodes
	if ($name == "CHARACTER"){ 
			if ($key == "NAME") 		{	if ($val == "") {} else { $char_name	= $val;	}}
			if ($key == "URL")			{	if ($val == "") {} else { $char_link	= $val;	}}
			if ($key == "BATTLEGROUP")	{	if ($val == "") {} else { $battleGroup	= $val;	}}
			if ($key == "CLASS") 		{	if ($val == "") {} else { $class		= $val;	}}
			if ($key == "CLASSID") 		{	if ($val == "") {} else { $classId		= $val;	}}
			if ($key == "FACTION")		{	if ($val == "") {} else { $faction		= $val;	}}
			if ($key == "FACTIONID")	{	if ($val == "") {} else { $factionId	= $val;	}}
			if ($key == "GENDER")		{	if ($val == "") {} else { $gender		= $val;	}}
			if ($key == "GENDERID") 	{	if ($val == "") {} else { $genderId		= $val; }}
			if ($key == "RACE") 		{	if ($val == "") {} else { $race			= $val; }}
			if ($key == "RACEID") 		{	if ($val == "") {} else { $raceId 		= $val; }}
			if ($key == "GUILD") 		{	if ($val == "") {} else { $guild		= $val; }}
			if ($key == "LEVEL") 		{	if ($val == "") {} else { $level		= $val; }}
			if ($key == "REALM") 		{	if ($val == "") {} else { $realm		= $val; }}
			if ($key == "RELEVANCE")	{	if ($val == "") {} else { $relevance	= $val; }}
			if ($key == "SEARCHRANK")	{	if ($val == "") {} else { $searchRank	= $val; }}
	} 	
      }
    }
    if ( $_POST['battlegroup'] == $battleGroup ) {
	include('searchTable.php');
}
}


function end_tag($parser, $name) {
}
xml_set_element_handler($xmlparser, "start_tag", "end_tag");


function tag_contents($parser, $data) {
global $current;
}
xml_set_character_data_handler($xmlparser, "tag_contents");

$filename = "arena.xml";
if (!($fp = fopen($filename, "r"))) { die("cannot open ".$filename); }

while ($data = fread($fp, 4096)){
   $data=eregi_replace(">"."[[:space:]]+"."<","><",$data);
   if (!xml_parse($xmlparser, $data, feof($fp))) {
      $reason = xml_error_string(xml_get_error_code($xmlparser));
      $reason .= xml_get_current_line_number($xmlparser);
      die($reason);
   }
}
xml_parser_free($xmlparser);
}
?>
</tr>
</table>
<?php
}
?>

 

searchTable.php

 

<tr><?php
	if ($char_name == "") {} else { 
	echo "<td width='10%'>";
	echo $char_name;
	echo "</td>";
	}

// 		echo $talent;
// 		echo $char_link;

	if ($battleGroup == "") {} else { 
	echo "<td width='10%'>";
	echo $battleGroup;
	echo "</td>";
	}
	if ($class == "") {} else { 
	echo "<td width='15%'>";
	echo $class;
	echo "</td>";
	}
// 		echo $classId;

	if ($faction == "") {} else { 
	echo "<td width='10%'>";
	echo $faction;
	echo "</td>";
	}
// 		echo $factionId;

	if ($gender == "") {} else { 
	echo "<td width='10%'>";
	echo $gender;
	echo "</td>";
	}
// 		echo $genderId;

	if ($race == "") {} else { 
	echo "<td width='10%'>";
	echo $race;
	echo "</td>";
	}
// 		echo $raceId;

	if ($guild == "") {
	echo "<td width='20%'>";
	echo "</td>";	
	} else { 
	echo "<td width='20%'>";
	echo $guild;
	echo "</td>";
	}
	if ($level == "") {} else { 
	echo "<td width='5%'>";
	echo $level;
	echo "</td>";
	}
	if ($realm == "") {} else {
	echo "<td width='10%'>";
	echo $realm;
	echo "</td>";
	}
	if ($relevance == "") {} else {
	?><style type="text/css">
#progress-bar {
	background: url(img/percentage-bg.png) no-repeat left center;
	width: 50px;
	height: 10px;
}
#progress-level {
	background: url(img/progress.png) no-repeat left center;
	 <?echo "width: " . $relevance . "%;";?>
	height: 10px;
}

	</style><?php
	echo "<td>";
	echo '<div id="progress-bar">';
	echo '<div id="progress-level"></div>';
	echo '</div>';

	echo "</td>";
	}
	if ($searchRank == "") {} else { 
	echo "<td width='5%'>";
	echo $searchRank;
	echo "</td>";
	}
?>

 

yeah i know there needs to be some work done ... lol

[dgoosens]

this might be easier if you do not do the "dynamic" part in the CSS...

 

something like this should be much easier:

 

echo "<div id=\"progressbar\" style=\"width:$relevance\"></div>";

[wtfsmd]

That last method did not work.

 

sorry thorpe read your post wrong here it is ...

 

 if (is_array($attribs)) {
      while(list($key,$val) = each($attribs)) {
	// Names of the xml nodes
	if ($name == "CHARACTER"){ 
			if ($key == "RELEVANCE")	{	if ($val != "") { $relevance	= $val; }}
			if ($key == "SEARCHRANK")	{	if ($val != "") { $searchRank	= $val; }}
	} 	
      }
    }

the magic happens right in there ... where RELEVANCE is