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.
Related
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
i have made some reordering each tab in tabs component mechanism but it is working not as i expected and i dont know why. I have some basic example with reordering.
#Route(value = "test")
public class testPanel extends Div {
public newPanel() {
Tabs tabs = new Tabs();
Button btn = new Button("Move 3 to 0");
Button ref = new Button("refresh");
ref.addClickListener(evt ->{
tabs.removeAll();
tabs.add(new Tab("0"));
tabs.add(new Tab("1"));
tabs.add(new Tab("2"));
tabs.add(new Tab("3"));
});
ref.click();
btn.addClickListener(evt -> {
int maxPos= 3;
Tab tab= (Tab) tabs.getChildren().collect(Collectors.toList()).get(maxPos);
tabs.getChildren().forEach( f ->{
int tabPos = Integer.valueOf(((Tab)f).getLabel());
if(tabs.indexOf(f)<maxPos) {
tabs.addComponentAtIndex( tabPos+1, f);
}
});
tabs.addComponentAtIndex(0, tab);
System.out.println(tabs.getChildren().collect(Collectors.toList()));
});
add(btn,ref,tabs);
}
}
When i'm reordering 3rd tab to 0 then my 1 tab is added after 2 tab. But when i'm looking into tabs order in getChildren then i can see that all tabs are in the correct order (3,0,1,2) and when i'm selecting tab 2 it is selecting both tab 1 and 2 and it is treating as if i would choose tab 1 (page for tab 1 is showing). I can't select tab 2 anymore.
I know that in this example i can use only tabs.addComponentAtIndex(0, tab); without reordering other tabs but i need it in my reordering mechanism which is more complicated but problem is this same. In selection listener when i select tab 2 it treats it if i had choose tab 1.
Here it is the order of tabs i getChildren aftek reordering:
[Tab{3}, Tab{0}, Tab{1}, Tab{2}]
It is working fine if remove all tabs and when i add them again in correct order.
Content in the element of the component looks correct as well:
<vaadin-tabs>
<vaadin-tab>
3
</vaadin-tab>
<vaadin-tab>
0
</vaadin-tab>
<vaadin-tab>
1
</vaadin-tab>
<vaadin-tab>
2
</vaadin-tab>
</vaadin-tabs>
For 7 tabs it is even weirder when i would change 6 tabs to 0:
I'm writing a script to login to an internal html site, click around to the appropriate place, click on a specific row in an HTML table, and click a submit button. I'm pretty much there, except I can't figure out how to click the correct row - or any row for that matter.
Here is the source of the table: HTML Source
Here is what I've tried so far after navigating to the page with the table of interest (with no results, but no errors):
Set mainTable = IE.Document.getElementByID("main").contentwindow.document
mainTable.getElementsByName("acq_scenario.acq_scenario_summary").Item(0).getElementsByTagName("tr").Item(0).getElementsByTagName("td").Item(3).focus
mainTable.getElementsByName("acq_scenario.acq_scenario_summary").Item(0).getElementsByTagName("tr").Item(0).getElementsByTagName("td").Item(3).click
The code below tries to change the attributes in the HTML table based on changes that I've observed when manually clicking on a cell, but these changes have no effect on the view of the table (the row should be highlighted when a cell within it is clicked) and still don't allow me to click the submit button, which requires a row to be selected:
currScenario = mainTable.getElementsByName("acq_scenario.acq_scenario_summary").Item(0).getElementsByTagName("tr").Item(1).getElementsByTagName("td").Item(2).realValue 'gets string value for "Current Scenario" field, which I've unsuccessfully tried to use to manually update the "selected" attribute in the table
mainTable.getElementsByName("acq_scenario.acq_scenario_summary").Item(0).setAttribute "selected", "ScenarioName=" & currScenario
mainTable.getElementsByName("acq_scenario.acq_scenario_summary").Item(0).getElementsByTagName("tr").Item(0).setAttribute "class", "Skin_Selection_Color"
mainTable.getElementsByName("acq_scenario.acq_scenario_summary").Item(0).getElementsByTagName("tr").Item(0).style.setAttribute "highlight", "true"
I am a little fuzzy on what you need, but I think that using css for the row highlight and a onClick for the cell selection..
"the row should be highlighted when a cell within it is clicked"
CSS:
#msg_table tr:hover{background-color:white; }
Javascript:
/* create HTML table in Javascript */
for (var j = 0; j < search_results_length; j++){
// get zebra striping
if (j % 2 == 0){
//even
zebra = "zebra_0";
}else{
//odd
zebra = "zebra_1";
}
...
myTable+="<tr class='" + zebra + "' onClick='collapse_section_switch(" + j + ")'>"
/* row click here */
myTable+="<td align='right' onClick='balance_stuff(\"search_results[j].customer_number\")'>" + search_results[j].customer_balance + "</td>"
/* cell click here */
...
}
Does this help at all?
I still don't understand why the .click() command wouldn't click on the cell, but it turns out the answer was to use .FireEvent("onmouseup").
Horizontal spacing using .setSpacing() within HorizontalPanels seems to work as expected when the App is included into a GoogleSite as App Gadget (Firefox), but I can't figure out how to control vertical spacing within widgets in VerticalPanels:
var panel_A = uiApp.createHorizontalPanel();
panel_A.add(t1).add(t2).setSpacing(30); // works as expected, horiz. space betw. t1 & t2
var panel_B = uiApp.createHorizontalPanel();
panel_B.add(t3).setSpacing(30); // shifts t3 widget to the right
var panel = uiApp.createVerticalPanel();
panel.add(panel_A).add(panel_B).setSpacing(10); // has no apparent effect
The docs do distinguish between a vertical setSpacing() and a horizontal setSpacing() but I'm clearly missing something. Thanks.
EDIT
Simplifying things further and combining various setHeight and setSpacing settings won't change the spacing between t1,t2,t3 (5 x 3 table charts). Ive tried enclosing the vpanel within an hpanel (I've been able to control the hpanel's width) but that didn't alter the vertical spacing between the three tables.
var uiApp = UiApp.createApplication();
var vpanel = uiApp.createVerticalPanel().setHeight('50%');
vpanel.add(t1).add(t2).add(t3);
uiApp.add(vpanel);
return uiApp;
I have a span inside the contenteditable div and I need to figure out if the cursor is in the last position on the span tag. I looked in the Selection and Range solutions but couldn't figure out a straight forward way to achieve that.
<html>
<script>
var selection = window.getSelection();
var range = selection.getRangeAt(0);
//this is what I am trying to achive
var selection_target = range.selectNodeContents(document.getElementById('target'));
var length = selection_target.toString().length;
</script>
<body>
<div id='target' contenteditable='true'>
<span>some text(figure cursor position here)</span>
</div>
</body>
</html>
For the case in the question where the span only has one child that is a text node, you can check whether the caret is at the end of it as follows:
Demo: http://jsfiddle.net/Wm5Hz/
Code:
var span = document.getElementById("target").getElementsByTagName("span")[0];
var spanTextNode = span.lastChild;
var sel = window.getSelection();
var isCaretAtEndOfSpan = (sel.isCollapsed
&& sel.focusNode == spanTextNode
&& sel.focusOffset == spanTextNode.data.length);
Things are slightly more complicated in the general case: the same visual position can be represented in different ways (e.g. after the last character in the text node, after the text node itself, after the end of the span), plus if the span could contain elements then you'd need to find the last text node within the span and compare the selection against it. Also, none of this works in IE < 9, which has a completely different API.