We Keep Coding

Add Item to cart when same goods with different size goods

i'm create online shop, but i have a little problem in cart product.
if i add 2 products same and different product size
this products only show last add to cart.
example i want like this
product : ABC
size : XL
product : SKSD
size : L
i want like this.
this is my code
order.php
<?php
include "connection.php";
$link = $_REQUEST['link_goods'];
$data_pr = mysqli_query($con,"select * from goods where link_goods='".$link."' ");
$pr = mysqli_fetch_object($data_pr);
?>
<section class="main-container col1-layout">
<div class="main container">
<div class="col-main">
<div class="row">
<div class="product-view">
<div class="product-essential">
<form action="#" method="post" id="product_addtocart_form">
<div class="product-shop col-lg-12 col-sm-12 col-xs-12">
<div class="product-name">
<h4><?php echo $pr->goods ?></h4>
</div>
<p class="availability in-stock">Availability: <span><?php echo $pr->stock ?> stock</span></p>
<div class="price-block">
<div class="price-box">
<p class="special-price"> <span class="price-label">Special Price</span> <span class="price"> Rp <?php echo $pr->price ?> </span> </p>
</div>
</div>
<div class="add-to-box">
<div class="add-to-cart">
<label for="qty">Quantity & Size</label>
<div class="pull-left">
<div class="custom pull-left">
<button onClick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) && qty > 1 ) result.value--;return false;" class="reduced items-count" type="button"><i class="icon-minus"> </i></button>
<input type="text" class="input-text qty" readonly style="color:black" value="1" maxlength="5" id="qty" name="qty">
<button onClick="var result = document.getElementById('qty'); var qty = result.value; if(qty>=<?php echo $pr->stock ?>) return false; else if( !isNaN( qty )) result.value++; return false;" class="increase items-count" type="button"><i class="icon-plus"> </i></button>
</div>
<div class="custom pull-left">
<select style="color:black" name="size" id="size" class="input-text qty">
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
</div>
<?php
echo "<input type='hidden' id='price' name='price' value='".$pr->price."'>";
echo "<input type='hidden' id='id_goods' name='id_goods' value='".$pr->id_goods."'>";
?>
</div>
<?php
if ($pr->stock=="0")
{
}
else
{
?>
<button class="button btn-cart" title="Add to Cart" type="submit"><span><i class="icon-basket"></i> Add to Cart</span></button>
<?php } ?>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(e){
var form_data = $(this).serialize();
var button_content = $(this).find('button[type=submit]');
button_content.html(' ADDING...'); //Loading button text
$.ajax({
url: "proses.php",
type: "POST",
dataType:"json",
data: form_data
}).done(function(data){
$("#myinfo").html(data.items);
button_content.html(' ADD TO CART');
if($(".shopping-cart-box").css("display") == "block"){
$(".mycart-box").trigger( "click" );
}
$(".mycart-box").trigger( "click" );
})
e.preventDefault();
});
});
</script>
proses.php
<?php
session_start(); //start session
$mysqli_conn = new mysqli("localhost", "root", "", "databaseshop");
if ($mysqli_conn->connect_error) {
die('Error : ('. $mysqli_conn->connect_errno .') '. $mysqli_conn->connect_error);
}
if(isset($_POST["id_goods"]))
{
// i think's using condtion in here when different size product
foreach($_POST as $key => $value){
$new_product[$key] = filter_var($value, FILTER_SANITIZE_STRING);
}
$statement = $mysqli_conn->prepare("SELECT goods, images_goods, price FROM goods_table WHERE id_goods=? LIMIT 1");
$statement->bind_param('s', $new_product['id_goods']);
$statement->execute();
$statement->bind_result($goods, $images_goods, $price);
while($statement->fetch()){
$new_product["goods"] = $goods;
$new_product["images_goods"] = $images_goods;
$new_product["price"] = $price;
// i think's using condtion in here when different size product
$_SESSION["products"][$new_product['id_goods']] = $new_product;
}
$total_items = count($_SESSION["products"]);
die(json_encode(array('items'=>$total_items)));
}
//################## Loop Item Cart #####################################
if(isset($_POST["load_cart"]) && $_POST["load_cart"]==1)
{
if(isset($_SESSION["products"]) && count($_SESSION["products"])>0){
$cart_box = ' <div class="top-cart-content arrow_box">';
$cart_box .= ' <ul id="cart-sidebar" class="mini-products-list">';
$total = 0;
foreach($_SESSION["products"] as $product)
{
$product_name = $product["goods"];
$product_cover = $product["images_goods"];
$product_price = $product["price"];
$product_code = $product["id_goods"];
$product_qty = $product["qty"];
$product_size = $product["size"];
$cart_box .= ' <li class="item even remove-item">';
$cart_box .= ' <a class="product-image" href="#" title="'.$product_name.'"><img alt="'.$product_name.'" src="images/barang_sampul/'.$product_cover.'" width="80"></a>';
$cart_box .= ' <div class="detail-item">';
$cart_box .= ' <div class="product-details"> ';
$cart_box .= ' <p class="product-name"> '.$product_name.' </p>';
$cart_box .= ' </div>';
$cart_box .= ' <div class="product-details-bottom"> <span class="price">'.$product_price.'</span> <span class="title-desc">Qty:</span> <strong>'.$product_qty.'</strong> </div>';
$cart_box .= ' <div class="product-details-bottom"> <span class="title-desc">Ukuran :</span> <strong>'.$product_size.'</strong> </div>';
$cart_box .= ' </div>';
$cart_box .= ' </li>';
$subtotal = ($product_price * $product_qty);
$total = ($total + $subtotal);
}
$cart_box .= ' </ul>';
$cart_box .= ' <div class="top-subtotal">Subtotal: <span class="price">'.$total.'</span></div>';
$cart_box .= ' <div class="actions">';
$cart_box .= ' <center><button style="float:none" class="view-cart" type="button"><span>View Cart</span></button></center>';
$cart_box .= ' </div>';
$cart_box .= ' </div>';
die($cart_box);
}else{
// die("Null");
}
}
################# Delete Item From Cart ################
if(isset($_GET["remove_code"]) && isset($_SESSION["products"]))
{
$product_code = filter_var($_GET["remove_code"], FILTER_SANITIZE_STRING);
if(isset($_SESSION["products"][$product_code]))
{
unset($_SESSION["products"][$product_code]);
}
$total_items = count($_SESSION["products"]);
die(json_encode(array('items'=>$total_items)));
}
?>
Help me thank's

