Develop Reference

Scroll bottom chat in AngularJS

I'm trying to scroll the end of the div when I open the ng-show chat window, but it only works on the second click. I've tried it in many ways but I'm not getting it to make the first click work already.
HTML CHAT:
<div class="chat">
<div class="" ng-show="chatdis">
<div class="chat-header vertical-center clearfix">
<img ng-src="user/pix.php/{{ctrl.idchat}}/f1.jpg" class="imgperfil img-circle" alt="avatar" ng-class="{'online': ctrl.useronline, 'offline': !ctrl.useronline}"/>
<div class="chat-about">
<div class="chat-with">{{ctrl.namechat}}</div>
</div>
<div class="close pull-right" style="opacity: 0.6;" ng-click="ctrl.fecharconversa()">
<i class="fa fa-times" aria-hidden="true" style="display: block;font-size: 16px;position: absolute;top: 6px;right: 8px;color: #797979;"></i>
</div>
</div> <!-- end chat-header -->
<div class="chat-history">
<ul style="margin: 0;padding: 0;">
<li ng-id="message-{{obj.id}}" class="clearfix" ng-repeat="obj in ctrl.mensagens | orderBy:'-'">
<div class="message" ng-class="{'other-message': obj.useridto == <?php echo $USER->id ?>, 'my-message float-right': obj.useridto != <?php echo $USER->id ?>}">
<p ng-bind-html="obj.smallmessage"></p>
<span class="tail-container"></span>
<span class="tail-container highlight"></span>
</div>
<div class="message-data" ng-class="{'align-right': obj.useridto != <?php echo $USER->id ?>}">
<span class="message-data-time" ng-class="{'text-right': obj.useridto != <?php echo $USER->id ?>}" ng-if="obj.useridto != <?php echo $USER->id ?>">
{{obj.firstname}} {{obj.lastname}} - {{obj.timecreated | date:"dd/MM/yyyy HH:mm"}}
</span>
<span class="message-data-time" ng-if="obj.useridto == <?php echo $USER->id ?>">
{{obj.timecreated | date:"dd/MM/yyyy HH:mm"}} - {{obj.firstname}} {{obj.lastname}}
</span>
</div>
</li>
</ul>
</div> <!-- end chat-history -->
<div class="chat-message clearfix">
<textarea name="message-to-send" ng-model="message" id="message-to-send" placeholder ="Escreva sua mensagem" rows="2"></textarea>
<button ng-click="ctrl.inseremensagem(ctrl.idchat, message, ctrl.namechat, ctrl.useronline)">Enviar</button>
</div> <!-- end chat-message -->
</div>
</div> <!-- end chat -->
CONTROLLER FUNCTION:
self.abrirconversa = function(useridfrom, name, useronline){
$rootScope.chatdis = true;
chatservice.conversachat(useridfrom).then(function(d) {
self.mensagens = d;
for(var i = 0; i < self.mensagens.length; i++){
//converte datas em Javascript
if(self.mensagens[i].timecreated != null && self.mensagens[i].timecreated != '12/31/1969 21:00'){
self.mensagens[i].timecreated = new Date(self.mensagens[i].timecreated);
}
}
self.idchat = useridfrom;
self.namechat = name;
self.useronline = useronline;
$('.chat-history').animate({scrollTop: $('.chat-history')[0].scrollHeight}, 0);
}, function(errResponse){
console.error('Error while fetching Currencies');
});
};
The controller function, I call it when I click on a list of people in the side menu. Can someone help me? :D

Using infinite scroll plugin on wordpress without "next navigation" functions

