I want to create a little Chat.
The Chat have to look like this:
But the Datainformation list it wrong...
The CSS is done, but I don't know how I can fix it...
Can someone help me?
PHP Code:
<div class="messages messages-img">
<?php while($fetch_ticket_answer = $query_ticket_answer->fetch()) { ?>
<div class="item in">
<div class="image">
<img src="../assets/images/users/user2.jpg">
</div>
<div class="text">
<div class="heading">
<b>Test User</b>
<span class="date"><?php echo htmlentities($fetch_ticket_answer["Time"]); ?></span>
</div>
<?php echo htmlentities($fetch_ticket_answer["Message"]); ?>
</div>
</div>
<?php } while($row_ticket_answer2 = $query_ticket_a_answer->fetch()) { ?>
<div class="item">
<div class="image">
<img src="../assets/images/users/user.jpg">
</div>
<div class="text">
<div class="heading">
<b>User 2</b>
<span class="date"><?php echo htmlentities($row_ticket_answer2["Time"]); ?></span>
</div>
<?php echo $row_ticket_answer2["Message"]; ?>
</div>
</div>
<?php } ?>
</div>
Related
Im working on a wordpress page, want to display the content of posts in a specific layout, it work well, but when I add another post, the posts "dos" and "tres", appears inside the post "uno", instead of on his real parent the "nested" div. any clues?
<div class="grid">
<div class="post principal">
<!--show data-->
</div>
<div class="nested">
<?php if($count_post>1){?> <!--if there is more post fill div with data-->
<div class="post uno">
<!--show data-->
</div>
<?php }else{?>
<div class="post uno">
<!--dont show anything but keep the div-->
</div>
<?php } ?>
<?php if($count_post>2){?>
<div class="post dos">
<!--show data-->
</div>
<?php }else{?>
<div class="post dos">
<!--dont show anything but keep the div-->
</div>
<?php } ?>
<?php if($count_post>3){?>
<div class="post tres">
<!--show data-->
</div>
<?php }else{?>
<div class="post tres">
<!--dont show anything but keep the div-->
</div>
<?php } ?>
</div> <!--end nested-->
</div> <!--end grid-->
here it is all the code, the wierd thing is that lets say I have two posts in the array and all is correctly displayed, but when I add another the post "dos" and "tres" changes parent
<?php $the_query = new WP_Query( 'posts_per_page=7' );?>
<!--Obtener la cantidad de post-->
<?php $count_post = $the_query->post_count;?>
<div class="grid">
<div class="post principal">
<!--Obtener la id del post-->
<?php $post_id = $the_query->posts[0]->ID;?>
<!--Obtener la id de la imagen-->
<?php $thumbnail_id = get_post_thumbnail_id($post_id);?>
<!--Obtener source de la imagen-->
<?php $img = wp_get_attachment_image_src( $thumbnail_id, 'full');?>
<img id="img_prin" src="<?php echo $img[0] ?>" alt="">
<a href="<?php echo get_permalink($the_query->posts[0]);?>">
<h2>
<?php echo $the_query->posts[0]->post_name;?>
</h2>
</a>
<?php $content = get_post_field('post_content', $post_id);?>
<p>
<?php echo $content;?>
</p>
</div>
<div class="nested">
<?php if($count_post>1){?>
<div class="post uno">
<?php $post_id1 = $the_query->posts[1]->ID;?>
<?php $thumbnail_id1 = get_post_thumbnail_id($post_id1);?>
<div class="img_post">
<?php $img1 = wp_get_attachment_image_src( $thumbnail_id1);?>
<img src="<?php echo $img1[0] ?>" alt="">
</div>
<div class="cont">
<h5>
<?php echo $the_query->posts[1]->post_name;?>
</h5>
<?php $full_post1 = get_post_field('post_content', $post_id1);?>
<?php echo $excerpt1 = substr($full_post1,0,50).'...';?>
</div>
</div>
<?php }else{?>
<div class="post uno"><div class="img_post"></div><div class="cont"></div>
</div><?php } ?>
<?php if($count_post>2){?>
<div class="post dos">
<?php $post_id2 = $the_query->posts[2]->ID;?>
<?php $thumbnail_id2 = get_post_thumbnail_id($post_id2);?>
<?php $img2 = wp_get_attachment_image_src( $thumbnail_id2); >
<div class="img_post">
<img src="<?php echo $img2[0] ?>" alt="">
</div>
<div class="cont">
<h5>
<?php echo $the_query->posts[2]->post_name;?>
</h5>
<?php $full_post2 = get_post_field('post_content', $post_id2);?>
<?php echo $excerpt2 = substr($full_post2,0,50).'...';?> <!--EXCERPT-->
</div>
</div>
<?php }else{?>
<div class="post dos"><div class="img_post"></div><div class="cont"></div>
</div><?php } ?>
<?php if($count_post>3){?>
<div class="post tres">
<?php $post_id3 = $the_query->posts[3]->ID;?>
<?php $thumbnail_id3 = get_post_thumbnail_id($post_id3);?>
<?php $img3 = wp_get_attachment_image_src( $thumbnail_id3);>
<div class="img_post">
<img src="<?php echo $img3[0] ?>" alt="">
</div>
<div class="cont">
<h5>
<?php echo $the_query->posts[3]->post_name;?>
</h5>
<?php $full_post3 = get_post_field('post_content', $post_id3);?>
<?php echo $excerpt3 = substr($full_post3,0,50).'...';?>
</div>
</div>
<?php }else{?>
<div class="post tres"><div class="img_post"></div><div class="cont"></div>
</div><?php } ?>
</div>
<?php wp_reset_postdata(); ?>
</div>
I have created a accordion and its in a loop but i want only one accordion open at a time not multiple one. I have used data parent attribute of bootstrap but its not working. Any kind of help would be highly appreciated.
I want only one accordion open at one time. How to achieve it. I think i'm having this problem because of for each loop. Is there any way to solve it ?
Here is my code :
<?php if(!empty($tickets)) : ?>
<?php foreach($tickets as $ticket) : ?>
<div class="panel-group-custom" id="#panels">
<div class="panel panel-default mb-0 no-border">
<div class="panel-heading.panel-heading-custom" >
<h4 class="panel-title">
<div data-toggle="collapse" data-parent="#panels" data-target="#collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="accordion-title">
<div class="row">
<div class="overflow-hidden">
<div class="col-md-2">
<span class="ticket-heading1" title="Ticket ID"><i class="fa fa-ticket" aria-hidden="true"></i> <?php echo $ticket['SupportTicket']['ticket_id']; ?> </span>
</div>
<div class="col-md-7"><span class="ticket-title"><?php echo $ticket['SupportTicket']['title'] ?></span></div>
<div class="col-md-2">
<span class="ticket-heading2" title="Ticket created on"><i class="fa fa-calendar" aria-hidden="true"></i>
<?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>
<?php echo date_format($bdate,"d-M-Y") ?>
</span>
</div>
<div class="col-md-1">
<span class="accordion-down">
<i class="fa fa-chevron-down dropdown-toggle down-arrow2" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
</h4>
</div>
<div id="collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="panel-collapse collapse">
<div class="panel-body">
<div class="hidden-overflow ticket">
<div class="full-width hidden-overflow ticket-chat">
<p class="color-4 ticket-content">
<?php echo $ticket['SupportTicket']['description'] ?>
</p>
<?php if($ticket['SupportTicket']['status']>1) : ?>
<p class="color-1 pull-right ticket-content"> <span class="resolution">Feedback</span>
<?php echo $ticket['SupportTicket']['resolution_text']; ?>
<span class="ticket-updated"><span class="bolder"><i class="fa fa-clock-o" aria-hidden="true"></i>
<?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>
<?php echo date_format($bdate,"d-M-Y") ?>
</span></span>
</p>
<?php endif ?>
</div>
<div class="full-width hidden-overflow mt-5">
<!-- <p class="ticket-close"><i class="fa fa-window-close" aria-hidden="true"></i> Closed on <span class="bolder">17-Aug-2017 </span></p>-->
</div>
</div>
</div>
</div>
</div>
</div>
<?php endforeach ?>
<?php else : ?>
No Records
<?php endif ?>
Try putting your #panels div outside the foreach loop - that way they are all in the same group.
Also, your #panels div should not have the "#" sign in its id.
<?php if(!empty($tickets)) : ?>
<div class="panel-group-custom" id="panels"><!-- Remove the '#' from here. -->
<?php foreach($tickets as $ticket) : ?>
<div class="panel panel-default mb-0 no-border">
<div class="panel-heading panel-heading-custom" ><!-- and remove the . from here. -->
<h4 class="panel-title">
<div data-toggle="collapse" data-parent="#panels" data-target="#collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="accordion-title">
<div class="row">
<div class="overflow-hidden">
<div class="col-md-2">
<span class="ticket-heading1" title="Ticket ID"><i class="fa fa-ticket" aria-hidden="true"></i> <?php echo $ticket['SupportTicket']['ticket_id']; ?> </span>
</div>
<div class="col-md-7"><span class="ticket-title"><?php echo $ticket['SupportTicket']['title'] ?></span></div>
<div class="col-md-2">
<span class="ticket-heading2" title="Ticket created on"><i class="fa fa-calendar" aria-hidden="true"></i>
<?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>
<?php echo date_format($bdate,"d-M-Y") ?>
</span>
</div>
<div class="col-md-1">
<span class="accordion-down">
<i class="fa fa-chevron-down dropdown-toggle down-arrow2" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
</h4>
</div>
<div id="collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="panel-collapse collapse">
<div class="panel-body">
<div class="hidden-overflow ticket">
<div class="full-width hidden-overflow ticket-chat">
<p class="color-4 ticket-content">
<?php echo $ticket['SupportTicket']['description'] ?>
</p>
<?php if($ticket['SupportTicket']['status']>1) : ?>
<p class="color-1 pull-right ticket-content"> <span class="resolution">Feedback</span>
<?php echo $ticket['SupportTicket']['resolution_text']; ?>
<span class="ticket-updated"><span class="bolder"><i class="fa fa-clock-o" aria-hidden="true"></i>
<?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>
<?php echo date_format($bdate,"d-M-Y") ?>
</span></span>
</p>
<?php endif ?>
</div>
<div class="full-width hidden-overflow mt-5">
<!-- <p class="ticket-close"><i class="fa fa-window-close" aria-hidden="true"></i> Closed on <span class="bolder">17-Aug-2017 </span></p>-->
</div>
</div>
</div>
</div>
</div>
<?php endforeach ?>
</div><!-- end #panels (moved to after the foreach) -->
<?php else : ?>
No Records
<?php endif ?>
Here is the working version with the PHP stripped out: https://jsfiddle.net/ytcw2sot/
I'm using the col-md-6 class in bootstrap to arrange my content into two 50% columns.
Here is a demonstration of how it looks and how I want it to look. The one on the left is how it looks and the one on the right is how I want it to look:
The titles seem to align fine, but the rest of the content does not.
Also, for some reason, the third title is lagging on the bottom instead of aligning to the fourth title (I have no idea why).
Code:
<div class="container">
<div class="row">
<?php
while ($query->have_posts())
{
$query->the_post();
?>
<div class="col-md-6">
<h2><?php the_title(); ?></h2>
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
echo '<p>';
the_post_thumbnail("small");
echo '</p>';
}
?>
</a>
<p><br /><?php the_excerpt(); ?><p>
<div class="alert alert-dismissible alert-info">
<h3>Free trial available?</h3>
<p><?php the_field('free'); ?></p>
</div>
</div>
<?php
}
?>
</div>
</div>
<div class="container">
<?php
$i=0;
while ($query->have_posts())
{
if($i%2==0)
echo '<div class="row">';
$query->the_post();
?>
<div class="col-md-6" >
<div style="height:600px">
<h2><?php the_title(); ?></h2>
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
echo '<p>';
the_post_thumbnail("small");
echo '</p>';
}
?>
</a>
<p><br /><?php the_excerpt(); ?><p>
</div>
<div class="alert alert-dismissible alert-info">
<h3>Free trial available?</h3>
<p><?php the_field('free'); ?></p>
</div>
</div>
<?php
if($i%2!=0)
echo '</div>';
$i++;
}
?>
</div>
Do it like this:
/* CSS used here will be applied after bootstrap.css */
.content1{
background-color:red;
}
.content2{
background-color:blue;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 content1">
<h1> CONTENT</h1><h1>
<p>xxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx</p>
</h1></div>
<div class="col-md-6 content2">
<h1> CONTENT</h1><h1>
<p>xxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx</p>
</h1></div>
</div>
</div>
There is a fieldset that I want to place just after a div; here is what I have attempted:
<div id="liste_tables">
<div id="salles"> // div I want the fieldset to be close to
<div class="header">Salle</div>
<div class="flex-grid">
<?php
$salles = Salle::lireParCritere([]);
foreach ($salles as $key => $salle) {
?>
<div class="row">
<div class="cell">
<div id="tile_salle_<?php echo $key; ?>" data-pk="<?php echo $salle->salle_code; ?>" class="tile-square fg-white">
<div class="tile-content">
<div class="image-container">
<div class="frame"><img src="<?php echo HTTP_IMG ?>salle.jpg"/></div>
<div class="tile-label header fg-cyan"><?php echo $salle->salle_lib; ?></div>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<fieldset>
<legend class="header">Tables</legend>
<div id="tables"></div>
</fieldset>
</div>
At runtime the fieldset is at the bottom of the div. So how to place the fieldset just after the div with the ID "#salles" ?
EDIT : You can find the css here ; the concerned css is metro.css.
Here is the JsFiddle.
Try this:
CSS
#salles {
border: solid 1px red;
display:inline-block;
vertical-align:text-top;
}
fieldset {
border: solid 1px blue;
display:inline-block;
}
HTML
<div id="liste_tables">
<div id="salles"> // div I want the fieldset to be close to
<div class="header">Salle</div>
<div class="flex-grid">
<?php
$salles = Salle::lireParCritere([]);
foreach ($salles as $key => $salle) {
?>
<div class="row">
<div class="cell">
<div id="tile_salle_<?php echo $key; ?>" data-pk="<?php echo $salle->salle_code; ?>" class="tile-square fg-white">
<div class="tile-content">
<div class="image-container">
<div class="frame"><img src="<?php echo HTTP_IMG ?>salle.jpg"/></div>
<div class="tile-label header fg-cyan"><?php echo $salle->salle_lib; ?></div>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<fieldset>
<legend class="header">Tables</legend>
<div id="tables"></div>
</fieldset>
</div>
check out the JsFiddle
Ok , I found it ; I changed the container to be a MetroUI condensed grid :
<div id="liste_tables" class="grid condensed">
<div class="row cells4">
<div class="cell"><span class="header">Salle</span></div>
<div class="cell colspan3"><span class="header">Tables</span></div>
</div>
<div class="row cells4">
<div class="cell">
<div class="grid condensed">
<?php
$salles = Salle::lireParCritere([]);
foreach ($salles as $key => $salle) {
?>
<div class="row">
<div class="cell">
<div id="tile_salle_<?php echo $key; ?>" data-pk="<?php echo $salle->salle_code; ?>" class="tile-square fg-white">
<div class="tile-content">
<div class="image-container">
<div class="frame"><img src="<?php echo HTTP_IMG ?>salle.jpg"/></div>
<div class="tile-label header fg-cyan"><?php echo $salle->salle_lib; ?></div>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<div class="cell colspan3">
<div id="tables"></div>
</div>
</div>
</div>
I have a small HTML problem with this code:
<div id="primary">
<div id="content" role="main">
<div class="astro"><img class="astro" src="<?php echo get_template_directory_uri() . '/images/astro.png'; ?>" alt="Astro" />
</div>
<div class="planet"><img class="planet" src="<?php echo get_template_directory_uri() . '/images/planet.png'; ?>" alt="Planet" />
</div>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php echo $page_data->post_title; ?></h1>
<div class="entry-content"><?php echo $page_data->post_excerpt; ?>
Read More...
</div>
</article>
<div id="tour-center">
<h1 class="entry-title">Tour Our Center</h1>
</div>
<div id="news-section-title">
<h1 class="entry-title"><?php echo get_the_title(75); ?></h1>
<div class="hr"></div>
</div>
<div class="news">
<div class="rss-news">
<a href="#"><img src="<?php echo get_template_directory_uri() . '/images/rss.png'; ?>" alt="RSS" />
</a>
</div>
</div>
<div class="news">
<div class="rss-news">
<a href="#"><img src="<?php echo get_template_directory_uri() . '/images/rss.png'; ?>" alt="RSS" />
</a>
</div>
</div>
<div class="news">
<div class="rss-news">
<a href="#"><img src="<?php echo get_template_directory_uri() . '/images/rss.png'; ?>" alt="RSS" />
</a>
</div>
</div>
</div><!-- #content -->
</div><!-- #primary -->
I've deleted some PHP code in between the divs so that the HTML is more visible. The problem is that the content div stops right after the news-section-title div and I can't figure it out why. It should extend until the end of the document, where the closing div is. You can view the code live on this website.
just add this style to your content div
#content {
float:left;
}
div's won't wrap floated elements unless you use some kind of clearfix solution. Try adding overflow: hidden to the style of your content div.