I don't know what this is called hence having a hard time finding any reference on the net for this. On hotmail when you enter an email it boxes the email into a rectange block one by one on the same line with options to edit and delete the email. What is this and are there any sample code/frameworks to implement something similar?
Thanks.
It's normally a UL, and inside it you have LI which are either elements styled to have a box around them (emails, in your case), or a borderless INPUT box which blends into the surrounding UL of the same background. JavaScript code handles deletion and insertion of box LIs according to keyboard input. I am not aware of framework support for it, but it may exist.
EDIT: It exists. http://plugins.jquery.com/plugin-tags/tags for jQuery options.
I was looking for the same thing, and upon looking at the source code for it. It seems that they are using a UL like Amadan said, but its set up like this:
<div id="container">
<ul id="email_list">
<li class="email_token valid" id="a#a.com" email="a#a.com">
<p>a#a.com</p>
<span class="delete_link">x</span>
</li>
<li class="email_token valid" id="b#b.com" email="b#b.com">
<p>b#b.com</p>
<span class="delete_link">x</span>
</li>
<li class="email_input_container">
<textarea class="email_input_field"></textarea>
</li>
</ul>
</div>
EDIT: I ended up implementing it and it runs wonderfully!
Try to use Firefox+Firebug to inspect the elements in hotmail. It'll help you to find out yourself.
Related
I want to add tooltips for some "Categories" box in Zendesk, so when the user hang over one box then I can show a tooltip with more information about the "Category".
Problem is that I'm trying to use IF statement like this:
{{#if href == '/hc/en-us/categories/360001117812-Cow-Traffic' }}
{{#each categories}}
{{#if ../has_multiple_categories}}
<li class="blocks-item">
<a href='{{url}}' class="blocks-item-link">
{{#if href == 'url_to_compare' }}
<a class="tooltiptext">tooltip_text</a>
{{/if}}
<span class="blocks-item-title">{{name}}</span>
<span class="blocks-item-description">{{excerpt description}}</span>
As this IF is inside of a {{#if}} of the categories I want to select in this example only one link using the href to see if the mouse is over or not the box.
I already tried to add a helper in the script.js file but looks like it's not working, I remember that there was a way to use this IF and IS to be able to solve it.
Thanks!
I get a lot of help on this, at the end I found that the better way to solve this is using a {{#is}} statement, So it's possible to use {{#is name "Category Name"}} {{/is}}
And this option will do a comparation between the name of the Category and the name you are looking for, if the value it's equal then you can do something inside, if not then you can use an {{else}} between and do another thing over there.
{{#is name "Category Name"}}
<div class="tooltip1">{{name}}<span class="tooltiptext">{{excerpt description}}</span></div>
{{else}}
<span class="blocks-item-title">{{name}}</span>
{{/is}}
I used the "Excerpt description" to add the value of the tooltip inside Zendesk, and no need to add it manually in the home_page.hbs code.
I added 3 different tooltips and working fine now. Thank you all!
I am using Dotclear blog software, which provide a widget for the blog categories with a resulting code looking like this:
<div class="widget categories ">
<h3>Catégories</h3>
<ul>
<li>Cat1</li>
<li>Cat2
<ul>
<li>Subcat1</li>
</ul>
</li>
<li>Cat3
<ul>
<li>Subcat2</li>
</ul>
</li>
<li>Cat4</li>
</ul>
</div>
What I am trying to achieve here is using the <a> tag (for Cat2 or Cat3) as header (or a dynamically added <h4> around it) and fold the subcategory list. If I call the accordion like this :
$(".categories").accordion({
header: "li:has(ul) > a",
});
the accordion does work, but when I click on the link it just folds/unfolds the item and doesn’t let me go to the link target (the category page, that is).
I tried wrapping the <a> in an <h4> tag and use that tag as header, but it doesn’t seem to make a difference. Is there a way to do what I seek or should I abandon the idea of collapsing subcategories and have functioning links within the header ?
Thanks for your time.
Well, after reading your comments, I realized I was using the wrong tool to achieve my objective. I have replaced jquery-ui’s accordion with a treemenu jQuery plugin which is actually made for my use. Sorry to have wasted your time and thanks for your kind answers.
I can't seem to get Watir to locate a link on a page, which reveals another two fields. But, the link isn't a link, but a li that is a legend:
<li>
<legend role="button" tabindex="1" id="alpha-trigger" class="trigger legend shown " aria-label="alpha Search"" for="alpha">
Alpha Search
</legend>
</li>
I've tried using .exists? and looking for that dom object, but I've always come up empty. I see that it isn't a timing issue, as I'm not using headless for chrome.
Can anybody recommend how I can see this link to .click it? Cheers
The problem is that the element is in a shadow DOM, which does not yet have support in Selenium/Watir. At this point, the fastest solution seems to be executing everything by JavaScript.
For example, clicking the Marriage link:
browser.execute_script('return document
.querySelector("fs-search-form")
.shadowRoot
.querySelector("[group-id=event]")
.shadowRoot
.querySelector("#marriage-trigger")
.click();')
Note that you need to explicitly navigate to the element containing the shadow DOM and call shadowRoot to go inside.
I had a bot that would apply on indeed.com jobs. It would collect jobs then apply to them one by one. However, indeed recently made things a lot harder. Used to be able to just locate the button's id and use that but now the id is dynamic: changes from different job positions.
Does anyone know how it is possible to link to the "Apply Now" button (not really a botton) if the code below is:
<a class="indeed-apply-button" href="javascript:void(0);" id="indeed-ia-1532137767182-0">
<span class="indeed-apply-button-inner" id="indeed-ia-1532137767182-0inner">
<span class="indeed-apply-button-label" id="indeed-ia-1532137767182-0label">Apply Now</span>
<span class="indeed-apply-button-cm">
<img src="https://d3fw5vlhllyvee.cloudfront.net/indeedapply/s/14096d1/check.png" style="border: 0px;">
</span>
</span>
</a>
Many ways to click that element, the 3 simplest would probably be
click_link('Apply Now') # find link by partial text and click it
click_link(class: 'indeed-apply-button') # find and click link by class
find('span', text: 'Apply Now').click # find span by text and click in it
in my case I had to select an option shown using js-chosen library inside an iframe. So, its not a regular select tag. So had to do following to select:-
within_frame(find("#cci_form")) do
find('#showing_listing_id_chosen').click
find('[data-option-array-index="2"]').click
end
But, no luck using
find('.active-result[data-option-array-index="2"]').click
or
find('li[data-option-array-index="2"]').click
I am trying to bind color input using ng-model. In the following code:
<ul>
<li ng-repeat="col in ctrl.maincols">
<p>{{col.attr}}:{{col.value}}
<input type="color" ng-model="col.value"></p>
</li>
</ul>
there is no reaction when I select a colour. However if I change the input type to text everything works fine.
Any suggestions for making this work, or an alternative to ng-model for this use case?
It seems an editor for <input type="color"> is not yet implemented
see https://github.com/angular/angular.dart/blob/master/lib/directive/ng_model.dart
You could try to copy a similar and customize it to your needs.
You could also create a feature request. Please add a link here if you do.