I've developed this page. There is many offers to load on main page, so i'm trying to make a "infinite scroll" function. To develop the page, i first made it on a bootstrap template, and after i turned into a page model template, on my real estate theme.
The problem is: All the "infinite scroll plugins" i've downloaded request 4 fields: Navigation selector, Next selector, Item selector and Content selector, as you can see here. The problem is that i only can provide two of this four fields: Item selector #seletor and content selector (.portfolio.items2). Here is the code that loops all the info:
<div id="seletor">
<div class="portfolio-items2">
<?php $newsArgs =
array(
'post_type' => 'property',
'posts_per_page' => 200,
"orderby" => 'meta_value_num',
"meta_key" => 'numerooff',
"order" => 'DESC',
'tax_query' => array(
array(
'taxonomy' => 'property-status',
'field' => 'slug',
'terms' => 'oneoff')));
$newsLoop = new WP_Query( $newsArgs );
while ( $newsLoop->have_posts() ) : $newsLoop->the_post(); ?>
<div class="col-md-4 shortcode-col listing_wrapper <?php meta('seletoroff');?>" >
<div class="property_listing" data-link="http://www.onecia.com.br/imoveis-de-luxo/<?php /* Property ID if exists */ $property_id = get_post_meta($post->ID, 'REAL_HOMES_property_id', true); if(!empty($property_id)){ echo ''.$property_id; }?>">
<div class="listing-unit-img-wrapper">
<div class="property_media"></div>
<a href="http://www.onecia.com.br/imoveis-de-luxo/<?php /* Property ID if exists */ $property_id = get_post_meta($post->ID, 'REAL_HOMES_property_id', true); if(!empty($property_id)){ echo ''.$property_id; }?>">
<img width="525" height="350" src="<?php meta('imagemoff');?>" class="lazyload img-responsive wp-post-image" alt="" sizes="(max-width: 525px) 100vw, 525px" />
</a>
<div class="tag-wrapper">
<div class="featured_div"><?php meta('porcentooff');?></div>
</div>
</div>
<h4>
<a href="http://www.onecia.com.br/imoveis-de-luxo/<?php /* Property ID if exists */ $property_id = get_post_meta($post->ID, 'REAL_HOMES_property_id', true); if(!empty($property_id)){ echo ''.$property_id; }?>">
<?php meta('titulooff');?>
</a>
</h4>
<div class="property_location_image">
<a href="http://www.onecia.com.br/imoveis-de-luxo/<?php /* Property ID if exists */ $property_id = get_post_meta($post->ID, 'REAL_HOMES_property_id', true); if(!empty($property_id)){ echo ''.$property_id; }?>" rel="tag">
<span style="font-size: 15px;"><?php meta('bairrooff');?></span>
</a>
</div>
<br>
<div class="property_listing_details">
<?php $post_meta_data = get_post_custom($post->ID);
if( !empty($post_meta_data['REAL_HOMES_property_size'][0]) ) {
$prop_size = $post_meta_data['REAL_HOMES_property_size'][0];
echo '<div class="inforoom">'. $prop_size .'m² <div class="info_labels"><img src="http://www.onecia.com.br/wp-content/themes/site2016/images/icon-size.png" style="max-width: 14%; height: auto;"></div></div>';
}
if( !empty($post_meta_data['REAL_HOMES_property_bedrooms'][0]) ) {
$prop_bedrooms = floatval($post_meta_data['REAL_HOMES_property_bedrooms'][0]);
$bedrooms_label = ($prop_bedrooms > 1)? __('Bedrooms','framework' ): __('Bedroom','framework');
echo '<div class="infobath">'. $prop_bedrooms .'<div class="info_labels"><img src="http://www.onecia.com.br/wp-content/themes/site2016/images/icon-bed.png" style="max-width: 17%; height: auto;"></div></div>';
}
if( !empty($post_meta_data['REAL_HOMES_property_bathrooms'][0]) ) {
$prop_bathrooms = floatval($post_meta_data['REAL_HOMES_property_bathrooms'][0]);
$bathrooms_label = ($prop_bathrooms > 1)?__('Bathrooms','framework' ): __('Bathroom','framework');
echo '<div class="infosize">'. $prop_bathrooms .'<div class="info_labels"><img src="http://www.onecia.com.br/wp-content/themes/site2016/images/icon-bath.png" style="max-width: 17%; height: auto;">
</div></div>';
} ?>
</div>
<div class="listing_unit_price_wrapper">
<span class="price_label price_label_before" style="text-decoration: line-through;">De: R$ <?php meta('valordeoff');?></span><br>
<span style="text-decoration: underline; font-size: 22px; font-weight: bold;">Por: R$ <?php meta('valoroff');?> </span>
<span class="price_label"></span>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
I can limit how many pages appear with posts_per_page, but i don't have any pagination configured (example: Navigation through pages, next page, older page...)
So, i see two ways to solve it, but in both i need your guide.
First: There is a way to solve it without navigation functions configured.
Second: The only way to solve it is to configure the navigation on my page wordpress template.
I'm really stuck here. Waiting for your help, thanks!

