This question already has answers here:
Jquery selectable for range selection (slider behaviour)
(3 answers)
Closed 2 years ago.
I want to use something similar to jQuery UI's Selectable. But it operates strictly on a dragged rectangle, and I want something that operates on a flow layout (like selecting text).
As an example, if I go to the Selectable "display as grid" demo, click on "3", and drag to "6", Selectable selects everything in that rectangle:
What I want instead is for it to select all the numbers from 3 to 6. (It should probably also disable the dotted-line rectangle as well, since it doesn't make sense for this type of selection.) Like this (again dragging from 3 to 6):
Selectable has an event that it fires as items are selected and deselected during the drag, but I don't see any way to alter its "which items are selected" list from that event, or to plug in a custom "how do I tell which items should be selected?" algorithm.
How can I get Selectable to select items by logical order instead of by pixel position?
i think it may help you!
var indices = [];
$( "#selectable" ).selectable({
selecting: function(event, ui) {
indices.push($(ui.selecting).index());
select();
},
unselecting: function(event, ui) {
var index = $(ui.unselecting).index();
for(var i = 0; i < indices.length; i++)
if(indices[i] == index)
indices.splice(i, 1);
select();
}
});
function select() {
indices.sort(function(a,b){return a-b});
var start = indices[0];
var end = indices[indices.length - 1];
$('#selectable li').removeClass('ui-selecting');
$('#selectable li').filter(function() {
return $(this).index() >= start && $(this).index() <= end;
}).addClass('ui-selecting');
}
I put up a demo for this solution: http://jsfiddle.net/snyuan/TGekT/, and http://jsfiddle.net/snyuan/Yrgnv/. Just a reference.
Related
I want to create a textarea where users can select a part of a text, and I will react according to their selection. So I need to
1) get the start and end positions of the selection text
2) get the position of the focus, if it is in the textarea and there is no selection
It seems that the functions to do so are different from an explorer to another. So could anyone tell me what is the approach to do that in Office Add-in?
I have tried the following 2 ways (ie, select a part of the text in myTextarea, click on button, and then debug the code), they don't seem to be the right functions.
(function() {
"use strict";
Office.initialize = function(reason) {
$(document).ready(function() {
app.initialize();
$('#button').click(showSelection);
});
};
function showSelection() {
// way 1
console.log(document.selection); // undefined
document.getElementById("myTextarea").focus();
var sel = document.selection.createRange(); // Uncaught TypeError: Cannot read property 'createRange' of undefined
selectedText = sel.text;
// way 2
console.log(document.getElementById("myTextarea").selectionstart); // undefined
console.log(document.getElementById("myTextarea").selectionend); // undefined
}
})();
Additionally, it would be great if one could also tell me how to realise the follows by code:
1) select a part of a text, from a start and end positions
2) set the focus at a certain position of the textarea
Edit 1:
I just tried window.getSelection() within my Excel add-in:
function showselection() {
var a = window.getSelection();
var b = window.getSelection().toString();
var c = window.getSelection().getRangeAt(0);
}
After selecting a text in the textarea, and clicking on button, I debugged step by step: the first line made a a = Selection {anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0, is ...; the second line returned "", the third line got an error Home.js:19 Uncaught IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index. It looks like the selection has not been successfully caught...
Here is JSBin without Excel add-in frame, which returns almost same results as above.
Use JQuery.
For instance, the following two lines get the caret position:
function showselection() {
console.log($('#myTextarea')[0].selectionStart);
console.log($('#myTextarea')[0].selectionEnd);
}
There are some plug-ins:
https://github.com/localhost/jquery-fieldselection
http://madapaja.github.io/jquery.selection/
The second one has several short samples with buttons (where we may lose selection). You could either use their API, or look into their code to see which JQuery functions they call.
If the desired selection is just the selected text in the HTML page (and not the user's selection in Excel/Word), then there are some good stackoverflow answers about accessing that selection.
One of the key features of the JavaScript APIs for Office is that they follow an asynchronous model (the code you've written above for showSelection() appears to be synchronous). I'd recommend reading the Excel and Word JS API overview pages to get a feel for how they work. As an example, here's how you'd get the text from a selection:
Word.run(function (context) {
var myRange = context.document.getSelection();
context.load(myRange, 'text');
return context.sync().then(function () {
log("Selection contents: " + myRange.text);
});
})
Then for the other specifics of your question please clarify as requested in my comment. Thanks!
-Michael (PM for Office add-ins)
I have a dynamic LineChart. I am setting the zoom to false but I want to be able to trigger an Ajax Event when selecting an area in the Chart (like the zoom functionnality when selecting the area you want to zoom), I want to call a server method and getting the max and min x axis values of the selected area.
Can anyone help with this?
Else if I set the zoom to true, is there any way to get the values from the zoomed area ?
PrimeFaces and JSF is in this context nothing more than an html/javascript/css generator. If you look at the source of the generated page in your browser developer tool, you'll see a lot of javascript, including all datapoints.
<script id="j_idt87_s" type="text/javascript">
$(function(){PrimeFaces.cw('Chart','chart'{
id:'j_idt87',
type:'line',
data:[[[1,2],[2,1],[3,3],[4,6],[5,8]],[[1,6],[2,3],[3,2],[4,7],[5,9]]],
title:"Zoom",
legendPosition:"e",
axes:{
xaxis:{
label:"",
renderer:$.jqplot.LinearAxisRenderer,
tickOptions:{angle:0}},
yaxis: {
label:"",
min:0,
max:10,
renderer:$.jqplot.LinearAxisRenderer,
tickOptions:{angle:0}}
},
series:[{label:'Series 1',renderer: $.jqplot.LineRenderer,showLine:true,markerOptions:{show:true, style:'filledCircle'}},{label:'Series 2',renderer: $.jqplot.LineRenderer,showLine:true,markerOptions:{show:true, style:'filledCircle'}}],zoom:true,datatip:true},'charts');});
</script>
So the answer to this question is valid for the PrimeFaces charts as well.
Running the following code (from the link above) in your browser developer tool on the zoom examples will show you the data points that fall in your zoom region
chart = PF('chart').plot;
PF('chart').plot.target.bind('jqplotZoom', function(ev, gridpos, datapos, plot, cursor){
var plotData = plot.series[0].data;
for (var i=0; i< plotData.length; i++) {
if(plotData[i][0] >= chart.axes.xaxis.min && plotData[i][0] <= chart.axes.xaxis.max ) {
//this dataset from the original is within the zoomed region
//You can save these datapoints in a new array
//This new array will contain your zoom dataset
//for ex: zoomDataset.push(plotData[i]);
console.log(plotData[i]);
}
}
});
Replacing PF(çhart') with PF('myLineChartWV') will make it work for your example to
Once you have gathered the data, you can use this in e.g. a PrimeFaces remoteCommand to pass it to the server.
Notice that this only takes the x-axis value of the zoom into account. If you want the y-axis taken into account to (so the real zoom area), add
plotData[i][1] >= chart.axes.yaxis.min && plotData[i][1] <= chart.axes.yaxis.max
to the if-statement in the loop.
Also notice it just takes the first series. If you have multiple, you have some simple homework to do.
I want to implement a list in Android that contains some customized views.
My problem is that I want the the views will be put one after the other with a little overlap between them. like in the following schema:
I also want to control this overlap in such a way that when the user clicks on one of the items, they will move apart from each other.
I tried to extend ListView but it seems to be very obscured, any suggestions?
Edit:
This can be more clear:
I did it by setting the divider height to -50dp.
this is exactly what I want to achieve, but somehow it doesn't reflect on my app.
I managed to achieve this by using scroll view with a single relative layout as a child.
I then dynamically place the views by defining a rule and margin:
for (int i = 0; i < 30; i++) {
TextView tv = new TextView(context);
tv.setText("Text \n Text" + i);
tv.setBackgroundColor(i % 2 == 0 ? Color.RED : Color.GREEN);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
lp.addRule(RelativeLayout.ALIGN_PARENT_TOP);
lp.leftMargin = 0;
lp.topMargin = (i * 45);
rl.addView(tv, lp);
}
Later, you can control the positioning of the sub-views by changing their y value (for example: if you want to add animation).
This is the final result:
This can probably be achieved by using the Camera.setTranslate function. See Android: Vertical ListView with overlaped rows and Android: vertical 3d listview for similar questions (with solutions)
In MFC how to remove a menu-item of POPUP type. RemoveMenu() either take ID or position. Since, there is no ID for POPUP menu, option left is by using position.
But I am not getting how and where I can call RemoveMenu().
File Edit Test
Test_submenu_1
Test_submenu_2
Test_submenu_3 > submenu_3_item_1
Test_submenu_4
Test_submenu_5
I want to remove Test_submenu_3? I am not getting how do find CMenu object for Test so that I can call RemoveMenu() by passing position "2" for submenu_3_item_1.
Any suggestion for doing this will be greatly appreciated.
Thanks!
You cannot use LoadMenu, since this function does just that.
After modifying loaded menu it is killed when menu object used to load it goes out of scope. You have to modify menu that is currently used.
Your menu is a popup part of the main menu, second in position. It contains 5 items and second one is another popup. To my understanding, you want to remove this item and popup of this item.
To make it work you will have to ask main window for the current menu:
CMenu* pMenu = GetMenu(); // get the main menu
CMenu* pPopupMenu = pMenu->GetSubMenu(2);//(Test menu with item....)
pPopupMenu->RemoveMenu(2, MF_BYPOSITION);
Of course, this code is from the main frame. If you want to use it elsewhere, you will have to access all using pointer to the main frame.
Try the below. You get the Test sub-menu first (index 2), then once you have that you tell it to remove its Test_submenu_3 submenu by position (also 2).
CMenu topMenu;
topMenu.LoadMenu(IDR_YOUR_MENU);
CMenu& testSubMenu = *topMenu.GetSubMenu(2);
testSubMenu.RemoveMenu(2,MF_BYPOSITION);
'Test' is the 3rd menu item (by position) on the top level menu. It's just been rendered horizontally rather than vertically. Assuming you have a handle to the top level menu use the same code you'd use to the get the sub menus as you would to get the 'Test' menu.
You can use this below code to remove the submenu, by comparing name
bool RemoveSubmenu(CMenu * pMenu) {
for (int pos = 0; pos < pMenu->GetMenuItemCount(); pos++) {
wchar_t *name = new wchar_t[mf.cch + 1];
MENUITEMINFO mf;
ZeroMemory(&mf, sizeof(mf));
mf.cbSize = sizeof(mf);
mf.fMask = MIIM_SUBMENU | MIIM_FTYPE | MIIM_STRING;
mf.fType = MIIM_STRING;
mf.dwTypeData = NULL;
if (!GetMenuItemInfo(pMenu->m_hMenu, pos, TRUE, &mf))
break;
if (mf.hSubMenu != NULL){
mf.fMask = MIIM_TYPE;
mf.fType = MFT_STRING;
++mf.cch;
mf.dwTypeData = (LPSTR)name;
if (!GetMenuItemInfo(pMenu->m_hMenu, pos, TRUE, &mf)){
bRet = false;
break;
}
//
// compare sub menu name (i.e mf.dwTypeData) here, do the required
// modifications
//
pMenu->RemoveMenu(pos, MF_BYPOSITION);
bRet = true;
break;
}
}
}
A few small questions on this web page I am putting together.
http://dansiop.com/guyc/our-team/
I am looking to get the content that appears when you click on an image to slide with the mouse as you scroll down. Not sure if this is possible, if so can anyone help.
I have tried looking but as I am such a n00b to jquery I'm not sure what I am looking for. I found some code that used the tag slide and it was not what i wanted at all so not sure what the command would be.
You need to wrap your prof_1, prof_2, etc, in a wrapper I'm going to call this wrapper prof_wrapper
<div id="prof_wrapper"></div>
jQuery(document).ready( function(){
var orig_t = jQuery("#prof_wrapper").offset().top;
var mt = jQuery("#main").offset().top;
var mh = jQuery("#main").outerHeight();
jQuery(document).bind("scroll", function(event){
var ph = jQuery("#prof_wrapper").outerHeight();
var mo = (mt+mh) - jQuery(document).scrollTop();
var t = jQuery(document).scrollTop();
if(mo <= ph){ //Find out if the #main element's offset top plus it's height minus the scroll position is less than the prof_wrapper's height; if it is, leave the prof_wrapper at the bottom of the #main element
jQuery("#prof_wrapper").css({'position':'absolute', 'bottom':'0px', 'top':'auto'});
}else if(t >= orig_t){ //Otherwise, if we have scrolled past the prof_wrapper, make the prof_wrapper follow us down
jQuery("#prof_wrapper").css({'position':'fixed', 'top':'0px', 'bottom':'auto'});
}else{ //We are probably at the top of the page, so reset the original positioning
jQuery("#prof_wrapper").css({'position':'relative', 'top':'0px', 'bottom':'auto'});
}
});
});
You need to add - position:relative to your #main element, then I think this should be pretty close. Take a look at my comment about the padding and margin on the prof_wrapper.
The positioning of absolute, assumes that #main is the first parent element to have a position assigned to it; if so, then it will use this as the positioning for the bottom.
Something like that?