making an accordion toggle that works with php

how can i make a simple accordian toggle like in https://www.wireshark.org/download.html that works like getting data from a database i have,which has questions and answers? that works simply for all the rows.
this is the current code i have and want to modify.
<?php
$connection = ($GLOBALS["___mysqli_ston"] = mysqli_connect('localhost', 'root', ''));
((bool)mysqli_query($GLOBALS["___mysqli_ston"], "USE " . 'db'));
$query = "SELECT * FROM AS_Questions";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $query);
if (!$result) {
printf("Errormessage: %s\n", $mysqli->error);
}
echo "<table>";
while($row = mysqli_fetch_array($result)){
echo "<div class='span3 tiny'>
<div class='pricing-table-header-tiny'>
<h2>" . $row['Question'] . "</h2>
</div>
<a href='##' id='s'>Show answer</a>
<div class='dq'>
<div class='pricing-table-features'>
<p>" . $row['Answer'] . "</p>
</div>
<div class='Dass'>
<p id='Dassp'>Answered by:" . $row['Doctor'] . "<p>
</div>
</div>
</div>"; //$row['index'] index here is a field name
}
echo "</table>"; //Close the table in HTML
((is_null($___mysqli_res = mysqli_close($GLOBALS["___mysqli_ston"]))) ? false : $___mysqli_res);
?>

video preroll vimeo in wordpress

