I'm currently trying to find this tab and click on it. I'm trying to find a easier way of clicking on this button. In my code, I tried to use find command and it's unable to find this tab.
<div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab">Animals</div>
Code:
find('tab[div=Animals]').click
Not sure what I'm doing wrong.
It looks like you need to study CSS selectors a bit more. 'Animals' is text content and CSS does not provide a way to query on text content. In Capybara you can use the text option to filter matching nodes by their text content so combining valid CSS with the text filter like
find('div[role="tab"]', text: 'Animals').click
or
find('div.ant-tabs-tab', text: 'Animals').click
would be ways of clicking on that element
Note: I would recommend https://flukeout.github.io/ to learn what you can and can't do with CSS selectors.
Since I upgraded from Pandoc v1.19 to 2.9, decorative images are not exported as expected anymore.
First of all, when generating HTML from , in v1.19 a <p class="figure"> structure was wrapped around the image, but now it's only a <p>:
<p>
<img src="test.jpg">
</p>
This makes it harder to style in line with other images that have an alternative text.
But what's really a problem here: there's no alt="" attribute produced anymore! This means that e.g. screen readers will not recognise this as a decorative image anymore.
So let's see what happens to an image with an actual alternative text, e.g. when generating HTML from :
<div class="figure">
<img src="test.jpg" alt="">
<p class="caption">Hello</p>
</div>
Here we get a class="figure" in the surrounding element, but now it's a <div> instead of a <p> (I don't bother too much about this, but again, it makes it harder to style everything the same).
What again is a big problem though is the fact that the alt attribute is now set empty: this prevents screen readers from perceiving them at all, which is horribly wrong! I guess that Pandoc concludes that having alternative text and caption would be redundant, which is correct, and that the caption below would be the right thing to show - which it is not.
The right structure would look something like this:
<div class="figure">
<img src="test.jpg" alt="Hello"><!-- Leave the alternative text on the image -->
<p class="caption" aria-hidden="true">Hello</p><!-- Hide the redundant visual alternative text from screen readers -->
</div>
Any reason why this behaviour would make sense? Can it be changed somehow? Otherwise I will have to fiddle around with some post-processing JavaScript...
The  example is no longer treated as a figure, because pandoc now requires that
the image is the only element in a paragraph, and
it has a caption.
Wrapping of figures with <div> happens when exporting to HTML4. Using the latest pandoc 2.9.2.1 and running pandoc -t html5 on the input 
<figure>
<img src="test.jpg" alt="" /><figcaption>Hello</figcaption>
</figure>
The rationale for emitting an empty alt attribute is that screen readers would read the caption twice: first the alt, then the figcaption. Your suggestion seems much better, please open an issue.
If you can't wait for a new release, then use a Lua filter to create figures the way you like:
function Para (p)
if #p.content == 1 and p.content[1].t == "Image" then
local image = p.content[1]
local figure_content = pandoc.List{}
figure_content:insert(image)
figure_content:insert(
pandoc.RawInline('html', '\n<p class=caption aria-hidden="true">'))
figure_content:extend(image.caption)
figure_content:insert(pandoc.RawInline('html', '</p>'))
local attr = pandoc.Attr("", {"figure"})
return pandoc.Div({pandoc.Plain(figure_content)}, attr)
end
end
Perhaps I have to manage with bad HTML programming (check here).
In below code <i> doesnt represent a word in italics but an icon. Which I want to click but which WATIR is suitable for this?
I went to this post and I tried button and image methods but none worked.
I tried it by creating its page object (as it is the way I want it to be).
button(:attendees_list, :title => 'attendees') and image(:attendees_list, :title => 'attendees')
used it as
on(UpcomingWebinarPage).attendees_list
<a class="webinar" href="javascript:;">
<i class="icon" title="attendees"></i>
<span class="number">12</span>
</a>
In page-object, you'd want to create a generic element. Because this is a strange case, I would use XPath to identify it.
element(:attendees_list, :i, xpath: "//i[#title='attendees']")
And click it with:
page.attendees_list_element.click
I think, you can try to use element :
b.element(:title, 'attendees').click
I have a problem that has taken me days to figure out.
The social follow icons I get from AddThis website appear vertically instead of horizontally. I want to make it appear horizontally but I have found that it is impossible to do so.
Below is the code I got from https://www.addthis.com/get/follow
<!-- AddThis Follow BEGIN -->
<p>Follow Us</p>
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="TheMostafaAbedi"></a>
<a class="addthis_button_twitter_follow" addthis:userid="theMostafaAbedi"></a>
<a class="addthis_button_google_follow" addthis:userid="106914586115617584077"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-506a607f490b6601"></script>
<!-- AddThis Follow END -->
The specific page that the problem occurs is http://www.under-review.com/about under Mostafa Abedi description.
You've got line breaks between lines of code, which makes the icons go one below the other. You're most likely using the WordPress editor to insert the code, which alters the formatting.
If you're using Visual editor, switch to HTML editor and give it a try.
If you're using HTML editor, at the very least remove all the spacing between items, making them placed in one line, which would prohibit WordPress from entering new lines, i.e.:
<a class="addthis_button_facebook_follow" addthis:userid="TheMostafaAbedi"></a><a class="addthis_button_twitter_follow" addthis:userid="theMostafaAbedi"></a><a class="addthis_button_google_follow" addthis:userid="106914586115617584077"></a>
From my experience, about 90% of all formatting issues are fixed by good code and as a rule I follow W3C. I suggest you validate against that because at the moment it fails (both the HTML and CSS fails)
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Funder-review.com%2Fabout%2F
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Funder-review.com%2Fabout%2F
Rather than add Pin It buttons through our site, I would like to simply control what images show up in Pinterest's "Find Image" results if a user decides to pin one of our URLs.
As of now, "Find Images" allows the user to scroll through the images it finds on the page so they can select which image to pin. The "found" images start with the first jpg in the html file, I'm assuming (could that be a bad assumption??). On our site, this forces a user to scroll through about 15 navigation and promotion images before arriving at the featured product image. Is there any way to specify this image to show first in those results? Maybe through a meta tag, or by adding a class or id to the element?
Without a public Pinterest API, this seems like just guesswork, but I wanted to see if anyone else has run into this, or solved this. Thanks.
A lot of search results including the Pinterest Help Center talk about using nopin in HTML elements, which is invalid HTML. What they don't document is a data attribute to the same (well formed) effect.
<img src="foobar" data-pin-nopin="true" />
Adding the nopin attribute will exclude the image from appearing on Pinterest:
<img src="..." nopin>
I solved this by simply loading the image before all others in the page. In this case, I gave it width="0" and height="0" (you could also give it style="position: absolute; left: -9999px; top: 0;" just to be sure).
This won't break the page layout, but will force Pinterest to find this image first. The only downside is that the browser will load the page a few milliseconds slower, but if you're reusing this image later in the page anyway, you should make up for lost time then.
Pinterest will find any images from <img> tags (it will ignore CSS background images) that are at least 80px x 80px.
The order the images show up on in the Pinterest list is determined by the order they are specified in the HTML.
As you have discovered, you can alter the CSS of an image to "hide it" without actually hiding it by either moving it off the page with absolute positioning or 0 height and width. Any images that are set to display: none will not be picked up by Pinterest.
You can instruct the share preview to only grab specific images from the page by using the “image_include” configuration option. First, set image_include to your desired class name (id selectors are not allowed, only class selectors), then add that same class name to each of the images on the page that should be grabbed. For image_include, don’t add the ‘.’ selector. Here’s an example:
<script type="text/javascript">
var addthis_config = {
image_include: "at_include"
}
</script>
Once image_include has been defined with a class, add that class to the desired images on the page. In this example, the only images on the page that will be grabbed, will be the images with the at_include class (img1.jpg and img3.jpg).
<img src="http://www.example.com/img1.jpg" class="at_include" />
<img src="http://www.example.com/img2.jpg" />
<img src="http://www.example.com/img3.jpg" class="at_include" />
I was reading this blog which suggests the following:
Use the global no pin flag to prevent pinning on the whole site
Manually add the Pin It widget to those images you want to make pin-able.
Given Pinterest's webmaster tools appear to only have a blacklist, rather than a whitelist option (that you are seeking), this could be a possible solution. Another stated benefit of this is you can also supply suggested pin text through the Pin It widget.
Only downside to this I guess is that it may break the user's own Pin tools. Pinterest does allow you to supply a custom "denied" message, so I guess you can say "please use our site's pin buttons directly".
I've tried this, and it works. It seems like a decent approach, at least until Pinterest sees fit to add some better tools, such as an image whitelist option. The main drawback is needing to add Pin-it buttons on every image you want to enable for your users & your users may be annoyed that they can't pin anything.
Unfortunately, there is no way to mark several images on your page as preferred, but you can mark one image to stay at the top of your images when someone pin it. Specify this meta-tag in <head>:
<meta property="og:image" content="http://YOUR-DOMAIN.com/IMAGE.jpg"/>
I have not found official confirmation for this feature, but it works great with addthis sharing plugin.
Add this script before the actual call to pinterest. And set images that you do not want to show with a class called 'nopin'
<script type="text/javascript">
var addthis_config =
{
image_exclude:'nopin'
}
</script>
<div id="toolbox" class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_tumblr"></a>
<a class="addthis_button_pinterest"></a>
</div>
</div>
If anyone is using AddThis, please check this thread: http://support.addthis.com/customer/portal/questions/1570789
AddThis has some, uh, unique functionality that affects the image picker presented. As in, when there is only one image on the page, it ignores the defined og:image.
If you set that lone image to be excluded, then the image picker won't show any images for selection.