Is there a maximum number li elements in an OL or UL ?
I have a static UL and in a foreach I'm trying to add elements to the list. If I add more than 9 elements only first LI is created. I checked my list and I have all the elements in it and the foreach statement is executed to the last element.
If I replace LI with UL Li (instead of creating one list element I'm creating a new list of 1 element) then everything works fine.
Related
Hi I am trying add custom 'li' to the list of files.
let element = document.createElement("li");
element.innerHTML = "hello";
let ulEle = document.querySelector(".filepond--list");
let liItem = document.querySelector(".filepond--item");
ulEle.insertBefore(element, liItem);
I can see element inserted but filepond's ul li item is overflowing my custom element.
When I try to modify css, than it doesn't work as intended.
please assist
The styling/positioning of the file items in the list is very custom to allow for all the animations (it's done from JavaScript), adding your own elements to the list will not work.
You can however add elements to a list item. To do this I advise to write a custom plugin, the best starting point I think is the image-edit plugin.
I'm trying to create a plugin to add some preset style to a table cell.
Step-by-step:
User click in a cell.
User click on my plugin button in the toolbar
Select a style
A class attribute is add to the closest TD
I'm having a hard time with the 4th point. How can I know where my cursor is in the source? How can I select the closest TD? The cursor must be between a <td> </td>. If there is no TD around nothing happen.
The cursor can be between any <Tag> as long as they are in a <td>.
// nearest element that surrounds your cursor
var el = editor.getSelection().getStartElement();
while (el) {
// if element is <td>, set class attribute and break loop
if (el.getName() == 'td') {
el.setAttribute('class', 'myClass');
break;
}
// otherwise, continue with parent element
// until you find <td> or there are no more elements
el = el.getParent();
}
Using Selenium IDE, we can highlight element (which is highlighted by yellow colour). I mean in command text field we enter command like - verifyElementPresent, in Target field we enter something like - id=nav-unanswered & when we click on 'Find' button that element on webpage is highlighted. Is there any way in Selenium-webdriver with Ruby, we can highlight every element which is begin executed as script runs?
There is a java script code, which you can call in the program to highlight an element. but it can be used only with Selenium-RC or WebDriverBackedSelenium.
http://code.google.com/p/selenium/source/browse/trunk/java/client/src/org/openqa/selenium/internal/seleniumemulation/htmlutils.js
You can do like this in selenium+java
public void highlightElement(WebElement element) {
for (int i = 0; i < 2; i++) {
JavascriptExecutor js = (JavascriptExecutor) this.getDriver();
js.executeScript(
"arguments[0].setAttribute('style', arguments[1]);",
element, "color: yellow; border: 3px solid yellow;");
js.executeScript(
"arguments[0].setAttribute('style', arguments[1]);",
element, "");
}
}
I am using selector gadget for the first time and am having trouble, when I run the code below, why do I only get the first result to display in the Terminal?
Also, is there any easier way to get the text after the ICD-10 code in the example page, because as of now selector gadget only gets the links, and not the plain text?
require 'rubygems'
require 'nokogiri'
require 'open-uri'
url = "http://en.wikipedia.org/wiki/ICD-10_Chapter_XVII:_Congenital_malformations,_deformations_and_chromosomal_abnormalities"
doc = Nokogiri::HTML(open(url))
puts doc.at_css("li li:nth-child(1) li a , li li ul:nth-child(5) :nth-child(1), .new, li:nth-child(3) li a, li li li:nth-child(10) li:nth-child(9) li:nth-child(4) :nth-child(1) li:nth-child(5) :nth-child(1) :nth-child(1) li:nth-child(2) :nth-child(1), li a:nth-child(4), li li li:nth-child(1), #mw-content-text li a:nth-child(5), li :nth-child(4) ul:nth-child(4) :nth-child(1), #mw-content-text li a:nth-child(3)").text
This gets all the text following a bullet with a Q code:
puts doc.search('//li[contains(a[#class="external text"]/#href, "icd10")]').map(&:text)
The XPath matches a list item (li) which contains an external link with icd10 in the URL, then extracts the text from it.
It's a bit of a broad brushstroke: it gets all the text, which means further manipulation will be necessary if you don't want the code, or subitems that don't have a code. But in any case it's a start.
See here:
http://nokogiri.org/Nokogiri/XML/Node.html#method-i-at_css
Search this node for the first occurrence of CSS rules. Equivalent to css(rules).first See Node#css for more information.
So, if you want to view all of the texts, might I suggest you do this:
selectors = ["li li:nth-child(1) li a", "li li ul:nth-child(5) :nth-child(1)", ".new", "li:nth-child(3) li a", "li li li:nth-child(10) li:nth-child(9) li:nth-child(4) :nth-child(1) li:nth-child(5) :nth-child(1) :nth-child(1) li:nth-child(2) :nth-child(1)", "li a:nth-child(4)", "li li li:nth-child(1)", "#mw-content-text li a:nth-child(5)", "li :nth-child(4) ul:nth-child(4) :nth-child(1)", "#mw-content-text li a:nth-child(3)"]
selectors.each do |s|
puts doc.at_css(s).text
end
I have a sortable list (done using prototype and scriptaculous): you can sort its elements or drag them into another list.
When I drop the element (let's call it ELEMENT_1) of a list into another one what I do is a 'clone' of the dropped element and then I insert (appendChild) it into the new list.
ELEMENT1 had some 'observe' (clicking on it do something, double-clicking on it do something else) that are of course lost when I do the cloning.. I want the cloned element to have the same 'observe' of ELEMENT1.
How can I do that?
Thanks in advance
Observe the lists instead of their items and allow event bubbling to do the work for you.
$('list1','list2').invoke('on', 'click', 'li', function(event, element){
// "this" is either list1 or list2
// "element" is the list item
}