Hello guys I would like to integrate an open source code taken from github to my wordpress theme.
link:
Vimeo Pre-roll
This is the code of my video.php, I would like to work with vimeo.
code:
<?php
get_header();
wize_set_views(get_the_ID());
echo '
<div id="wrap" class="fixed">';
if (have_posts())
while (have_posts()):
the_post();
$social = of_get_option('social_sng', '1') == '1';
$venue = get_post_meta($post->ID, 'vd_venue', true);
$youtube = get_post_meta($post->ID, 'vd_youtube', true);
$vimeo = get_post_meta($post->ID, 'vd_vimeo', true);
$date = get_post_meta($post->ID, 'vd_date', true);
$time = strtotime($date);
$year = date('Y', $time);
$month = date('F', $time);
$day = date('d', $time);
/* display */
echo '
<div id="mediasng">
<div class="mediasng-title">
<h1>' . get_the_title() . '</h1>
</div><!-- end .mediasng-title -->
<div class="mediasng-lv">
' . wize_like_info($post->ID) . '
<div class="info-view">' . wize_get_views(get_the_ID()) . '</div>
</div><!-- end .mediasng-lv -->
<div class="mediasng-info">';
if ($venue) {
echo '
<div class="mediasng-venue">' . esc_html($venue, "wizedesign") . '</div>';
}
if ($date) {
echo '
<div class="mediasng-date">' . esc_html($day, "wizedesign") . ' ' . esc_html($month, "wizedesign") . ' ' . esc_html($year, "wizedesign") . '</div>';
}
echo '
</div><!-- end .mediasng-info -->';
if ($youtube) {
echo '
<iframe src="https://www.youtube.com/embed/' . esc_attr($youtube) . '" width="1130" height="620" frameborder="0" allowfullscreen></iframe>';
} elseif ($vimeo) {
echo '
<iframe src="http://player.vimeo.com/video/' . esc_attr($vimeo) . '" width="1130" height="620" frameborder="0" allowFullScreen></iframe>';
}
if ($social) {
echo '
<div class="mediasng-social">
<span>' . esc_html__("share", "wizedesign") . '</span>
<div class="sng-facebook"></div>
<div class="sng-twitter"></div>
<div class="sng-google"></div>
<div class="sng-linkedin"></div>
</div><!-- end .mediasng-social -->';
}
echo '
</div><!-- end .mediasng -->
';
endwhile;
get_footer();
how can I make sure that the code is read by wordpress plugins github!?

How to keep sorting order when using pagination?

I can't figure how to keep sort order when I click on next page. On that page products aren't sorted by selected option, and this is problem. When option Naziv is clicked, only on first page products are sorted by Naziv and when going to next page products aren't sorted by Naziv and they should be.
I've tried with:
page=$next&order=$order. But this doesn't work correctly.
Does anyone have some advice how to fix this.
<html>
<body>
<div>
<div id="container">
<div>
<select name="filter" onchange="window.location.href = 'laptop?order=' + this.value">
<option>Poredaj po: </option>
<option value="naziv">Naziv</option>
<option value="cijenaasc">Cijena Manja-Veća</option>
<option value="cijenadesc">Cijena Veća-Manja</option>
</select>
<form id="Forma" method='post' action="usporedi">
<?php
// 5. record shown amount
$per_page = 10;
// 7. current page
if (!isset($_GET['page'])) {
$page = 1;
} else {
$page = $_GET['page'];
}
// 4. mysql start possition
if ($page <= 1) {
$start = 0;
} else {
$start = $page * $per_page - $per_page;
}
// 2. main sql query
$query = "SELECT *, FORMAT(cijena,2,'de_DE') as cijena FROM artikli WHERE kategorija='laptop'";
$order = isset($_GET['order']) ? $_GET['order'] : '';
if ($order) {
switch ($order) {
case 'cijenaasc':
$order = 'cijena';
$query = "SELECT *, FORMAT(cijena,2,'de_DE') as cijena FROM artikli WHERE kategorija='laptop' ORDER BY CAST(cijena AS DECIMAL(8,2)) ASC ";
break;
case 'naziv':
$order = 'naziv';
$query = "SELECT *, FORMAT(cijena,2,'de_DE') as cijena FROM artikli WHERE kategorija='laptop' ORDER BY naziv ASC ";
break;
case 'cijenadesc':
$order = 'cijena';
$query = "SELECT *, FORMAT(cijena,2,'de_DE') as cijena FROM artikli WHERE kategorija='laptop' ORDER BY CAST(cijena AS DECIMAL(8,2)) DESC ";
break;
}
}
// 7. How much records are in database
$num_rows = mysqli_num_rows(mysqli_query($con, $query));
// 7. How much pages are at all
$num_pages = ceil($num_rows / $per_page);
// 6. Appends limit for shown records
$query .= " LIMIT $start, $per_page";
// 3. Show all records
$result = mysqli_query($con, $query);
while ($row = mysqli_fetch_array($result)) {
$id = $row ['id'];
print
"<div id='proizvod'></br><a style='text-decoration:none; color:black;' class='two' href='proizvod.php?id=$id' >" . $row["naziv"] . "" .
"<p><img src=" . $row["slika"] . " width='200px' height='200px' style='border-radius: 15px;'></p>" .
"<p style='font-size:20px'><b> Cijena za gotovinu: " . $row["cijena"] . " KN </b></p>" .
"<pre id='pre1'>" . $row["opis"] . "</pre>" .
"</a></div>";
}
?>
</form>
</div>
<br/>
<div id="pagination">
<?php
// 8. Prev numbers, next links
$prev = $page - 1;
$next = $page + 1;
// prev
if ($prev > 0) {
echo "<a style='text-decoration:none; color: blue;' href='?page=$prev&order=$order'><b><</b></a> ";
}
//numbers
$number = 1;
for ($number; $number <= $num_pages; $number +=1) {
if ($page == $number) {
echo " <b> $number </b> ";
} else {
echo " <a style='text-decoration:none; color: blue;' href='?page=$number&order=$order'>$number</a> ";
}
}
// next
if ($page < ceil($num_rows / $per_page)) {
echo " <a style='text-decoration:none; color: blue;' href='?page=$next&order=$order'><b>></b></a> ";
}
?>
</div>
</div>
</body>
</html>

