Edit my code to make it work please.
Edited for latest version.
Here is what I have:
<body>
<!-- visibility toggle -->
<script type="text/javascript">
<!--
function toggle_visibility()
{
if(document.getElementById(window.event.srcElement.id+'menu').style.display=='block'){
document.getElementById(window.event.srcElement.id+'menu').style.display='none';
}
else{
document.getElementById(window.event.srcElement.id+'menu').style.display='block';
}
};
//-->
</script>
Here are my divs (edited to show exactly what I have)
<ul class="lyrics"><h3>ALL LYRICS</h3>
<?php while ( have_posts() ) : the_post(); ?>
<li ><a id="links" href="#" onclick="toggle_visibility();"><?php the_title(); ?></a>
<div id="linksmenu"><?php the_content();?></div>
</li>
<?php endwhile; // End the loop. Whew. ?>
</ul>
Here is what happens:
Regardless which link I click on, only the text associated with the very last "the_content" displays.
Here is what I need:
Initially all the "child" divs are not visible.
When I click on "Title 1" link, the "Child text 1" will become visible.
When I click on "Title 2" link, the "Child text 2" will become visible and the "Child text 1" will become not visible.
This is going to be in a WordPress blog so the number of Title divs will change. There will always be only one child.
Thanks in advance!
the reason why your first div is toggled no matter where you click, is because you use the hard-coded id foo. Pass this to toggle_visibility instead of the literal 'foo' and inside toggle_visibility function find the div that you want to toggle (this is going to be the first child of the passed parameter).
It is doing this because you are calling the_content() twice. I am assuming your file looks like:
<?php get_header();
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<ul>
<li class="main"><?php the_title(); ?> <div class="child"><?php the_content(); ?></div> </li>
<li class="main"><?php the_title(); ?> <div class="child"><?php the_content(); ?></div> </li> <ul>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
You need to have two loops, but I can't supply detail without seeing more code. Read about multiple loops.
Throw the parameter away and build the id you want to set visible/invisible using the id of the element which triggers the event.
function toggle_visibility()
{
if(document.getElementById(window.event.srcElement.id+'menu').style.display=='block'){
document.getElementById(window.event.srcElement.id+'menu').style.display='none';
}
else{
document.getElementById(window.event.srcElement.id+'menu').style.display='block';
}
};
And as long as the thing you want to show always has a id+'menu' or whatever, you can show it with the function. (notice that the parent has id links and the child has id linksmenu )
<ul class="lyrics"><h3>ALL LYRICS</h3>
<?php while ( have_posts() ) : the_post(); ?>
<li ><a id="links" href="#" onclick="toggle_visibility();"><?php the_title(); ?></a>
<div id="linksmenu"><?php the_content();?></div>
</li>
<?php endwhile; // End the loop. Whew. ?>
</ul>
Related
So I am trying to create a CTA(call to action) adding three cards into my wordpress site. I am trying to insert PHP and ACF functions so that it shows my image, currently it displays the title and the body text of these cards but doesn't show any image? How do I fix it?
In my acf, I have created four sub field types: "cta_image", "cta_title", "intro_text" and "cta_link". In my code editor, I have inserted the following functions and so far on my wordpress site, it shows the title and the intro text but I don't know how to put an image.
<?php
if ( have_rows( 'ctas' ) ) :
// Loop through rows (parent repeater).
while ( have_rows( 'ctas' ) ) :
the_row();
?>
<div class="title-wrapper">
<?php if ( get_sub_field( 'cta_title' ) ) : ?>
<h2><?php the_sub_field( 'cta_title' ); ?></h2>
<?php endif; ?>
</div>
<div class="body-text">
<?php print_r(get_sub_field('intro_text')); ?>
</div>
<?php
endwhile;
endif;
?>
Every time I insert functions to show the image, it gives a database error or simply doesn't show any image. The final work is supposed to look like the image down below. Mine shows just the title and body text all in a single line.
Have you tried using this bit of code directly from the documentation?
<?php $image = get_sub_field('cta_image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
On my login mysql table, i have an account type column. If the user has a Manager account type, i want to show a management menu item and if not hide it.
This is pretty simple but its not working:
In my header, i have the following:
<script>
var logged_in_account_type = "<?php echo $_SESSION['account_type'] ; ?>";
if(logged_in_account_type === "Manager") {
document.getElementById('management_menu').style.display = 'block';
} else {
document.getElementById('management_menu').style.display = 'none';
}
</script>
I tried without the echo has well.
<div id="management_menu" style="display:none">
<li>
<i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span>
</li>
</div>
<div class="text-bg"><span class="text-slim">Welcome,</span> <span class="text-semibold"><?php echo $_SESSION['account_type'] ?></span></div>
Have you tried using php if while rendering your menu? Something like this:
<?php if($_SESSION['account_type'] == 'Manager'): ?>
<div id="management_menu">
<ul>
<li>
Dashboard
</li>
<li>
Users
</li>
</ul>
</div>
<?php endif; ?>
Where is your javascript code in the document? If your javascript code is on the top of the document, it possibly shows or hides the <div> element properly, but, because the <div> element is at the bottom of the document, it is hidden because its "style" says so.
The solution is to move the javascript code below the <div> element, this will solve the "execution order" problem you have. Example :
<div id="management_menu" style="display:none">
<li>
<i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span>
</li>
</div>
<?php
session_start();
$_SESSION['account_type'] = "Manager";
?>
<script>
var logged_in_account_type = "<?php echo $_SESSION['account_type'] ; ?>";
if(logged_in_account_type === "Manager") {
document.getElementById('management_menu').style.display = 'block';
} else {
document.getElementById('management_menu').style.display = 'none';
}
</script>
I am displaying anchor tag in php loop. Now I am trying to get text of these anchor tags which is coming from PHP loop in Jquery but I am getting the wrong Result. Check the Screen Shots Below...
Anchor Tags
Wrong Result That I am getting
Now when I click on any link Like Baby Food Or Baby Furniture Or any other link then I am getting the text of all Anchor Tags instead of specific anchor tag which is clicked. For Example when I click on Baby Food then I want Just Baby Food to be displayed not all Anchor Tag Text. Please Help me. Below is my code
PHP
<h4>Related Category</h4>
<?php foreach($grouped_with_count as $relatedCat) { ?>
<b> <?php echo $relatedCat['industry']; ?> </b>
<li> <?php echo $relatedCat['product_type']; ?> (<?php echo $relatedCat['count'];?>) </li>
<br />
<?php } ?>
Jquery
function RelatedCatLink(){
var href = $('.GetHref').text();
console.log(href);
//alert($('.GetHref').attr('href'));
}
Please help me out. Thanks in advance..
Problem in your code
You are using class for selection. There will be multiple <a> with the same class.
Solution
Pass the element along with your function call
HTML
<?php echo $relatedCat['product_type']; ?> (<?php echo $relatedCat['count'];?>) </li>
JS
function RelatedCatLink(elem){
var href = $(elem).text();
}
Working Demo
function RelatedCatLink(elem){
var href = $(elem).text();
alert(href);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
//PHP CODE
<h4>Related Category</h4>
<?php foreach($grouped_with_count as $relatedCat) { ?>
<b> <?php echo $relatedCat['industry']; ?> </b>
<li> <?php echo $relatedCat['product_type']; ?> (<?php echo $relatedCat['count'];?>) </li>
<br />
<?php } ?>
//JQUERY CODE
function RelatedCatLink(id){
var href = $('#GetHref-'+id).text();
console.log(href);
}
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'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)