I am looking to create a progress bar in Liferay, hopefully inside the Dynamic List Display plugin but not necessarily. The data for the progress bar will be coming from the List though.
Any suggestions?
You can do it easily with AlloyUI in Liferay 6.2. You need a placeholder for the progressbar - something like this:
<div id="myProgressBar" style="width:100%;height:20px;"></div>
And then you can create it with javascript like this:
<aui:script use="aui-base,aui-progressbar">
var progressBar = new A.ProgressBar({
boundingBox: '#myProgressBar',
label: '<%=percentage%>%',
orientation: 'horizontal',
value: '<%=percentage%>',
}).render();
</aui:script>
You can read more about the progress bar config options here:
http://alloyui.com/api/classes/A.ProgressBar.html
And some samples here:
http://alloyui.com/versions/2.0.x/tutorials/progress-bar/
Related
How to hide Bootstrap 5 modal programmatically in React?
I have tried this:
const myModal = document.getElementById("dis-approve-modal");
myModal.hide();
but it says "hide is not a function".
i'm sure this not the right way to do it -via HTML element properties-
but if you want to do it this way try
myModal.hidden = true;
I want to figure out how to grab the title in a plugin in ChartJS I have the title in the configuration like so:
title: {
display: true,
fontSize: 10,
text: "This is my title",
padding: titlePadding,
}
I was just curious if I want to do some afterDraw work, how do I grab it and alter it? I want to do some manipulation later in the event sequence.
You can get the title text by calling chart.titleBlock.options.text, although even if you update it and call chart.update() it will render the updated title in the first draw tick but the other draw ticks it will use the normal defined title again, see fiddle: https://jsfiddle.net/Leelenaleee/kc8qua61/12/
You are better off using a scriptable option for the title as shown in de documentation sample of chart.js here: https://www.chartjs.org/docs/master/samples/line/stepped.html.
It takes a part of the config to show in the title as a dynamic part and internally chart.js handles it, you can also use external variables here.
I need a help. I followed this tutorial https://www.dyclassroom.com/chartjs/chartjs-how-to-draw-line-graph-using-data-from-mysql-table-and-php.
I managed to start chartjs-plugin-zoom.
Now i want to add button "Reset zoom"
I fallowed this tutorial:
Add zoom event handler to charts for chartjs with chartjs-plugin-zoom
But when i add right after $.ajax({}); in app.js
$('#reset_zoom').click(function() {
mycanvas.resetZoom();
})
and press the button error is displayed:
app.js:131 Uncaught TypeError: mycanvas.resetZoom is not a function
at HTMLButtonElement.<anonymous> (app.js:131)
at HTMLButtonElement.dispatch (datatables.min.js:15)
at HTMLButtonElement.r.handle (datatables.min.js:15)
Can you give me an advice?
Kind of surprised this hasn't been answered yet. I remember running into this myself a while back. You are doing the same thing I was doing..
Effectively what you're doing is trying to run the .resetZoom() function on an HTML canvas element. You need to do this on the chart object, not the canvas element.
YouTube video walking you through it: https://www.youtube.com/watch?v=tWlENvyr9cY
Working CodePen: https://codepen.io/vpolston/pen/MWGVmrX
A couple examples of what not to do..
document.getElementById('myChart').resetZoom() // vanilla JavaScript
or even
$("#myChart").resetZoom() // jQuery
What you actually need to do is tack the .resetZoom() onto the Chart object from when you instantiated the chart. So in your code here:
const myChart = new Chart('myChart', {}
Whatever you set the variable to when you created the chart is what needs to have the .resetZoom(). So this would work:
myChart.resetZoom();
Now to make that a clickable button we can create a function. That function accepts whatever the chart Object was named.
JS
resetZoomBtn = (chart) => {
chart.resetZoom()
};
and then in our HTML we call that function and pass whatever you called the chart when you instantiated it as the parameter.
<div class="chart-container">
<canvas id="myChart"></canvas>
<button onclick="resetZoomBtn(myChart)">reset zoom</button>
</div>
Hopefully that helps anyone who views this question since it comes up at the top of the search results on Google. I know chances of it being marked 'answer' four years later are slim.
Thanks,
VP
I don't know much about HTML or imacros.
I'm trying to make an imacros script that takes a screenshot of an image on the page, but the website has a navigation bar which when imacros takes the screenshot covers half of the image.
How can I create an imacros script to remove this navigation bar from my screen?
In inspect elements, I can get rid of it by removing:
So how can I remove this in imacros please?
Thank you
Use Javascript for this.
To remove element by ID use this code.
var id = window.document.getElementById("page-container");
id.parentNode.removeChild(id);
Instead of "page-container" put your ID you want to remove
To remove elements by class
Use this:
var collection = window.content.document.getElementsByClassName("Class-name");
Array.prototype.forEach.call(collection, function(node) {
node.parentNode.removeChild(node);
});
It's possible with imacros and url goto as iim script. Or you can use pure javascript as js file in your imacros.
Example with url goto and class name:
URL GOTO=javascript:var<SP>delclass=window.content.document.getElementsByClassName("class<SP>name");Array.prototype.forEach.call(delclass,function(node){node.parentNode.removeChild(node)});
I have a list component which is filled out using a data store(data loaded from server as json). A part of data from data store is displayed as list items, and i need some kind of a "+" button to the left of it to expand a list item(and "-" to collapse) to reveal(/hide) the remaining info. I could simply put some javascript to itemTpl tag but i've no idea how to make smooth transitions this way. Maybe am missing some standard settings for a list component, but i can't find any info. Any help appreciated.
There is no standard settings to do this functionality. But this is possible to achieve. You can have your item template as something like this:
itemTpl: '<div class="plus"></div><div class="title">{title}</div><div class="hidden">{mydetails}</div>'
Initially, the details is hidden. You need to handle the animation when your taps the list item. So, in your event you will have to do:
itemtap: function(view,index,htmlElement,e,opts) {
// change the div plus to minu..
// Get hold of the div with details class and animate
var el = htmlElement.select('div[class=hidden]');
el.toggleCls('hidden'); //remove the hidden class if available..
el.show(true); // show with animation
}
The object is obtained from select() method is Ext.dom.CompositeElementLite .. Refer this class for more methods. You can call the Ext.Anim from this object as well..
To animate you can use the Ext.Anim class. Once you have the html element of you 'details' div, you can:
Ext.Anim.run(detailsDiv,'slide',{
out:false,
from: 'hiddenCSS',
to: 'visibleCSS'
});
Refer to Anim class for more setting that might be needed to have your desired effect. Also note that you will have to track the previously clicked (expanded) list items.