To keep sort order when paging trough pages variable
$order = isset($_GET['order']) ? $_GET['order'] : '';
must be in "div id='pagination'".
<html>
<body>
<div id="container">
<?php
$per_page = 10;
if (!isset($_GET['page'])) {
$page = 1;
} else {
$page = $_GET['page'];
}
if ($page <= 1) {
$start = 0;
} else {
$start = $page * $per_page - $per_page;
}
$query = "SELECT *, FORMAT(cijena,2,'de_DE') as cijena FROM artikli WHERE kategorija='smartphone' ORDER BY id ASC ";
// 7. How much records are in database
$num_rows = mysqli_num_rows(mysqli_query($con, $query));
// 7. How much pages are at all
$num_pages = ceil($num_rows / $per_page);
?>
<div id="gumb">
<div id="usporedivanje">
<input type='submit' form='Forma' name='usporedi' disabled='disabled' id='usporedi' value='Usporedi' onmouseover="" style="cursor: pointer;" />
<div id='sortiranje'>
<select id='filter' style="font-size:20px; height:50px; border: 5px solid #099CDB; border-radius: 10px; border-color: #099bcd;" name="filter" onchange="window.location.href = 'smartphone?order=' + this.value">
<option>Poredaj po: </option>
<option value="naziv">Naziv</option>
<option value="cijenaasc">Cijena Manja-Veća</option>
<option value="cijenadesc">Cijena Veća-Manja</option>
</select>
</div>
</div>
<br/>
<form id="Forma" method='post'>
<?php
$order = isset($_GET['order']) ? $_GET['order'] : '';
if ($order) {
switch ($order) {
case 'cijenaasc':
$order = 'cijena';
$query = "SELECT *, FORMAT(cijena,2,'de_DE') as cijena FROM artikli WHERE kategorija='smartphone' ORDER BY CAST(cijena AS DECIMAL(8,2)) ASC ";
break;
case 'naziv':
$order = 'naziv';
$query = "SELECT *, FORMAT(cijena,2,'de_DE') as cijena FROM artikli WHERE kategorija='smartphone' ORDER BY naziv ASC ";
break;
case 'cijenadesc':
$order = 'cijena';
$query = "SELECT *, FORMAT(cijena,2,'de_DE') as cijena FROM artikli WHERE kategorija='smartphone' ORDER BY CAST(cijena AS DECIMAL(8,2)) DESC ";
break;
}
}
$query .= " LIMIT $start, $per_page";
$result = mysqli_query($con, $query);
while ($row = mysqli_fetch_array($result)) {
$id = $row ['id'];
print
"<div id='proizvod'></br><a style='text-decoration:none; color:black; font-size:20px;' class='two' href='proizvod.php?id=$id' ><b>" . $row["naziv"] . "</b>" .
"<p><img src=" . $row["slika"] . " width='200px' height='200px' style='border-radius: 15px;'></p>" .
"<p style='font-size:20px'><b> Cijena za gotovinu: " . $row["cijena"] . " KN </b></p>" .
"<pre id='pre1'>" . $row["opis"] . "</pre>" .
"</a></div>";
}
?>
</form>
<div id="pagination">
<?php
$prev = $page - 1;
$next = $page + 1;
$order = isset($_GET['order']) ? $_GET['order'] : '';
if ($prev > 0) {
echo "<a style='text-decoration:none; font-size:30px; color: #099BCD;' href='?page=$prev&order='$order'><b><</b></a> ";
}
$number = 1;
for ($number; $number <= $num_pages; $number +=1) {
if ($page == $number) {
echo " <b style='font-size:30px; color: #099BCD;'> $number </b> ";
} else {
echo " <a style='text-decoration:none; font-size:30px; color: #099BCD;' href='?page=$number&order=$order'>$number</a> ";
}
}
if ($page < ceil($num_rows / $per_page)) {
echo " <a style='text-decoration:none; font-size:30px; color: #099BCD;' href='?page=$next&order=$order'><b>></b></a> ";
}
?>
</div>
</div>
<?php include "footer.php"; ?>
</body>
</html>

