I have a website featuring a long list of names.
To make it more oversee-able, I'd like to put a text link in to
(on load) show all
(on clicking word "pears") hide all elements with class="apple"
(on clicking word "apples") hide all elements with class="pear"
(on clicking "show all") show all
I suppose it'd be like a really simplified version of "as you type" filtering.
Does a plug-in exist for this? I don't even know where to start!
Just bumped into this post, I know it's old but to be honest are none of the given answers pretty helpful. In my opinion, you can filter out the elements using the filter with :not, as in filter(':not()').
As Joel Potter stated, using $("span[class='apple']").hide(); will only select the spans with exactly one classname, apple. If multiple classes are present (which is highly likely) then such an approach would not work.
If you click on a word, e.g. pears, you can then filter out the elements that do not contain the class pears.
$('span').show().filter(':not(.pears)').hide();
and you're done ;)
hmm.. if you had a list like the following:
<span class="apple">red apple</span>
<span class="apple">green apple</span>
<span class="pear">big pear</span>
<span class="pear">little pear</span>
the following would show all:
$("span.*").show();
the following would hide all elements with 'class="apple"':
$("span[class='apple']").hide();
or you could go with hiding everything that doesn't have 'class="pear"':
$("span[class!='pear']").hide();
To filter out elements that contain a given class or any other attribute value, using the Attribute Contains Word Selector would be a good solution:
$("span").filter("[class~='apple']")
Actually, for the class attribute, it's even easier to just write:
$("span").filter(".apple") // or:
$("span.apple")
[This is also what Joel Potter wrote in his comment to this answer.]
That way you'll be able to match all of the below:
<span class="apple">...</span>
<span class="apple fruit">...</span>
<span class="fruit apple sweet">...</span>
So whenever you're not 100% sure that you'll only have a single class set on an element, use the ~= operator.
Related
I have following layout in my web application:
To make it accessibility compliant, is there a need to relate "Al Allbrook" with "Requester" label? If so, how we can achieve that?
"Al Allbrook" is a link to user profile.
If they are not related, how come srceen reader will know "Al Allbrook" is a requester? Same in case of "Site".
In additon to what #andy said, you could also use a table. The first column could have a "requestor" table heading (<th scope="col">). The heading itself could be visually hidden if you don't want it to "clutter" the display but still be available to screen reader (SR) users. The second column would be something like "contact info" and the last column is "site". This allows a SR user to navigate across the row of the table and they'll hear the column heading before the data cell.
Of course, you can do a combination of these techniques. Have a table and have extra information on the links. I would recommend aria-labelledby instead of aria-describedby. While both attributes will cause the extra information to be read by a SR (*), only the aria-labelledby attribute will be displayed in the list of links.
(*) Some SRs announce the aria-describedby attribute directly but other SRs will just tell you that there is a description associated with the link and you have to hit a different shortcut key to hear the description.
The nice thing about both attributes is that the element can refer to itself as part of the label. Kind of a recursive labeling but the "Accessible Name and Description Computation" rules handle the recursion.
if computing a name, and the current node has an aria-labelledby attribute that contains at least one valid IDREF, and the current node is not already part of an aria-labelledby traversal, process its IDREFs in the order they occur
It's probably easier to see an example of this.
<span id="comma" style="display:none">,</span>
...
<span id="requestor">Requestor</span>
Al Allbrook
Several things to note.
First is that the link is referring to itself in the aria-labelledby attribute (the 'myself' id).
Second is that I'm using a trick with screen readers by adding a comma in the label, "Al Allbrook, Requestor" so that the SR has a slight pause when reading the label, "Al Allbrook <pause> Requestor", rather than hearing it as if the guy's name was "Al Allbrook Requestor". Note that the comma itself has display:none so it's not visible, but since the comma element's ID is listed in aria-labelledby, it'll still be used. (See rule 2A in the Accessible Name url above)
Lastly, my example used a <span> for "Requestor" but you might want it to be a heading (<h3> or <h4> or whatever level is appropriate) instead.
For example:
<span id="comma" style="display:none">,</span>
...
<h3 id="requestor">Requestor</h3>
Al Allbrook
And then all this code could be in a <td> if you're using a table.
There is different ways to navigate through a site with a screenreader, so it depends on the navigation mode the user is using at the moment.
In DOM order
In this case, if your "Requester" is before the link in DOM, it will be read before the person's name. Also, the text right before and after a link can be read by means of certain shortcuts.
By accessing a list of links
There is different lists screen reader users can request, f.e. list of all headers, or a list of all links on the page.
If it's important to you to have the "requester" read when navigating to the link directly, you can link the two elements by means of aria-describedby or aria-labelledby.
Alternatively, you could add the text again to the link itself, hidden visually. Like "Al Allbrook, Requester".
lets say you have html like this,
<span class="full-sentence">
<span class="subject">She</span><span class="verb">loves</span><span class="object">him</span>
.</span>
What the user sees is,
She loves him.
Using a wysiwyg HTML inline editor, you could change the "She loves him." string into something else, like "He loves her coat." for example, but you would have no way of adding the span class "noun" to the word coat in the wysiwyg editor without displaying the source code to some extent.
I'm trying to find a way to do this, first by displaying the span classes text, such as "verb" from the , display the "verb" string in the output, and allowing it to be changed inline, and have it transform the string inside the sourcecode right inside the parenthesis of class=""
I'm trying to accomplish this WITHOUT displaying anything irrelevant, such as the <span class=""></span> characters. All the user really needs to work with is the spot inside the "" marks, the text itself, and have the ability to add new span class boundaries, by highlighting a string and pressing some kind of button that wraps that highlighted string in <span class=""></span> and then allows you to write classes to fill the "".
It would ideally look something like this, without the awkward spacing between text strings as in a libreoffice writer table, which this is a picture of,
![enter image description here][2]
The default ckeditor shows parent elements in the bottom bar, and permits right click to edit properties of select elements. You could use a bar or a mouseover to edit and display the word type, and you would also want some cleanup code for when people paste html and join two words etc.
From a technical perspective it's relatively trivial once you are clear on the interface you want to make your own custom WYSIWYG.
<div contenteditable="true">
Editable text...
</div>
I am looking to avoid using xpaths that are 'xpath position'. Reason being, the xpath can change and fail an automation test if a new object is on the page and shifts the expected xpath position.
But on some web pages, this is the only xpath I can find. For example, I am looking to click a tab called 'FooBar'.
If I use the Selenium IDE FireFox plugin, I get:
//td[12]/a/font
If I use the FirePath Firefox plugin, I get:
html/body/form/table[2]/tbody/tr/td[12]/font
If a new tab called "Hello, World" is added to the web page (before FooBar tab) then FooBar tab will change and have an xpath position of
//td[13]/a/font
What would you suggest to do?
TY!
Instead of using absolute xpath you could use relateive xpath which is short and more reliable.
Say
<td id="FooBar" name="FooBar">FooBar</td>
By.id("FooBar");
By.name("FooBar");
By.xpath("//td[text()='FooBar']") //exact match
By.xpath("//td[#id='FooBar']") //with any attribute value
By.xpath("//td[contains(text(),'oBar')]") //partial match with contains function
By.xpath("//td[starts-with(text(),'FooB')]") //partial match with startswith function
This blog post may be useful for you.
Relative xpath is good idea. relative css is even better(faster)
If possible suggest/request id for element.
Check also chrome -> check element -> copy css/xpath
Using //td is not a good idea because it will return all your td nodes. Any predicate such as //td[25] will be a very fragile selection because any td added to any previous table will change its result. Using plugins to generate XPath is great to find quickly what you want, but its always best to use it just as a starting point, and then analyze the structure of the file to write a locator that will be harder to break when changes occur.
The best locators are anchored to invariant values or attributes. Plugins usually won't suggest id or attribute anchors. They usually use absolute positional expressions. If can rewrite your locator path in terms of invariant structures in the file, you can then select the elements or text that you want relative to it.
For example, suppose you have
<body> ...
... lots of code....
<h1>header that has a special word</h1>
... other tags and text but not `h1` ...
<table id="some-id">
...
<td>some-invariant-text</td>
<td>other text</td>
<td>the field that you want</td>
...
The table has an ID. That's the best anchor. Now you can select the table as
//table[#id='some-id']
But many times you don't have the id, or even some other invariant attribute. You can still try to discover a pattern. For example: suppose that the last <h1> before the table you want contains a word you can match, you could still find the table using:
//table[preceding::h1[1][contains(.,'word')]]
Once you have the table, you can use relative axes to find the other nodes. Let's assume you want an td but there are no attributes on any tbody, tr, etc. You can still look for some invariant text. Tables usually have headers, or some fixed text which you can match. In the example above, if you find a td that is 2 fields before the one that you want, you could use:
//table[preceding::h1[1][contains(.,'word')]]/td[preceding-sibling::td[2][.='some-invariant-text']]
This is a simple example. If you apply some of these suggestions to the file you are working on, you can improve your XPath expression and make your selection code more robust.
I would like to replace opening and closing tag, leaving the content of tags and its attribute intact.
Here is what I have:
<div class="QText">Text to be kept</div>
to be replaced with
<span class="QText">Text to be kept</span>
I tried this expression which finds all expressions I want but there seems to be no way to replace found expressions.
<div class="QText">(.*?)</div>
Thanks in advance.
I think #AmitJoki's answer will work well enough in certain circumstances, but if you only want to replace div elements when they have an attribute or a specific set of attributes, then you would want to use a regex replacement with backreferences - how you specify and refer to a backreference, unfortunately, depends upon your chosen editor. Visual Studio has the most unique and annoying "flavor" of regex I know of, while Dreamweaver has a fairly typical implementation (both as well as I imagine whatever editor you're using do regex replacement - you just have to know the menu item or keystroke to bring up the dialog).
If memory serves, Dreamweaver has replacement options when you hit Ctrl+F, while you have to hit Ctrl+H, so try those.
Once you get a "Find" and "Replace" box, you would put something like what you have in your last example above: <div class="QText">(.*?)</div> or perhaps <div class="(QText|RText|SText)">(.*?)</div> into your "Find" box, then put something like <span class="QText">\1</span> or <span class="\1">\2</span> in the "Replacement" box. A few utilities might use $1 to refer to a backreference rather than \1, but you'll have to lookup help or experiment to be sure.
If you are using a language to run this expression, you need to tell us which language.
If you are using a specific editor to run this expression, you need to tell us which editor.
...and never forget the prevailing wisdom on regex and HTML
Just replace div.
var s="<div class='QText'>Text to be kept</div>";
alert(s.replace(/div/g,"span"));
Demo: http://jsfiddle.net/9sgvP/
Mark it as answer if it helps ;)
Posted as requested
If its going to be literal like that, capture what's to be kept, then replace the rest,
Find: <div( class="QText">.*?</)div>
Replace: <span$1span>
anyone have an idea how to do this.
i need to get rid of forum views either by hide, delete, disable or any other way.
I assume you mean THREAD views in the text below:
Do a template search for $thread[views], and there should be a template called threadbit. If you want to quickly and easily obscure the views just delete $thread[views] and replace with or asterisks, or whatever you'd like.
If you want to remove the whole <td> it becomes more complicated. First you remove that <td>, and then in FORUMDISPLAY template you have to remove the <td> that contains $vbphrase[views] (do a search for it if you can't find it).
But I believe there may be some issue with removing that entire column, and any of the hardcoded colspan attributes among the templates. If so then you would have to reduce the colspan number by one. I'm not sure about the colspan part, it's been a long time since I edited the FORUMDISPLAY and threadbit templates.
Also, you will need to remove the Views from another location in the threadbit template:
title="<phrase 1="$thread[replycount]" 2="$thread[views]"
This shows up when you hover on top of the Last Post column. Just delete $thread[views] and it will show up blank.
i need 50 points to reply, sorry for keep using answer.
i was thinking of going 1 step futher and swapping the word hidden for a picture?
I used the word hidden just as a test to see if it would work which it does