I have a tooltip that has a link to an anchor but it seems like it is not going to the right anchor. Rollover the person and click on the "[+]" inside the tooltip.
To view the sample click here
It's because of this:
<a id="david" ...>
on the links. That's the first match for a #david URL - that will match either an id or a name. The <a name=... anchors lower down the document are being ignored.
You need to rename either the ids or the names, so that there's only one element with an id of david, or one anchor with a name of david.
There are two anchors with the same identifier.
The first using the modern approach:
<a id="laurence" title="Laurence Rabino - Web Multimedia">Laurence Rabino</a>
and the second using the Netscape 4 compatible approach (which, for some reason, is contentless):
<a name="laurence"></a>
The browser scrolls to the first one.
Change the identifiers so they don't conflict.
The problem is that you have all of your id's defined for the div's that contain everyone's picture. For example:
<a id="laurence">Laurence Rabino</a>
You need to move the ID's down to their appropriate locations in the "summary" section, so that when you click on one it links to that person's information. For example:
<p id="laurence">
Related
I need to click on an element with the following unique identifier:
<mat-icon
class="mat-icon notranslate icon-arrow-down-tail mat-icon-no-color"
fontset="icon-arrow-down-tail"
role="img"
aria-hidden="true">
::before
</mat-icon>
I think this is the proper way to select a custom-element in RSelenium:
down <- remDr$findElement(using="xpath", value="//mat-icon[#class='mat-icon.notranslate.icon-arrow-down-tail.mat-icon-no-color']")
The element is located in an iframe. I've switched to the iframe, but I imagine there could still be something more complex going on. I'm trying to narrow down what the source of the problem is.
So, my question is: did I properly select a custom element? If not, how do I do that? If I know I selected it properly, I can figure out where else to debug...
(Website is proprietary/requires a login or I'd share it).
If an element you wish to extract the value is in an Iframe, it needs to be switched focus first and then you can proceed to take the element by ID/Class
for example, I used to click a Button inside an Iframe from a site called "https://forexsb.com/historical-forex-data"
iframe_detect <- remDr$findElements(using = "xpath", value = "//iframe[#id='data-app-frame']")
remDr$switchToFrame(iframe_detect[[1]])
load_data_element <- remDr$findElement(using="xpath", value="//button[#id='btn-load-data']")
load_data_element$clickElement()
In above what you use of defining Class element:
down <- remDr$findElement(using="xpath", value="//mat-icon[#class='mat-icon.notranslate.icon-arrow-down-tail.mat-icon-no-color']")
I guess this is a proper full class identifier, since there is multiple name of class joint with dot operator. But in my experience, if using these can come out didn't work, I use just the first class name before the dot operator
so if I had to rewrite (note: only work if there are no more element have the same class name, or else it may take the whole element which match by the Class):
down <- remDr$findElement(using="xpath", value="//mat-icon[#class='mat-icon']")
I have a pdf image inside the anchor tag.I need to get the element and with that I need to click on the pdf link. Tried with element by Id but getting element not visible but it is visible.Kindly help in getting the element through css,struck in this for nearly 2 days.
<div class="az content-block">
<ol>
<li>{{'check.ant.label'|text}}</li>
<li>{{'check.bed.label'|text}}</li>
<li>{{'check.hin.label'|text}}<a id="checkPdfLink" ng-href="{{check.pdf}}" target="_blank"><span class="az icon-pdf"></span></a></li>
</ol>
</div>
Did you try with css Selector? If it is hard to find a unique ID, try right click on the inspect element of the pdf link and click on Copy Unique Selector and try to click on it.
element(by.css('paste your Unique Selector here')).click();
Hope this helps. :)
In a simple case, this is just:
element(by.id("checkPdfLink")).click();
But, since you are getting the "Element not visible" error, there could be several reasons for that. One, is that you may need to actually do something to make the element visible - open up a menu, or a dropdown. The other reason, could be the timing problem. Wait for the link to become clickable before clicking:
var EC = protractor.ExpectedConditions;
var pdfLink = element(by.id("checkPdfLink"));
browser.wait(EC.elementToBeClickable(pdfLink), 5000); // wait up to 5 seconds
pdfLink.click();
I am trying to extract content from a XHTML document-- in this document, within a div, there are a number of 'b' elements, each followed by a link.
For eg--
<div id="main">
<b> Bold text 1</b>
some link 1
<b> Bold text 2</b>
some link 2
<b> ABRACADABRA</b>
abracadbralink
</div>
Now, I want to extract the link 'abracadabralink'-- the problems are that, I dont know how many and elements are there before this specific link-- in different documents there are a different number of such elements- sometimes there are many links immediately after a single element-- all I do know is that the text for the element that occurs just before the link that I want, is always fixed.
So the only fixed information is that I want the link immediately after the element with known text-- how do I get this link using XQuery?
If I get it right, you are interested in the value of the #href attribute? This can be done with standard XPath syntax:
doc('yourdoc.xml')//*[. = ' abracadbralink']/#href/string()
For more information on XPath, I’d advise you to check out some online tutorials, such as http://www.w3schools.com/xpath/default.asp
I guess the following should work for you:
$yournode/b[. = ' ABRACADABRA']/following-sibling::a/#href/string()
I am trying to learn fundamentals of html and markings.
I want to create an anchor which containes two lines of information.
first line: the name of the link
second line: short explanation
e.g.
<a href='#'>
<span>Studies</span>
<span class="alt">-Information about studies</span>
</a>
Is this correct?
How should the following (2nd span) be modified if necessary?
Thank you
PS. Both lines need to be surrounded with span for css-styling.
First off, don't rule out using a br tag. This is a semantically-appropriate place for a br tag (forcing a hard break inside a line or paragraph of text). Plus, if you use a br tag, it may no longer be necessary to put either of the two lines of text in separate tags, unless you want to style them differently.
<a href='#'>
Studies<br/>
-Information about studies
</a>
Second, try viewing the HTML with stylesheets disabled (I do this in Firefox by pressing ctrl-shift-S, with a little help from the Web Developer extension). Is the browser able to render the content in an easy-to-read way based solely on the HTML provided? To some extent, the more readable the "unstyled" content appears, the more semantically-correct the HTML is.
Given that the second line of text seems to be secondary to the first line (a subtitle, not as important, possibly redundant or not entirely essential), putting the first line in a strong tag or putting the second line in a small tag are a couple ways to establish the relative importance of the two lines, if you wish to do so.
<a href='#'>
<strong>Studies</strong><br/>
-Information about studies
</a>
<a href='#'>
Studies<br/>
<small>-Information about studies</small>
</a>
There's some room for personal preference here. These are just two approaches.
It may be a little bit of a stretch using a small tag in a case like this, but it's not entirely inappropriate. A small tag is typically used for "fine print", attribution, disclaimers, or side comments. It doesn't semantically mean the text is small, but it does tend to be used for content that's secondary to something else (that clarifies something else). It should though only be used for text that's short in length.
And a strong tag doesn't have to be styled bold. In fact, that's the whole point of semantic markup: It doesn't specify or imply how the content will be styled; all it does is offer a hint to the meaning or context of the content. A strong tag can reasonably be given a style of font-weight:normal.
In order to achieve that those are in separate lines, try using the <div> tag instead. You can still specify a class for styling, the only difference is that <div>s are block-elements; each of them is rendered on a separate line. Here's the modified version of your code:
<a href='#'>
Studies
<div class="alt">-Information about studies</div>
</a>
Another, slightly more preferable way of doing that is by styling the elements to be block-elements. That can be used by setting the CSS display property to block. Something like:
<a href='#'>
Studies
<span class = "alt block">-Information about studies</span>
</a>
(Note that class = "alt block" means the element has both classes alt and block, and note also that the first <span> is removed because there's no need to style that node with anything).
CSS:
.block {
display: block;
}
Hope that helped you!
I've been working on a page where there are several entries contained in different <div>s. Each is only a title linked to a page, an image and a short description. However, the description may contain arbitrary tags, including <a> tags.
Since these are pretty straightforward and the actual link isn't that big, I've made it so a click on the <div> will call location.href = (link URL). However, that's a pretty sad thing, because it's browser-unfriendly: for instance, under Google Chrome, a middle-click on one of said <div>s won't open the link in a new tab.
Considering you shouldn't nest <a> tags, is it possible to make any element in XHTML behave like a link without resorting to Javascript?
I'm using XHTML 1.1, sent with the proper MIME type, and that's the only restriction I'm bound to.
Not really, no. Though it's worth reading Eric Meyer's thoughts on this. Also, it appears that HTML51 includes the capacity for any element to become a link, so it might be worth using that doctype instead of xhtml, if possible.
It's worth also adding that html 5 does allow for an <a> element to enclose block-level elements, see: http://www.brucelawson.co.uk/2008/any-element-linking-in-html-5/, example taken from the linked page:
Instead of:
<h3>Bruce Lawson as Obama's running mate!</h3>
<img src="bruce.jpg" alt="lovegod" />
<p>In answer to McCain's appointment of MILF, Sarah Palin, Obama hires DILF, Bruce Lawson, as his running mate. Read more!</p>
you can say:
<a href="story.htm">
<h3>Bruce Lawson as Obama's running mate!</h3>
<img src="bruce.jpg" alt="lovegod" />
<p>In answer to McCain's appointment of MILF, Sarah Palin, Obama hires DILF, Bruce Lawson, as his running mate. Read more!</p>
</a>
Updated to mention possible inaccuracy
1: I may have misinterpreted part of the document to which I linked, having tried to find support for my claim that '...appears that HTML5...any element to become a link' (in the W3C's html 5 overview) it doesn't seem to be there. I think I was over-encouraged when I saw Meyer's proposal to include that possibility.
I'm too gullible, and naive... =/
If you want a link to cover an entire div, an idea would be to create an empty <a> tag as the first child:
<div class="covered-div">
<a class="cover-link" href="/my-link"></a>
<!-- other content as usual -->
</div>
div.covered-div {
position: relative;
}
a.cover-link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
This works especially great when using <ul> to create block sections or slideshows and you want the whole slide to be a link (instead of simply the text on the slide). In the case of an <li> it's not valid to wrap it with an <a> so you'd have to put the cover link inside the item and use CSS to expand it over the entire <li> block.
Do note that having it as the first child means it will make other links or buttons inside the text unreachable by clicks. If you want them to be clickable, then you'd have to make it the last child instead.