I am using Jquery and html to create a grid with an ordered list in a GUI. The user can dynamically edit the html content in each of the grid cells. I have two questions:
If each of the li elements has a .html associated with it that the user can edit, how can I iterate through all of the li elements to get the current value of the .html? Preferably without having to name each element individually....
I want to make the grid customizable by the user. I.e. if the user enters in that they want 2 rows and 2 cols, the grid will appear 2x2. How can I dynamically edit how html appears on the GUI? If the user wants a 10x10 grid, do I really have to create 100 li elements, or what's a better way?
Here is my code for the ordered list. Right now there are 12 cells. Thanks!
<ol id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ol>
you could use .map() to get all the innerHTML from a list of elements. The following code would give you a list of the innerHTML of each li and join them by a comma.
$('#selectable li').map(function(v) { return $(this).html() }).get().join(', ');
I am pretty sure that jQuery's manipulation methods will assist you in inserting/removing elements. How many cells in grid really is up to your program; you could even allow them to insert 1000 cells. Why not?
Related
I need to be able to generate an HTML list like
(1) sdkfljsdlkfj
(4) lksdfjlksjdf
(2) lksdjfklsdjf
(7) sdklfjlskdfj
(16) sdklfjhlskdjf
The parentheses aren't necessary, it was just the only way for the Stack Overflow text editor to not auto-format the list. The only thing that matters is that the bullets need to be numbered, but for the numbers to be what I choose and potentially out of order.
I don't even know what to call this type of list concisely, and generally googling about how to do ordered and unordered HMTL lists doesn't give any hints about this.
If you're wondering why I need this, it's because this data comes to my website with Javascript and it's different line items based on a selection request. I'd like to display them in a list, but retain the original values.
Right now, I'm doing an unordered list where the number is in the beginning of the item text, but it doesn't look too great, compared to what I have in mind.
1. sdkfljsdlkfj
4. lksdfjlksjdf
2. lksdjfklsdjf
7. sdklfjlskdfj
16. sdklfjhlskdjf
Does HTML allow this? Something like <li bulletValue=24> ... </li> would be the most convenient.
You would use the value attribute on the li items in the ordered list. See the example below.
<ol>
<li value="1">Item in the list</li>
<li value="3">Item in the list</li>
<li value="6">Item in the list</li>
<li value="9">Item in the list</li>
<li value="67">Item in the list</li>
</ol>
Use CSS along with a data-attribute:
.data-bullet-list {
list-style-type: none;
}
.data-bullet-list li::before {
content: "("attr(data-bullet)") ";
}
<ul class="data-bullet-list">
<li data-bullet="1">Item
<li data-bullet="4">Item
<li data-bullet="2">Item
<li data-bullet="7">Item
<li data-bullet="16">Item
</ul>
Compared to the native value attribute method (which works only for ol, not ul, and your desired result is not ordered), this approach allows for much more customizable styling.
I'm using watir-webdriver in a ruby project to mimic a users actions on a business system. In order to perform the task, I am required to select a drop down field and then select an option from this.
The code in which the option elements are shown is:
<ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;">
<li class="rcbHovered rcbTemplate">
<ul>
<li style="width: 100%" class="gridcontrolcolumn">
Direct Debit
</li>
</ul>
</li>
<li class="rcbItem rcbTemplate">
<ul>
<li style="width: 100%" class="gridcontrolcolumn">
Invoice
</li>
</ul>
</li>
<li class="rcbItem rcbTemplate">
<ul>
<li style="width: 100%" class="gridcontrolcolumn">
Online Payment
</li>
</ul>
</li>
</ul>
Note I can differentiate the options using the "description" in the code. However, I am unable to use any finders (e.g. class:/id: etc to identify them in ruby.)
Is there an expression in which i can identify the descriptive text at the end?
I've previously tried using a send_keys function to select them using their title, however the field is read only and does not respond to send_keys.
My current (non functioning) ruby code is as follows:
#browser.iframe(id: 'contentIFrame1')
.iframe(id: 'navLink{bd27b00e-3d5e-b7b5-0ddb-864216077292}AreaFrame')
.input(id: 'ctl00_MainContent_cboDefaultPaymentType_Input').wait_until_present.click
#browser.iframe(id: 'contentIFrame1')
.iframe(id: 'navLink{bd27b00e-3d5e-b7b5-0ddb-864216077292}AreaFrame')
.input(id: 'ctl00_MainContent_cboDefaultPaymentType_Input').li(class: '"gridcontrolcolumn" >
Direct Debit < /li>').click
Naturally if I use .li(class:"gridcontrolcolumn").click, I have too many values returned.
Watir::Exception::UnknownObjectException: timed out after 30 seconds, waiting for #<Watir::LI: located: false; {:id=>"contentIFrame1", :tag_name=>"iframe"} --> {:id=>"navLink{bd27b00e-3d5e-b7b5-0ddb-864216077292}AreaFrame", :tag_name=>"iframe"} --> {:id=>"ctl00_MainContent_cboDefaultPaymentType_Input", :tag_name=>"input"} --> {:class=>"\"gridcontrolcolumn\" >\n Direct Debit < /li>", :tag_name=>"li"}> to be located
./features/step_definitions/create_DD_mandate.rb:65:in `/^Change the payment type to DD$/'
./features/create_DD_contact.feature:13:in `Then Change the payment type to DD'
There look to be a couple issues with locating the li using .input(id: 'ctl00_MainContent_cboDefaultPaymentType_Input').li(class: '"gridcontrolcolumn" > Direct Debit < /li>').click:
The li isn't usually in the input.
The li class is just "gridcontrolcolumn" - ie no quotations or other text.
I would try the simplest:
frame = #browser.iframe(id: 'contentIFrame1').iframe(id: 'navLink{bd27b00e-3d5e-b7b5-0ddb-864216077292}AreaFrame')
frame.li(text: 'Direct Debit').click
This will actually return the outer li, which should be sufficient. If you actually need the inner li, try:
frame.li(text: 'Direct Debit', class: 'gridcontrolcolumn').click
Replace the below line
.input(id: 'ctl00_MainContent_cboDefaultPaymentType_Input').li(class: '"gridcontrolcolumn" >
Direct Debit < /li>').click
with this
.li(xpath: "//ul[#class='rcbList']//li[#class='gridcontrolcolumn'][normalize-space(.)='Invoice']").click
First, see if you can upgrade to the latest version of Watir 6.x if you aren't already as watir-webdriver is deprecated.
The :class locator is a single class (or an array of multiple classes), so putting in CSS selectors won't work.
You have :text locators for both String and RegExp:
.li(text: 'Direct Debit')
.li(text: /Payment/)
You can read about all of the various ways to locate Watir elements here:
http://watir.com/guides/locating/
Is it possible to display the last <li> at the start of the list without using JavaScript?
For example if I had this code, how would <li>Bob</li> be displayed before <li>James</li> while keeping the structure below the same?
<ul>
<li>James</li>
<li>Chris</li>
<li>Bobby</li>
<li>Bob</li>
</ul>
Note: I cannot use JavaScript!
Assuming you can't manipulate the html (adding id or class attributes for example):
ul{display:flex;flex-wrap: wrap;}/*allows use of the 'order' attribute; allows seperate lines*/
li{width: 100%;}/*puts each list item back on a separate line*/
li:nth-child(1){order:2}/*make the 1st li item the 2nd*/
li:nth-child(2){order:3}
li:nth-child(3){order:4}
li:nth-child(4){order:1}/*make the 4th li item the 1st*/
compatibility: http://caniuse.com/#feat=flexbox
I am writing a menu with material design lite and I need a separator between two categories of item in this menu.
I recreated a simpler example of what I am doing here:
http://codepen.io/anon/pen/jbJXQP
In this example I would like to have something to delimit the two different categories. In the example "Trip planner" and "Layers" are some map related widget whereas "Help" and "Send feedback" are more info related.
Specificaly here:
<li class="mdl-menu__item"
<i class="material-icons" >layers</i>
Layers</li>
<li class="mdl-menu__item"
onClick="javascript:webapp.infoWidgets['otp-infoWidget-0'].show();" >
Help</li>
I am fairly new to web development (a few month), so I don't really have an idea of what is a good solution to do that.
For the separator it need to be something noticeable but not obtrusive to the user. I was thinking at just a straight black line in the middle but I don't know if this is possible.
An additional MDL class (I'm not familiar with MDL but sure there must be one, if not, just create one) for the first each special type of menu item which could then have a top border would be most logical.
So, let's assume that the first of each informational list item has a class of info:
Then we can do.
.mdl-menu__item.info {
border-top:1px solid lightgrey;
}
Codepen Demo
There are a variety of techniques for selecting which list item to apply the border to.
You can set a separate line, like you said. The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic). try this:
HTML
<li class="mdl-menu__item">
<i class="material-icons" >layers</i>
Layers</li>
<li><hr></li>
<li class="mdl-menu__item"
onClick="javascript:webapp.infoWidgets['otp-infoWidget-0'].show();" >
Help</li>
DEMO HERE
Note: You can style by CSS the <hr> - https://css-tricks.com/examples/hrs/
I have developed a webpage using the BootStrap framework and have a question about list items in my header.
How can I add a list to a list item?
Here is a link to my website: http://www.canninginc.co.nz/
As part of the header, I have a Products drop down list with an item 'CanLucidDream'. I am wanting to add a list (with list items) to this 'CanLucidDream' item. E.g. Galley, about etc
How can I do this?
EDIT
I did not explain what I am after very well. Basically, I want to have a list of items for the product CanLucidDream to the side of the CanLucidDream item. Like a menu item in a GUI forms application with a little arrow to the right of the menu item that then shows the list.
Is this possible in HTML/CSS?
You can, but a list within a list within a list starts looking really cluttered. If that's what you want, though, than just start a new list after the "CanLucidDream" anchor:
This is what you have:
<ul class="dropdown-menu">
<li>
CanLucidDream
</li>
</ul>
This is what it turns into:
<ul class="dropdown-menu">
<li>
CanLucidDream
<ul>
<li><a>This is the first thing.</a></li>
<li><a>This is the second thing.</a></li>
</ul>
</li>
</ul>
You'll need to style that, of course. Bootstrap might already have some sort of styling built in for drop-downs within drop-downs.