I'm trying to use an md-tooltip for a favicon contained within an md-list-item. The intended behaviour is for the tooltip to fire when the mouse is hovering over the icon. Here is the code:
<md-list-item ng-repeat="window in windows track by window.id" ng-click="restoreWindow($index)">
<div ng-repeat="tab in window.tabs.slice(0, 4) track by tab.id">
<img class="tab-favicon" src="{{tab.favIconUrl}}">
<md-tooltip>{{tab.title}}</md-tooltip>
</div>
</md-list-item>
Unfortunately, the md-tooltips fail to fire when using the above code. I've also tried the solution posted here and that didn't work either.
A possible solution involves placing img and md-tooltip inside an md-button, but that makes the spaces between each icon way too large. Overriding the md-button's margin in CSS failed to fix this spacing issue.
Related
Hello I have the following code
<div class="nhsuk-grid-column-one-third" data-test="recent-update">
<div class="nhsuk-card nhsuk-card--clickable">
<a class="nhsuk-card__link" href="{{ fullUpdateLink(0) }}" data-test="full-update-link-0">
<div class="nhsuk-card__content">
<span class="nhsuk-caption-m nhsuk-caption--bottom">{{ updates[0].date }}</span>
<h3 class="nhsuk-card__heading">{{ updates[0].title }}</h3>
<p class="nhsuk-card__description">{{ updates[0].landingPageContent | safe }}</p>
</div>
</a>
</div>
I would like to change that links background to yellow upon clicking it with css. I have tried the following css and it doesnt work:
.nhsuk-card__link a:active {
background-color: #ffeb3b !important;
}
I think its because of the elements inside of the tag, I have tried without the div/span/h3/p elements and just putting in the word 'hello' and it works with that.
Active will only so long as the action is currently 'active.' It works great for, say, clicking and holding a button to give it a more tactile look, but the changes will revert as soon as you let go of the click. :active won't listen for a click and keep the changes when the active state ends. Unfortunately, it just doesn't work that way.
Your best bet is to use an event listener with JS to add/change the div class on clicks. If you haven't used JS before, this can be a great practice, as you can do it with just a few lines of code. This tutorial can walk you through it: https://www.youtube.com/watch?v=jznWWxPZkvQ
On our (Vue.js v.2) webpage we have a section where you can swipe between cards, or by pressing "left" and "right" button. This swiping section is written with vanilla JS, and no fancy library. In order to have the adjacent visible when swiping, I need to have all of them visible in the DOM tree, but hiding them from the viewer. I have made it so all the unfocused cards are aria-hidden, and it works great when using ChromeVox. The problem is that when using VoiceOver, and I click the "right" button, and immediately tab down to the card, it will read out the card to the left, and also get trapped there since the card is aria-hidden. Code-wise the change from aria-visible to aria-hidden happens as soon as the button is pressed, but it seems like VoiceOver has already decided that when I am focusing on the "right" button, that the next element should be card 5 (for instance). If I wait around 1 or 2 seconds after clicking the "right" button, it will change the "next" element, and focus on the correct one (card 6) when I tab down. Is there any way to get around this, so it will focus only on the aria-visible element? Maybe a way to "force refresh" VoiceOver's stack of elements to read next? Maybe if I remove the message being read out when clicking the button, it will refresh immediately? I still haven't found of doing either of those things. I created a low quality flowchart to illustrate the problem better. What I want is for it to behave like ChromeVox.
I have tried several methods of getting this to work now, and it feels like it's a bug with VoiceOver. Some of the (desperate) attempts I've tried: setting tabindex=-1, role=presentation, changing the ID of "right" button dynamically as I navigate between cards, creating an empty div with a dynamic ID below the button, using aria-flowto, dynamically setting aria-describedby on the "next" element, and different variations between these and some other stuff I can't remember.
Eventually I found a solution that kinda works. I'm not very happy about it, but it's better than nothing. What I did was to make the title inside the card aria-hidden, and creating a currentHeader variable in store. I created an sr-only & aria-visible title above the swiping section, where the v-html points to the currentHeader variable. This way, the "next" element for the "right" button will always be the same element, but content will change after I click the button. It's not a perfect solution, and for some reason it makes VoiceOver "halt" when trying to go to the next element immediately after clicking the button, but at least the user won't read the wrong text and get trapped. Here's a pseudocode illustration of how I did it if my explaination was confusing:
// old solution // old swiping-section
<button id="left" /> <div v-for="element in elements" />
<button id="right" /> <h3 v-html="element.title" />
<swiping-section /> <p v-html="element.desc" />
</div>
// new solution // new swiping section
<button id="left" /> <div v-for="element in elements" />
<button id="right" /> <h3 aria-hidden="true" "v-html="element.title" />
<h3 class="sr-only" v-html="currentHeader" /> <p v-html="element.desc" />
<swiping-section /> </div>
If anyone finds a better way to do it, please post your solution.
I have checkbox insde a link. In all browsers except Chrome, when clicking on the checkbox you follow the link (instead of just having the checkbox become selected).
How do I avoid this behaviour?
Demo (hover over one of the product images to see the checkbox):
http://livedemo07571.prestatrend.com/category.php?id_category=9
And here’s the code in question:
<a href="http://livedemo07571.prestatrend.com/product.php?id_product=25" class="product_img_link">
<img src="http://livedemo07571.prestatrend.com/img/p/25-65-large.jpg" height="469" width="469" alt="Crew Neck Jumper" />
<span class="new">New</span>
<div class="right_block large">
<h3 class="large">Crew Neck Jumper</h3>
<span class="product_arrow"></span>
<p class="availability_container"><span class="availability">Available</span></p>
<span class="slash">/</span>
<p class="price_container"><span class="price" style="display: inline;">$2,390.00</span></p>
<p class="compare large"><input type="checkbox" class="comparator" id="comparator_item_25" value="comparator_item_25" /> <label for="comparator_item_25">Select to compare</label></p>
</div>
</a>
This isn't valid HTML (see report). The way to avoid this is, quite simply, to include only text or images inside an anchor tag, and move the checkbox outside. You could use some jQuery to add a click event to the box which would navigate to the next page.
If you want for-sure don't want to move it outside the <a> then you'd have to have an onclick="return false;" and add a listener with jQuery that toggles it when its clicked. I'm not sure if this would work in all browsers, and your best option is just to do it a standards friendly way.
I think this happen because you have the Div (block element) is inside the A (inline element) tag and by default the event will bubble up soon as you click the checkbox.
Even if HTML 5 has made the exception for the A tag and now allow a block element to be nested within that inline element. To get that working the same accross all browser you'll have to wait they all support the html 5 features
1) try with a different doctype
2) build the div outside the A has the link is not required to be executed
My test shows that webdriver fire_event("onmouseover") takes no effect when page has mootools lib.
when remove mootools lib, fire_event("onmouseover") takes effect.
how can I get a workaround?
html page is following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type='text/javascript' src='http://demos111.mootools.net/demos/mootools.svn.js'></script></head>
<body>
<div onmouseover="document.getElementById('id6').style.display='block';"
onmouseout="document.getElementById('id6').style.display='none';"
style="overflow:hidden;" id="id61" class="trbgcolor0">
<div style="height: 18px;">
<div style="float: left; ">
<b>plan category 2682</b>
<a class="unline"> add 1</a>
</div>
<div style="display: none;" id="id6">
| <a class="unline">edit 1</a>
| <a class="unline">delete</a>
</div>
</div>
</div>
</body>
</html>
watir is following:
require "rubygems"
require "watir-webdriver"
require 'test/unit'
class TC_article_example < Test::Unit::TestCase
def test_search
browser = Watir::Browser.new :firefox
browser.goto("http://192.168.88.120/mgt/login/t2.html")
sleep 1
oo = browser.div(:id=>"id61")
oo.fire_event "onmouseover"
puts "2 001 "
end
end
I'd be inclined to ask the mootools folks about this, offhand I'd guess it's somehow intercepting the event, so the browser element never really "see's" it when you fire it, but that's just a guess.
Their tools might also be adding some other kind of CSS logic or something else that governs if this item is hidden or visible, I've seen that a lot with rules that use a combination of element type and class along with the :hover psuedoclass to implement menus
For controls that use exclusively CSS to control the element visibility, I've not been able to find a way (yet) to cause a 'hover' state that is recognized at the browser level such that the CSS :hover rules take effect and cause the menu element(s) to appear.
The solution may be to force a change in the element's visibility by essentially executing the same script code that would fire via onmouseover and see if that makes the element show up.
browser.execute_script("document.getElementById('id6').style.display='block';")
If that does not work, you might be able to manipulate things at the CSS level by temporarily altering the particular style control. I've done this via Jquery (since our app already uses it) using this general format
browser.execute_script("jQuery('CSS-Rule-Name').css({display: 'block'});")
In my particular case the code to expose all the pulldown menus ends up looking like this
browser.execute_script("jQuery('.navigation #secondary_nav > li ul.tertiary_nav').css({display: 'block'});")
That would have to be adapted to your code of course, as the CSS rule will likely be different. The way I found the rule is to use the developer tools, select the container element for the menu in the dom, then chose 'trace styles' and expand the 'display' property which should give you the specific CSS rule (in my case it is .navigation #secondary_nav > li ul.tertiary_nav) that is controlling the display (usually 'none' or 'block') of the element. (there will be other similar rules with :hover added that take effect when the browser determines that the mouse is hovering over the applicable element )
Its a tiny bit of a kludge, but it does what is needed, which is make the menu item visible so you can then use things like the .click method on them.
If that action does not cause a page refresh, you can hide the menu again using the same script but setting it to 'none' instead of 'block'
a workaound is :browser.execute_script("abc(true)")
onmouseover="abc(true);"
onmouseout="abc(false)"
In creating this webtop app, I've created stacks of contenteditable divs exactly like this one, which is part of a homemade widget. But for some reason this one isn't working.
<div class="draft combobox" title="Draft">
<ul>
<li>
</li>
</ul>
<div class="text" contentEditable="true"> <!-- Right Here -->
<img class="arrow button" src="icons/scroll-down-white.png" />
Now just a little background around the issue. I am in the process of rewriting the html, well turning it into haml anyway (with Phamlp). It was just getting too illegible. I'm also using lessphp on the css.
These are the only changes I've made. The output remains the same, only now the contenteditable div doesn't work... It accepts focus, but there's no cursor... and no response to key events.
Also I'm yet to attach any javascript to it. So there's nothing going on there that could be hindering it.
So what's wrong with this div!
OK I worked it out... turned out that I had '-webkit-user-select:none' set in the css on an ancestor div!