Is anyone even use PhotoSwipe before ?
https://github.com/dimsemenov/PhotoSwipe
I stuck at image left and right (back and next)
like this image.
I don't want the other icon. I want to know how to fix this.
I already try to disable image inside css but it's still not work
Please help.
You can use the following options available to show/hide photoswipe buttons/elements.
for more info read docs here
var options = {
history: false,
focus: false,
closeEl: true,
captionEl: true,
fullscreenEl: true,
zoomEl: true,
shareEl: true,
counterEl: true,
arrowEl: true,
preloaderEl: true
};
Related
I use vega-react and I would like to know the easiest way not to display the "Actions" button on the chart.
if I declare all actions to be false it will not display any actions but the button will still be present.
<Vega spec={spec as VisualizationSpec} data={barData} actions={{
export: false,
source: false,
compiled: false,
editor: false,
}} />
As mentioned in the vega-embed documentation, the actions setting can either be an object or a Boolean, and relevant to your question:
If the value is true, all action links will be shown and none if the value is false
So I believe what you want is actions=false
Yes, set actions: false, however what I didnt realise is that this has to be in the third parameter of the vegaEmbed function
vegaEmbed(
'#vegaChart_traders',
yourVlSpec,
{renderer: "svg", actions: false}
);
rather than in the yourVlSpec object
hope that helps someone :)
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();
});
How to display the time label of the timelineDay view of the fullcalendar at the bottom ?
as you can see in this image below. the time is on top of the grid. I want it to be at the bottom of the grid. How do we do that? there's no article about it in the official documentation.
below is my code to display those things you see in the image above. I wonder what parameter or property do we need to add so that the time will appear at the bottom, not on top
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid','timeline'],
header: {
left: 'prev,next today',
center: 'title',
right: 'timeGridDay,timeGridWeek,dayGridMonth,listWeek'
},
defaultView: 'timelineDay',
allDaySlot: false,
slotLabelFormat: {
hour: 'numeric',
hour12: false,
minute: '2-digit',
omitZeroMinute: true,
meridiem: 'false'
},
showNonCurrentDates: true,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function(arg) {
// is the "remove after drop" checkbox checked?
if (document.getElementById('drop-remove').checked) {
// if so, remove the element from the "Draggable Events" list
arg.draggedEl.parentNode.removeChild(arg.draggedEl);
}
}
});
calendar.render();
Note: am referring to the "HOURS" displayed,not the control buttons on top
Try adding a footer section and move it there from your header section. The footer takes the same exact values as a header and will display at the bottom of the calendar. For more info you should check out https://fullcalendar.io/docs/toolbar
I would like to remove Facilities in the layerlist, but still have it show up in the map.
var manned_facilities_back = new MapImageLayer({
url: "http://dotdevgisiis02:6080/arcgis/rest/services/DOT_MAP_PORTAL/Facilities/MapServer",
sublayers: [
{
id: 1,
popupTemplate: templateFT,
},
{
id: 0,
popupTemplate: templateMF,
},
]
I've attempted to add
listmode: hide
or
display: none
under where i have url, but it didn't work. I figure this should be really simple.
Setting the property Layer.listMode to "hide" should work as expected. In your example, make sure you use the correct casing:
var layer = new MapImageLayer({
url: "http://dotdevgisiis02:6080/arcgis/rest/services/DOT_MAP_PORTAL/Facilities/MapServer",
listMode: "hide"
});
Here's a live demo hiding one of the layers from the loaded WebScene:
https://codepen.io/arnofiva/pen/eb198c9b4050b892759ef433e8664fac
In the code below, if I set the activeTab to 0, the contents of /viewer/welcome show up as expected. If I set activeTab to 1 (like below), the second tab is activated on load, but when I click on the first tab, the content never displays. I can see it loading the content for the tab BEFORE I click on the tab (if I set autoLoad: false, it doesn't load it at all), but even though it loaded, it doesn't display.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: true
},
layout: {
type: 'fit'
},
title: 'Welcome'
},
...
}
Why doesn't the content of the tab actually render when the tab is activated? Why does it work if that tab is the active tab on load, but not when it is activated otherwise?
If I make these changes, the text displays all the time as expected, but I get an extra page load from the spurious activate call.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: false
},
layout: {
type: 'fit'
},
title: 'Welcome',
listeners: {
activate: function(me, opts) {
me.getLoader().load();
}
}
},
...
}
I'm just not understanding why the tabs are not managing this content as part of being a tab.....
I think the problem here is what you have indicated - the tabs are not managing content. The reason why they are not managing it properly is the HTML content that gets returned from loader is just that - some HTML, it is not an ExtJS Component. It is arguable that ExtJS "should" manage content that it has loaded but the docs allude to the contrary: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-cfg-html It might be worth while filing a bug on this.
Also, I noticed you had a fit layout specified on the welcome panel. Since you have no other items contained in that panel, you probably don't need that setting - incidentally it may (or may not) improve how the loaded html fragment gets handled.
Good luck.
I found out that in ExtJS 5.1 using the reference name didn't work. Had to put in an itemId