Jquery infinity scroll loops over and over using Mysql/PHP

I'm trying to implement Jquery infinity scroll found at (http://infiniteajaxscroll.com/) together with my MYSQL and PHP. And it works, sort of.
I found similar example here but my was quite different anyway (http://www.w3bees.com/2013/09/jquery-infinite-scroll-with-php-mysql.html)
The loading more works fine however my results are being looped over and over again.
I mean i display all the results in the first page and when i scroll down at the bottom and infinity scroll fires up then same results are being showed instead of splitting those first results in different pages.
Here is my code, quite long :)
<?php
$page = (int) (!isset($_GET['s'])) ? 1 : $_GET['s'];
// GET ALL THE SHOUTBOX
$sql = "SELECT * FROM shoutbox
ORDER BY id DESC
LIMIT 20";
//prepare the statement
$statement = $dbConn->prepare($sql);
//execute the statement
$statement->execute();
//Count the shouboxes
$number_of_shoutbox = $statement->rowCount();
$number_of_posts_per_page = '10';
$total_pages = $number_of_shoutbox / $number_of_posts_per_page;
?>
<div class="background_spacing"></div> <!-- end of background spacing -->
<div id="header_background">
<div class="shoutbox-background text-center">
<div id="shoutbox">
<!-- SHOUTBOX COMPLETE STARTS -->
<div class="shoutbox_complete">
<div class="shoutbox_left">
<img src="images/girl-shoutbox.jpg">
</div>
<div class="shoutbox_right background-white">
<div class="no-padding padding10">
<span class="font24 font-color-000000">NAPISI SVOJ</span>
<span class="font24 username_male">SHOUTBOX</span>
<textarea class="shoutbox-form no-padding" placeholder="Ostavite i vi jedan shoutbox..."></textarea>
<input type="submit" class="button_standard_pink float-right">
</div>
</div>
</div>
<!-- SHOUTBOX COMPLETE STARTS -->
</div> <!-- end of id="shoutbox -->
</div>
</div> <!-- END OF HEADER_BACKGROUND -->
<div class="margin30"></div><!-- Spacing -->
<div class="shoutbox-total">
<div id="shoutbox">
<div class="shoutbox-counter no-padding padding-10 background-shoutbox-counter">
<div class="font48 text-center"><?php count_shoutbox();?></div>
<div class="text-center">shoutbox has been shouted!</div>
<div class="text-center padding-10"><img src="images/default/default-shoutbox-shout.png"></div>
<div class="text-center font10">INVITE YOUR FRIENDS TO SHOUT!</div>
</div>
</div>
<?
//LOOP THROUGH THE SHOUBOXES
while($show_shoutbox = $statement->fetch(PDO::FETCH_BOTH)) {
?>
<div id="shoutbox">
<!-- SHOUTBOX COMPLETE STARTS -->
<div class="shoutbox_complete_display">
<div class="shoutbox_left">
<img src="images/man-shoutbox.jpg">
</div>
<div class="shoutbox_right-display background-box-light-gray">
<div class="no-padding padding-10">
<div class="font24 username_male" style="line-height:1;"><?php echo strtoupper($show_shoutbox['user_name']);?> <?php echo $show_shoutbox['user_age'];?> GODINE</div>
<span class="font-color-898a8b">IZ <?php echo strtoupper($show_shoutbox['country']);?> - TRAŽI <?php echo strtoupper($show_shoutbox['gender_search']);?> IZMEĐU <?php echo strtoupper($show_shoutbox['age_from']);?> I <?php echo strtoupper($show_shoutbox['age_to']);?> GODINA</span>
<div class="margin15"></div>
<div class="font20"><?php echo $show_shoutbox['text'];?></div>
<div style="margin-top:52px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><div class="font18 font-bold">32,222</div>
<span class="font-color-898a8b">ACHIVEMENTS</span>
</td>
<td><div class="font18 font-bold">32,222</div>
<span class="font-color-898a8b">ACHIVEMENTS</span>
</td><td><div class="font18 font-bold">32,222</div>
<span class="font-color-898a8b">ACHIVEMENTS</span>
</td><td><div class="font18 font-bold">32,222</div>
<span class="font-color-898a8b">ACHIVEMENTS</span>
</td>
</tr>
</table>
</div> <!-- end of margin-top:60 -->
</div> <!-- end of no-padding padding-10 -->
<!-- COMMENT START HERE -->
<?php
// d($detail);
$type='question';
// include('like.php');
include('includes/comment.php');
?>
<!-- COMMENT END HERE -->
</div> <!-- end of shoutbox_right-display -->
</div> <!-- end of shoutbox_complete -->
</div> <!-- end of id="shoutbox -->
<?php } // end of the shoubox loop
?>
</div>
<!--page navigation-->
<div id="nav">
<?php
for ($x = 2; $x <= $total_pages; $x++) {
?>
<a href='welcome.php?p=shoutbox&s=<?php echo $x;?>' <?php if($x=='2') { echo 'class="next"';}?>></a>
<?php } ?>
</div>
<script type="text/javascript" src="js/jquery.infinity.scroll.js"></script>
<script type="text/javascript">
var ias = $.ias({
container: ".shoutbox-total .shoutbox_complete_display",
item: "#shoutbox",
pagination: "#nav",
next: ".next"
});
ias.extension(new IASSpinnerExtension());
ias.extension(new IASTriggerExtension({offset: 3}));
ias.extension(new IASNoneLeftExtension({text: 'There are no more pages left to load.'}));
========================================================================
UPDATE CODE BY STILL GIVING ERRORS NOW IN MYSQL:
Tried #Rob Schmuecker solution but now getting errors in mysql.
Here is my modified code with PDO and with Rob Schmuecker suggestion
// GET ALL THE SHOUTBOX
$sql = "SELECT
shoutbox.shoutbox_id,
shoutbox.text,
shoutbox.date,
shoutbox.time,
shoutbox.approved,
shoutbox.`new`,
shoutbox.user_id,
users.profile_image,
users.user_name,
users.user_age,
users.country,
users.gender_search,
users.age_from,
users.age_to
FROM shoutbox INNER JOIN users ON shoutbox.user_ID = users.id
WHERE users.profile_image = '2'
AND shoutbox.approved = '1'
AND shoutbox.new = '0'
AND shoutbox.user_id != :admin_id
AND (shoutbox.user_id NOT IN (SELECT user_id FROM users_blocked WHERE blocked_id = :user_id))
ORDER BY shoutbox.shoutbox_id DESC
LIMIT :limit_start :limit_row_amount";
//prepare the statement
$statement = $dbConn->prepare($sql);
//execute the statement
$statement->execute(array(
'admin_id' => $admin_id,
'user_id' => $user_id,
'limit_start' => $limit_start,
'limit_row_amount' =>$limit_row_amount
));

