I'm using http://wicky.nillia.ms/enquire.js for hiding the flexslider on mobiles however the destroy method doesn't seem to work while I resize my browser.
/* hide/show slideshow based on viewport size*/
enquire.register("screen and (min-width: 48em)", {
deferSetup : true,
setup : function() {
/*home test slideshow slideshow*/
$(window).load(function() {
jQuery('#home-slider').flexslider({
slideshow: false,
directionNav: true,
controlNav: false,
animation: "fade",
useCSS: true,
});
});
},
match : function() {
/* add slider specific class */
jQuery("#home-slider").addClass("flexslider");
jQuery("#home-slider ul.slides-init").addClass("slides");
},
unmatch : function() {
/* hide slider specific class */
jQuery("#home-slider").removeClass("flexslider");
jQuery("#home-slider ul.slides-init").removeClass("slides");
},
destroy : function() {
jQuery("#home-slider").flexslider('destroy');
}
});
Adding/removing classes in match/unmatch functions work ok.
Any insights?
Related
I have a vue component that implements vue-chartjs's HorizontalBar component that I render as a cell in a bootstrap-vue table. My desire is to have the chart maintain a fixed height but scale horizontally as the window grows/shrinks.
The chart plays nicely enough when the page is first loaded but grows uncontrollably on re-size to cover other elements on the page.
How do I make them properly responsive without them going where they shouldn't? I'd also like to make sure they actually take up the extent of the table cell they're in, rather than weirdly stopping a few pixels short.
Here's my relevant component code:
<script>
import { HorizontalBar } from "vue-chartjs";
import Constants from "../../services/Constants";
export default {
name: "ResponseGraph",
extends: HorizontalBar,
props: { /* some props */ },
data: () => ({
chartData: {},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{ stacked: true, display: false }],
yAxes: [{ stacked: true, display: false }]
},
legend: {
display: false
},
tooltips: {
enabled: false
}
}
}),
mounted() {
this.chartData = {
datasets: [
// some data
]
};
this.renderChart(this.chartData, this.options);
}
};
</script>
And how I'm using it inside of my table code:
<template v-slot:cell(graph)="data">
<response-graph
:correct="data.item.correct"
:incorrect="data.item.incorrect"
:omitted="data.item.omitted"
:height="20"
/>
</template>
I am using wix/react-native-navigation I am having white flickering screen while using setRoot or push methods in navigation.
I tried setting waitForRender: true , but it docent help .
snippet I tried dosen't work.
animations: {
setRoot: {
waitForRender: true
}
}
I had similar problem on RNN 7.7.0, what helped me is setting the default options
Navigation.setDefaultOptions({
animations: {
push: {
waitForRender: true,
},
pop: {
waitForRender: true,
},
setStackRoot: {
waitForRender: true,
},
showModal: {
waitForRender: true,
},
dismissModal: {
waitForRender: true,
},
},
})
I genere a donut chart using chartjs and clivuejs.
My problem is depending on the chart the external label can be truncate or not.
Using "inspect" chrome mode I tried to amend the width/height of the canvas and of different parent div without.
//../src/DoughnutChart.js
import {
Doughnut,mixins
} from 'vue-chartjs'
export default {
extends: Doughnut,
mixins: [mixins.reactiveProp],
props: ['chartData'],
data() {
return {
options: {
tooltips: {
enabled: true
},
pieceLabel: {
render: 'label',
arc: true,
fontColor: '#000',
position: 'inside'
},
responsive: true,
legend: {
display: false,
position: 'top',
},
scaleLabel : {
display: true
},
maintainAspectRatio: false
}
}
},
mounted() {
this.renderChart(this.chartdata, this.options)
}
}
As you can see on attached file, external labels are not visible at all or truncate.
EDIT:
Using padding advise provided by Daniel (thanks Daniel)I have now the following. Event if the chart is very small I still have the issue. Is there any way to force the label to have a smarter position based on parent canvas ?
I am trying to zoom on a Panel with HTML inside of it.
Ext.define('Sencha.view.Detail_content', {
extend: 'Ext.Panel',
xtype: 'detailcontenttpl',
config: {
layout: { type: "fit" },
scrollable: true,
styleHtmlContent: true,
id: 'detail_content_wrap',
tpl : [
"<p class='detail_contentDate'>{date}</p>",
"<div class='messageWrap'>{message}</div>"
],
listeners: {
pinchstart: {
element: 'innerElement',
fn: function(e, t) {
this.startScale = e.scale;
}
},
pinch: {
element: 'innerElement',
fn: function(e, t) {
e.preventDefault();
this.scale = e.scale * this.startScale;
var p = t.parentNode;
Ext.fly(p).setStyle('-webkit-transform', 'scale('+this.scale+')');
}
}
}
}
});
It kind of works, but doesn't work as intended. It breaks the scroller, and it doesn't work all the time.
I am thinking Ext.fly(p).setStyle('-webkit-transform', 'scale('+this.scale+')'); should be set on something else, but I have tried every parent element, still failed.
I understand there are some examples available, but most of them deal with images, not Panel with HTML.
What am I doing wrong?
I am trying to use an ActionSheet to present the user several options to continue. I want to add a simple text box in the middle of the screen to describe the problem to the user.
Is there a simple/standard way to put such a prompt in Sencha-Touch?
You'll need to do something like this on your overlay ...
if (!this.popup) {
this.popup = new Ext.Panel({
hideOnMaskTap: false,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false,
width: 300,
height: 200,
styleHtmlContent: true,
scroll: 'vertical',
html: '<p>msg here</p>'
});
}
this.popup.show('pop');
The key here being hideOnMaskTap: false, this will prevent the overlay from disappearing when you click in it's masked area.
You can then display your action sheet but you must remember to hide the overlay in the handler(s) for your action sheet buttons since it will no longer go away when you tap in the masked area.
if (!this.actions) {
this.actions = new Ext.ActionSheet({
items: [{
text: 'decline',
ui: 'decline',
handler: function() {
this.doWhateverYouNeedToDo();
this.actions.hide();
this.popup.hide();
}
}, {
text: 'save',
handler: function() {
this.doWhateverYouNeedToDo();
this.actions.hide();
this.popup.hide();
}
}, {
text: 'cancel',
scope: this,
handler: function() {
this.doWhateverYouNeedToDo();
this.actions.hide();
this.popup.hide();
}
}]
});
}
this.actions.show();
note the hiding of the overlay in the sheet handlers.. (i don't do it above but you'll more than likely want to destroy the overlay and the action sheet after they are hidden as well just to keep things tidey)
You can use an Overlay popup to display a message after the ActionSheet renders.