I have this code which creates buttons from files in a directory. I need to organize them in a table with 4 columns. How can I do this?
Here is my code:
$handle = opendir('mydirectory');
if($handle){
while(($entry = readdir($handle)) !== false){
if($entry != '.' && $entry != '..' && $entry != '.htaccess'){
echo "<button onclick=\"location.href='mydirectory/$entry'\" style=\"background-color: #660000;\"><p style=color:white;>$entry</button><br>";
}
}
closedir($handle);
Taking what #Raptor mentioned in the comments you could do something like this:
<style>
#buttons{
width: 300px;
float:left;
}
</style>
<div id="buttons">
<?php
for($i=0;$i <=10; $i++){
echo "<button>Button $i</button>";
}
?>
</div>
Related
I am learning to use a utility first css approach to create a grid pattern layout for a variable number of search results. The appearance I want to achieve is described by this image here:
This was my solution using bootstrap css framework.
function loadMore() {
fetch('search-results.php?current='+document.querySelectorAll('.item').length)
.then(response=>response.text())
.then(result=>document.querySelector('.results').innerHTML += result);
}
body,div {padding:0;margin:0;}
.item {
display:block;
background:#333;
color:white;
border:2px solid white;
}
.item.col-12 {
height:75vh;
}
.item.col-6 {
height:50vh;
}
.item.col-4 {
height:30vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="results"></div>
<button type="button" onClick="loadMore()">Load More</button>
// PHP FILE - search-results.php
<?php
//$n = rand(1,10);
$n = $_REQUEST['current'] < 1 ? 1 : 8;
for($c=0;$c<$n;$c++)
{
$current = $c+intval($_REQUEST['current']);
if(
$current === 0 ||
($current-1)%8 === 0 ||
($current-3)%8 === 0 ||
($current+2)%8 === 0
)
echo '<div class="row">';
if($current === 0)
echo '<div class="item col-12">'.$current.'</div>';
else if(($current-1)%8 === 0 || ($current-2)%8 === 0)
echo '<div class="item col-6">'.$current.'</div>';
else
echo '<div class="item col-4">'.$current.'</div>';
if(
$current === 0 ||
($current-2)%8 === 0 ||
($current-2)%8 === 0 ||
($current-5)%8 === 0
)
echo '</div>';
}
My bootstrap approach has several problems that I do not know how to resolve:
When search-results.php returns a random number of items, the opening and closing <div class="row"> tags are not inserted at the right times after multiple "Load More" button clicks.
I don't like the arithmatic that I have to perform to properly place the open and closee <div class="row"> tags and to decide whether to write a col-12 || col-6 || col-4. This all seems unnecessarily complex.
QUESTION : What is the idiomatic way to use bootstrap (or any other utility-first css approach) to write a pattern grid layout that receives random number of results?
EXTRA - PLAIN APPROACH
My problem above can be solved using a plain CSS approach as shown with this code here:
// CSS FILE
body,div {padding:0;margin:0;}
.results {
display:flex;
flex-wrap:wrap;
}
.item {
display:block;
background:#333;
color:white;
box-sizing:border-box;
padding:10px;
width:33.333%;
height:30vh;
border:2px solid white;
}
.item:nth-child(1) {
width:100%;
height:75vh;
}
.item:nth-child(8n+2),
.item:nth-child(8n+3) {
width: 50%;
height:50vh;
}
// PHP FILE
<?php
$n = rand(1,10);
for($c=0;$c<$n;$c++)
echo '<div class="item">'.($c+intval($_REQUEST['current'])).'</div>';
The PHP code is much simpler and I do not have to deal with wrapping <div> elements.
Hello Stackers,
I'm having a question about jQuery. I have the following code, and I want that if I select one of the options, that the Image SRC changes to that path. (Direct, without any other clicks). Is this possible? (It's a kind of Live Preview of the selected image) I Tried, but it doesn't seem to be working.
The Form and Image Display
<b>Afbeelding</b><br><select name="choose" id="choose">
<?php
if ($handle = opendir('C:/inetpub/wwwroot/magieweb/images/news'))
{
while (false !== ($file = readdir($handle)))
{
if ($file == '.' || $file == '..')
{
continue;
}
echo '<option value="' . $file . '"';
if (isset($_POST['topstory']) && $_POST['topstory'] == $file)
{
echo ' selected';
}
echo '>' . $file . '</option>';
}
}
?>
</select><br><br>
<ul style="border: 1px solid #2087A1; list-style-type: none; margin-right:40px; min-height:30px;">
<li><strong style="color:#2087A1; margin-top:3px; margin-bottom:3px;">Nieuwsafbeelding Preview</strong></li>
<li><img id="blah" src=""></li>
</ul><br><br>
My jQuery
$('#choose').change(function(){
$('#blah').attr('src', this.value);
alert(this.value);
});
Thanks in Advance
Updated: retrieves selected option value from select box on change.
$('#my_select_box').change(function(){
$('#my_changing_image').attr('src', $('#my_select_box').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="my_select_box">
<option value="http://g-ecx.images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg">something</option>
<option value="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg">something else</option>
</select>
<img id="my_changing_image" src="http://g-ecx.images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg" />
https://jsfiddle.net/hqk1r8fk/1/
I have this list of images:
http://thegelu.com/camera/ffffff.php
And I'd like the pictures to display as a grid, not like a list. (aka each pictures next to each other)
Here's the PHP code:
<?php
$uploadsDirectory = 'slides/tail/';
if ($handle = opendir($uploadsDirectory)) {
echo '<hr/>';
echo 'Official Backgrounds';
echo '<hr/>';
echo "<div class='bgitem' style='color:white;font-weight:bold'>None</div>";
$uplo = array();
while (false !== ($file = readdir($handle))) {
array_push($uplo, $file);
}
sort($uplo);
$user = array();
foreach($uplo as $fname) {
if($fname != ".." && $fname != "."){
if(substr($fname,0,1) != "_")
echo "<div class='bgitem'><img src='slides/tail/$fname' height='30px'/></div>";
else
array_push($user, "$fname");
}
}
echo '<hr/>';
echo 'User Uploads :';
echo '<hr/>';
foreach($user as $div){
echo $div;
closedir($handle);
}
?>
I'm a beginner in PHP so I don't exactly know what to do.
Thanks in advance!
You can easily achieve a grid view using CSS. If you add the individual .bgitem items to a container, you can use the following CSS to achieve a grid view:
.grid {
width: 100%;
float: left;
clear: both;
}
.grid .bgitem {
float: left;
width: 30px;
height: 30px;
margin: 10px;
}
In turn, your markup should look something like:
<div class="grid">
<div class="bgitem"><img src="slides/tail/1.png" height="30px"></div>
...
</div>
jsFiddle Demo
This php code shows me the content of a directory on my website:
<?php
$dir = opendir(getcwd());
?>
<body>
<table>
<tbody>
<tr>
<?php
while (($file = readdir($dir)) !== false) {
{
echo "<td>". $file ."</td>";
}
}
closedir($dir);
?>
</tr>
</tbody>
</table>
</body>
It puts the results in a table.
The problem is that the PHP code generates a <td> tag and store the results in it. So the final table has one <tr> and as many <td> tags as there are results.
What I want to have is a table with 3 columns (3 td) per each line (tr tag).
Is there a way to make the table dynamic and for each third <td> tag turns to be a <tr> tag
so the results look like this: (click here)
Instead of looking like this: (click here)
try this:
<?php
$dir = opendir(getcwd());
?>
<body>
<table>
<tbody>
<?php
$n = 0;
while (($file = readdir($dir)) !== false) {
{
if($n%3 == 0){echo "<tr>";}
echo "<td>". $file ."</td>";
$n++;
}
}
closedir($dir);
?>
</tbody>
you can use modulus to keep track of where you are in the loop.
Then, when you've hit a multiplication of 3, you restart the table row:
<?php
$dir = opendir(getcwd());
?>
<body>
<table>
<tbody>
<tr>
<?php
$counter = 0;
while (($file = readdir($dir)) !== false) {
{
if($counter % 3 == 0 && $counter != 0) echo "</tr><tr>";
echo "<td>". $file ."</td>";
$counter++;
}
}
closedir($dir);
?>
</tr>
</tbody>
</table>
</body>
This might be a very simple question for most of you but I'm not able to find the solution on my own. I just started with basic php and tried to create a very small gallery script , which requests all the images from the gallery directory and echo's them into a table, the table should have 4 column's and is 876 width, i have the following:
<body>
<table border="0" cellpadding="0" cellspacing="0" id="gallery" width="876">
<tbody><?php
$dir = "./gallery/";
$exten = 'jpg';
if ($handle = #opendir($dir))
{
while (false !== ($file = #readdir($handle))) {
$bestand = $dir ."/". $file ;
$ext = pathinfo($bestand);
if($ext['extension'] == $exten)
{
echo "<tr><td><a href='/gallery/timthumb.php?src=". $file ."&h=300&'><img src='/gallery/timthumb.php?src=". $file ."&h=134&w=190' target='_blank'></a></td></tr>" ;
}
}
#closedir($handle);
}
?>
</tbody></table>
</body>
My css is looking like this:
#gallery { border-collapse: separate; empty-cells: hide;
border: 0px; background-color: #FFF; }
#gallery td { border: 0px; width: 190px;
height: 163px; padding-left: 12px; float: left;
padding-top: 10px; vertical-align: top;
color: #000000; background-image: url(../images/bg.png); background-repeat: no-repeat; }
My problem is that all the thumbnails are being echo'd under each other instead of next to each other, i would like 4 columns of 219 width each next to each other and if there are more pictures a new row etc.
Any help would be much appreciated!
Kind regards
Problem solved (thanks a lot to both of your for your help):
<body>
<table border="1" cellpadding="0" cellspacing="0" id="gallery" width="876">
<?php
$dir = "./gallery/";
$exten = 'jpg';
$i = 0;
$files = array();
if($handle = #opendir($dir))
{
while (false !== ($file = #readdir($handle)))
{
$bestand = $dir ."/". $file ;
$ext = pathinfo($bestand);
if($ext['extension'] == $exten)
{
$files[] = $file;
}
}
#closedir($handle);
}
$total = count($files);
$imgPerRow = 4;
$counter = 0;
$i = 0;
if($total > 0)
{
foreach($files as $file)
{
$i++;
$counter++;
if($counter == 1)
{
echo '<tr>';
}
echo "<td><a href='/gallery/timthumb.php?src=". $file ."&h=300&'><img src='/gallery/timthumb.php?src=". $file ."&h=134&w=190' target='_blank'></a></td>" ;
if($counter == $imgPerRow)
{
$counter = 0;
echo '</tr>';
}
elseif($i == $total)
{
for($j = ($counter - $imgPerRow); $j < 0; $j++)
{
echo '<td></td>';
}
echo '</tr>';
}
}
}
else
{
echo '<tr><td></td></tr>';
}
?>
</table>
</body>
In your code provided your creating new rows for each image so they will appear under each other. what you need to do is below:
<body>
<table border="0" cellpadding="0" cellspacing="0" id="gallery" width="876">
<tbody><tr><?php
$dir = "./gallery/";
$exten = 'jpg';
$i =0;
if ($handle = #opendir($dir))
{
while (false !== ($file = #readdir($handle))) {
$bestand = $dir ."/". $file ;
$ext = pathinfo($bestand);
if($ext['extension'] == $exten)
{
echo "<td><a href='/gallery/timthumb.php?src=". $file ."&h=300&'><img src='/gallery/timthumb.php?src=". $file ."&h=134&w=190' target='_blank'></a></td>" ;
}
$i++;
if($i==4){
echo '</tr><tr>';
$i=0;
}
}
#closedir($handle);
}
?>
</tr>
</tbody></table>
</body>
Try this...
$countTr = 0;
if ($handle = #opendir($dir))
{
while (false !== ($file = #readdir($handle))) {
if($countTr % 4 == 0)
echo "<tr>";
$bestand = $dir ."/". $file ;
$ext = pathinfo($bestand);
if($ext['extension'] == $exten)
{
echo "<td><a href='/gallery/timthumb.php?src=". $file ."&h=300&'><img src='/gallery/timthumb.php?src=". $file ."&h=134&w=190' target='_blank'></a></td>" ;
}
if($countTr % 4 == 3)
echo "</tr>";
$countTr++;
}
if($countTr % 4 != 0)
echo "</tr>";
#closedir($handle);
}