I'm using the Advanced Custom Fields plugin in Wordpress to output an image with a link (also using to add embed code for a custom video player) into posts on an archive page. The output code for the custom field is placed in a div which is hidden and then loads up in fancybox when the .watchsession link is clicked. The problem is, the ACF content doesn't load in the fancybox when called. If I place the code outside of the hidden div it shows. Not sure where I've gone wrong. Code below!
Cheers,
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a id="fancybox-button" href="#fancybox-content" class="watchsession" title="<?php the_title(); ?>">Watch</a>
<div style="display: none;">
<div id="fancybox-content" style="width:600px; height:400px;overflow: hidden;">
<img src="<?php the_field('upload_screenshot'); ?>"/>
</div>
</div>
</article>
<script type="text/javascript">
( function($) {
$(document).ready(function() {
$("#fancybox-button").fancybox({
helpers : {
title : {
type: 'inside',
position : 'top'
}
},
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
});
});
} ) ( jQuery );
</script>
Figured it out, needed to give a unique ID to each post, so changed the href of the opening link to the post id and div id in the fancybox and that fixed it!
Cheers
Related
I have this:
<div class="sub-slider" style="display: none;">
<section class="subscriptions_slider container-fluid">
<?php echo do_shortcode("[subscriptions_slider]"); ?>
</section>
</div>
And using Jquery like this:
$('.change-sub').on('click', function() {
$('.sub-slider').toggle();
});
If I load the page now and click on change-sub button. The content that is toggle is squished. But if I load the page without style="display: none;" then it shows normally. Why is this?
This is because display: none property will remove the element from the DOM,
If you dont want the element to get removed from DOM rather use VISIBILITY:HIDDEN, It will reserve the space for the container.
Something like below.
<div class="sub-slider" style="visibility: hidden;">
<section class="subscriptions_slider container-fluid">
<?php echo do_shortcode("[subscriptions_slider]"); ?>
</section>
</div>
and
$('.change-sub').on('click', function() {
var visibilityProp = $('.sub-slider').attr('visibility');
if(visibilityProp == 'hidden')
{
$('.sub-slider').attr('visibility','visible')
}
else
{
$('.sub-slider').attr('visibility','hidden');
}
});
please mark it as answer if it is as per your need.
For some reason, I can't get the scroll bar to appear when initializing via javascript, but I can by initializing via html.
The scroll bar is meant to appear inside of #popup-scroll, which has php content. This is all inside of a gallery, with the popup acting as the lightbox for each item in the loop.
<?php
$the_query = new WP_Query(array(
'post_type' => 'post')); while ( $the_query->have_posts() ) : $the_query->the_post();?>
<?php
echo'<figure><a class="popup-with-zoom-anim" href="#'.$post->post_name.'">'.the_post_thumbnail().'<div class="title"><h2>'.$post->post_title.'</h2></div></a></figure>';
echo'<div id="'.$post->post_name.'" class="zoom-anim-dialog mfp-hide">
<div id="popup-scroll">'.$content.'</div></div>'; ?>
<?php endwhile; wp_reset_postdata(); ?>
Initializing by javascript (does not work):
<script>
(function($){
$(window).on("load",function(){
$("#popup-scroll").mCustomScrollbar({scrollInertia: 0});
});
})(jQuery);
</script>
Initializing by HTML (works):
<div id="popup-scroll" class="mCustomScrollbar" data-mcs-theme="dark">
<!-- the content -->
</div>
The goal is to disable the scroll animation scrollInertia: 0, which can only be done through the javascript initialization.
The developer site, for reference
Ok, because the scroll bar is in a div that only appears once the lightbox / modal window is opened, I had to add the following to my script:
live: true
So, in complete, the javascript function is this:
<script>
(function($){
$(window).on("load",function(){
$("#popup-scroll").mCustomScrollbar({
scrollInertia: 0,
live: true
});
});
})(jQuery);
</script>
It works now.
I have a web page in PHP that shows blog posts/ articles that were posted from 2015-2008. basically at the top of the page I have buttons that have the year on it, and below all the blog posts and articles correlatin to the years. I want to have a feature so that if the user clicks 2013, all other posts with years not matching 2013 will dissapear and the correct year posts/articles will move up to the top of the page, so the user doesn't have to scroll.
Here is my code, the content is loaded through a controller so the page is basically created by grabbing data from an array.
<div class="calendar-key">
<div class="cd-timeline2-img cd-2015" id="btn" >'15</div>
<div class="cd-timeline2-img cd-2014" >'14</div>
<div class="cd-timeline2-img cd-2013" >'13</div>
<div class="cd-timeline2-img cd-2012">'12</div>
<div class="cd-timeline2-img cd-2011" >'11</div>
<div class="cd-timeline2-img cd-2010" >'10</div>
<div class="cd-timeline2-img cd-2009" >'09</div>
<div class="cd-timeline2-img cd-2008" >'08</div>
<div class="cd-timeline2-img cd-2007" >'07</div>
<?php foreach ($article as $slug => $article): ?>
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-<?php echo $article['year'] ?>">
<span class="timelinedate"><?php echo $article['month'] ?><?php echo $article['day'] ?></span>
</div>
<div class="cd-timeline-content">
<a href="<?php echo $article['link'] ?>">
<h3 class="press_title" id="<?php echo $article['year'] ?>-<?php echo $article['first'] ?>"><?php echo $article['title'] ?></h3>
<img src="<?php echo $article['image'] ?>" width="100%" height="auto" />
</a>
<p><?php echo $article['description'] ?> </p>
<div class="social-share-buttons article-share-buttons pull-left">
<a class='social-email' href='<?php echo SocialShareLink::email("", "Check out this article, ".$article['title']." \n\n" .$article['link']); ?>'</a>
<a class='social-facebook' href='<?php echo SocialShareLink::facebook($article['link']); ?>' target='_blank'></a>
<a class='social-twitter' href='<?php echo SocialShareLink::twitter("", $article['link']); ?>' target='_blank'></a>
<a class='social-google' href='<?php echo SocialShareLink::googleplus($article['link']); ?>' target='_blank'></a>
</div>
Read more
</div>
</div>
<?php endforeach; ?>
the for each basically takes an array I have in a config file with data, and populates the articles on the page for however many there are in the array.
'articles' => [
'article#1 example' => [
'description' => "exampletextblablabla",
'title' => 'article title',
'link' => '//www.google.com',
'year' => '2015',
'month' => 'Jul ',
'day' => '25',
'first' => '1', //first article of that year
'image' => '../../images/example.jpg'
],
//more articles in this format
and then my failed attempt at js
<script type="javascript">
$('.cd-timeline2-img a').on('click',function(){
var eq = $(this).index();
$('cd-timeline-img cd-<?php echo $article['year'] ?>').removeClass('show');
$('cd-timeline-img cd-<?php echo $article['year'] ?>').eq(eq).addClass('show');
});
</script>
I am not very good at javascript, so I tried something like this but nothing works. I feel like this is an easy little script to right, any help would be great! thanks.
Woohoo! Finally, I got it working and 100% where I want it. So I used your code and threw it into a Fiddle: https://jsfiddle.net/rockmandew/4Lyofmkh/44/
You will see that I went with my approach - by default, the articles are display none and have a class of 'show' on them to begin with - you will also notice I changed where you had your 'cd-(year)' - I did this because you needed to identify the entire article container since that is what you would be hiding/showing.
I also added a 'Show All' button, so the user can view all if desired.
So like I said I changed your HTML markup right here:
<div class="cd-timeline-block cd-2015 show">
<!-- Article Year in Div Class below -->
<div class="cd-timeline-img">
It was "cd-timeline-img cd-2015" previously. That is the only change you need to make to your markup, besides adding the "show all" button (if you want it):
<div class="show-all">Show All</div>
Furthermore, I applied the display:none css property to the ".cd-timeline-block"
.cd-timeline-block {
margin-top:35px;
display:none;
}
Which is why we initialize the page with the "show" class on there:
<div class="cd-timeline-block cd-2015 show">
Which has the following styles:
.show {
display:block;
}
Finally, we get to the meat of it all, the jQuery. I will post the working code that I used and then explain it. The following code is to toggle articles based on the year clicked:
$('.calendar-key a').each(function() {
$(this).on('click', function() {
var x = 'cd-' + $(this).attr('rel');
$('.cd-timeline-block').each(function() {
if($(this).hasClass(x)) {
$('.cd-timeline-block').not(this).each(function() {
if($(this).hasClass('show')) {
$(this).toggleClass('show');
}
});
$(this).each(function() {
if(!$(this).hasClass('show')) {
$(this).toggleClass('show');
}
});
}
});
})
});
As you will see, when a ".calendar-key" link is clicked, the clicked link will produce a variable based on the links "rel" - the variable adds the "cd-" prefix onto the "rel" value. Then for each ".cd-timeline-block" if it has the class that was created from clicking (the variable just discussed), it will cycle through all of the ".cd-timeline-block" elements that isn't "this" (meaning all elements that don't match the selected year.) - for all of those elements, if it has the "show" class, it will be toggled. Then the last part, it takes the "this" and cycles through each of them, if it doesn't have the class "show", then it toggles the class "show", thus displaying the desired elements.
Finally, the show all button is controlled with the following function:
$('.show-all a').on('click', function() {
$('.cd-timeline-block').each(function() {
if(!$(this).hasClass('show')) {
$(this).toggleClass('show');
}
});
});
Its a fairly simple function. When the ".show-all" link is clicked, it cycles through all of the ".cd-timeline-block" elements, again, if they don't have the "show" class, the function will toggle the "show" class.
I know that was a lot but hopefully it all made sense. Again, here is the associated Fiddle I made to help you.
https://jsfiddle.net/rockmandew/4Lyofmkh/44/
Let me know if you need any further help.
Latest Update:
https://jsfiddle.net/rockmandew/4Lyofmkh/46/
Fiddle now contains new mark-up for easiest solution to updated issue marked in comments below.
It finally dawned on me that I was filtering your list of years not your posts. For future reference post a snippet of actual code, now bits with php all over them. Now the script looks for the rel attribute in your year list for the year, matches that year to the class "cd-year" in each post and filters as necessary. I stripped out all of the superfluous parts of the post like the social links as they're not needed for this exercise.
http://jsfiddle.net/1dyocexe/2/
//this is where you'd have your <?php echo $article['year'] ?> set the current year
var year = 2014;
getPosts(year);
function getPosts(year) {
$(".cd-timeline-block").find("div").each(function (i) {
var elm = $(this);
var cdYear = "cd-" + year;
var use = elm.hasClass(cdYear);
if (use === true) {
elm.show();
} else {
elm.hide();
}
});
}
$(".calendar-key div a").on("click", function () {
var year = $(this).attr("rel");
getPosts(year);
});
How do I get the <div> not to show at all when the page loads? The div is set to hidden in JS and the <div> hides but its after the <div> has already shown on the page for a brief second.
I am using this popup in my website.
http://mootools.net/forge/p/popupwindow
Here is my code :-
<script type="text/javascript">
App = {};
window.addEvent('domready', function() {
App.popUp1 = new PopUpWindow('', { contentDiv: 'trailerquestion', width: 559 });
App.popUp2 = new PopUpWindow('', { contentDiv: 'popup-redflag', width: 559 });
});
</script>
<?php
function JSLink($text, $onclick) {
return "$text";
}
$asklink=JSLink('<div class="buttonNew greenB bigrounded trailer-button-question"><span>Ask me a question</span></div>', 'App.popUp1.open(); App.popUp1.positionTo(this, 1180, 100);');
?>
<?php
echo $asklink;
?>
<div id="trailerquestion">
<?php
$this->load->view('popup/popupaskmequestion',$results);
?>
</div>
Set the div's display to none with CSS, not Javascript. Then change the display property with Javascript when you want it to be shown.
If you want the div to just be hidden but take up the space it requires, use -
<div id="trailerquestion" style="visibility:hidden">
If you want the div to not take up any space at all and be hidden, use -
<div id="trailerquestion" style="display:none">
Set the element to be hidden with css e.g <div id="trailerquestion" style="display:none">
You might need to set it to display again when you show the dialog if your dialog library doesn't do that for you.
Hello i want to know how can i modify my following js function to hide the content of one div and shows the content of the following div in the opened popup of fancybox the following div to show
<LI><A class="demo" id="example4" href="#demoView">Demo</A></LI> //linkfunctionality i want to show
<a id="various2" href="#divVideo" class="fl ml20"><img src="images/sites/img2.png" alt="" class="fl mr10" /></a> //Link functionality i want to hidde
<div style="display:none;">
<div id="demoView">
<div class="fl w900 pa20 bg2 tac">
<h3 class="ff2 fwb fs30 mb10 cf3">Please contact us for a quick demo.</h3>
<h4 class="ff2 fwb fs26 mb40 cf3">Email: <span class="cf2 pr25"><a style="text-decoration:none; color:#2a98e2;" href="mailto:info#caremerge.com">info#caremerge.com</a></span> Call: <span class="cf2">(888) 996 6993</span></h4>
<img src="images/sites/demo1.png" alt="" class="dpib mb20"/>
</div>
</div>
</div>
The function below is successfully hiding the video but its not displaying the div mentioned above in it...
function onPause() {
froogaloop.addEvent('pause', function(data) {
//$('a[href="#various2"]').fadeOut();
$('#divVideo').fadeOut(500);
// $('#various2').fadeOut(500);
//$(' #demoView').fadeIn(500);
$('#demoView').fadeIn();
alert('ST-UCK');
});
}
Some part of FANCY BOX JQUERY OF MY CODE
jQuery(document).ready(function() {
$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});
$("#various2").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none',
'onClosed' : function() {
document.getElementById('iframe-video');
},
'onStart' : function() {
//alert("hi");
//$('#banner-rotator').royalSlider({slideshowEnabled:false,slideshowDelay:20000 });
}
});
When you open inline content in fancybox (either #demoView or #divVideo as in your example) the content is literally moved from its place in the html flow into the fancybox and a temporary div is left instead.
So when you opened #divVideo in fancybox, only that content is actually inside fancybox so this is why you can fade it out. You cannot fade #demoView in because it doesn't exist inside fancybox.
Maybe you just need to trigger the second fancybox inside your (pause) event callback like
function onPause() {
froogaloop.addEvent('pause', function(data) {
$('#example4').trigger("click"); //linkfunctionality you want to show
});
}
... that will bring the second content (#demoView) inside fancybox and the current (#divVideo) will just fade out.
Is it now because the enclosing div for demoView is hidden? So something like...
$("#demoview").parent().css({'display','inherit'});
May work?
Why is the parent even there? Perhaps you should do away with it and put the style attribute on your demoView div.