You need to implement the page into your SQL query.
Below we define two new variables, one which is the total amount you want to retrieve each time and the next is the amount of rows to skip in each limit query, starting from 0 if $page = 1
$page = (int) (!isset($_GET['s'])) ? 1 : $_GET['s'];
$limit_row_amount = 20;
if($page > 1){
$limit_start = $page * $limit_row_amount;
} else {
$limit_start = 0;
}
// GET ALL THE SHOUTBOX
$sql = "SELECT * FROM shoutbox
ORDER BY id DESC
LIMIT $limit_start, $limit_row_amount";

Wordpress AJAX Load More Button

I just found this script https://github.com/tokmak/wp-load-more-ajax and I wanted to add it into my template.. All good, I added the script from functions.php into my template functions.php, copied the js file in my template folder and added that line from your_template.php into my template page where my posts are shown, the button appear but it doesnt work..
I have every file loaded, I checked but still it does nothing..
<?php if (have_posts()) : while ( have_posts() ) : the_post(); ?>
<div class="post-box">
<div style="float:left; margin-bottom: 10px; padding-right:20px;"> <?php if ( has_post_thumbnail() ) { echo get_the_post_thumbnail($post->ID); } else { echo my_post_thumbnail_html(); } ?> </div>
<div class="post-title"> <?php the_title(); ?> </div>
<div class="post-content"> <?php excerpt(10); ?> </div>
<br clear="all" />
</div>
<?php endwhile; ?>
<a class="load_more" data-nonce="<?php echo wp_create_nonce('load_posts') ?>" href="javascript:;">Load more</a>
<?php else : ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; wp_reset_query(); ?>
This is my code.. I dont know what to do..

