I have a structure of divs that are generated based on php code. Each row has 3 divs. It is generated like this:
Defining columns:
<?php
$numOfCols = 3;
$rowCount = 0;
$bootstrapColWidth = 12 / $numOfCols;
?>
First row, starting the loop and defining width:
<div class="row">
#foreach($datas as $data)
<div class="col-md-<?php echo $bootstrapColWidth; ?>">
Then there's a bunch of content.
Then, in the end, each loop adds one to rowcount, and checks if the row has ended, so we can add a new one:
<?php
$rowCount++;
if($rowCount % $numOfCols == 0) echo '</div><div class="row">';
?>
#endforeach
Now, it all works great, the problem is that as I add different amounts of content on each div, the heights become different and ends up becoming quite ugly.
What I'm trying to do: I'm trying to check in each row which div has the biggest height, so I can apply the same height to the other two.
-I've thought of adding a id to each div that increments, problem is I don't know how many divs there will be, so I can't prepare for each outcome.
-I've tried selecting each row with $('row div'), problem is then all divs will become the same size as the biggest of all. And I want to check by row.
Sorry for the long question, and thanks for any input!
Bootstrap 4 has flexbox classes that allow you to do this with just css. Take a look at this example: https://getbootstrap.com/docs/4.3/utilities/flex/#align-self
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
<div class="align-self-stretch mr-3" style="background-color:lightblue">Aligned flex item</div>
<div class="align-self-stretch mr-3" style="background-color:lightblue">Aligned flex item<br />With<br />More<br />Lines</div>
<div class="align-self-stretch" style="background-color:lightblue">Aligned flex item</div>
</div>
I think flex-box is your solution : all into flex container will have the same height.
<div style="display:flex">
<div>
... some content
</div>
<div>
... some content
</div>
</div>
You can use .row-eq-height in Bootstrap 4
Related
Need help with php code, that can count divs inside parent div and add some code if inner divs have specific count number.
Html is:
<div class="row-fluid str_category">
<div class="span2 jshop_categ"><div>
<div class="span2 jshop_categ"><div>
<div class="span2 jshop_categ"><div>
<div class="span2 jshop_categ"><div>
<div class="span2 jshop_categ"><div>
</div>
So need php with logic something like:
find div with class.str_category
find div with class.jshop_categ
count number of divs.jshop_categ
if number of divs.jshop_categ = 4
- add code "<div class="additionaldiv"><div>"
if number of divs.jshop_categ = 3
- add code "<div class="additionaldiv"><div> <div class="additionaldiv"><div>"
if number of divs.jshop_categ = 3
- add code "<div class="additionaldiv"><div> <div class="additionaldiv"><div> <div class="additionaldiv"><div>"
--
Final result is to make always 5 divs in a row, even if only one div inside parent div.
Thanks.
Why not just make a loop that will always display 5 inner <div> ?
So the code will be:
<div class="row-fluid str_category">
<?php
for($i=0; $i<5; $i++){
echo '<div class="span2 jshop_categ">yeah<div>';
}
?>
</div>
***If this is not what you really want, please elaborate the situation further :)
Inserting posts on a page using WP Loop. Trying to achieve a grid layout using Bootstrap columns class "col-md-3" for example.
I was able to find useful code but it's missing one part to what I'm trying to achieve.
Basically, when you use the WP Loop to pull and display posts on a page you can put the Bootstrap column class "col-md-43" for each posts. That way each post is in a column and you basically create a grid of posts. Looks great, except that each row has different heights and then you have weird spacing/gaps.
OK so there are many solutions out there and I liked the one proposed by Zarko Jovic. https://stackoverflow.com/a/35963572/2243165
Basically the solution is to put the columns inside a "row" class. Problem solved.
This works except I'm not sure how to go about it if I have different columns based on the screen size. For example I use "col-xs-12 col-sm-4 col-md-3". Have no idea if it's possible to create a row that adjusts for each of the 3 different column sizes/classes. The code in the link is written to use 4 columns in a row. But when using "col-xs-12 col-sm-4 col-md-3" class the row sometimes has 1 column, sometimes 3, and other times 4 columns per row :(
Here's my code so far without placing the "row" class.
<?php
// Force loop to display defined custom post type
$args2 = array(
'post_type' => 'i',
'author' => get_queried_object_id(), 'showposts' => 100
);
$editors_pages = new WP_Query($args2);
// The loop
if ($editors_pages->have_posts()) : while ($editors_pages->have_posts()) : $editors_pages->the_post(); ?>
<div class='col-xs-12 col-sm-4 col-md-3'>
<div class='author-pages-title'><h4><?php the_title(); ?></h4></div>
</div>
<?php endwhile; else : ?>
<p class='align-center'>Sorry, no pages posted yet by this user.</p>
<?php endif;
wp_reset_postdata();
?>
A good way to tackle this is to give min height to your columns. This You may need a media query for each size i.e. xs,md.
// The loop
<div class="row"> // put a div
if ($editors_pages->have_posts()) : while ($editors_pages->have_posts()) : $editors_pages->the_post(); ?>
<div class='special-min-height col-xs-12 col-sm-4 col-md-3'> // add a class to reference too.
<div class='author-pages-title'><h4><?php the_title(); ?></h4></div>
</div>
<?php endwhile; else : ?>
<p class='align-center'>Sorry, no pages posted yet by this user.</p>
<?php endif;
</div>
CSS
.row .special-min-height {
min-height: 200px;
}
Then you can write media query for the remaining screens giving different min height.
use the following css property for solving the problem.
height: 100px;
overflow:auto;
through this way all your boxes will have same height and if the content is more then the given height will automatically add a scroll and adjust your content in it.
what would be the right way to mark item as reserved? my current way works but i doubt it's "right" way to do it.
i've a simple query to get rows from database and then outputting them inside html tags. Here is example of my php variables:
$name = $row['name'];
$price = $row['price'];
$reserved = $row['reserved'];
and html example:
<div class="container">
<div class="item">
<div class="name">
$name
</div>
<div class="price">
$price
</div>
<div class="reserved">
$reserved
</div>
</div>
</div>
if a item is reserved, then i just add text to reserved- field in database.
I hide all "reserved" divs in css. Then i'm using jquery to loop through all "reserved" items. I check if that div has text, if it has, then i show it and after that i clear it.
$(".reserved").each(function(index) {
if($(this).is(":empty")) {
$(this).hide();
}
$(this).empty();
});
After that all items which had text in "reserved" field in database will have different layout. As they're supposed to have. It works but i don't think this is the right way.. can someone lead me to the right way? any help would be appreciated.
apologies if this has been covered anywhere here. I tried searching, but only found topics related to styling and positioning captions within the carousel code…
So, I have a layout that contains three columns:
The left column contains general information related to each page/project.
The center column contains a Bootstrap 3 carousel with images.
The right column is where I was planning on displaying all the captions related to the images in the center Carousel.
I can't quite figure out how to get the captions working in the right column. To clarify, the captions will change with each carousel slide, just as they do in the default carousel setting. I basically want to move the captions off the image, and into the right column.
I am using Kirby (www.getkirby.com) as my CMS and I am using a foreach loop to get the code for the images, etc. in the carousel. Here is my current code, including the caption section (which I am trying to move…)
<div id="center" class="col-xs-12 col-sm-6 col-md-8">
<?php $imagepage = $page->children()->first() ?>
<?php if($imagepage->hasImages()): ?>
<div id="merry-go-round" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php $n=0; foreach($imagepage->images() as $image): $n++; ?>
<div class="item<?php if($n==1) echo ' active' ?>">
<img style="display:block; margin-left: auto; margin-right: auto;" src="<?php echo $image->url() ?>" alt="<?php echo html($image->title()) ?>" class="img-responsive">
<div class="carousel-caption"><?php echo $image->img_title() ?></div>
</div>
<?php endforeach ?>
<?php endif ?>
</div><!-- /carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#merry-go-round" data-slide="prev"></a>
<a class="right carousel-control" href="#merry-go-round" data-slide="next"></a>
</div><!-- /merry-go-round -->
</div><!-- /#center -->
<div id="right" class="col-xs-12 col-sm-3 col-md-2">
<p>THIS IS WHERE I AM TRYING TO PUT THE CAROUSEL CAPTIONS…</p>
</div><!-- /#right -->
I've tried by best but I am all out of ideas. I thought maybe I could do something like make the caption a variable:
<?php $test_caption = $image->img_title() ?><?php echo $test_caption ?>
but this doesn't work outside the carousel area. I'm guessing it's that it won't work outside of the foreach loop?
Anyway, if anyone has any suggestions I would really appreciate it. I'm learning PHP as I go along, but I don't know any javascript so I'm hoping there's a solution outside that. And again, I'm using Bootstrap 3.
Here is a link to a fiddle I made (without all the php stuff…):
http://jsfiddle.net/4tMfJ/2/
Based on Twitter Bootstrap Carousel - access current index
You can add the code below to your javascript (after loading jquery / bootstrap)
$(function() {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('#right h1').html(caption.html());
caption.css('display','none');
$(".carousel").on('slide.bs.carousel', function(evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index()+1) + ') .carousel-caption');
$('#right h1').html(caption.html());
caption.css('display','none');
});
});
also see: http://jsfiddle.net/4tMfJ/3/
Thanks Bass for your answer it worked for me !
But i did not want to have replicated content so i did it my way ;)
$("#slider").on('slide.bs.carousel', function(evt) {
var step = $(evt.relatedTarget).index();
$('#slider_captions .carousel-caption:not(#caption-'+step+')').fadeOut('fast', function() {
$('#caption-'+step).fadeIn();
});
});
http://jsfiddle.net/4fBVV/3/
I am trying to use PHP associative arrays to echo different values for text and images into HTML for different instances of a jQuery slideshow on the same page. Here's the HTML:
<div class='slide'>
<div class='mosaic-block fade'>
<div class='mosaic-overlay'>
<div class='text'><p>This is the text!</p></div>
</div>
<div class='mosaic-image'><img src='imgs/the-img.png'/></div>
</div> <!-- mosaic-block fade -->
</div> <!-- .slide --> `
I wrote arrays for each type of slideshow containing the text and image for each slide, here's and example:
$my_content = array(
'image1.png' => 'image1 text!',
'image2.png' => 'image2 text!'
);
Then I wrote a function with parameters for the category of slideshow and the content:
function gallery_content($content) {
foreach ( $content as $img => $txt ) {
echo "<div class='slide'>
<div class='mosaic-block fade'>
<div class='mosaic-overlay'>
<div class='text'><p>".$txt."</p></div></div>
<div class='mosaic-image'><img src='imgs/other/".$img."'/></div>
</div> <!-- mosaic-block fade -->
</div> <!-- .slide --> ";
}
I call it like this: gallery_content($my_content); and it works really well. But when I try to call it again for another set of values, only the first instance seems to work. I tried using the array directly instead of the variable as a parameter AND making a separate function for each slideshow, but keep getting the same results.
Why can't the function be called more than once? Thanks in advance.
My guess would be that PHP is doing its job. Check the source of the outputted document and you should see the proper number of galleries). I suspect that a CSS rule for the class gallery such as one that absolutely positions it is causing only one gallery to be visible. If you're OK with using inline CSS (which is not usually acceptable), you can have PHP add a custom position value (such as top) based on the gallery number:
function gallery_content($content) {
$num = 0;
foreach ( $content as $img => $txt ) {
echo "<div class='slide' style='top: ".(100 + 50*$num)."px'>
<div class='mosaic-block fade'>
<div class='mosaic-overlay'>
<div class='text'><p>".$txt."</p></div></div>
<div class='mosaic-image'><img src='imgs/other/".$img."'/></div>
</div> <!-- mosaic-block fade -->
</div> <!-- .slide --> ";
}
The example above gives the first gallery element a top of 100px (100 + 50 * 0), the second element a top of 150px, the tird 200px, and so on. You also could use some CSS3 and the new calc() feature in place of this, but CSS3 selectors are experimental and not supported in some older browsers. Using PHP and inline styles would be your safest bet.
See the source code that is generated on your final page(HTML) to judge whether PHP did its work or not. i think thats your resultant "galaries"(DIV) might be having the same ID or other attributes thorugh which the jQuery activates them, and so only one is being run properly (the first one), and the second one is not run.
Hope that helps.