I'm trying to create a slider that will update every time a slide is altered. I've got it set to observe, observeParents, and observeChildren, and it works the first time I show or hide slides, but it's only working once. Is there a good workaround for this?
Here's a link to the page with the slider on it. Click the color swatches to see what I'm talking about. Thanks in advance!
I figured out a workaround! I added a data-element called data-slides that updates on the container when you click to make the slideshow change, like so.
thumbnails.each(function() {
var wrapper = $(this);
container = $('.swiper-container');
color = colorLabel.val();
while (wrapper.parent().children().length === 1) {
wrapper = wrapper.parent();
}
if (jQuery(this).attr('alt') === optionValue) {
wrapper.fadeIn('500').show();
container.attr('data-slides', color);
} else {
wrapper.fadeOut('500').hide();
}
});
It triggers the observe function and allows it to update as necessary.
Related
The Problem
I just cannot figure out the view model in NativeScript
I am having a hard time understanding how view-models work in NativeScript. I understand the high level concept - that the MVVM pattern allows us to create observable objects - and our UI is updated when values change.
Here is a simple example:
main-page.js
var createViewModel = require("./main-view-model").createViewModel;
function onNavigatingTo(args) {
var page = args.object;
page.bindingContext = createViewModel();
}
exports.onNavigatingTo = onNavigatingTo;
main-view-model.js
var Observable = require("tns-core-modules/data/observable").Observable;
function getMessage(counter) {
if (counter <= 0) {
return "Hoorraaay! You unlocked the NativeScript clicker achievement!";
} else {
return counter + " taps left";
}
}
function createViewModel() {
var viewModel = new Observable();
viewModel.counter = 42;
viewModel.message = getMessage(viewModel.counter);
viewModel.onTap = function() {
this.counter--;
this.set("message", getMessage(this.counter));
}
return viewModel;
}
exports.createViewModel = createViewModel;
I understand , some what, what is happening. But not everything.
Questions I Have ...
How would you add a new function , for instance, an email validation function? Would it go into the View Model page, or just plain Javscript page?
Let's say I added a new textfield to the UI. I have a tap function. Where does my function go?
So in this case, everything related to the UI should go in the createViewModel function? Is that correct?
I have also seen in sample apps, where the developer doesn't use view models at all - it appears he just creates it as an observable object.
Thank you for looking. I know I am close to understanding, but that bindingContext and the viewmodel has me a bit confused. [ I have read everything in NS docs ]
John
The answer is either of it should work. You may put the validation or tap function in view model or in the code behind file, it's upto you to decide which works best for you.
If you put it in the view model, you will use event binding (tap="{{ functionName }}" Or if you put it in code behind file, you will just export the function name and simply refer the function name on XML (tap="functionName").
By giving this flexibility you are allowed to separate your code, keep the files light weighted.
i'm having some troubles solving this.
I need to keep navigator series always visible.
The problem is when i click in one legend item, the serie linked to this legend dissappears. Thats fine.
But the serie in the navigator dissappears to, and i don't want this.
I tried with the "adaptToUpdatedData" parameter, not working.
I tried handling the events in "legendItemClick" and hide show the series manually, but this hides the navigator series also.
Please help! I tried almost everything.
The only i managed to achieve it is keeping all the series with the parameter "showInNavigator" false, and then add the series in navigator.series.
But i think is not a good solution.
Thanks.
I add hide events to series with showInNavigator: true. These call a function which does:
var chart = this.$refs.highcharts.chart
for (var series of chart.navigator.series) {
series.setVisible(true, false)
}
chart.redraw()
You can use Highcharts removeEvent method to remove the connection when changing visibility between the chart series and the navigator series:
chart: {
events: {
load() {
this.series.forEach(function(s) {
if (!s.baseSeries) {
H.removeEvent(s, 'show');
H.removeEvent(s, 'hide');
}
});
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/69rwjsce/
API Reference: https://api.highcharts.com/class-reference/Highcharts#.removeEvent%3CT%3E
Basically this is used to creat a horizontal parallax effect. I use anchor links to move the page back and forth ebtween pages horizontally, which all works nicely.
Now i want to include the parallax background, which also works on the first try. below is my javascript:
<script>
$(document).ready(function () {
$("#nav a").bind("click", function (event) {
$("section").removeClass('current');
$("#nav a").removeClass('current');
event.preventDefault();
var target = $(this).attr("href");
$("#wrapper").stop().animate({
scrollLeft: $(target).position().left - $("#container").position().left,
scrollTop: $(target).position().top - $("#container").position().top,
},
1000);
var x = $("#wrapper").scrollLeft();
$("#parallax").animate({
'background-position-x': '+20%',
'background-position-y': '0%'
}, 1200);
$(target).addClass('current');
$(this).addClass('current');
});
});
</script>
what this colde does is add a class to my nav links and the section which is on screen, then animates to that section on screen, after which the parallax div should move too. This works on the first click to a new section, but after that it just stays.
I think the fault lies in the
-position-x': '+20%',
line of code, but I do not know why this wouldn't work. Has anyone got any thoughts?
I am not sure that you can use += in the way you are trying to.
If I understand what you are trying to do I think your logic is slightly wrong. When you click you want to move the background by 20% right? In order to do that make moving the background a function which you can call when you want to move it by 20px. Something like:
var moveBackground = function(){
// First get the current background position - assuming its 0 on first time around
var currentX = parseInt($("#parallax).css('background-position-x'));
var newX = currentX + 20;
$("#parallax").animate({
'background-position': newX + '%' + ' 0%'
}, 1200);
$(target).addClass('current');
$(this).addClass('current');
});
}
This is completely untested code, I wrote whilst at work so don't hate me if that doesnt work.
I am trying to do something like : when user click on the button, the child panel will show/hide
the issue is the 'onbtnClick' function is working just once. when i click on the button the panel shows and then when i click it again nothing happens and no errors tho ! the panel should hide
By the looks of it, there isn't really much need to pass a boolean param to the function.
If you purely want a 'toggle' function, based on the panels visibility and you have a reference to the Ext component, you can use the isVisible() function:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-isVisible
So your onBtnClick function would look something like this:
onbtnClick: function (){
var childPanel = Ext.getCmp('p');
if(childPanel.isVisible()) {
childPanel.hide();
}
else {
childPanel.show();
}
}
onbtnClick: function (){
var childPanel = Ext.getCmp('p');
if (!childPanel.isHidden()) {
childPanel.hide();
} else {
childPanel.show();
}
}
Instead isVisible() use method isHidden() because method isVisible may return false when the panel is covered by other components or is not rendered yet (even when your panel has not got hidden property (hidden = false)).
panel.getEl().toggle();
will serve your purpose.
-YP
you have setVisible, taking a boolean parameter to know what to do.
childPanel.setVisible( ! childPanel.isVisible() )
This example will actually toggle the visibility at each execution.
I have an ExtJS 4 grid with GroupingSummary Feature. ExtJs Default is grid is expanded when user clicks on any cell in grouping row. I want to disable this feature, no expansion should take place except when user clicks on designated 'expand' icon. How do I accomplish this?
There is the 'groupclick' event, is there a way to override its default behaviour and do nothing / remove it?
Thanks in advance
The method for it appears to be inherited from Grouping rather than GroupingSummary, so I suspect you need to override this method to prevent the current behaviour:
onGroupClick: function(view, group, idx, foo, e) {
var me = this,
toggleCls = me.toggleCls,
groupBd = Ext.fly(group.nextSibling, '_grouping');
if (groupBd.hasCls(me.collapsedCls)) {
me.expand(groupBd);
} else {
me.collapse(groupBd);
}
So you will need another file with something similar to the following:
Ext.require('Ext.grid.Grouping');
Ext.define('your.class.here', {
override: 'Ext.grid.Grouping',
onGroupClick: function() {
//do nothing
});
)};
Then you should be able to write a function that mimicks it was doing on groupclick, but instead on your icon click. Hope that helps.