I have a bit of an issue...
Ive made a div, and normally, it expands to suit the height of its contents fine, however... Now i have a problem.
My content is being returned from a Sql statment, and its not expanding to suit its height, a working non dynamic version is
#commentblock {
min-height:50px;
width:90%;
margin:20px auto;
padding:10px;
border:1px solid #999;
}
My code is as follows (its in a for loop making a new div for each instance)
// Now lets query to grab the responses to this fault
$querytwo = "SELECT * FROM comments WHERE faultid=".$fid;
// execute query
$resulttwo = mysql_query($querytwo) or die ("Error in query: $querytwo. ".mysql_error());
// see if any rows were returned
if (mysql_num_rows($resulttwo) > 0) {
// print them one after another
while($row = mysql_fetch_row($resulttwo)) {
// lets make this render then
echo "<div id='commentblock'>";
echo "<div class='loggedby'>Logged By : <span>".$row[4]."</span><p class='contactno'>Entered : <span>".$row[3]."</span></p></div>";
echo "<div class='info'><span>".$row[2]."</span></div>";
echo "</div>";
}
}
// free result set memory
mysql_free_result($resulttwo);
// close connection
mysql_close($connection);
Thanks in advance :)
Got it, the content was in a span which was inheriting a floating attribute. Removed the float - now its all fine :)
It might not be to do with dynamic code, but invalid HTML.
You are using:
id='commentblock'
... in a loop, which create multiple, identical IDs on the same page, which is not valid.
You should change to:
class='commentblock'
and reference you CSS as:
.commentblock
... instead of:
#commentblock
Related
I'm working on a website and hit my head with some basic display problem.
I want to use a php variable that holds a value from the database which represents the src attribute of an img tag. I do this in 2 different places, once in the navbar (where it works perfectly fine) and once inside another div, which causes a big portion of the page (along with the image container) to become blank when the page is reloaded. It works fine if I resize the window or open the Dev Tools.
This is the code that I use for displaying the image in both places:
$sql = "SELECT * FROM users WHERE user_index=?;";
$stmt = mysqli_stmt_init($conn);
if (!mysqli_stmt_prepare($stmt, $sql)) {
echo $_SESSION['dbError'];
} else {
mysqli_stmt_bind_param($stmt, "i", $index);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
$resultCheck = mysqli_num_rows($result);
if ($resultCheck > 0) {
while ($row = mysqli_fetch_assoc($result)) {
$responsible = $row;
}
} else {
echo $_SESSION['dbError'];
}
mysqli_stmt_close($stmt);
}
if ($responsible['avatar'] == 'noAvatar') {
echo '<i class="material-icons">person</i>';
} else {
echo '<img src="images/icons/' . $responsible['avatar'] . '">';
}
$responsible is the row from the database that contains the column avatar with the value [someName.extension] e.g. "koala.png".
If I replace the img element with some random string, everything works fine, that's how I found out where the problem may be:
if ($responsible['avatar'] == 'noAvatar') {
echo '<i class="material-icons">person</i>';
} else {
echo 'This displays fine';
}
Here are some pictures that can exemplify the issue better:
picture displayed as wanted (inside the navbar)
blank element after reloading the page
Everything displayed fine after window resize
Thank you!
I found the problem - Materialize CSS. It was not that I tried to get the image source from the database as I thought, but because I was trying to add an image inside the content of Materialize CSS tabs component.
Apparently, Materialize tabs are based on the CSS carousel, which, in some cases has the height set to a certain amount by the style attribute of the element.
The issue was in the div with the class "tabs-content" which was automatically created by the Materialize tabs and had a fixed height of 400px normally, and 30px when an image is inside that div.
Here is the code that I added to my styles.css file in order to fix it and set its height big enough in order to fit all the content:
.tabs-content.carousel.carousel-slider .carousel-item.active {
position: relative;
}
.tabs-content {
height: auto !important;
min-height: 100%;
}
I hope this helps if anyone else has or will have the same problem.
I'm trying to insert a div into a HTML page using a for loop and the appendChild method in PHP. The issue I'm running into is that the first div always ends up stuck inside the second div, which always ends up stuck in the third div and so on and so forth. So how do I end the div at the end of the for loop?
///The PHP Side
// Create an insertion point for the Projects element
$projectInsert = $doc->getElementById("projects");
// Create a project Box
for ($x = $row_cnt; $x > 0; $x--) {
$sql2 = "SELECT * FROM `$prjct` WHERE id=$x";
$result2 = mysqli_query($db,$sql2);
$row2 = mysqli_fetch_array($result2,MYSQLI_ASSOC);
//Insert a project Box
$projectBox = $doc->createElement('div');
$projectBox->setAttribute("class","projectBox");
$project_element_title = $doc->createElement('p', $row2["title"]);
$project_element_description = $doc->createElement('p', $row2["description"]);
$projectInsert->appendChild($projectBox);
$projectInsert->appendChild($project_element_title);
$projectInsert->appendChild($project_element_description);
}
//Here's where it's inserting in the HTML
<div class="projectBar" id="projectsBar">
<h4 style="height: 30%; width: 100%; margin: auto;">Projects</h4>
<p id="projects"></p>
</div>
Here's photos of what's happening vs what I want to happen
https://docs.google.com/presentation/d/1OgthPueXHzGXyUi6L3DmgWTtOr6gHpfj8LgGh5OG85Y/edit?usp=sharing
Since I'm new I can't embed images.
Thanks for any and all help!
Instead of appending childs($project_element_title and $project_element_description) to parent($projectBox) you are appending it to super-parent($projectInsert), that's the problem.
So change:
$projectInsert->appendChild($project_element_title);
$projectInsert->appendChild($project_element_description);
To
$projectBox->appendChild($project_element_title);
$projectBox->appendChild($project_element_description);
(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
}
Hello I am trying to change CSS content on some DIVs depending of their class name.
To explain better, I have a while loop in PHP reading from the database to output DIVs and I have a field named "section" with data such as A,B,C,D,E,F,G.
For the DIVs located in section "A" and "B" I want the class name to be desk_box_hor (for horizontal) ELSE I want it to desk_box_ver(vertical).
Below is what I tried doing only two sections (A,B) that need to be vertical. The others need to be horizontal. If theres a more efficient way of doing this please tell me. I have about 200 of these DIVs being output on screen.
If you have a better title please recommend one, I didn't know what to put lol.
Thanks in advance!
My fiddle of what I want both DIVs to look like
PHP:
while($row = mysqli_fetch_assoc($desk_coord_result)){
//naming X,Y values
$id = $row['coordinate_id'];
$x_pos = $row['x_coord'];
$y_pos = $row['y_coord'];
$sec_name = $row['section_name'];
//draw a DIV box at its X,Y coordinate
//if section A and B do vertical
if($sec_name == 'B' || $sec_name == 'A'){
echo '<div class="desk_box_ver" data="'.$id.'" style="position:absolute;left:'.$x_pos.'px;top:'.$y_pos.'px;">id:'.$id.'</div>';
}
//else do it horizontal
else{
echo '<div class="desk_box_hor" data="'.$id.'" style="position:absolute;left:'.$x_pos.'px;top:'.$y_pos.'px;">id:'.$id.'</div>';
}
} //end while loop for desk_coord_result
CSS:
/* desk boxes*/
.desk_box_ver{
width: 23px;
height: 10px;
border: 4px solid black;
padding:10px;
}
.desk_box_hor{
width: 10px;
height: 23px;
border: 4px solid black;
padding:10px;
}
Also, lets say I want to use these two classes in the same Jquery function, is this the proper way of doing it?
$(".desk_box").add(".desk_box_ver").click(function() {
or
$(".desk_box, .desk_box_ver").click(function() {
In answer to your question "If theres a more efficient way of doing this please tell me." (I'll leave your other questions to someone else) yes, there are more efficient ways to write this PHP code, which then makes debugging and maintenance easier:-
a) Instead of two very long echo strings which are almost exactly the same, introduce a new PHP variable, say, $class. Then write:
$class = 'desk_box_hor';
if($sec_name == 'A' || $sec_name == 'B'){
$class = 'desk_box_ver';
}
echo '<div class="' . $class . '" data="' . $id . '" style="position:absolute;left:' . $x_pos . 'px;top:' . $y_pos.'px;">id:' . $id . '</div>';
Now you only have one long echo string to write, and to debug.
Also my preference is (though this is opinion only) to put a space either side of all those string concatenation dot operators - it makes it easier to decipher whats going on.
b) The next improvement you can make is to swap all the single and double quotes. Then you can write a single string with no concatenation operators at all, as you can put a PHP variable inside double quotes. Again, it makes the string of html clearer and easier to read, and debug. (Browsers can handle single or double quotes in the HTML tags). You end up with:
echo "<div class='$class' data='$id' style='position:absolute;left: $x_pos" . "px;top: $y_pos" . "px;'>id:$id</div>";
c) Next we can make the HTML code being created more readable; at the moment your script is generating a huge block of HTML markup (200 divs?) with no line breaks. Horrendous to debug. Just add \n to the end of your echo string like so:
echo ".....id:$id</div>\n";
and that will split the generated HTML markup into separate lines (but the onscreen text will be unaffected). Much easier then to see if one of the items went wrong (for instance, if the database returns an empty value for one of the records, it will stand out in the HTML like a sore thumb). Note that you can add \n inside a string surrounded by double quotes; if you stay with the original single quoted string you would have to add with a dot operator:
.....id:$id</div>' . "\n";
d) Lastly, you could cut out all those 200 position:absolute strings from the generated HTML markup by putting it into your CSS stylesheet, just retaining the CSS values that vary. Ie:
.desk_box_hor, .desk_box_ver { position: absolute; }
As regards why you are only getting vertical divs, never horizontal, I'll just try an educated guess. Are you really getting back from the database what you think you are?
For instance, you say in your comments the field name is "section", but the PHP is looking for a "section_name" field. Or is the data itself wrong? Have you got PHP error checking on, eg error(reporting(E_ALL)? If not, it would not return an error message, but still blindly go on reading through all rows in the db.
In that case it will always take the else part of your if...else. Supposedly this is the horizontal div path, but because the CSS has the width and height values the wrong way round (see above) it will actually produce vertical boxes all the time.
hello i am working on the styling of table in PHP . I am stuck at only one point that i am not able to to change the colors of the rows of my table alternatively like odd rows should be displayed with white background and even with blue . i trie the followng css code but it didnot worked
tbody:nth-child(2n) { /* even rows */
background-color:#eee;
}
tbody:nth-child(2n+1) { /* odd rows */
background-color:#ccc;
}
If it is not because of your browser issue, please try this for css
table#tableid tr:nth-child(2n) { /* even rows */
background-color:#eee;
}
table#tableid tr:nth-child(2n+1) { /* odd rows */
background-color:#ccc;
}
OR
table#tableid tr:nth-child(even) { /* even rows */
background-color:#eee;
}
table#tableid tr:nth-child(odd) { /* odd rows */
background-color:#ccc;
}
i think jquery :even and :odd selector is the best option for cross browsers..
$('#selector:even').addClass('even_class');
$('#selector:odd').addClass('odd_class');
Write two classes to for the styles of odd and even rows. And add the class alternately like this.
.odd_row{
background-color:grey;
}
.even_row{
background-color:white;
}
And in php,
<?php
for($i=0;$i<10;$i++)
{?>
<tr class="<?php echp ($i%2==0)?'odd_row':'even_row';?>">
<td>data1</td>
<td>data2</td>
</tr>
<?php
}
?>
Perhaps you could try using a variable to change which style is used. So when you start the block, you define oddOrEven as 0, then you echo a row, then you set oddOrEven to 1. Every time a row is echoed, it changes which class is used based on oddOrEven.