I'm having an issue with Slick Slider in the admin preview with ACF 6 using the new block.json way to set up blocks.
I followed an ACF tutorial by Elliot here: https://www.advancedcustomfields.com/blog/building-a-custom-slider-block-in-30-minutes-with-acf/
In ACF v5 using the old method to add blocks this worked fine, but after updating to ACF 6 and using block.json the block crashes and says 'This block has encountered an error and cannot be previewed.' if I try to edit it. If I inspect and look in the console console I get this:
react-dom.min.js?ver=17.0.1:9 TypeError: Cannot read properties of null (reading 'add')
at e.initADA (slick.min.js?ver=6.1.1:1:19335)
at e.init (slick.min.js?ver=6.1.1:1:19101)
at new <anonymous> (slick.min.js?ver=6.1.1:1:2832)
at i.fn.slick (slick.min.js?ver=6.1.1:1:42781)
at initializeBlock (home-slider.js?ver=6.1.1:19:39)
at o (acf.min.js?ver=6.0.5:1:1417)
at Object.doAction (acf.min.js?ver=6.0.5:1:587)
at n.doAction (acf.min.js?ver=6.0.5:1:18745)
at G.renderBlockPreviewEvent (acf-pro-blocks.min.js?ver=6.0.5:1:31066)
at G.componentDidAppend (acf-pro-blocks.min.js?ver=6.0.5:1:30504)
I'm using very similar code to the example in the tutorial to inisialise the slider, and it worked fine before I updated from ACF 5 to 6. The code looks like this:
(function($){
var initializeBlock = function( $block ) {
// $block.find('img').doSomething();
$block.find('.home_banner_content').slick({
fade: true,
infinite: true,
dots: false,
prevArrow: $('.nav_prev'),
nextArrow: $('.nav_next'),
autoplay: true,
autoplaySpeed: 8000,
speed: 1500,
pauseOnHover: false,
pauseOnFocus: false,
});
}
// Initialize each block on page load (front end).
$(document).ready(function(){
$('.home_slider_block').each(function(){
initializeBlock( $(this) );
});
});
// Initialize dynamic block preview (editor).
if( window.acf ) {
window.acf.addAction( 'render_block_preview/type=home-slider-block', initializeBlock );
}
})(jQuery);
Related
I have a lottie animation that I have integrated it in my code. I want to show a specific frame on initial load and when the user hover it the animation should start from the beginning and completes it.
This is what I want to show in first load -
And this is the complete animation -
This is my code
let iconMenu = document.querySelector('.bodymovinanim1');
let animationMenu = bodymovin.loadAnimation({
container: iconMenu,
renderer: 'svg',
loop: false,
autoplay: false,
path: "https://assets2.lottiefiles.com/packages/lf20_txJcSM.json",
});
animationMenu.addEventListener('DOMReady',function(){
animationMenu.playSegments([1,200],true);
});
iconMenu.addEventListener('mouseover', (e) => {
animationMenu.play();
});
This is my fiddle
Can anyone please help me?
It looks like you're using an outdated version of Lottie in this fiddle. Once that's updated you probably want to pass through the initialSgments option instead of using playSegments. In this case you can remove your DOMReady code block entirely and it works as expected. The one issue with your animation is the circle by itself doesn't actually exist. There's a tiny dot of green on the only half frame where that circle is completed before the rest starts animating. 51.5 is the closest from you can get, here's a fiddle showing it
let iconMenu = document.querySelector('.bodymovinanim1');
let animationMenu = bodymovin.loadAnimation({
container: iconMenu,
renderer: 'svg',
loop: false,
autoplay: false,
path: "https://assets2.lottiefiles.com/packages/lf20_txJcSM.json",
initialSegment: [51.5, 200],
});
iconMenu.addEventListener('mouseover', (e) => {
animationMenu.play();
});
I have a page with few owl carousels. I would like to be able to set some parameters for these owl carousels in HTML code (using a class or data attribute).
Assuming I have two data attributes defined in my HTML, I have created following jQuery code:
$(".owl-carousel").each(function( index ) {
var items_no = $(this).data('slides');
var autoplay = $(this).data('autoplay');
$(".owl-carousel").owlCarousel({
items : items_no,
autoplay: autoplay
});
});
And as you may expect it is not working. The parameters from first owl carousel are applied to all carousels. I have no idea how to make it work. Below is a fiddle with my attempt.
http://jsfiddle.net/t2gj8eg2/4/
I would be very grateful for anyone that is able to fix it for me. Thanks in advance
Should be:
$(".owl-carousel").each(function (index) {
var items_no = $(this).data('slides');
var autoplay = $(this).data('autoplay');
$(this).owlCarousel({ // use $(this)
items: items_no,
autoplay: autoplay
});
});
Here is an easier way to use data attributes with the Owl Carousel:
var oc = $('.owl-carousel');
var ocOptions = oc.data('carousel-options');
var defaults = {
loop: true,
nav: false,
autoplay: true,
}
oc.owlCarousel( $.extend( defaults, ocOptions) );
Your HTML would look like this:
<div class="owl-carousel" data-carousel-options='{"autoplay":"true","autoplayTimeout":"6000","items":"2"}'> ... </div>
In the example above, I've defined some default options in my defaults variable, and then I override them with the data attributes as well as added a few more.
This is possible by using jQuery.extend(). Documentation can be found here: https://api.jquery.com/jquery.extend/
The div is:
<div>
<canvas id="chart-area2" width="300" height="300"/>
</div>
how to refresh the above div every 10 seconds without reloading the page?
following is the javascript:
<script>
var pieData2 = [
{
value: <?= $pfstatetext;?>,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red :"
},
{
value: <?= $cpuusage; ?>,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
window.onload = function(){
var ctx2 = document.getElementById("chart-area2").getContext("2d");
var myPie2 = new Chart(ctx2).Pie(pieData2);
};
</script>
how can i use setInterval in the above code?.....................................................................................................
You may use that code
function refreshTheDiv(){
// Your drawing code here
window.setTimeout(refreshTheDiv,10000);
}
And replace the line // Your drawing code here with your code referencing the canvas element.
In your specific case :
(function(){
var myPie2;
window.onload = function(){
var ctx2 = document.getElementById("chart-area2").getContext("2d");
myPie2 = new Chart(ctx2).Pie(pieData2);
updateChart();
};
function updateChart()
{
$.getJson('/data.php',function(data){
// Do the update here (Seems dead : https://github.com/nnnick/Chart.js/issues/13 )
// You may deal with chartjs methods or recreate the chart:
myPie2 = new Chart(ctx2).Pie(data); // Quick and dirty solution
setTimeout(updateChart,10000);
});
}
})();
The data.php contains something like:
<?php
echo json_encode(
array(
array(
'value'=> $pfstatetext,
'color'=>"#F7464A",
'highlight'=> "#FF5A5E",
'label'=> "Red :"
),
array(
'value'=>$cpuusage,
'color'=> "#46BFBD",
'highlight'=> "#5AD3D1",
'label'=> "Green"
),
array(
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
)
//...
)
);
You must include JQuery : http://code.jquery.com/jquery-1.11.1.js
for my solution to work
ChartJS update data
If you want to update the canvas painting and you're not working with the server, use js setTimeout or setInterval (You can read about these functions here: http://www.w3schools.com/js/js_timing.asp). In the callback function that you pass to these functions you work with the canvas' context object and paint whatever you want.
If you want to update the content, like text and HTML, or if the painting is related to the server, I think you should use AJAX. AJAX enables communication after the page was loaded, so you don't have to load the whole page again. There are many tutorials for ajax, one of them is on W3schools. Also, if you work with AJAX, you should use the timing functions that I've mentioned before in order to refresh it every 10 seconds.
Another solution is to use Server-Sent Events. If you want to refresh the div in order to UPDATE the content (according to the DB, the server, etc.) so the content will be always updated, you can use this technique that follows about differences and updates, and loads them. You can read about it here : http://www.w3schools.com/html/html5_serversentevents.asp. I'm not sure if this technique is what you're looking for, it depends on what is your purpose of reloading the page, so I think the AJAX would be a great solution if the content is from the server, and the first solution is the only one which is correct if you don't work with the server.
write one function to fetch content inside div trough ajax, and write a jquery code to call the function in every 10 seconds.
For example:
function fetch_content(){
$.ajax({
url: "url for ajax page",
type: "POST",
success: function(data){
$('div').html();
}
});
}
and code to call this function every 10 seconds
setInterval(fetch_content,10000);
I was using kinetic-v4.0.0.js and my code run perfect. I now change to the new js since I cannot find the old one so as to download it, and I have many problems.
For example one of my problems is the applyfilter.
I have:
image.applyFilter({
filter: Kinetic.Filters.Grayscale,
callback: function() {
layer.draw();
}
});
and I get this:
Kinetic warning: Unable to apply filter. g is undefined
Does anyone know what would be the problem? Thanks in advance.
The syntax for applyFilter changed in KineticJS 4.1.0 (see the changelog)
Image.applyFilter() now takes in a required filter function, optional config object, and optional callback, rather than a config object that contained these three properties.
image.applyFilter(Kinetic.Filters.Grayscale, null, function() {
layer.draw();
});
You can also use the setFilter function:
image.setFilter(Kinetic.Filters.Grayscale);
layer.draw();
Or set the filter through the images filter property:
var image = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true,
filter: Kinetic.Filters.Grayscale,
filterRadius: 20
});
how can I display data point on bar in barchart?
I don't want to use datatip or tooltip which will highlight data points only when they are moused over.
I want to display the data point always on the bar.
is there any right way to get it?
thanks.
I want exactly like this
following is my code
<p:barChart id="barChartId" value="#{myBean.myModel}"
orientation="horizontal"
stacked="true" extender="ext" animate="true" shadow="false" />
<h:outputScript>
function ext() {
this.cfg.highlighter = {
useAxesFormatters: false,
tooltipAxes: 'x'
};
this.cfg.legend = {
show: true,
location: 'ne',
placement: 'outside'
};
this.cfg.seriesDefaults = {
pointLabels : { show: true },
};
}
</h:outputScript>
here, highlighter and legend are working fine but point labels are not displaying on bar
Not sure if it will work...
Use the extender of the <p:barChart , like this:
<p:barChart value="#{myBean.myModel}" widgetVar="myBarChart" extender="my_ext"/>
<script type="text/javascript">
function my_ext() {
this.cfg.seriesDefaults = {
renderer:$.jqplot.BarRenderer,
pointLabels: {show: true}
};
this.cfg.stackSeries: true;
}
</script>
or this
<script type="text/javascript">
function my_ext() {
this.cfg.seriesDefaults = {
pointLabels: {show: true}
};
this.cfg.stackSeries: true;
}
</script>
Also take a look at the jqplot examples : Bar charts
Just in case someone doesn't crawl through the comments of the marked answer, as I didn't do in the first place.
The problem basically is not the configuration of the pointLabelselement, but rather that primefaces (as of 4.0) in its original state does not ship with the needed plugin of jqPlot included.
Therefore actually the solution is to make the needed plugin jqplot.pointLabels.min.js available. From a ticket in the bug tracker (http://code.google.com/p/primefaces/issues/detail?id=5378) I extracted, that primefaces uses jqPlot version 1.0.8.
download jqplot 1.0.8 from https://bitbucket.org/cleonello/jqplot/downloads/
add the plugin to your project (e.g. src/main/webapp/resources/jqplot-plugins)
add the plugin as script to your page (<h:outputScript library="jqplot-plugins" name="jqplot.pointLabels.min.js" />)