How Can I Fix Apend Designing Issues In Isotope?

I have append the ajax coding, data are coming fine, here during appending this style="position: absolute; left: 468px; top: 0px;" css is not adding to my new append data. How can I do this? Below is my ajax code. Please suggest me.
See image here
<?php
$per_page=20;
$latestImages = mysql_query("select * from ".GIFIMAGES." WHERE isActive = '1' AND not_update='1' order by modified ");
$total_record=mysql_num_rows($latestImages)/5;
$maxPage=number_format((float) $total_record, 2, '.', '');
?>
<script>
var lastX = 0;
var currentX = 0;
var page = 1;
function loadMore() {
if (page < '<?php echo $maxPage;?>') {
page++;
$('#load-more').html('Loading...');
$.post("ajax_append.php", {'ajax_append':'<?php echo $per_page;?>','page':page},function(data)
{
alert(data);
$('#homeload').append(data);
$('#load-more').html('VIEW MORE');
});
} else {
$('#load-more').hide();
}
}
</script>
Below is external(html) file append coding.(grid-splash-item)No css is calling for this same class, which I have been used in pageloading.plz check it.
<?php
$i=50;
$latestImages = mysql_query("select * from ".GIFIMAGES." WHERE isActive = '1' AND not_update='1' order by modified DESC limit $total_records,$page_records");
while($getLatestGif=mysql_fetch_array($latestImages)){
$i++;
$categoryName = mysql_fetch_array(mysql_query("select name from ".CATEGORY." where id='".$getLatestGif['cat_id']."'"));
$checkLatestUsers = mysql_num_rows(mysql_query("select * from ". YEAH." where user_id = '".$_SESSION['USER_ID']."' and gifimageid ='".$getLatestGif['id']."'"));
$yeahCount = mysql_num_rows(mysql_query("select gifimageid from ". YEAH ." where gifimageid = '".$getLatestGif['id']."'"));
$yeahCountLatest = mysql_query("update ".GIFIMAGES." set yeahCount ='$yeahCount' where id = '".$getLatestGif['id']."'");
$comment = mysql_query("select * from ".COMMENTS." where gifid='". $getLatestGif['id']."' order by id desc");
$getLatestUser=mysql_fetch_array(mysql_query("SELECT username,photo FROM ".TBL_USERS." WHERE id='".$getLatestGif['userId']."'"));
$commnetsCounts = mysql_num_rows($comment);
?>
<div class="grid-splash-item">
<!-- <img src="images/img-2.jpg" /> -->
<a href="<?php echo HTTP_ROOT.'funny-'.$categoryName['name'].'-images/'. makeSeoUrl($getLatestGif['title']).'/'.$getLatestGif['uniq_id'];?>" > <img width="198" height="169" src="<?php echo HTTP_ROOT.DIR_GIF.$getLatestGif['gifphoto'];?>" /> </a>
<div class="gif-details">
<div class="gif-details-menu">
<span>
<div class="gif-details-menu-box" <?php if(!empty($_SESSION['USER_ID']) && $checkLatestUsers){?> <?php } else {?> <?php } ?>>
//My coding present.I have removed it(too long).
</div>
</span>
<p><?php echo substr($getLatestGif['title'],0,20);?></p>
</div>
</div>
</div>
<?php } ?>

