I'm trying to build an app on Windows Phone 8.1 with WinJS 2.1 and some Pivot controls. I want to detect a PivotItem slide left or right, but according to this MSDN page (http://msdn.microsoft.com/en-us/library/windows/apps/dn624879.aspx), there's no slide event like 'onslideleft'. My target is to avoid Pivot looping : when we reach last PivotItem and slide left again, it returns to first PivotItem. I just want to block left sliding when user reach last PivotItem (and block right sliding for first PivotItem).
How can I do it ?
Thanks you.
You can't achieve this in pivot control straight away, but you can get the pivot slide direction in selectionchange event like this,
document.getElementById("PivotID").addEventListener("selectionchanged", swipehandler);
function swipehandler(evt) {
var direction = evt.detail.direction; // 'forward' or 'backwards'
}
So in this selection change event you can check the length and index of pivot and restrict the pivot looping but if you do like this pivot would be flickering. Anyway just give a try.
Not sure if this is what you want but you can check selectedIndex when selectionchanged and keep track to see if you hit the described situation.
ready: function (element, options) {
var pivotEl = document.getElementById("idofpivotcontrol");
pivotEl.addEventListener('selectionchanged', function (ev) {
var pivotControl = document.getElementById("idofpivotcontrol").winControl;
var pivotControlLength = pivotControl.items.length;
var selectedIndex = pivotControl.selectedIndex;
});
}
Related
I have a YUI data table. When we click on any row of this data table, there is an alert box.
vtgtTbl.on('rowClickEvent',function(oArgs){
alert("a");
}
I have a checkbox. what i want is that when that checkbox is true then row click will work, and not when it is false. so is there is any method in YUI to attach and detach these events
Within the rowClick event handler callback you can add a check for the checkbox in the following way
vtgtTbl.on('rowClickEvent',function(oArgs){
var checkBoxNode = Y.one('#checkboxId');
if (checkBoxNode.checked) {
alert("a");
}
}
Hope it solves the problem.
I have two edit boxes in an XPage and one label.
Leave Start Date : EDIT BOX
Leave End Date : EDIT Box
Holidays Taken : label
I want to calulate the diffence in dates and get it computed in the label using the following code in onChange event of second(Leave End Date) edit box but on chaging the value of the edit box it clears the two field and nothing gets computed:
var leaveStartDate = document1.getValue("fld_Leave_Start_Date1");
var leaveEndDate = document1.getValue("fld_Leave_End_Date1");
var difference = null;
try{
var nDateStart = session.createDateTime( leaveStartDate );
var nDateEnd = session.createDateTime( leaveEndDate );
difference = nDateEnd.timeDifference(nDateStart);
difference = (Math.floor(difference/86400)) + 1;
}catch(e)
{
return e
}
document1.setValue("fld_NoOfDays",difference);
I tried getComponent("fld_Leave_Start_Date1").getSubmittedValue(), but didn't work either.
Can someone please help.
Thanks a lot in advance!
If the edit boxes are getting cleared, it sounds like you've set the event to do a full refresh instead of a partial refresh.
The other possible cause of clearing fields is if you're using Partial Execution Mode (execMode="Partial" in the source pane for the eventHandler) but have specified a execId that does not include the two edit boxes. (Partial Execution by default runs on the current component, so you should not lose the values of that Edit Box.) But I don't think that's the case.
My question is exactly opposite of this question. So what I'm trying is I'm trying to find a way to lose focus on a cell after user selects an item from the autocomplete combobox in that cell.
$input.autocomplete({
delay: 0,
minLength: 0,
source: args.column.options,
select: function (event, ui) {
$input.val(ui.item.label);
grid.getEditController().commitCurrentEdit();
return false;
}
});
I used this code to lose focus indirectly after finishing with editing. It works fine, however, the cell stays selected somehow.
grid.getEditController().commitCurrentEdit();
I also tried the code below to lose focus but it throws error everytime when I run the code.
grid.setActiveCell();
grid.setSelectedRows(-1);
After selecting an item from the autocomplete combobox, I want the grid to lose focus and select nothing on the viewport of the grid.
Thanks for your answers in advance.
Try calling grid.resetActiveCell().
There was a commit made to the master branch last week that might address your issue: Fix keyboard focus getting trapped when cell has tabbable elements.
You can achieve it as follows,
if (grid.getActiveCell()) {
var row = grid.getActiveCell().row;
var cell = grid.getActiveCell().cell;
grid.gotoCell(row, cell, false);
}
I found this solution.
If type of chart is pie, how specify parameters (x,y) of highlight(x, y)?
Thanks
Sorry for my bad English.
Unfortunately, flot doesn't expose the pie highlighting code to the user. So we are pretty much out of luck, but what may work for you is synthesizing a click event at the appropriate place on the page:
$("#highligher").click(function () {
var e = jQuery.Event('click');
e.pageX = 250; //add a made up x/y coordinate to the click event
e.pageY = 250;
$('#plot canvas:first').trigger(e); //trigger the click event on the canvas
});
Here it is in action: http://jsfiddle.net/ryleyb/mHJm5/
The problem is you have to know where the slice you want to highlight is already. This would be easy enough to set if the graph is static. If it's a dynamic graph, you'd have to dig into the source of the pie code to figure out how to calculate where the pie slice is. It might be easier in that case to just have a copy of all the pie functions and manually draw on the pie overlay.
Just got this working by altering a few things...
I changed highlight and unhighlight in jquery.flot.pie.js to pieHighlight and pieUnhighlight.
Then, after these two lines in jquery.flot.pie.js...
plot.hooks.processOptions.push(function(plot, options) {
if (options.series.pie.show) {
I added...
plot.highlight = pieHighlight;
plot.unhighlight = pieUnhighlight;
We're maintaining selection state outside of the chart (as a backbone model). When a selection event (click) occurs, we set the selected slice in the model. When selection changes, we refresh the chart using a selection color for the pie slices that are selected.
var data = [];
var color = slice.index == selected ? '#FF0000' : '#0000FF';
data.push({label:slice.Label,data:slice.Value,color:color});
The snippet above uses blue for all non-selected slices, red for the selected slice. Your color logic will be more sophisticated.
NOTE: You can also use rgba CSS for the colors, which gives a really nice effect. For example:
var color = slice.index == selected ? 'rgba(0,0,255,1)' : 'rgba(0,0,255,0.5)';
Im creating a drop down menu and i want to know if there is anyway to implement the following:
I need to keep the sub-menu open for like 1 sec if the user moves the mouse away from the tab he selected. Much likely like in current intel web page www.intel.com , here u hover over menu, but if u take the mouse away from the tab or the sub-menu is opens it takes a few to hide the sub menu.
Im using .mouseover from jquery to show the menu (a div) but i cant find a way to make it stay for a few moments.
Thanks in advance
This may be of service
What is the JavaScript version of sleep()?
If you want to do something in the interim setTimeout() takes the arguments as shown where continue execution is another subroutine. If you just want this one tab to work this way have mouseover call doStuff and set a boolean (e.g. mouseStillIn) to TRUE. When the mouse exits set this boolean to FALSE, call a recursive function everytime mouseStillIn is TRUE.
e.g.
var mouseStillIn : boolean = false;
function MouseIn()
{
mouseStillIn=true;
CheckMouse();
}
function CheckMouse()
{
if(mouseStillIn)
{
setTimeout(CheckMouse, 1000);
}
}
function MouseOut()
{
mouseStillIn=false;
}