I need to show the content of post in wordpress. Basically I need to show a div on click, but only the current post. I have the title and the excerpt looping on the page to show all post. I want to show the content of only the current title post clicked. Example below is what I currently have.
$(document).on('click', '.post-id', function() {
$(myClass, ".post-content").show();
});
<div class="post-full">
<h2 class="post-id<?php //echo get_the_ID(); ?>"><?php the_title(); ?><div class="close">Close</div></h2>
<div class="post-excerpt"><h3><?php the_excerpt(); ?></h3></div>
<div class="post-content"><?php the_content(); ?></div>
</div>
If i understand correctly
$(document).on('click', '.post-id', function()
{
var content = $(this).nextAll('.post-content');
if (content.is(':visible'))
{
content.hide();
}
else
{
$('.post-content:visible').hide();
content.show();
}
});
Related
I am making a one page website and would like to show or hide a button dependent on the section id or element that is visible in the view port.
I have a home button that i need to show when the user scrolls down past what is technically the homepage. I am using scrollify to snap scrolls to section with a height value of 100vh.
I have a function to detect if the element in question is in view but the button displays or hides relevant to the page that is loaded not by seaching for the element that would tell the button to show or hide.
I am using the div class text to determine whether to show or hide the home button is there a way to make jquery update and re engage the function when the user has scrolled or moved the page? the pages in question are live on www.testsiteclash.co.uk
Thanks
jquery
$.fn.inView = function(inViewType){
var viewport = {};
viewport.top = $(window).scrollTop();
viewport.bottom = viewport.top + $(window).height();
var bounds = {};
bounds.top = this.offset().top;
bounds.bottom = bounds.top + this.outerHeight();
switch(inViewType){
case 'bottomOnly':
return ((bounds.bottom <= viewport.bottom) && (bounds.bottom >= viewport.top));
case 'topOnly':
return ((bounds.top <= viewport.bottom) && (bounds.top >= viewport.top));
case 'both':
return ((bounds.top >= viewport.top) && (bounds.bottom <= viewport.bottom));
default:
return ((bounds.top >= viewport.top) && (bounds.bottom <= viewport.bottom));
}
};
$(document).ready(function(){
if($('.text').inView( 'both' ) == true ){
$('.home-btn').css('display','none');
}else if($('#section_1').inView( 'both' ) == false ) {
$('.home-btn').css('display','block');
}
});
Html/php
<?php get_header(); ?>
<article id="section_1">
<section class='section' data-section-name="Devon Food Movement">
<div class="container">
<div class="logo">
<div class="logo-image">
</div>
</div>
<div class="text">
<h1>Devon Food Movement</h1>
<h2>Website under construction <br class="textbreak">follow us below on ...</h2>
</div>
<div class="icons">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
<div class="icon3m"></div>
</div>
</div>
</section>
</article>
<article id="section_2">
<section class='section' data-section-name="Contact">
<?php
if (have_posts()) :
while (have_posts()) : the_post();
get_template_part('form');
endwhile;
else:
echo '<p>No Content found</p>';
endif;
?>
</section>
</article>
<div class="home-btn"><i class="fas fa-home"></i></div>
</body>
</html>
Added scroll to the function all works now, noob alert haha!
$(document).scroll(function(){
if($('.text').inView( 'both' ) == true ){
$('.home-btn').css('display','none');
}else if($('#section_1').inView( 'both' ) == false ) {
$('.home-btn').css('display','block');
}
});
Here is a simplistic example that shows how to use the window.scroll event to detect whether to show/hide a button.
var currPos=1, lastPos=0, scrollDir='dn';
var triggerPos = $('#myTrigger').offset().top;
$(window).scroll(function(){
currPos = $(window).scrollTop();
$('#d2').html(currPos); //unnecc - displays current scroll position for you
scrollDir = (currPos > lastPos) ? 'dn' : 'up';
lastPos = currPos;
if (scrollDir=='dn'){
if (currPos > triggerPos) $('#btnSpecial').fadeIn(100);
}else{
if (currPos < triggerPos) $('#btnSpecial').fadeOut(100);
}
});
.dPage{width:100vw;height:100vh;}
#d1{background:palegreen;}
#d2{background:bisque;}
#d3{background:lightpink;}
#d4{background:purple;}
#d5{background:lightblue;}
#btnSpecial{display:none;position:fixed;top:30px;right:100px;padding:10px;background:dodgerblue;color:white;font-size:2.3rem;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dPage" id="d1"></div>
<div class="dPage" id="d2"><div id="myTrigger"></div></div>
<div class="dPage" id="d3"></div>
<div class="dPage" id="d4"></div>
<div class="dPage" id="d5"></div>
<button id="btnSpecial">La Button</button>
What i want to achieve
I want to be able to shift seamlessly through the different posts in the sidebar on this website, while having using a custom post template for my posts. And by seamlessly i mean that the screen doesn't go white for a second every time you navigate it.
My problem
single.php or single-{slug}.php does not work, since the URL doesn't change while navigating the sidebar
Plugins i am using
Custom Post Type UI
Ajax Content Renderer
jQuery script for my sidebar
$(document).ready(function() {
$("#sidebar li:has(a)").click(function() {
var page = $("a:first",this).attr("href");
$("#content").load(page);
return false;
});
});
HTML & PHP for sidebar and content area
<div class="row"> <!-- Main content row -->
<div class="col-md-4" id="sidebar">
<?php
if (is_page('gulvservice')){
wp_nav_menu(array('menu'=>'gulvservice' ));
} elseif (is_page('malerservice')) {
wp_nav_menu(array('menu'=>'malerservice' ));
} elseif (is_page('industrilakering')) {
wp_nav_menu(array('menu'=>'industrilakering' ));
}
?>
</div>
<div class="col-md-8" id="content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="title"><h1>
<?php the_title(); ?>
</h1></div>
<div class="div">
<?php
if( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</div>
<?php endwhile; endif; ?>
</div>
</div>
</div> <!-- Main Content -->
Need to prevent the event on the <a>. So it would be better to move the selector to those elements
Try:
$(document).ready(function() {
$("#sidebar li a").click(function() {
var page = $(this).attr("href");
$("#content").load(page);
return false;
});
});
I am new to ajax, is there a way you can help me, how to disable all items once click is successful:
Here is my code for ajax:
if (!parent.hasClass('.disabled')) {
// vote up action
if (action == 'click') {
alert("test");
};
//how do i add disabled function on a particular div
// add disabled class with .item
parent.addClass('.disabled');
};
here is my index:
<?php while($row = mysql_fetch_array($query)): ?>
<div class="item" data-postid="<?php echo $row['recipe_id'] ?>" data-score="<?php echo $row['vote'] ?>">
<div class="vote-span"><!-- voting-->
<div class="vote" data-action="up" title="Vote up">
<i class="icon-chevron-up"></i>
</div><!--vote up-->
<div class="vote-score"><?php echo $row['vote'] ?></div>
</div>
<div class="post"><!-- post data -->
<p><?php echo $row['recipe_title'] ?></p>
</div>
</div><!--item-->
i jst want to disable the loop icon-chevron-up class.not just one but all.
Actually no ajax call needed here. I will only be done by using jquery. See the code
$(document).ready(function(){
$('.item').click(function(){
if (!parent.hasClass('.disabled')) {
parent.addClass('.disabled');
}
});
});
Here you have not mentioned, on what click you need the action, so i consider that on the div contains class='item', the action will be performed. I hope it will help.
I will try to explain the best I can. Basically I have a grid (masonry) of items and I want to append ajax loaded content (wordpress single.php post) inside each grid div (red).
I have a div class called ajaxcontainer inside each red div that I populate with content. When I click the a href trigger content gets appended as it should, this works once but when I click another item in the grid the old ajaxcontainer gets populated with new content from that href. Basically duplicating.
I want the old ajaxcontainer to keep the old content even though I click another item.
HTML
<article style="background:<?php echo $color ?>;" id="post-<?php the_ID(); ?>"
<?php post_class($classes); ?>>
<div class="hover">
<h2><?php echo $head ?></h2>
<p class="tags"><?php echo $tagsstring; ?></p>
<?php echo $url ?>
<a class="trick" rel="<?php the_permalink(); ?>" href="<?php the_permalink();?>">goto</a>
</div>
<div class="thumbnail <?php echo $paddingstring?>" style="background-image:url(<?php echo $thumbnail[0] ?>);">
</div>
</article><!-- #post-## -->
What I have right now:
$.ajaxSetup({
cache: false,
success: function (result, status, xhr) {
// not showing the alert
console.log('success');
var $this = jQuery(this)
$('.ajaxcontainer', $this).hide().fadeIn();
},
beforeSend: function () {
console.log('beforesend');
$(".ajaxcontainer").html("loading...");
},
complete: function (xhr, stat) {
// hide dialog // works
}
});
$(".trick").each(function () {
$(this).on("click", function (e) {
$(this).parents('.item').append("<div class='ajaxcontainer'>hello world</div>")
var post_link = $(this).attr("href");
$(".ajaxcontainer").load(post_link + ' #content');
return false;
});
});
Any help is appreciated :)
I maybe wrong, but from what I see, if you have duplicated content, next() could help.
Something like $(this).parents('.item').next().append("hello world") in the function.
Hi I need to create a simple popup function for wordpress site.
I got loop that is running and showing posts properly. Post when clicked should appear in popup. What I;ve got so far. Apart from adding fancybox to do it's job.
<a class="modalbox" rel="<?php echo $post->ID; ?>" href=" http://localhost/makijaz/?page_id=12">
<article> ...Wordpress post </article>
I got the one beneath from other thread, but it's not working.
$(".modalbox").on("click", function() {
var postId = $(this).prop("rel");
$(this).fancybox();
});
href in is directing to page with template with other loop. Need to Simply gram PostID (it's in rel of an ) and put it into other loop for showing in popup.
<?php
/*
Template Name: Ajax Post Handler
*/
?>
<?php
$post = get_post($_GET['id']);
?>
<?php if ($post) : ?>
<?php setup_postdata($post); ?>
<div class="whatever">
<h2 class="entry-title"><?php the_title() ?></h2>
<div class="entry-content">
<?php the_content(); ?>
</div>
</div>
<?php endif; ?>
Hopefully, I've made myself clear.
I'm guessing your page template doesn't have a get_header and get_footer so in your example scripts won't load.
<?php
/*
Template Name: Your Temp Name
*/
get_header(); ?>
If you want to pass the post id so $post = get_post($_GET['id']); can fetch it, you could try
jQuery(document).ready(function ($) {
$(".modalbox").on("click", function (e) {
e.preventDefault();
var postId = $(this).prop("rel");
$.fancybox.open({
href: this.href + "&id=" + postId,
type: "ajax"
});
});
});
See JSFIDDLE