try adding the inline css in html only like,
change this
<div class="grid-splash-item">
to
<?php
$counter = 1;
while ($getLatestGif = mysql_fetch_array($latestImages)) {
$i++;
$categoryName = mysql_fetch_array(mysql_query("select name from " . CATEGORY . " where id='" . $getLatestGif['cat_id'] . "'"));
$checkLatestUsers = mysql_num_rows(mysql_query("select * from " . YEAH . " where user_id = '" . $_SESSION['USER_ID'] . "' and gifimageid ='" . $getLatestGif['id'] . "'"));
$yeahCount = mysql_num_rows(mysql_query("select gifimageid from " . YEAH . " where gifimageid = '" . $getLatestGif['id'] . "'"));
$yeahCountLatest = mysql_query("update " . GIFIMAGES . " set yeahCount ='$yeahCount' where id = '" . $getLatestGif['id'] . "'");
$comment = mysql_query("select * from " . COMMENTS . " where gifid='" . $getLatestGif['id'] . "' order by id desc");
$getLatestUser = mysql_fetch_array(mysql_query("SELECT username,photo FROM " . TBL_USERS . " WHERE id='" . $getLatestGif['userId'] . "'"));
$commnetsCounts = mysql_num_rows($comment);
if ($counter % 4 == 1) {
$style = 'style="position: absolute; left: 0px; top: 175px;"';
} else if ($counter % 4 == 2) {
$style = 'style="position: absolute; left: 234px; top: 175px;"';
} else if ($counter % 4 == 3) {
$style='style="position: absolute; left: 468px; top: 175px;"';
} else {
$style='style="position: absolute; left: 702px; top: 175px;"';
}
$counter++;
?>
<div class="grid-splash-item" <?= $style ?>>
<!-- <img src="images/img-2.jpg" /> -->
<a href="<?php echo HTTP_ROOT . 'funny-' . $categoryName['name'] . '-images/' . makeSeoUrl($getLatestGif['title']) . '/' . $getLatestGif['uniq_id']; ?>" > <img width="198" height="169" src="<?php echo HTTP_ROOT . DIR_GIF . $getLatestGif['gifphoto']; ?>" /> </a>
<div class="gif-details">
<div class="gif-details-menu">
<span>
<div class="gif-details-menu-box" <?php if (!empty($_SESSION['USER_ID']) && $checkLatestUsers) { ?> <?php } else { ?> <?php } ?>>
//My coding present.I have removed it(too long).
</div>
</span>
<p><?php echo substr($getLatestGif['title'], 0, 20); ?></p>
</div>
</div>
</div>

After researching a lot,i came to a accurate result.Here its only need to change two things.Here i have not written any inline css,after appending its coming fine,with proper css.
Below is my new code.Which is working perfectly.
This is my new script coding.I have modified a little
<?php $per_page=20; $latestImages = mysql_query("select * from ".GIFIMAGES." WHERE isActive = '1' AND not_update='1' order by modified "); $total_record=mysql_num_rows($latestImages)/5;$maxPage=number_format((float) $total_record, 2, '.', ''); ?>
<script>
$(function(){
var $container = $('#container');
var lastX = 0;
var currentX = 0;
var page = 1;
$('#append a').click(function(){
if (page < '<?php echo $maxPage;?>') {
page++;
$('.funny-gifts').html('Loading...');
$.post("ajax_append.php", {'ajax_append':'<?php echo $per_page;?>','page':page},function(data)
{
// $('#container').append(data);
var $newItems = $(data);
$('#container').isotope( 'insert', $newItems );
$('.funny-gifts').html('More Funny Gifs');
});
} else {
$('.funny-gifts').hide();
}
});
});
</script>
***var $newItems = $(data);
$('#container').isotope( 'insert', $newItems );***
This above two line coding is very important for appending.
Dont use $('#container').append(data); for appending.Result will come but,having a designing issues.Then after it replace the view more button slightly.Below is coding.
<div id="append">More Funny Gifs</div>