I'm showing my data in an inline manner using bootstrap like this
for example,
But when I add some bootstrap classed, then my images are not showing.
My Code is :
<div class="container">
<h3>Teachers:</h3>
<div class="row">
<?php
$queryTeachers = "SELECT places.PLACE_NAME,teacher_status.PERSON_NAME,DATE_FORMAT(teacher_status.STATUS_DATE,'%d-%m-%Y') as STATUS_DATE,DATE_FORMAT(teacher_status.STATUS_TIME,'%h:%i:%s %p') as STATUS_TIME, teachers.IMAGE_FOLDER AS IMAGE_FOLDER,teachers.IMAGE_NAME as IMAGE_NAME FROM places,teacher_status,teachers WHERE places.PLACE_ID=teacher_status.PERSON_CURRENT_PLACE AND teachers.TEACHER_ID=teacher_status.TEACHER_ID;";
$resultTeachers = mysqli_query($conn,$queryTeachers) or die("Unable to select status". mysqli_error($conn));
while($row=mysqli_fetch_assoc($resultTeachers)) {
echo '<div class="col-lg-3">';
echo '<img src="'."../".$row['IMAGE_FOLDER'].$row['IMAGE_NAME'].'" width="130" height="150"/>';
echo "<br>";
echo "Persone Name : ".ucwords($row['PERSON_NAME']);
echo "<br>";
echo "Current Place : ".ucwords($row['PLACE_NAME']);
echo "<br>";
echo "Status Date : ".$row['STATUS_DATE'];
echo "<br>";
echo "Status Time : ".$row['STATUS_TIME'];
echo "<br><br>";
echo '</div>';
}
?>
</div>
</div>
I'm completely new to bootstrap and only know the basics.
Hello Try following code that is for demo only
<div class="container">
<h3>Teachers:</h3>
<div class="row">
<?php for($i=1;$i<=4;$i++) {?>
<div class="col-lg-3">
<div class="img-responsive"><img src="http://via.placeholder.com/150x150"></div>
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>
</div>
<?php } ?>
</div>
Don't use fixed height and width in images just use a class ie : img-responsive
eg:- class="img-responsive" in img tag
Related
I'm looking for a method in native JavaScript or jQuery to display a div by clicking on the icon that corresponds to it.
The icons are in a carousel that works with Owl Carousel 2
Icons and div are created dynamically on WordPress with an ACF Repeater Fields
Icons and div each have an ID :
For icons: img_1, img_2 ...
For blocs: div_1, div_2 ...
The icons carousel loop :
<?php $GLOBALS['img'] = 0;
if (have_rows('carrousel_icons')): ?>
<div id="owl-carousel-skills" class="owl-carousel-skills owl-theme col-12 col-sm-10">
<?php while (have_rows('carrousel_icons')): the_row();
$icon = get_sub_field('icon');
$GLOBALS['img']++;
?>
<div id="img_<?= $GLOBALS['img'] ?>" class="owl-carousel-skills-menu-item">
<img src="<?= $icon['url'] ?>" alt="<?= $icon['alt'] ?>">
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
ACF Repeater Fields Blocs :
<?php
$GLOBALS['div'] = 0;
$counter = 0;
if (have_rows('carrousel_icons')): ?>
<div class="col-12 col-sm-8 bloc_carousel_icons__txt">
<?php while (have_rows('carrousel_icons')): the_row();
$title = get_sub_field('title');
$txt = get_sub_field('txt');
$GLOBALS['div']++;
if ($counter) {
?>
<div id="div_<?= $GLOBALS['div'] ?>" class="inactive" style="display: none;">
<h3><?= $title ?></h3>
<?= $txt ?>
</div>
<?php continue; } ?>
<!-- first DIV -->
<div id="div_<?= $GLOBALS['div'] ?>" class="active" style="display: block;">
<h3><?= $title ?></h3>
<?= $txt ?>
</div>
<?php $counter++;
endwhile; ?>
</div>
<?php endif; ?>
Link to see a screenshot
I tested something but it only shows / hides all the div at once by clicking on any icon :
$(function(){
var $allBlocks = $(".bloc_carousel_icones__textes > div");
var id = this.id, itemId = ".bloc_carousel_icones__textes > #div_" + id;
$(document.body).on("click", "div.owl-carousel-competences-menu-item", function (evt) {
var id = this.id, itemId = ".bloc_carousel_icones__textes > #div_" + id;
$allBlocks.not($('.hidden').fadeToggle()).hide();
});
});
I have no idea how to do this, anyone have an idea?
Thanks in advance !
You can do it like this: Add a click() event handler for all images that have an id that starts with img_, get the number of this id with substr and toggle the corresponding div.
$(document).ready(function() {
$("img[id^='img_']").on("click", function() {
let id = $(this).attr("id").substr(4);
$("#div_" + id).fadeToggle();
});
})
Update: As asked in the comment, there's a solution needed to deactivate the previously active <div> when a new <div> gets activated. This can be done as follows:
$(document).ready(function() {
$("img[id^='img_']").on("click", function() {
let id = $(this).attr("id").substr(4);
if ($("div[id^='div_']").not($("#div_" + id)).is(":visible")) {
$("div[id^='div_']").not($("#div_" + id)).fadeToggle();
}
$("#div_" + id).fadeToggle();
});
})
div[id^='div_'] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img_1" src="https://dummyimage.com/50x50/000000/ffffff&text=1" />
<img id="img_2" src="https://dummyimage.com/50x50/cecece/000000&text=2" />
<div id="div_1">
div 1
</div>
<div id="div_2">
div 2
</div>
I'm creating a website for a client, but I'm primarily a front-end developer. I had to create a while loop (which works just fine) to build a gallery. The client wants a before/after display on the gallery. I elected to use the TwentyTwo jQuery plugin. However, I am having an issue. It is only displaying the first container, which displays just fine.
The necessary jQuery, inline , and css files are displayed on that page linked above. I am using bootstrap as a framework. Here is my code:
$(window).load(function() {
$("#container1").twentytwenty();
});
<div class="row">
<div class="col-lg-12">
<h2><span class="color">Our Gallery</span> </h2>
<?php
//Selects all images
$sql = $GLOBALS['gmysqli']->query("SELECT image FROM gallery ORDER BY postDate DESC") or die($GLOBALS['gmysqli']->error);
while ($row = $sql->fetch_assoc()) {
$image = $row["image"];
?>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div id="container1" class="twentytwenty-container">
<img src="<?php echo $beforeimage; ?>">
<img src="<?php echo $afterimage; ?>">
</div>
</div>
<?php } ?>
</div>
</div>
The problem here is the duplicate ID you generating in the php loop. This results in invalid html and can cause problems when using it as a selector.
You can switch to using a class selector:
$(document).ready(function(){
$(".twentytwenty-container").twentytwenty();
});
I updated your ready handler to the recommend structure. Or for the shorthand:
$(function() {
$(".twentytwenty-container").twentytwenty();
});
When using the class selector you can get rid of the ID in the HTML element
If you want to stick to the ID you can add a iteration variable to your loop and use the attribute selector:
$(function() {
$( "div[id^='container-']" ).twentytwenty();
});
<?php
$i = 0;
while($row = $sql->fetch_assoc()) {
$image = $row["image"]; ?>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div id="container-<?php echo $i; ?>" class="twentytwenty-container">
<img src="<?php echo $beforeimage; ?>">
<img src="<?php echo $afterimage; ?>">
</div>
</div>
<?php
$i++;
} ?>
try without order by statement.
Example:
<div class="row">
<div class="col-lg-12">
<h2><span class="color">Our Gallery</span> </h2>
<?php
//Selects all images
$sql = $GLOBALS['gmysqli']->query("SELECT image FROM gallery") or die($GLOBALS['gmysqli']->error);
while($row = $sql->fetch_assoc())
{ $image = $row["image"]; ?>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div id="container1" class="twentytwenty-container">
<img src="<?php echo $beforeimage; ?>">
<img src="<?php echo $afterimage; ?>">
</div>
</div>
<?php } ?>
</div>
</div>
If you could share how you database are filled out could more easy to help you.
And the project link.
I hope helped you out anyway.
I am working on a mosaic of thumbnails linking to child pages. The code works in such a way that the child pages display in an iframe overlaying the content. However the client wants only 4 of these pages to have content, so the code needs to work in such a way that ONLY if the child page has content, does the rollover get enabled to open as an iframe overlay.
I currently have the following code. Any ideas how i could customise it so that the overlay is enabled ONLY if the child page has content? Many thanks.
<section id="content" role="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<section id="content_team" class="entry-content js-masonry">
<?php $child_pages = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = " . $post->ID . " AND post_type = 'page' ORDER BY menu_order", 'OBJECT'); ?>
<?php if ($child_pages) : foreach ($child_pages as $pageChild) : setup_postdata($pageChild); ?>
<div class="child-thumb">
<div id="click_overlay" onclick="var overlay = document.getElementById('hidden_overlay');
overlay.src = 'about:blank';
overlay.style.display = 'block';
overlay.src = '<?php echo get_permalink($pageChild->ID); ?>';"><span class="featured-title-overlay">
<span class="featured-title">
<span class="title"><?php echo get_the_title($pageChild->ID); ?></span>
<div class="hr"> </div>
<span class="title_link">Read more...</span>
</span>
</span><?php echo get_the_post_thumbnail($pageChild->ID); ?></div>
<br class="clear" />
</div>
<?php endforeach;
endif;
?>
</section>
</article>
<?php endwhile;
endif; ?>
<iframe id="hidden_overlay" src="about:blank"></iframe>
<p class="clear"> </p>
</section>
I'd like to check the id of the parent element, to display either the big or the small version of an image.
<div id="content">
<?php include 'test.php';?>
</div>
<div id="sidebar">
<?php include 'test.php';?>
</div>
In test.php, an if-statement checks if the parent has the demanded id.
Is there a way to get the parentnode-id without JavaScript?
No. PHP do nothing with the rendered page.
But why don't you create a function and call that with parameters?
include 'test.php'
?>
<div id="content">
<?php showImage(); ?>
</div>
<div id="sidebar">
<?php showImage(true); ?>
</div>
<?php
And in test.php
function showImage($smallImage = false) {
if (!$smallImage) {
echo '<img src="path/to/bigimage" alt="" />';
} else {
echo '<img src="path/to/smallimage" alt="" />';
}
}
Or there are an alternative way. Set a variable before you include your file, and you can set an if condition in your test.php when you want to show the image.
<div id="content">
<?php
$parentNode = 'content';
include 'test.php'
?>
</div>
<div id="sidebar">
<?php
$parentNode = 'sidebar';
include 'test.php'
?>
</div>
I was expecting the below results to be displayed in collapsible fashion in html page but it would display the result without that in just plain fashion ?
I am suing data-role="collapsible" still it would not display it ?
php (updateProjectsCreated.php)
while($row = mysqli_fetch_array($result))
{
echo "<div data-role=\"collapsible\"> " ;
echo "<B> UniqueAdvertisingCode = '".$row['UniqueAdvertisingCode']."' </B>";
echo "<B> AdvertiserName = '".$row['AdvertiserName']."' </B>";
echo "<B> Title = '".$row['Title']."' </B>";
echo "<br><hr>";
echo "</div> " ;
}
javascript
function updateProjectsCreated(){
var email="xyz#gmail.com";
$.post("php/updateProjectsCreated.php",
{ email:email}, function (data,status){
$("#showeditdashboard").html(data);
});
}
html
<body>
<div data-role="page" id="page">
<div data-role="main" class="ui-content">
<div id="showeditdashboard"> </div>
</div>
</div>
</body>
Assuming you're using jqm 1.4, change
$("#showeditdashboard").html(data);
To
$("#showeditdashboard").html(data).enhanceWithin();