Using (jQuery Sortable) is it possible to populate the placeholder with the text containing the index of each item.
For instance if the user moves the mouse down to sort the value of the current index is shown in the box transitioning from and also the index is show in the box transitioning too.
For example we have a list, and the user drags the list item eq(1) the placeholder reveals the text in (1) and the relative index is shown in the above box either above or below.
If we have a list of three items:
List item 1;
List item 2; If the user moves up or down from the list item the placeholder is shown in box2 and box3 if moving downwards or box1 if moving upwards.
List item 3;
I can change the placeholder but cannot only to the current index.
I have tried the following:
start: function(event, ui){
//alert("X "+ui.item.index());
$(this).attr('data-previndex', ui.item.index());
ui.placeholder.css('color', '#999999');
ui.placeholder.css('font-size','26px');
ui.placeholder.html('Draw Number<br/>'+$(this).attr('data-previndex'));
},
update: function(event, ui){
var newIndex = ui.item.index();
var oldIndex = $(this).attr('data-previndex');
var element_id = ui.item.attr('id');
};
But the index always remains the same.
This post earlier is something similar to what I am trying to achieve:
text
Related
We have a function to set a glyphType to DocumentApp.GlyphType.BULLET.
listItem.setGlyphType(DocumentApp.GlyphType.BULLET)
However, is there any way to set the glyphType to dash (-)?
For example, our list is below.
- Item 1
- Item 2
- Item 3
Ref: https://developers.google.com/apps-script/reference/document/list-item#setGlyphType(GlyphType)
The dash is not listed as a glyph type. But here is a work around. You could make you own pre-filled list with place holder items in a master document, copy the list and replace the items into the target document. Perhaps this is a lot of effort for styling bullets, but it could work.
Yes #Jason Allshorn is correct. I was able to set a custom bullet using apps script. I have a template doc that I copy to make a new doc. In this template I created a list item, text "list item", with my custom bullet glyph. Google, what is up with those giant dots? Ugly! I find that list item in the doc, copy it, and remove it. Code below:
function getListItem(ss, doc) {
var body = doc.getBody();
for (var i = 0; i < body.getNumChildren(); i++) {
var child = body.getChild(i);
var childType = child.getType();
if (childType == DocumentApp.ElementType.LIST_ITEM && child.getText() == 'list item') {
var customBulletListItem = child.copy();
body.removeChild(child);
break;
}
}
return customBulletListItem;
}
... then when I add a list item (li), I do the following:
body.insertListItem(i, li.copy());
body.getChild(i).replaceText("list item", "My new list item text");
body.getChild(i).setIndentFirstLine(0).setIndentStart(15);
body.getChild(i).editAsText().setBold(true);
This gets me my custom bullet glyph. The last two lines fix the huge indent on list items and bold the line. Google, what is up with the huge indents? Ugly!
I have these elements in a list. I want to sort the list alphabetically but how do i do that if the text that i want to sort it by is in a child element?
<div class="entry">
<button class="title btn btn-primary">Tale of Memories</button>
</div>
Without seeing your code, it is difficult to know exactly how things will work. Here is a generic solution:
Select all the elements in the list (eg: using querySelectorAll).
Transform the result of step 1 into an array (eg: with this solution from andrewmu)
Use the native sort() method to sort the array (providing your own function to compare values based on whatever you want).
Rewrite the content of the list with the content of the array.
Here is a demo. In it, we sort the list not based on the text directly in each item, but on the text from the span within each of them (for that reason the FA item goes first instead of last). In your case, you will want to change the compare function to get whichever element you want the items to be compared by:
// step 1: select the list items
var items = document.querySelectorAll("#mylist li");
// step 2: convert the node list into an array
var itemsarray = Array.prototype.slice.call(items, 0)
// step 3: sort the array using your own compare function
itemsarray.sort(function(a,b) {
return a.querySelector("span").innerHTML > b.querySelector("span").innerHTML;
});
// step 4: empty the list, and insert the sorted items
var ml = document.getElementById("mylist");
ml.innerHTML = "";
for (var x = 0; x < itemsarray.length; x++) {
ml.appendChild(itemsarray[x]);
}
<ul id="mylist">
<li><span>E</span></li>
<li><span>D</span></li>
<li><span>B</span></li>
<li>F<span>A</span></li>
<li><span>C</span></li>
</ul>
I want to place a tab on the right (and leave the other on the left normal position) in the <p:tabView>... Like in the showcase site of primefaces (the tab of documentation)
You can achieve this with the jQuery children selector. If your tabView's id is form:acc, then the following would be correct:
var tabs = $( "#form\\:acc ul" ).children();
var selectedChild = tabs.eq(tabs.length - 1); //selects the last tab.
selectedChild.css( "float", "right" );
What this does is that it takes the last tab and moves it to the right. However, if you do not want the last tab to move, you can select it's index and your second line would change:
var selectedChild = tabs.eq(1); //selects the tab with index 1.
I have a problem with dynamic item renderer for data grids elements.
I'm initialiizng columns in my data grid dynamically, like this:
for each (var item in _collection)
{
var i:MyClass= item as MyClass;
var dgc:DataGridColumn = new DataGridColumn(i.Id.toString());
dgc.headerText = i.Name;
cols.push(dgc);
}
_myDataGrid.columns = cols;
To every cell I want to pass integer. When it has -1 value, cell should display specific text but when it's 0 or 1 it should contain checkbox.
Do you know how can I achieve that? I don't any ideas for now, despite I was thinking about this for quite long time. Can you help me with this?
Create itemRenderer with two states. One state with checkbox another with text
I am using textInput within grid using rendrer. I am populating a suggestion box just below the text input field on the basis of typed character and index of text input.Problem is that if i shrink grid column then suggestion box is not populating at the right place so I want global position of cursor in the text input field .
Something like that:
var inputTxt : TextInput = new TextInput;
var x : Number = inputTxt.cursorManager.currentCursorXOffset;
var y : Number = inputTxt.cursorManager.currentCursorYOffset;
Try using 'global coordinate'.
This might resolve your problem.