You must have a loaded content template.
Once, you create a template and add new page with this template. Your page link example: http://localhost.dev/?page_id=1453
This template containt only post loop. You can develop this template with $_GET params(numberposts, category etc.)
function loadMore(e, numberposts) {
$('.show-more', e).text('Loading...');
$('<div>').load('<?php echo get_bloginfo('template_url'); ?>/get_loop_template.php?s=' + numberposts, function(r) {
$('.list-articles .btn-getmore').remove();
$('.list-articles').append(r);
});
}
This function get your posts, remove current "getmore-buton" than insert posts and add new "getmore-buton".

Jquery Children

I am trying to create a nice gallery for an e-commerce. - all the current code is here
The front-end layout I got from here followed the tutorial and it worked like a charm.
Then to add the payment module I decided to add a floating div:
<?php foreach ($tes as $te): ?>
<div id="<?php echo $te['Product']['id'] ?>">
<div class="shop-actions">
<div class="list-group">
<span href="#" class="list-group-item active comprar-menu-button">
<?php echo __('<i class="fa fa-shopping-cart"></i> Carrito de Compras'); ?>
</span>
<span href="#" class="list-group-item comprar-menu">
<h3>Agregar al carrito</h3>
<?php echo $this->Form->create('Product', array('default' => false, 'inputDefaults' => array(
'div' => 'form-group',
'label' => false,
'wrapInput' => false,
'class' => 'form-control'))); ?>
<div class="row">
<div class="col-md-12">
<?php
echo $this->Form->input('cantidad', array(
'options' => array(
50 => "50gr",
100 => "100gr",
150 => "150gr",
200 => "200gr",
250 => "250gr",
500 => "500gr",
1000 => "1kg",
'mayoreo' => "mayoreo",
),
'empty' => '(Seleccionar)',
));
?>
</div>
<div class="col-md-12 mayoreo">
<div class="input-group">
<?php echo $this->Form->input('mayoreo', array('label' => '', 'type'=>'number')); ?>
<span class="input-group-addon">KG</span>
</div>
</div>
<div class="col-md-12 subtotal">
<div id="<?php echo $te['Product']['price']; ?>"><span>$0.00 MXN</span> </div>
</div>
<div class="col-md-12">
</br>
<?php echo $this->Form->submit('Agregar', array('div' => 'form-group','class' => 'btn btn-info col-md-12')); ?>
</div>
</div>
<?php echo $this->Form->end(); ?>
<hr />
<h4>Ademas en tu carrito</h4>
<ul>
<li>Lung Jing <span class="pull-right">200gr</span></li>
<li>Pu Erh <span class="pull-right">1kg</span></li>
<li>Lapsang Su shang <span class="pull-right">10kg</span></li>
</ul>
<span class="pull-right">Subtotal: $2,500.00 MXN</span>
</span>
</div>
</div>
[…]
</div>
<?php endforeach; ?>
<span class="loading"></span>
<span class="icon close-content"><i class="fa fa-times"></i></span>
Then I tried to add some jQuery to make the UX nice and smooth…
function formatCurrency(total) {
var neg = false;
if(total < 0) {
neg = true;
total = Math.abs(total);
}
return (neg ? "-$" : '$') + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
}
$('.comprar-menu-button').click(function(){
$(this).next().slideToggle(function(){
if ($(this).is(':visible')){
$(this).css('display','inline-block');
}
});
});
$('.cantidad-te').change(function(){
var value, product, precio, cantidadEspecial;
value = $(this).val();
product = $(this).parent().parent();
precio = $(this).parent().parent().next().next().children();
cantidadEspecial =product.next();
if (value === 'mayoreo') {
cantidadEspecial.show();
precio.children().html('especifique cantidad');
}else{
cantidadEspecial.hide();
subtotal = precio.attr('id') * value;
precio.children().html(formatCurrency(subtotal) + ' MXN');
}
});
In theory it works, however it only works for the last element on my teas product.
Expected outcome
When clicking on any element it should:
show the div with the shopping cart
slideToggle should show the form to add product to shopping cart
When selecting an element from dropdown it should:
update with correct price
Current outcome
Only slideToggle() works for last element on my grid.
when changing values on dropdown list it does not make the changes specified.
Additional info
To see a live version of how the 3D grid works visit here (this is not the version am currently working with as I havent pushed the changes)
The code for live version is here
Page Source (HTML Outcome) - here as pointed out by #AlexAtNet
Thank you