I've been trying to make this feature work for many days now and it's driving me nuts!
I have a single page theme in WP and in one of them there is a div on the left with a list of the posts in the site and on the right, a div that should display the content of the clicked post.
I found this question and followed up the linked tutorial and was partially successful.
I managed to bring the content dinamically, and all I want is being displayed but it seems the order of the tasks are wrong. Heres how it's acting:
I click on the link.
the current content goes away.
the loading span appears correctely.
the SAME content fades in.
after 1 second or so the current content is replaced with the new content and the address bar does not change at all.
Here's the code I have:
atracoes.js
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('.controle nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href)){
var aCarregar = hash+'.html #atr-conteudo';
$('#atr-conteudo').load(aCarregar)
}
});
$('.controle nav li a').click(function() {
var aCarregar = $(this).attr('href')+' #atr-conteudo';
$('#atr-conteudo').hide('fast',carregarConteudo);
$('#carregando').remove();
$('#atracoes').append('<span id="carregando">Carregando...</span>');
$('#carregando').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href'));
function carregarConteudo () {
$('#atr-conteudo').load(aCarregar,'',mostrarNovoConteudo());
}
function mostrarNovoConteudo () {
$('#atr-conteudo').show('normal',esconderCarregando());
}
function esconderCarregando () {
$('#carregando').fadeOut('normal');
}
return false;
});
});
index.php (the dynamic content part)
<div class="main" id="atracoes">
<div class="controle">
<nav>
<?php
$args = array( 'posts_per_page' => 20);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<li>
<?php the_title(); ?>
</li>
<?php endforeach;
wp_reset_postdata();?>
</nav>
</div>
<div id="atr-conteudo">
<?php the_post_thumbnail(); ?>
<div id="atr-texto">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</div>
</div>
</div>
single.php (the part I'm plucking with ajax)
<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(); // Fullsize image for the single post ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<div id="atr-texto">
<!-- post title -->
<h1>
<?php the_title(); ?>
</h1>
<!-- /post title -->
<?php the_content(); // Dynamic Content ?>
<?php edit_post_link(); // Always handy to have Edit Post Links available ?>
</div>
</article>
You're calling the functions before you pass them to jQuery to execute, instead of allowing jQuery to execute them:
function carregarConteudo () {
$('#atr-conteudo').load(aCarregar,'',mostrarNovoConteudo);
}
function mostrarNovoConteudo () {
$('#atr-conteudo').show('normal',esconderCarregando);
}
(Notice they no longer have () after the function names)
Related
I have an accordion style div with 3 boxes. When clicking it is opening and closing the content into view. I have an absolute positioned div with a background image behind that I need changed on each click. When I first load the page I am able to get it to work as you click each element. However, once you click any of those div boxes again it sticks to the same background image and won't cycle through. I have tried using .next(), .closest() but not working.
<?php
$args = array(
'post_type' => 'services',
's' => '-demand' // will exclude all post with the title name "Demand" present
);
$services = new WP_Query($args);
;?>
<?php if($services->have_posts()) : ?>
<section class="section__wrapper" id="services__set">
<div class="services__accordion" id="class-accordions">
<div class="services__container">
<?php $i = 1;
while($services->have_posts()): $services->the_post();
global $post;
$post_slug = $post->post_name; ?>
<div class="services__col" id="<?php echo $post_slug;?>">
<span class="h2 services__title"><?php the_title();?></span>
<div class="services__content">
<?php $barreDesc = get_field('class_description'); if($barreDesc): ?><p><?php echo $barreDesc; ?></p><?php endif; ?>
<div class="services__btn">
<a class="btn white-btn" href="<?php echo site_url(); ?>/locations/">Find A Studio</a>
</div>
</div>
</div>
<div class="services_bg" style="background-image:url(<?php the_field('service_feature_image');?>);"></div>
<?php $i++; endwhile;wp_reset_postdata();?>
</div>
</div>
</section>
<script>
jQuery(document).ready(function($) {
$('.services__content').css('height', '0');
$('.services__col').first().addClass("active-reveal");
$('.services_bg').first().addClass("active");
$('.services__col').click(
function() { //When you click on a button...
var isActive = $(this).hasClass('active-reveal');
if( isActive ){ //If it already has an active class...
$(this).removeClass('active-reveal'); //...it loses the active class....
}
else{ //If it does NOT already have an active class...
$('.services__col').removeClass('active-reveal'); //all buttons lose the active class...
$(this).addClass('active-reveal'); //...except this one.
}
if ($('.services__col').attr("class") == "active-reveal") {
$(this).next('.services_bg').removeClass('active');
} else {
$(this).next('.services_bg').addClass('active');
}
});
});
</script>
<?php endif;?>
Updated code with answer
<?php
$args = array(
'post_type' => 'services',
's' => '-demand' // will exclude all post with the title name "Demand" present
);
$services = new WP_Query($args);
;?>
<?php if($services->have_posts()) : ?>
<section id="services__set">
<div class="services__accordion" id="class-accordions">
<div class="services__container">
<?php $i = 1;
while($services->have_posts()): $services->the_post();
global $post;
$post_slug = $post->post_name; ?>
<div class="services__col" id="<?php echo $post_slug;?>">
<span class="h2 services__title"><?php the_title();?></span>
<div class="services__content">
<?php $barreDesc = get_field('class_description'); if($barreDesc): ?><p><?php echo $barreDesc; ?></p><?php endif; ?>
<div class="services__btn">
<a class="btn white-btn" href="<?php echo site_url(); ?>/locations/">Find A Studio</a>
</div>
</div>
</div>
<div class="services_bg" style="background-image:url(<?php the_field('service_feature_image');?>);"></div>
<?php $i++; endwhile;wp_reset_postdata();?>
</div>
</div>
</section>
<script>
jQuery(document).ready(function($) {
$('.services__content').css('height', '0');
$('.services__col').first().addClass("active-reveal");
$('.services_bg').first().addClass("active");
$('.services__col').click(
function() { //When you click on a button...
var isActive = $(this).hasClass('active-reveal');
if( isActive ){ //If it already has an active class...
$(this).removeClass('active-reveal'); //...it loses the active class....
}
else{ //If it does NOT already have an active class...
$('.services__col').removeClass('active-reveal'); //all buttons lose the active class...
$(this).addClass('active-reveal'); //...except this one.
}
if ($('.services__col').attr("class") == "active-reveal") {
$(this).next('.services_bg').removeClass('active');
} else {
$('.services_bg').removeClass('active');
$(this).next('.services_bg').addClass('active');
}
});
});
</script>
<?php endif;?>
I have integrated the Isotope grid .js library (https://isotope.metafizzy.co/index.html) with my Wordpress posts to display a nice grid: see screenshot below:
However, on initial load (and when I do a cache reload) the grid items seem to overlap. See below Screenshot:
I've enqueued the js library using a CDN, I can tell thats working. I have the below code. Firstly the loop to bring in the posts and then the bit of Javascript that initialises it.
<div class="container blog-card-container">
<div class="grid">
<?php
$my_query = new WP_Query('cat=[14]&posts_per_page=10');
?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;?>
<div class="grid-sizer"></div>
<!-- Conditional a Link =========================================== -->
<?php
if(get_field('quote') == ''){
$yourTag = "<a href='".get_the_permalink()."'>" ;
} else {
$yourTag = "";
}
?>
<div> <?php echo $yourTag; ?> </div>
<div class="grid-item">
<div class="client-header-logo-card" style="background-color: <?php the_field('client_brand_colour'); ?>;">
<?php
$image = get_field('client_logo');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
<div class="clients-card-block">
<h2><?php the_title(); ?></h2>
<?php if( get_field('quote') ): ?><p class="client-quote"><span style="color:<?php the_field('client_brand_colour'); ?>; font-weight:bold;">“ </span><?php the_field('quote'); ?><span style="color:<?php the_field('client_brand_colour'); ?>;font-weight:bold;"> ”</span></p><?php endif; ?>
<?php if( get_field('quote_name') ): ?><p class="client-name" style="color:<?php the_field('client_brand_colour'); ?>;"><?php the_field('quote_name'); ?></p><?php endif; ?>
<?php if( get_field('quote_position') ): ?><p class="client-position" style="color:<?php the_field('client_brand_colour'); ?>;"><?php the_field('quote_position'); ?></p><?php endif; ?>
<?php if( get_field('button_text') ): ?>
<a class="btn btn-sm btn-client-archive" href="<?php the_permalink(); ?>" style="background-color:<?php the_field('client_brand_colour'); ?>;" role="button"><?php the_field('button_text'); ?></a>
<?php endif; ?>
<?php if( get_field('video_url') ): ?>
<div class="embed-container">
<?php the_field('video_url'); ?>
</div>
<?php endif; ?>
</div>
</div>
</a>
<?php endwhile; ?>
</div>
</div>
<script type="text/javascript">
// vanilla JS
var grid = document.querySelector('.grid');
var iso = new Isotope( grid, {
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer',
gutter: 20
}
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
</script>
I included this little bit of javascript after the init which is supposed to fx the issue, but I find them still overlapping:
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
My site is here by the way: http://webserver-meetandengage-com.m11e.net its around halfway down the homepage.
Do you think this is because I've included the javascript on the same page? Should I include it in it's own .js file? I tried this initially but I couldn't get it to work properly...
Seems you didn't include imagesLoaded plugin on the page. Please make sure that the plugin is added properly. Hope that'll resolve the overlapping issue. And you should add this <div class="grid-sizer"></div> outside the loop.
I'm working to create a classifieds site. On the search page will be presented multiple products cards. Each product card can have more than one image. When that happens, I will uses a slider.
To build this slider, I'm using a jquery library (bxslider). The application is based on WordPress.
So far, everything was going well. Cards and slider working. But when I have more than one card (post), the slider controls change the position on all cards. Of course, since the selector is the same for everyone.
Then I added the post ID to the ID selector, making every single card. But now must do jQuery understand that there are several unique cards for him to apply the function that creates the slides within each card.
My PHP Code
<?php
$id = get_the_ID();
?>
<div id="card-slider-<?php echo $id?>">
<?php
$images = get_post_meta($post->ID, 'vdw_gallery_id', true);
foreach ($images as $image) { ?>
<li>
<div class="card-slide-item">
<img src="<?php echo wp_get_attachment_url( $image, 'imob-thumbs' ); ?>">
</div>
</li>
<?php }
?>
</div>
<div class="card-slide-prev"></div>
<div class="card-slide-next"></div>
My jQuery
(function( $ ){
$.fn.sliderID = function() {
var sliders = [];
sliders = $('[idˆ=card-slider-]').length;
console.log('sliders ids', sliders);
};
})( jQuery );
$(document).ready(function(){
$.fn.sliderID();
});
Instead of giving each slider an individual id card-slider-{id}, consider to give them all a common class card-slider and initiate the slider plugin on all elements that have that class. You can pass along the ids of the prev/next selectors (which you can e.g. store in a data attribute) in the initialization arguments of the slider:
Slider initiation
$( ".card-slider" ).each(function( index ) {
var slider_id = $(this).data('id');
$( this ).bxSlider({
nextSelector: '#card-slide-'+slider_id+'-next',
prevSelector: '#card-slide-'+slider_id+'-prev',
});
});
Markup:
<?php
$id = get_the_ID();
?>
<div class="card-slider" data-id="<?php echo $id; ?>">
<?php
$images = get_post_meta($post->ID, 'vdw_gallery_id', true);
foreach ($images as $image) { ?>
<li>
<div class="card-slide-item">
<img src="<?php echo wp_get_attachment_url( $image, 'imob-thumbs' ); ?>">
</div>
</li>
<?php }
?>
</div>
<div id="card-slide-<?php echo $id; ?>-prev"></div>
<div id="card-slide-<?php echo $id; ?>-next"></div>
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".
I am using opencart template. Here I'm trying to show some mysql table datas in div tab. it works fine. But, when I reload the browser it doesn't show the default current div mysql datas. If I click another tab it shows all datas properly
When I reload the browser it shows like this
Then I click Notes tab and again I click Reviews tab. I got this.
Why Reviews tab content doesn't show on page load?
<ul id="dashboard_tabs">
<?php if($description) { ?>
<li><?php echo $tab_description; ?></li>
<?php } ?>
<?php if ($review_status) { ?>
<li><a href="#two" ><?php echo $tab_review; ?></a></li>
<?php } ?>
<?php if ($attribute_groups) { ?>
<li>Notes</li>
<?php } ?>
<?php if ($products) { ?>
<li><a href="#four" ><?php echo $tab_related; ?> <?php /*echo count($products);*/ ?></a></li>
<?php } ?>
</ul>
<div id="dashboard_content_details">
<div id="one">
<?php echo $description; ?>
</div>
<div id="two">
some contents
</div>
<div id="three">
some contents
</div>
<div id="four">
some contents
</div>
</div>
Jquery
$(function(){
function resetTabs(){
$("#dashboard_content_details > div").hide(); //Hide all content
$("#dashboard_tabs a").attr("id",""); //Reset id's
}
var myUrl = window.location.href; //get URL
var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2
var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab
(function(){
$("#dashboard_content_details > div").hide(); // Initially hide all content
$("#dashboard_tabs li:first a").attr("id","current"); // Activate first tab
$("#dashboard_content_details > div:first").fadeIn(); // Show first tab content
$("#dashboard_tabs a").on("click",function(e) {
e.preventDefault();
if ($(this).attr("id") == "current"){ //detection for current tab
return
}
else{
resetTabs();
$(this).attr("id","current"); // Activate this
$($(this).attr('href')).fadeIn(); // Show content for current tab
}
});
})()
});
I think so you need to put these function in
$(document).ready(function(){
// do the above task
})