This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Progress bar layout using CSS and HTML
I'm making a game that involves energy, EXP, level, missions, etc. Well, When you do missions it costs energy and you recieve cash and EXP once you do a mission. Well, it requires EXP to level up. Leveling up works, but I'm wanting to add a progress bar to show how close you are to level up. An example is Exp: 26,175/27,100. Each time you level the max_exp raises up 250, but was wanting a bar behind the text to show how close they are to level up instead of just seeing text. Here's the leveling coding below..
<?php
if ($exp >= $max_exp)
{
$sql = "UPDATE users SET level=(level + 1) , max_exp=(max_exp + 250) WHERE id='".$id."' LIMIT 1";
$res = mysql_query($sql);
if ($exp >= $max_exp)
echo '';
}
else
{
}
?>
You can echo your ratio as inline css.
An example:
css:
div#value
{
display: block;
z-index: 2;
height: 10px;
}
php/html:
$value = 35;
//this line will give you "width: 35%"
<div id="value" style="width:<?php echo $value; ?>%;">
It's just an HTML/CSS issue: make a table with just one row and TWO column (say one fullgreen, one white), then move the width ratio of the two columns according to your value
Related
I am not sure how to ask this question. If I knew exactly what to look for, I might not have to post here. I will explain the situation, I hope you guys can tell me what exactly to look for(or what type of function).
This is a code I am working on -
$walkaround_pages = 15;
$walkaround_page = $_GET['walkaround_page'];
for ($wp = 1; $wp <= $walkaround_pages; $wp++) {
echo '<a class="pagination_links'.(($wp==$walkaround_page)?' current_page':"").'" href="/panel/?walkaround_page='.$wp.'">'.$wp.'</a>';
}
This generates pagination links. When the number of total pages($walkaround_pages) are more than 10, it can't fit in the mobile devices. So I want to make something like if current page ($walkaround_page) is let's say 7, it will only show 3 numbers before (4,5,6) and 3 numbers after(8,9,10) instead of showing all the numbers 1 through 15.
Can anyone please tell me what exactly I am looking for?
You can work out the start and end parts of the loop relative to the page your currently on and just loop over that...
$walkaround_pages = 15;
$max_gap = 3; // How many pages before and after you want
$walkaround_page = $_GET['walkaround_page'];
$start = max(1,$walkaround_page-$max_gap);
$end = min($walkaround_pages,$walkaround_page+$max_gap);
for ($wp = $start; $wp <= $end; $wp++) {
With start, it's a case of subtract the number of items, but make sure that 1 is the lowest it can go, similar with end is add the number of pages but limited to the total number of pages.
Just add a condition before you echo
if( abs($wp - $walkaround_page) <= 3){
echo '<a class="pagination_links'.(($wp==$walkaround_page)?' current_page':"").'" href="/panel/?walkaround_page='.$wp.'">'.$wp.'</a>';
}
the abs function will return the absolute value so it returns positive number if it is one of the 3 smaller or bigger numbers than the current page
see live demo
Here is a CSS example using the #media rule.
The great part about this is you could make it a very fluid design. For example, when a user rotates their device, the extra links will be displayed.
Same if the the user resizes a browser window.
.wide a, .narrow a {
padding:0px 0.5em;
}
.wide a:hover, .narrow a:hover {
color:#fff;
background:#345;
}
/* this would be in your #media rule */
/* #media screen and (max-width: 480px) { */
.narrow a:nth-of-type(n+6) {
display:none;
}
/* } */
<p>For demonstration only</p>
<div class="wide">
1 2 3
4 5 6
7 8 9
10
</div>
<p>Below is all you would have</p>
<div class="narrow">
1 2 3
4 5 6
7 8 9
10
</div>
(This has now been resolved - thanks #ChelseaStats)
I have built a web page in PHP. users log in and upload photos and stories, and the page displays the stories and photos immediately.
The problem is that the photos that the MySQL query and PHP return from the database are being displayed all over the place. I have printed them out in an id’d div but the CSS is having no control over their positioning.
Currently the query is like this:
$q1 = "SELECT * from images ORDER BY date ASC";
and they are displayed like this...
row1 = #mysqli_query($dbc, $q1);
echo '<div id = "pictures">';
while ( $fix1 = mysqli_fetch_array($row1) ) {
echo '
<img style = "border: 1px solid black; padding: 10px;" height = "80" width = "80" src = "data:image;base64,'.$fix1['image'].'"><br>'.$fix1['image_id'].'
';}
echo '</div id = "pictures">';
What I would like to do is store all the 'while loop' programming in a variable, then print that variable out elsewhere on the HTML page away from php script so that when the database query is run, I can use the results to fill/initialize the variable (e.g. $displayPics) which will then be printed out on the html page where I want it to appear.
I realise this may be impossible and I am open to suggestions...
...or I might be willing to run a query with a limit of 20 giving results in descending date order and then assigning ‘loop-free’ PHP code to a variable which I can then print out on the page elsewhere.
Code could look something like this:
row1 = #mysqli_query($dbc, $q1);
$fix1 = mysqli_fetch_array($row1);
$displayPics = '
<img style = "border: 1px solid black; padding: 10px;" height = "40" width = "40" src = "data:image;base64,\'.$row1[$fix1[\'image\']].\'"><br>\'.$row1[$fix1[\'image\']].\'
';
(Above code is a shot at how I imagine it will look). (I think the img src code and html has been filtered out by the forum possibly).
But maybe this code will be repeated 20x in the variable with row number changing for each subsequent repetition perhaps?
(I basically want better control over the positioning of the pics coming back from the database).
in a foreach you can assign to a variable like this
$bob = ''; // set it
foreach($row as $image) {
// append to it
$bob .= '<div id=""><img src="" /></div>'.PHP_EOL;
}
print $bob;
similar would work for you.
if you use Bootstrap- you can assign a display class as it is rendered. The following will display each image as follows (4 across on a medium to large viewport, 3 across on a small viewport, and two across on a mobile sized viewport). Also note the use of figcaption to provide the caption on each image.
row1 = #mysqli_query($dbc, $q1);
while ( $fix1 = mysqli_fetch_array($row1) ) {
echo "<div class='col-md-3 col-sm-4 col-xs-6'>
<figure>
<img style = 'border: 1px solid black; padding: 10px;' height = '80' width = '80' src = 'data:image;base64,".$fix1['image']."'/>
<figcaption>".$fix1['image_id']."</figcaption>
</figure>
</div>
";}
Simply write a function that returns all of the rows into an array of assoc arrays and loop through them when you need them elsewhere in the code and use conditional tests on the rows to have better control over where they go!
function getImages(){
$imgs = array();
while(($next = mysqli_fetch_assoc(...)){
array_push($imgs, $next);
}
return $imgs; //array of assoc arrays
}
Basically I am createing a unknown size of checkboxs that is dependent on the row that is chosen from a table in my database. The reason I dont know the size is that the user chooses which row they will use with some rows containing what will become 10 checkboxs adn others containing as many as 75. So the problem is that if the user selects a row with a large amount of options it goes through the border of my div and then forces me to scroll the page down what I am looking for is a way to say >
if(number of checkboxs is >25 )
create a new column on my page
I dont know whether the right way to go about this is to use php or javascript or possibly do it using css I am new to all of these languages so any help no matter how trivial will greatly appreciated.
<div id="major1">
<?php
$courses=mysql_query("SELECT * FROM MAJORS_CHECKLIST WHERE MAJOR='$major'");
$courses_row=mysql_fetch_row($courses);
$count = 0;
echo "$courses_row[0] <br/>";
$checkit = 0;
$sidebyside = 0;
foreach($courses_row as $i=>$courses_row){
if($courses_row['$count'] == NULL)
{
break;//if we run out of courses stop printing them
}
if($courses_row[$count] == $courses_row[0] && $checkit == 0 )
{
$checkit = $checkit + 1;
}
else
{
echo "<input type='checkbox' value='$courses_row' name='majorCourses[]' /> ";//answer-$i
echo "$courses_row<br /> ";
}
$count = $count + 1;
/*$sidebyside++;
if($sidebyside == 2)//tried using this to put 2 checkboxes side by side that ened up just messing everything up
{
echo "<br/>";
$sidebyside = 0;
}*/
}
?>
here is my css:
#major1{
color: white;
/*border: 1px solid black;*/
padding: 5px;
float: left;
height:500px;
width:150px;
}
Producing a bunch of checkboxes in the div can be controlled using CSS. Should set the parent div of the checkboxes to the following rules: width:auto; height:auto; padding:10px 10px; position:relative; This is all assuming that the parent div of the checkboxes is a child of another div to control the preferred dimensions
edit: if you do not want to want to use css with the methods above, you can control the "X" amount of checkboxes per row. You can create a counter to count how many are being displayed and do a if($counter % X == 0) echo "</div><div>"; This is all assuming you have a starting div at the beginning of your code and an ending div at the end of the code.
I am wondering if it's possible to create a grid-like layout using div's that are dynamically created using PHP.
I am creating a product page that will display all products in a PHP database. I want each product to be housed in a div, and 3 divs to display in a row with as many rows as needed to get through all the products.
Something like this:
div div div
$row['product1'] $row['product2'] $row['product3']
div div div
$row['product4'] $row['product5'] $row['product6']
I would prefer not to use a table. I know how to line divs up using the float and clear properties, but not if they are all being created in a while statement, which makes me think it might not be possible.
So I guess, is this possible without using tables, or should I just stick with that?
This can be done the way you ask, though it isn't the best way. It's entirely possible to identify the <div> positions within columns in a while loop:
// Looping over your results simplified...
$i = 1;
while ($results) {
if ($i % 3 == 1) {
$div_class = 'left';
}
else if ($i % 3 == 2) {
$div_class = 'middle';
}
else {
$div_class = 'right';
}
$i++;
// output, simplified
echo "<div class='$div_class'>$row_contents</div>";
}
Then use your CSS to float and clear as necessary for the left, middle, right classes.
.left, .middle, .right {
float: left;
}
.left { clear: left; }
.right { clear: right; }
However,
Given all of this, I still probably wouldn't bother with <div>s. Semantically if this is a list of products, you should be listing them in <li> tags. Then just style the <li> to float: left; and make each one 33% the width of the container so you get 3 per line.
I'm trying to make a site that loads values from a database and then displays these values in the form of gauges. I'm using a jquery plugin for the gauge's and the format for these is
<p id='NameofGauge' class='plot' style='height:100px;width:175px;float:left;' title='GaugeValue'></p>
There is a top level which displays say 4 gauges and when you click on one of these top level gauges it shows other gauges which fall into the category this top level gauge represents.
I've pulled the values from the database and can write them to a gauge, and had the side working although fully hardcoded. I'm now attempting to make the site more dynamic ie. more enteries in the database result in more gauges.
I can do this for the top level gauges or the lower level gauges, but I can't find a way to allow the lower level gauges to be displayed when a top level gauge is clicked.
Here's the code I have so far;
$mymodel2 = new model();
print "<div id='gaugearray5'>";
$Testkpiquery1 = mysql_query("select * FROM KPI where KpiSection like 'Finance'");
$TotalValue;
$number = mysql_num_rows($Testkpiquery1);
$Group = $KPIArray['KpiGroup'];
while ($KPIArray = mysql_fetch_array($Testkpiquery1, MYSQL_ASSOC)) {
$Group = $KPIArray['KpiGroup'];
$kpiname = $KPIArray['KpiName'];
$kpidescription = $KPIArray['KpiDescription'];
$Units = $KPIArray['Units'];
$Column1 = $KPIArray['Val1'];
$Column2 = $KPIArray['Val2'];
$Target = $KPIArray['Target'];
$Gauge = $KPIArray['GaugeType'];
$TestdataqueryThis = mysql_query("select * FROM data_nir where period like '201101'");
$TestdataqueryCompare = mysql_query("select * FROM data_nir where period like '201001'");
$DataArray = mysql_fetch_array($TestdataqueryThis);
$DataArrayCompare = mysql_fetch_array($TestdataqueryCompare);
$ValueNow = ($DataArray[$Column1]) / ($DataArray[$Column2] * 1.609344);
$ValueCompare = ($DataArrayCompare[$Column1]) / ($DataArrayCompare[$Column2] * 1.609344);
$ValuetoPrint = ($ValueNow * 100) / $ValueCompare;
$TotalValue = $ValuetoPrint + $TotalValue;
$TargetPerc = ($ValueNow * 100) / $Target;
$StringtoPrint .= "<p id='".$kpiname."' class='plot' style='height:100px;width:175px;float:left;' title=".$ValuetoPrint." onmouseover=GenericLabel('".$kpidescription."',".$ValueNow.",".$ValueCompare.",".$Target.",".$ValuetoPrint.",".$TargetPerc.")></p>";
}
$TotalValuetoPrint = $TotalValue / $number;
print "<p id='".$Group."' class='plot' style='height:100px;width:175px;float:left;' title='".$TotalValuetoPrint."' onClick=LowerLevelPrint('".$StringtoPrint."')></p>";
print("</div>");
Because of the multiple quote marks in '$StringtoPrint' I'm having trouble getting it to pass to the javascript function LowerLevelPrint(). LowerLevelPrint() contains a document.GetElementById('breakdownlayer').innerHTML to write the contents of the string to the element 'breakdownlayer'.
I need a way to either pass this string or else a way php can write directly to the element 'breakdownlayer'.
I've only been using php for about 2 months so I'm not entirely sure how else to get this to work, any help would be appreciated.
Thanks
Edit: Using the JSON idea #Leif Wickland suggested below I've change a line to this
print "<p id='".$Group."' class='plot' style='height:100px;width:175px;float:left;' title='".$TotalValuetoPrint."' onClick=LowerLevelPrint(".json_encode(htmlspecialchars($StringtoPrint)).")></p>";
This is what the actual gauge code then appears as;
<p id="CSP" class="plot jqplot-target" p>")="" km',3.4933572974895,3.243523598341,6,107.70253989446,58.222621624825)><\="" km',2.7133283796449e-6,2.7133283796449e-6,6,100,4.5222139660748e-5)><\="" cost="" p><p="" km',11.080618560725,10.535479658845,7,105.17431497694,158.2945508675)><\="" service="" per="" onmouseover="GenericLabel('OperatingCostperServiceKm',4.2798431771458,4.2520569037415,5,100.65347839959,85.596863542916)><\/p><p" onclick="LowerLevelPrint("<p" title="103.38258331775" style="height: 100px; width: 175px; float: left; position: relative;">
id, plot, title and the style are all correct. I'm if the middle section is what JSON is encoding the values as. The onClick event doesn't appear to pass anything other than <p and there should be 4 gauges worth of paragraphs sent through.
Instead of passing the whole <p> thing from PHP, it should be easier for the PHP to just pass back the $TargetPerc as JSON. The JQuery should then update it as necessary.
You need to ensure that the HTML you're passing to JavaScript is escaped for both HTML and for Javascript. I believe wrapping
$StringtoPrint
with calls to
json_encode(htmlspecialchars($StringtoPrint))
will fix your troubles. So, that whole line of code would look like:
print "<p id='".$Group."' class='plot' style='height:100px;width:175px;float:left;' title='".$TotalValuetoPrint."' onClick=LowerLevelPrint(".json_encode(htmlspecialchars($StringtoPrint)).")></p>";
You'll need to be running on PHP 5.2 or newer to have json_encode available. Strictly speaking, it's not necessary to HTML encode the markup with htmlspecialchars, but it's better form by far.