Develop Reference

Bootstrap Automatically Hiding my images in my Webpage Php

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

Using a jQuery function with a PHP while loop

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.

Making a <div> Clickable in Wordpress

I'm working on modifying an existing wordpress portfolio page. All that is left to do is to make it so when the user clicks anywhere in the article list the link will open. Currently it is just when the title or image is clicked.
I can see that I could make a clickable with the following setup:
<a href="http://example.com">
<div>
anything
</div>
</a>
However Wordpress moves the tags when the page loads like so:
<a href="http://example.com">
</a>
<div>
anything
</div>
So I started to work on using css with the following setup:
HTML
<div class= "box">
</div>
CSS
div.box {
position: relative;
}
div.box:hover {
cursor: hand;
cursor: pointer;
opacity: .9;
}
The hover works, it triggers over all of the content and a cursor does appear.
However thats as much as I can do so far. Any attempt to interact with the .box is shot down. Nothing will trigger with javascript using the following :
$(".box").click(function() {
alert("I am an alert box!");
});
I cannot seem to interact with the div.
The page is as follows:
<div class= "box">
<article id="post-<?php the_ID(); ?>" class="portfolio-article clearfix">
<?php if( get_post_meta($post->ID, "portfolio_image", true) ): ?>
<img src="<?php the_field('portfolio_image'); ?>" class="portfolio-image">
<!--get PDF if not empty-->
<?php else: ?>
<img src="http://domain.com/wp-content/uploads/2014/02/placeholder.png" class="portfolio-image">
<?php endif; ?>
<div class="portfolio-content">
<header>
<?php if( get_post_meta($post->ID, "portfolio_link", true) ): ?>
<h1 class="portfolio-title">
<a target="_blank" href="<?php the_field('portfolio_link'); ?>">
<?php the_field('portfolio_title'); ?> <span class="sosa-icon">p</span>
</a>
</h1>
<!--get PDF if not empty-->
<?php else: ?>
<h1 class="portfolio-title"><?php the_field('portfolio_title'); ?></h1>
<?php endif; ?>
</header>
<p class="portfolio-meta">
<?php the_field('portfolio_publication_and_date'); ?>
<?php if( get_post_meta($post->ID, "portfolio_pdf_upload", true) ): ?>
<span class="sosa-icon">H</span> Open Pdf<!--get PDF if not empty-->
<?php endif; ?>
</p><!-- END ortfolio-meta -->
</div><!--portfolio-content-->
</article>
</div>

NewToJS was in the right area when saying it could be a problem with the access to the jQuery library. In this case I had linked jQuery correctly, it was tested and working.
jQuery in Wordpress needs to be enqueued by adding the following into functions.php
wp_enqueue_script("jquery");
My fault was because I didn't change the '$' to 'jQuery' as this is necessary when working with Wordpress.
Here is the incorrect usage :
$(".box").click(function() {
alert("I am an alert box!");
});
Here is the correct usage :
jQuery(".box").click(function() {
alert("I am an alert box!");
});

Jquery load in same script

I'm sorry if this is already asked. I couldn't find it.
I'm making an AJAX chat system. It's going great, the only problem I'm having is that I need the chat to automatically refresh itself every second. I know this can be done with the load() function...
But I would like to refresh the div and the PHP inside it, now load it from another script.
My piece of code(JS):
<script>
setInterval(function() {
$('#container').load();
}, 1000); </script>
And the div I want to reload/refresh every second:
<div class="container" id="container">
<?php
$queryChat = $mysqli->query("SELECT id,message,username,date FROM chat ORDER BY id DESC LIMIT 0, 10");
while($infoChat = $queryChat->fetch_array())
{
?>
<div class="text">
<div class="name"><?php echo $infoChat['username']; ?></div>
<div class="time"><?php echo $infoChat['date']; ?></div>
<div class="body"><?php echo $infoChat['message']; ?></div>
</div>
<?php
}
?>
</div>
And if I do $('#container').load('index.php'); it will give me this(the site will also be very slow): $('#container').load('index.php');
Thank you very much for helping in advance! My English is also very bad due that it's not my mother language :-)

Don't you think it will be cleaner to just include() your "message pooling" script inside your <div class="container" id="container">, so that your main chat page will now have:
<div class="container" id="container">
<?php
include("chatScript.php");
?>
</div>
Then chatScript.php will contain:
<?php
$queryChat = $mysqli->query("SELECT id,message,username,date FROM chat ORDER BY id DESC LIMIT 0, 10");
while($infoChat = $queryChat->fetch_array())
{
?>
<div class="text">
<div class="name"><?php echo $infoChat['username']; ?></div>
<div class="time"><?php echo $infoChat['date']; ?></div>
<div class="body"><?php echo $infoChat['message']; ?></div>
</div>
<?php
}
?>
Then you can simply do
<script>
setInterval(function() {
$('#container').load();
}, 1000);
</script>
after loading <div class="container" id="container">.
Hope this helps

Add an html to an element under PHP condition

I'm trying to add an HTML next to an existing element in my page. This is what I've tried::
HTML/PHP
<?php
if ( $duedatereservation < $today ) {
//echo "Past Due!";
$isPastDue = true;
}
?>
<div class="container">
<div class="inner">Transaction Date</div>
<div class="inner">Due Date</div>
</div>
<h2 id="report">Notice</h2>
jquery:
$(document).ready(function(){
$("<span>Past Due!</span>").insertAfter("#report");
});
What exactly I want is when the condition $isPastDue is true, I want to append/add a html tag next to #report h2. But it's not displaying. Any ideas? Help is much appreciated. Thanks.

Try this code
<?php
if ( $duedatereservation < $today ) {
//echo "Past Due!";
$isPastDue = true;
}
?>
<div class="container">
<div class="inner">Transaction Date</div>
<div class="inner">Due Date</div>
</div>
<h2 id="report">Notice</h2>
<?php if($isPastDue):?>
<span>Past Due!</span>
<?php endif;?>
If your requirement this much, no need to add JavaScript.Just use only php.

Try to do like this:
<?php
if($isPastDue) {
?>
<script>
$(document).ready(function(){
$("<span>Past Due!</span>").insertAfter("#report");
});
</script>
<?php
}
?>

So, the main case is you want to execute the insertAfter script only if isPastDue is true. You can do it by echo the insertAfter script before closing } of your PHP if condition.
<?php
if($duedatereservation < $today){
echo '<script>';
echo '...
echo '</script>';
}

No need to use JQuery for this. You can do this using PHP only
<h2 id="report">Notice <?php if($isPastDue){echo "<span>Past Due!</span>";} </h2>