WordPress load more posts after click on button
I have php template what display custom post types. I need display 6 posts and after click on button display another 6. Currently button not works and there are showed just 6 posts.
My JS:
<script>
$(document).ready(function(){
$(".content").slice(0, 6).show();
$("#loadMore").on("click", function(e){
e.preventDefault();
$(".content:hidden").slice(0, 6).slideDown();
if($(".content:hidden").length == 0) {
$("#loadMore").text("No Content").addClass("noContent");
}
});
})
</script>
php
<?php
$args = array(
'posts_per_page' => 6,
'post_type' => 'dluhopisy',
);
$the_query = new WP_Query( $args );
if( $the_query->have_posts() ){
while ( $the_query->have_posts() ){
$the_query->the_post();
$the_id = get_the_id();
$classes[] = 'grid-col col-1-3 bp2-col-1-2 bp1-col-1-2 bp0-col-full comp_company_profile_small-filter content';
.....
?>
<div <?php cookie_class_from_array( $classes );?>>....
do you know?
how many words do you know
See also questions close to this topic
-
How to upload a video using ACF in WordPress?
I am still at learning phase in WordPress. I cannot figure out in ACF which field type should I choose to upload a video file and which code should I write to show it at the front-end. Please look into the below code. I am using the_field('') but it isn't working. Can anyone help
<video width="954" height="535" controls class="tm-mb-40"> <source src="video/wheat-field.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
-
delete a table form a database using laravel command
i need to delete a database table using laravel artisan command . not like this command php artisan migrate:rollback --step=5
i need to create like this route or controller code .
Route::get('/clear/database', function () {
Artisan::call('cache:clear'); return redirect('/');
});
. i also try public function dd()
{ Schema::drop('table_name'); }
but it not working . gives me error like this SQLSTATE[23000]: Integrity constraint violation: 1451 Cannot delete or update a parent row: a foreign key constraint fails (SQL: drop table
table_name
)no foreign key for the table . what should i do ?
thanks in advance!
-
Creating Sticky Navbar with Drop Down Menu HTML
I am creating a HTML web page which contains a sticky navbar with drop down menu. However, when I created one, the dropdown menu does not works in the sticky navbar and so goes vise versa. below is the screenshot of both the result of the two codes.
*image with dropdown menu but without sticky navbar
*image with sticky navbar but without dropdown menu
below is the code for "image with dropdown menu but without sticky navbar"
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css"> <style> body {margin:0;font-family:Arial} .topnav { overflow: hidden; background-color: #333; } .topnav a { list-style-type: none; float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; position: sticky; } .active { background-color: #04AA6D; color: white; } .topnav .icon { display: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: white; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } </style> </head> <body> <div class="header"> <h2>Scroll Down</h2> <p>Scroll down to see the sticky effect.</p> </div> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a href="#about">About</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a> </div> <div style="padding-left:16px"> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> </div> <h3>Sticky Navigation Bar Example</h3> <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p> <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body> </html>
below is the code for "image with sticky navbar but without dropdown menu"
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css"> <style> body { font-size: 20px; } body {margin:0;} ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: -webkit-sticky; /* Safari */ position: sticky; top: 0; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 16px 20px; text-decoration: none; } li a:hover { background-color: #111; } /*======================================================================*/ body { background-color:white; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #38444d; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #f1f1f1;} .dropdown:hover .dropdown-content { display: block; } footer { text-align: center; padding: 3px; background-color: DarkSalmon; color: white; } </style> </head> <body> <div class="header"> <h2>Scroll Down</h2> <p>Scroll down to see the sticky effect.</p> </div> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li class="dropdown"> <a href="javascript:void(1)" class="dropbtn">Dropdown</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> <h3>Sticky Navigation Bar Example</h3> <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p> <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <p>Some text to enable scrolling. </p> <footer> <p>Author: Hege Refsnes<br> <a href="mailto:hege@example.com">hege@example.com</a></p> </footer> </body> </html>
Please i need some help with this as i am new to html and css.
-
How to clear user uploaded images if the limit of files exceeded in jquery
I have a simple form where a user can upload multiple images. I only want the user to upload 4 images at once, so I did the following:
$("#myfile").on("change", function() { if ($("#myfile")[0].files.length > 4) { alert("You can select only 4 images"); } });
<input type="file" id="myfile" class="form-control" name="pimage[]" multiple="multiple">
This gives an alert when the user uploads more than 4 images but doesn't stop them from submitting the form.
Can anyone please tell me how to clear the user uploaded images if the limit exceeds or disable the submit button?
-
Some iphone device not able play audio browser jquery
My jquery audio script perfecly play audio, but some iphone device has no audio playing, can anyone tell me the problem,
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js" integrity="sha512-L6Z/YtIPQ7eU3BProP34WGU5yIRk7tNHk7vaC2dB1Vy1atz6wl9mCkTPPZ2Rn1qPr+vY2mZ9odZLdGYuaBk7dQ==" crossorigin="anonymous"></script> let autoplay = true; let soundID; var sound = new Howl({ src: ['<?php echo base_url(); ?>assets/mp3/<?php echo $nama_musik; ?>'], autoplay: autoplay, loop: true, }); soundID = sound.play();
-
Whenever I try to add email on mysql server. My page is not responding. why?
I am a little bit confused. see the code below.
$('#submit').click(function() { $('#showdata').html($('#senddata').serialize()); /*Print all data that passed from form.*/ $.ajax({ url: "save.php", /* Here data store on mysql server without email and response to welcome.php. */ type: "POST", /* if i want to add proper email format then data store in mysql but not response on welcome.php. */ data: $('#senddata').serialize(), success: function(r) { alert("ok"); $('#senddata').trigger('reset'); window.location = 'welcome.php'; /*This is welcome page*/ } }) })
I want to submit a form using the ajax post method. If I write any name instead of email then data is stored on the server and responding welcome.php. Whenever I write any name email then data is stored on the server but responding welcome.php. Here is 'save.php' code.
<?php include('./config.php'); print_r($_POST); $name=$_POST['name']; $email=mysqli_real_escape_string($con,$_POST['email']); $pwd=$_POST['password']; $vill=$_POST['address'].$_POST['city'].$_POST['state'].$_POST['zip']; $insertdata="INSERT INTO `persons`(`name`,`email`,`pwd`,`vill`)VALUE('$name','$email','$pwd','$vill')"; print_r($insertdata); if(mysqli_query($con,$insertdata)){ echo "data added"; }else{ echo "not added"; } ?>
Note: if I put my button
<button class="btn btn-primary" id="submit">sign up</button>
outside form then everting is right. -
Can you add apps made from (js, nodejs, express and mongodb) in a wordpress website?
I already have a wordpress website. I studied web development using js, node.js, express and mongodb and build some projects. I would like to add it to my website. Is this possible or I just need to create a website without wordpress and add my projects?
-
Query to get Woo products in a parent-children order
I want to build a MySQL query for a Woo database schema to get simple/variable products, but in a specific order: I want to get them in an
ID
ASC
ending order, but when a variable product is met, I want to get the variations exactly below their parent.So for a simple product, or the parent of a variable product, the
post_type
field is set to 'product' and thepost_parent
field is set to 0. For the children of a variable product (a.k.a variations) thepost_type
field is set to 'variable_product' and thepost_parent
field is set to theID
of the parent product.So, imagine this desired order:
ID post_title post_type post_parent 1100 title1 product 0 1104 title2 product 0 1130 title2 - variation1 variable_product 1104 1200 title2 - variation2 variable_product 1104 1208 title2 - variation3 variable_product 1104 1107 title3 product 0 1111 title4 product 0 1205 title4 - variation1 variable_product 1111 1210 title4 - variation4 variable_product 1111 1430 title4 - variation3 variable_product 1111 1432 title4 - variation2 variable_product 1111 So by the above table you see that I want products to be sorted by their ID, until the variation(s) of a product are met, which I want to be placed under their parent, and get sorted themselves by their ID also. So I don't care about titles not being sorted alphabetically (title4-variation4 is sorted above title4 - variation3 because the variations' IDs are sorted in an ascending order).
So I tried to play a little with
ORDER BY ID ASC, post_parent ASC
and alsoORDER BY ID ASC, post_type ASC
because product is sorted alphabetically above variation_product, but I couldn't get them sorted correctly. I always end up with parent products being sorted higher than variations, just because their IDs are smaller.SELECT * FROM wp6c_posts WHERE post_type IN ('product', 'product_variation') ORDER BY ID ASC, post_parent ASC;
Obviously I have to query table wp6c_posts twice, once for the simple/parent products, and then for the variations of the variable products, but I can't think of the correct query.
Can someone help me with this?
-
I want to show the related categories section on the post page dynamically. Can anybody help me with this?
I have a quote website and it has many categories almost 50 with parent child relationship like. enter image description here
What i want is when i open love quote page .. on side bar it will show related categories list to love quotes (child categories i.e boyfriend wishes, cute love quote ). and when i go to any child category page (i.e boyfriend quote) it will show all child categories under that parent one. and so on with all other categories... .
Shortly, i want same scenario as related posts works but i want it with categories list.
I don't know how to do it. there must be a dynamic code that I should put in sidebar right ?
Please help me to do it.
-
WordPress posts load more button
i have custom php template for display all posts (from ACF). I need display only first 6 and after click on button load another 6.
My code: JS
<script> $(document).ready(function(){ $(".content").slice(0, 6).show(); $("#loadMore").on("click", function(e){ e.preventDefault(); $(".content:hidden").slice(0, 6).slideDown(); if($(".content:hidden").length == 0) { $("#loadMore").text("No Content").addClass("noContent"); } }); }) </script>
PHP
$args = array( 'posts_per_page' => -1, 'post_type' => 'dluhopisy', ); $the_query = new WP_Query( $args ); if( $the_query->have_posts() ){ while ( $the_query->have_posts() ){ $the_query->the_post(); $the_id = get_the_id();
HTML
<a href="#" id="loadMore">Load More</a>