How would I add <li></li> around multiple lines all at one time? I am using sublime, but should be same for other zen coding editors.
ex.
line 1
line 2
line 3
etc.
I want to select all three lines and wrap <li></li> on each so it becomes
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
I am using web essential extension which is having zen coding plugin for visual studio 2017
if you are adding multiple list items for unordered list use,
ol>li*3
if you are adding multiple list items for ordered list use,
ul>li*3
then press tab two times contentiously.
Related
I have the following html (view):
<li>
<b>Institute:</b> Length: ${institutes.length}
<ul>
<li repeat.for="el of institutes">
${el.institute}: ${el.terminalCount}
</li>
</ul>
</li>
I see the following in the browser:
As seen, the array institutes has 2 elements, but in list I see 4 more rows - with empty values.
What is it? How I can fix it?
Thanks in advance.
You definitly have something else on that array apart from the elements. Otherwise it would be just two LI tags.
If you look # the source
there are number of repeater strategies in aurelia templating. Depending on the type of the object you want to iterate over.
If you are actively developing something with aurelia, I suggest you join the official aurelia discourse
And the gitter channel
I want an interaction that allows the user to first select a cursor tool, and then use it to select some text and apply a distinct attribute to it, select another cursor tool, apply a different attribute to another part, and then submit the selection/ attribute data. A use case would be an interaction where the user must identify the subject, verb and complement of a displayed sentence using three different cursor/attribute tools. The end result would be something like this but any attribute would do as long as it is distinct. The text itself should not be editable. When done the user would submit and their selections evaluated.
<p><span style="background-color:lightseagreen;">The fox</span> <span style="background-color:pink;">jumped</span> <span style="background-color:yellow;">over the fence.</span></p>
Is this possible?
A more complex example with more complex syntax would require the student to identify the core structure in bold and then identify the complete S,V and C.
<p><span style="background-color:lightseagreen;"><b>The fox</b> with the broken foot</span> <span style="background-color:pink;"><b>jumped</b> painfully</span> <span style="background-color:yellow;"><b>over the fence.</b></span></p>
Each product has the custom fields options. Can I output those custom fields on each product item in the product list page? If so, how? I have tried adding the ProductOtherDetails and the %%SNIPPET_ProductCustomFieldItem%% in the CategoryProductsItem.html, but got no output at all of any of the items I have tried. Any suggestions or pointers on how and if this is possible?
As of September 2015, you can now access %%GLOBAL_ProductCustomFields%% on any template file that renders a particular panel's individual items. For example:
-Snippets/CategoryProductsItem.html for category list pages
-Snippets/HomeFeaturedProductsItem.html for the featured products panel
I recommend adding the custom field name as a class to each field for easy hiding, and accessing of the value in case the custom fields ever change you won't be accessing them via :nth-child CSS which would break. You can do so by modify Snippets/ProductCustomFieldItem.html to add the custom field name to the CSS class or ID like this:
<div class="DetailRow %%GLOBAL_CustomFieldName%%">
<div class="Label">%%GLOBAL_CustomFieldName%%:</div>
<div class="Value">
%%GLOBAL_CustomFieldValue%%
</div>
</div>
Doing so, will output like this in each item in the category list.
Above, I am using the custom fields to send through shipping time, as well as "Starting At" to prepend to the list page price if the item is a parent which has children of higher prices. In my opinion, these features greatly increase the user experience.
For Faceted Search (handlebars.js)
I recommend adding this to Panels/FacetedSearchProductGrid.html:
{{#each product.custom_fields}}
{{ id }} : {{ name }} : {{ value }}
{{/each}}
Those filters will be limited to the Product pages specifically. The only way around it is to hash together a solution using jQuery to go and fetch items in question from the product page. A pain, but do-able with unnecessary effort.
So im currently trying to write a test/learn how to use Selenium. One of the issues I am running in to is that I need to select specfically the number 262 in this nested div.
The issue I ran into is that if I make the xpath //div[#class='np_amount inline'] that I get multiple results going down the entire page, and if I make it //div[#class='np_field_amount_etc'], then I get all three items in the row, and not just the number 262.
However, the initial div class (np_field_amount_etc) is unique. What xpath command would I write in order to only select the 262 in this series of div's?
<div class="np_field_amount_etc">
<div class="np_label inline">Total Calories</div>
<div class="np_amount inline">262 </div>
<div class="np_dv inline">14</div>
</div>
I think, somethings like this:
//div[#class='np_field_amount_etc']/div[#class='np_amount inline']
is what you want.
I am using Selenium IDE Firefox extension and I need to know how can I verify that the number of elements from a certain area is the correct one. For example, I need to verify that the number of displayed search resuls is equal to 20.
*info updated: there is no table, the results ("li"s) are between "ul" tags. So I think that a command for counting the number of "li"s from that "ul" will work fine.
Here is how the code looks like:
<ul class="testclass">
<li class="search-result"></li>
<li class="search-result"></li>
<li class="search-result"></li>
</ul>
Thanks !