Can get something working with css3 for safari and firefox but ie won't have a piece of it. I'm outputting a list of shopping categorys and sub categorys with a seperate for each list.
This is what I've got (not working so far).. Any help would be most welcomed.
<div style="float:left; width: 232px;">
<?
$rowcount = 1;
$strSql = "SELECT * FROM Category ORDER BY CategoryName ASC";
$r = $db->select($strSql);
while ($row=$db->get_row($r, 'MYSQL_ASSOC')) {
$CategoryID = $row['CategoryID'];
$CategoryName = $row['CategoryName'];
?>
<div style="width: 232px; background-color:#f2f2f2; padding: 5px; margin-top: 5px; -webkit-border-radius: 4px; border-radius: 4px; overflow:hidden; padding-left: 5px;">
<h1><a href="/<?=$colour?>/<?=$CategoryURL?>/" ><?=$CategoryName?></a></h1>
<ul>
<?
$strSql2 = "SELECT
SubCategory.SubCategoryID,
SubCategory.SubCategoryName,
SubCategory.SubCategoryURL,
SubCategory.CategoryID
FROM
SubCategory
WHERE
CategoryID = $CategoryID
ORDER BY
SubCategoryName";
// echo "<pre>$strSql</pre>";
$r2 = $db->select($strSql2);
while ($row2=$db->get_row($r2, 'MYSQL_ASSOC')) {
$SubCategoryID = $row2['SubCategoryID'];
$SubCategoryName = $row2['SubCategoryName'];
$SubCategoryURL = $row2['SubCategoryURL'];
?>
<li><?=$SubCategoryName?> (<?=$rowcount?>)</li>
<?
$rowcount++;
if ($rowcount == 35) { echo"</ul></div><div style=\"float:left; width: 232px;\"><ul>"; $rowcount = 0;}
} // end get SubCategory
?>
<? if ($rowcount == 0) { echo""; } else {echo"</ul>";} ?>
</div>
<? } // end get category list
?>
</ul> <!-- END CATEGORY UL -->
</div>
</div>
An alternative would be to use a table-based layout, which in this case I don't think would be that bad. Tables are for tabular data and catalog categories would fit well. Edit: But you'd still have to figure out your PHP logic to get this working. Derp on my part.
Alternatively, there is the Columnizer jQuery plugin to do the trick automagically but I'm not fond of having to rely on a javascript-driven solution for layout elements. Although you could trigger it for only the browsers that don't support your CSS3 method via Modernizr. Still not a huge fan of this.
Can you post the CSS3 you used that is working in other browsers? Perhaps there is an available workaround that would do the trick. I'm still a bit fuzzy on the details for your end result. I'm focusing on the CSS aspect of your issue and less on the PHP. Finding a working CSS-driven solution is obviously far easier than trying to figure out the logic to divide your categories into columns accordingly.
Related
Having a bit of an issue here. Could use some insight. I'm displaying user created events to visitors to my website. I'm using a while loop to display everything that hasn't not yet already passed. My goal is to display two separate events right next to each other, then another two below that and so on. Currently I'm using the flex box css property to achieve this, but it's only displaying the output vertically and not the way I want it to, meaning it's only putting one event per line. Here is my current output for displaying the events.
include 'db_connect.php';
$event_type = $_POST['event_type'];
$state = $_POST['state'];
$current_date = date("Y-m-d");
$sql = "SELECT * FROM events WHERE event_type LIKE '%".$event_type."%' AND state LIKE '%".$state."%' AND end_date > '$current_date' ORDER By end_date ASC";
$result = mysqli_query($conn, $sql);
if (isset($_POST['search-events']) && !empty($event_type) && !empty($state)) {
while($row = mysqli_fetch_array($result)) {
$event_name= $row['event_name'];
$image = $row['image'];
$start_date = $row['start_date'];
$end_date = $row['end_date'];
$start_time = $row['start_time'];
$end_time = $row['end_time'];
$street = $row['street'];
$city = $row['city'];
$state = $row['state'];
$zip_code = $row['zip_code'];
$id = $row['event_id'];
echo '<div class="filter-wrap">';
echo '<div id="filter-boxes">';
echo '<div id="list_image"><img src="'.$image.'"></div>';
echo '<div id="list_name">'.$event_name.'</div>';
echo '<div id="list_date">'.$start_date. ' - ' .$end_date. '</div>';
echo '<div id="list_time">' .$start_time. ' - ' .$end_time. '</div>';
echo '<div id="list_location">'.$street.''.$city.''.$state.''.$zip_code.'</div>';
echo '</div>';
echo '</div>';
}
}
Then there's the css that I'm using.
.filter-wrap {
display: flex;
flex-direction: row;
padding: 10px;
justify-content: center;
align-items: center;
}
#filter-boxes {
border: 2px solid #999;
text-align: center;
width: 50%;
height: 150px;
}
As you can see, I'm using the flex property inside the container that holds each of the individual boxes that holds each event. I have the flex direction set to row since I want it to display horizontally, then go the next line after it runs out of room on each line.
I tried a few things. I tried switching to the css column count property but didn't get the results I was expecting. I honestly probably didn't tweak with that property enough, but I have my heart set on the flex box property. I also tried setting the flex direction to column and also tried adding an inline-block display property to the boxes that are suppose to repeat on the while loop with each event. I'm finding this online that are kind of similar to my issue, but not quite. One uses javascript, but this can obviously also be accomplished somehow with php. I also found several articles talking about centering the content using flexbox, which is not the goal here.
Try move your .filter-wrap div element to outside of the while() {} loop.
Your current coding:
while() {
echo '<div class="filter-wrap">';
echo '<div id="filter-boxes">';
// content goes here...
echo '</div>';
echo '</div>';
}
will result in following structure where each .filter-wrap only container a single child .filter-boxes, which will always results in vertical presentation:
<div class="filter-wrap">
<div id="filter-boxes"> content </div>
</div>
<div class="filter-wrap">
<div id="filter-boxes"> content </div>
</div>
<div class="filter-wrap">
<div id="filter-boxes"> content </div>
</div>
For horizontal presentation, the correct structure should be one .filter-wrap consists of multiple .filter-boxes childs:
<div class="filter-wrap">
<div id="filter-boxes"> content </div>
<div id="filter-boxes"> content </div>
<div id="filter-boxes"> content </div>
</div>
So you can try change your coding to:
echo '<div class="filter-wrap">';
while() {
echo '<div id="filter-boxes">';
// content goes here...
echo '</div>';
}
echo '</div>';
Snippet for demo to you the coding logic result. It is in JS but you just have to apply the same in your PHP
Hope it helps and Happy coding!
var result_1 = document.getElementById('result_1');
var result_2 = document.getElementById('result_2');
var content_1 = '';
var content_2 = '';
content_2 = '<div class="filter-wrap">';
for (var i = 1; i <= 5; i++)
{
// result 1
content_1 += '<div class="filter-wrap"> <div class="filter-boxes">content ' + i + '</div> </div>';
// result 2
content_2 += '<div class="filter-boxes">content ' + i + '</div>';
}
content_2 += '</div>';
result_1.insertAdjacentHTML('beforeend', content_1);
result_2.insertAdjacentHTML('beforeend', content_2);
.filter-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 10px;
justify-content: center;
align-items: center;
}
.filter-boxes {
border: 2px solid #999;
text-align: center;
width: 50%;
height: 50px;
/* for two columns display */
max-width: 49%;
}
#result_1,
#result_2 {
background-color: lightgray;
border: 1px dashed black;
margin: 3px;
}
result 1
<div id="result_1"></div>
result 2
<div id="result_2"></div>
I'm making a website for my uni course so it's somewhat basic in a few places, but my current aim is to create an array of values based on checkboxes. This will become a basic basket/shopping cart so that the user can list the item's they want to take to the checkout.
I'm having trouble posting the values from my checkboxes though. I can only post one at a time, but what I intend to do is select multiple images at once and then add them in one go.
This is spread out over a few pages now and it's quite dynamic. Here are the relevant sections of code that I'm working with:
PhotographerAccount
(displays the gallery based on the photographer you are viewing)
<div class="container">
<!--Form to select items to put in "basket"-->
<form action="basket.php" method="POST">
<!--Gallery-->
<div style="margin-bottom:50; margin-top:50; height:600px; border:3px solid #adadad; border-radius: 10px; overflow-y: auto; overflow-x: hidden; background-color: #e0e0e0">
<?php include "personalGallery.php" ?>
</div>
<button type="submit" class="btn btn-block btn-info btn-lg">Add selected to basket (<small id="y">0</small>)</button>
</form>
</div>
personalGallery
(creates the gallery and the checkboxes)
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$photoID = $row['uploadID'];
$photoNm = $row['photoName'];
//Photo styling
echo "<div class='col-sm-3 text-center' style='background-color:#e5e5e5; margin-bottom: 20px; border-width: 0 2 0 2; border-style: solid; border-color: #e0e0e0'>";
//Checkbox for form and Photo name as a label
echo "<div class='checkbox'>";
echo "<label><input onclick='updateCount()' class='z' type='checkbox' name='selection[]' value='".$photoID."'><strong>".$photoNm."</strong></label>";
echo "</div>";
//Photo
echo "<img src='photographersarea/PhotoUploads/".$photoID."' alt='".$photoNm."' style='height:200px;max-width: 100%'>";
//Close Styling
echo "</div>";
}
} else {
echo "0 results";
}
From here the form should be posting the data to basket.php, but when I test the array using print_r($_POST['selection'] or even print_r($_POST) I only see value. From the things I've read this should have made an array that I can work with.
Any ideas how I can post the data as an array?
Thanks!
(Will update post and make note of updates if needed)
UPDATES
- Fixed typo
use var_dump you will see keys as well or you can get key from array_keys()
Sorry to have wasted your time, turns out the code was fine, but the host was having some kind of problem!
Code above works fine now. Lets hope this doesn't happen again when I come to hand in the assignment!
I have this structure on my page:
*{
margin: 0px;
}
.div1{
width: 1000px;
background-color: grey;
overflow: hidden;
}
.div2{
width: 300px;
background-color: orange;
height: 500px
}
.div3{
width: 300px;
background-color: orange;
height: 500px;
}
.float_left{
float: left;
}
.float_right{
float: right;
}
<div class="div1">
<div class="div2 float_left">
</div>
<div class="div3 float_right">
</div>
</div>
And inside the two orange container's I want to put some smaller divs, but I read the data from a database. The first row should be in div1, the second in div2, the third in div1 and so on.
$sql = "SELECT * FROM question ORDER BY question_id DESC";
$result = mysqli_query($db,$sql);
while($row = mysqli_fetch_assoc($result)){
}
But how can I do something like that? Can I open a div container closed container to place a div container inside the container?
You should really read and try by yourself, this is pretty basic question.
There are many ways, here is one of them.
Declare 2 variables to store the results for Div1 and Div2.
Declare a count variable and use the odd and even property to decide who turn is it to store the results.
Output the results.
PHP:
$sql = "SELECT * FROM question ORDER BY question_id DESC";
$result = mysqli_query($db,$sql);
$resultsForDiv1 = "";
$resultsForDiv2 = "";
$count = 0;
while($row = mysqli_fetch_assoc($result)){
if ($count%2 == 0) {
$resultsForDiv1 .= $row[0]; // You should change it to whatever data you need from $row.
}
else {
$resultsForDiv2 .= $row[0]; // You should change it to whatever data you need from $row.
}
$count++;
}
Html:
<div class="div1">
<div class="div2 float_left">
<?php echo $resultsForDiv1; ?>
</div>
<div class="div3 float_right">
<?php echo $resultsForDiv2; ?>
</div>
</div>
What you should do is store the data from the $row variable into new variables which you can then output in the two columns. Like this:
<?php
$sql = "SELECT * FROM question ORDER BY question_id DESC";
$result = mysqli_query($db, $sql);
// Use this to toggle column on the sql results
$left_right = true;
while ($row = mysqli_fetch_assoc($result)) {
if ($left_right) {
// Add to left column variable
// [some code to add the data from $row to $left_column_content]
} else {
// Add to right column variable
// [some code to add the data from $row to $right_column_content]
}
// Switch columns by inverting the boolean from true to false, false to true
$left_right = !$left_right;
}
?>
<div class="div1">
<div class="div2 float_left">
<?php echo $left_column_content; ?>
</div>
<div class="div3 float_right">
<?php echo right_column_content; ?>
</div>
</div>
My URL: illandeistudio
If you scroll halfway down you will see a list of categories (Accessories, dinning, lighting...)
They are currently vertical. How can I get these to display horizontally? Optimally they would be 4 per line. Below is the PHP code which places all the "categories" into a div "nelson"
Thanks! This has been hell!
.nelson {
float: left;
padding: 0 3px;
}
Then just style the padding from there. You can replace padding: 0 3px; with width: 80px; and adjust it from there if you want the columns to be even (might look better).
If you want it to be centered with 4 columns (you have 7 items so it would be 4 columns, 2 rows, and the last column would only have 1 row).... not sure why you would want it like that but its possible. You would create a around the code you wrote, create a width, and add the attribute:
style="margin: 0 auto; width: 916px;"
Then you would adjust the width of that to be the product of 7 * the width of .nelson
I'd recommend just adjusting padding though and leave the menu going horizontally. all the way across for all 7 items.
use like :
<?php if (count($this->document->shoppica_categories_arr) > 0) : ?>
<ul id="categories">
<?php $i = 0; ?>
<?php foreach ($this->document->shoppica_categories_arr as $category): ?>
<?php $i++ ?>
<li <?php if ($i % 4 == 0) : ?> class="ln"<?php endif ?>><?php echo $category->getName() ?></li>
<?php endforeach ?>
</ul>
<?php endif ?>
css file :
ul#categories li {
float: left;
}
ul#categories li.ln {
clear: left;
}
What Tallboy said. :) You may also need to set a width for the .nelson divs to get them floating correctly and lining up.
Currently producing a Wordpress plugin that allows for multiple image sliders. At the moment, to make sure that the code is valid I am having to load each sliders dynamic styling into the tags. This is fine, however it loads the styling for all the sliders, which can really start to add a lot of code to the pages source if the users uses many image sliders.
So I'm trying to get the styling to only be added to the tags if the slider is actually displayed on the page. Is this possible? This is how I am currently displaying the styling:
function test() {
global $wpdb;
$table_name = $wpdb->prefix . "premiumslider";
$number = $wpdb->get_results("SELECT * FROM $table_name");
foreach ($number as $slider) { ?>
<style type="text/css"><?php if($slider->paginationstyle == 'icons') { ?>
#lofslidecontent<?php echo $slider->id; ?> .lof-navigator li{<?php if($slider- >paginationstyle=='icons'){ ?>background: url(<?php if($slider->paginationoff=='') echo WP_PLUGIN_URL.'/premium-slider/images/pagination.png'; if($slider->paginationoff!='') echo $slider->paginationoff; ?>) 0 0 no-repeat;<?php } ?>}
#lofslidecontent<?php echo $slider->id; ?> .lof-navigator li.active{<?php if($slider->paginationstyle=='icons'){ ?>background: url(<?php if($slider->paginationon=='') echo WP_PLUGIN_URL.'/premium-slider/images/pagination_current.png'; if($slider->paginationon!='') echo $slider->paginationon; ?>) 0 0 no-repeat;<?php } ?>}
<?php } ?>
<?php if($slider->paginationstyle == 'images') { ?>
#lofslidecontent<?php echo $slider->id; ?> .lof-navigator { margin-top: 50px; }
#lofslidecontent<?php echo $slider->id; ?> .lof-navigator li img { border: <?php echo $slider->imgborder; ?>px solid #<?php echo $slider->imgcolour; ?>; }
#lofslidecontent<?php echo $slider->id; ?> .lof-navigator li.active img { border: <?php echo $slider->imgborder; ?>px solid #<?php echo $slider->imghover; ?>; }
#lofslidecontent<?php echo $slider->id; ?> .lof-navigator li.active img:hover { border: <?php echo $slider->imgborder; ?>px solid #<?php echo $slider->imghover; ?>; }
<?php } ?></style><?php
}
}
How can I achieve this?
To display the above code I use:
add_action('wp_head','test');
And to display the slider ($id being the id of that particular slider; 1, 2, 3, etc):
premium_slider($id);
This is sort of a complicated question. First of all, I disparage you for using a global variable, especially a DB resource. I'm also unclear as to why you need to echo the styles directly in this way.
Now to help you:
The only way to really solve this that I can see is if you have all of the styles stored somewhere, such as a DB, a config file, or any such thing per style. You must know the styles beforehand because you are hard coding them here. So just cycle through and if the ID of your slider matches its style, print the style. If you stored all of the styles in a big array in another php file hashed with the ID of the slider, this would be simple.
How do you determine which sliders appear on the page? Effectively you would need to alter your query to be the same as the one which actually loads the sliders, that way the CSS would only be loaded to display the same sliders.
$table_name = $wpdb->prefix . "premiumslider";
$number = $wpdb->get_results("SELECT * FROM $table_name WHERE category = 'cars'");
This would only load the elements into the foreach array that are displayed on that particular page.