Is there a good way of calling a css class as part of a PHP if else statement? What I am trying to do is change the background color of a div that is a part of the html depending on the value of the results from a php if else statement.
php
if(!empty($check_availability)){
echo <div id="1"> do something <div>
// make the div background green if this is true
}
else {
<div id="2"> do something else instead<div>
//make backgound red if this is true
}
html
<div id="container"> <!-- <<<<<<< this is the div that I want to change the background color of depending on results from the php -->
<div id="1"></div>
<div id="2"></div>
</div>
I assuming you are talking about conditionally adding classes to divs. good is subjective, but this is what I normally do.
$class = !empty($check_availability) ? 'green-class' : 'red-class';
echo "<div class='{$class}'> do something <div>";
Related
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
This is semi related to my last question but i have set up a filemaker foreach loop to output a group of images to accompany there names and ids, along with a checkbox.
Once checked the relating images go to another page to print, No matter how much i try i cant get the elements to fit to one page ?
I have used inline styling, a Print css stylesheet, all possible combinations with chromes inspector.
I can make it fit, once the image name is taken away, but i need this included.
include('head.php');
if (isset($_POST['img'])) {
$img = $_POST['img'];
} else {
$img = '';
echo 'error';
}
?>
<div class="container">
<div class="row" >
<?
foreach ($img as $image){
//echo '<div class="col-md-5">';
echo '<img class="" style="margin:20px 10px 10px 0px; width:45%;" src="Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/'.$image.'">';
echo '<p class="centered" style="width:45%;">'.$image.'</p>';
//echo '</div>';
}
?>
</div>
</div>
Basically i'm trying to achieve an A4 portrait, with a grid of 6 images, with a margin between and the label underneath.
I tried pushing everything into a col-md-6 div, taking the <p> tags away but this didn't help.
I also tried using px opposed to %, just cant figure this one out.
The code from the previous page;
echo '<input type="checkbox" class="form-control check" id="img" name="img[]" value="'.$pic.'">';
With the $pic variable being the image name.
I think you can achieve what you want by tweaking the img height in #media print, like so:
#media print{
img{max-height:280px} //tweak this until you're happy
}
Also, don't forget the img-responsive bootstrap class - it works wonders:)
<div class="col-xs-6"> <!-- this will limit img width if img-responsive used too-->
<img class="img-responsive" src="image.jpg">
<p>Filename 1</p>
</div>
You can probably also forgo most of your inline styling and stick with bootstrap's defaults at first, then tweak later if you really need to.
http://www.bootply.com/YZkHOq0C1i
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.
Basically, I would like to accomplish the following with jQuery:
<div class="120 most-voted">
<!-- DON'T HIDE THIS DIV -->
</div>
<div class="110 voted">
<!-- some stuff here -->
</div>
<div class="120 voted">
<!-- hide this div with class '120' since there's already
another div with class '120' at the top -->
</div>
<div class="23 voted">
<!-- some stuff here -->
</div>
EDIT: The numbers are dynamically generated by a PHP function:
<?php $postid = get_the_ID(); // capture the id ?>
<div id="<?php echo $postid; ?>" class="most-voted">
I don't want to hide the div at the top.
Any suggestions (I don't mind wrapping another div in the div at the top to accomplish this result)?
This will make the first div with class "v120" visible and all others hidden:
var theClass = "v120";
$("div." + theClass).first().show().end().not(":first").hide();
Live example
(I added the "v" to "120" because I wasn't sure whether "120" is a valid CSS class.)
How that works:
Find all divs with the class - $().
Reduce that set temporarily to the first match - .first()
show that one (in case it used to be hidden)
End the temporary reduction of the set - .end()
Reduce the set to only the matches that aren't the first - .not(":first")
hide them
Its not valid html, the id must be unique within the document
http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
Use rel attributes instead of IDs. Then use selector like:
$('div.voted[rel=110]')
If you want to use same div, you should conceder using a class attribute since double id is not allowed.
<div class="most-voted id_120">
<!-- some stuff here -->
</div>
<div class="voted id_110">
<!-- some stuff here -->
</div>
<div class="voted id_120">
<!-- hide this div with id 120 since its already
at the top in the div with class most-voted -->
</div>
<div class="voted id_100">
<!-- some stuff here -->
</div>
use this to locate the first on http://api.jquery.com/first-selector/
I am using following a tutorial from here: http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/
This is the script I use:
<script type="text/javascript" language="javascript">
$(function() {
// SETUP:
// When the info banner is clicked:
$('#setup').click(function() {
$('#intro').css("display","none");
$.cookie('intro', 'collapsed');
});
// COOKIES
// Info banner state
var intro = $.cookie('intro');
// READ THE COOKIES
if (intro == 'collapsed') {
$('#intro').css("display","none");
};
});
</script>
The script hides the following div as the cookie is read:
<div class="feedback attention" id="intro">
Text goes here
<a id="setup" href="#">Ok I get it, please hide this</a>
</div>
Everything work great but when the page loads the div is shown for a split second. I guess the solution is to present two different pieces of markup serverside according to the cookie info. I have no idea how to go about this.
On page load, you could use php to check the cookie, and then add a hidden class. Something like <div class="<?= $_COOKIE['intro'] == 'collapsed' ? 'hidden':'' ?>">
Edit:
In CSS then, you can add something like .hidden { display: none; } and use jQuery to add or remove that class.
You could just do something like:
<?php
if($_COOKIE['intro'] != 'collapsed') {\
//echo div...
}
if you are using PHP:
<?php if($_COOKIE['intro'] != 'collapsed'){ ?>
<div class="feedback attention" id="intro">
Text goes here
<a id="setup" href="#">Ok I get it, please hide this</a>
</div>
<?php } ?>
To completely remove the div rather than just hide it.
check $_COOKIE array for 'intro'
if ($_COOKIE['intro'] == 'collapsed')
//...
simply, add some kind of "hidden" class to the div, or specify it like style="display: none;"
//edit
actually, by adding the "style" attribute you ensure that the div is not displayed as soon as get parsed, while using "class" property might cause interval while waiting for CSS file.
thus
<div<?= ($_COOKIE['intro'] == 'collapsed') ? ' style="display: none"' : '' ?>> ..</div>
is best here.