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)"
Related
Well the real reason i need to know this is due to the working of my modal
In my modal's JavaScript code , its defined to trigger open modal window only when the class is "modal-button"
let open_modals = [];
$(function() {
// Get the button that opens the modal
// read all the control of any type which has class as modal-button
var btn = document.querySelectorAll(".modal-button");
Below is the html code which works perfectly along with this
<!-- Trigger/Open The Modal -->
Click Me
Although i want the text "Click Me" to not inherit the properties of class "modal-button" but still have that class ,so modal opening functionality is not broken. Hence i tried something like this...
<!-- Trigger/Open The Modal -->
<div class="modal-button">
<span class="text">Click Me</span>
</div
But it is breaking the modal opening functionality probably because the text-"Click Me" is not inhereting class "modal-button" due to the span tag
Hence i think i have to find an alternative of span tag for styling inline elements
Hopefully someone can give me a better approach to this
Thanks in advance
There's nothing stopping you from having two classes on the same element like this:
Click Me
The second class listed will take priority over the first for styling, but the element will still be found by any CSS query that looks for the first class.
I have a div tag with some content getting loaded inside it. The content inside can have buttons, anchor elements, etc. which are focusable. I do not have control over the content but I can modify the 'div' tag attributes.
My problem is the focus still goes to the content (anchor, buttons, etc.) even if I specify the tabIndex -1 to the div tag.
<!-- HTML content here -->
<div tabindex="-1" id="externalContent">
<div>
...
<button>click me</button> <!-- Focus shouldn't come here -->
</div>
</div>
<!-- HTML content here -->
Is there a way to skip the entire content while tabbing ? It's certainly not working with the above code.
Not sure why nobody has mentioned visibility: hidden yet. Setting display: none can in some cases mess up logic when dealing with dimensions of non-visual elements. visibility will persist the dimensions just like opacity: 0 would do, but also disable any tabbable children.
Example:
<div style="visibility: hidden;">
I'm only tabbable if my parent is visible!
</div>
It is possible leave an element BOTH visible and unfocusable, together with its children.
It's done via the HTML property inert: https://html.spec.whatwg.org/multipage/interaction.html#inert.
It's not widely supported yet, but there is a polyfill: https://github.com/WICG/inert.
npm install --save wicg-inert
require('wicg-inert')
<section inert>
I am visible, but not focusable!
</section>
Setting tabindex="-1" allows you to set an element’s focus with script, but does not put it in the tab order of the page. It also does not pull the children of something out of keyboard tab order.
tabindex="-1" is handy when you need to move focus to something you have updated via script or outside of user action.
If you are trying to remove an element from tabindex altogether, whether for screen readers or keyboard users, you will likely have to choose between one of these:
Hide it altogether (via display: none),
Use script on the element so that when it receives focus, the script shifts the focus somewhere else.
Without context (a working URL, a reason that you want to do this), this sounds very much like the opposite of accessibility. I encourage you not to mess with focus unless you have a very good reason.
The nearest you can go is using an iframe element, injecting your HTML inside using javascript.
first link
<iframe id="iframeid" tabindex="-1"></iframe>
second link
<script>
document.getElementById('iframeid').contentWindow.document.body.innerHTML="<button>click me</button>";
</script>
But, this will lead to accessibility problems, like announcing links or buttons which can't be accessed by your keyboard.
[tab-index="-1"] > * {
visibility: hidden;
}
This hides any interactive children from tab navigation or mouse clicks, but leaves the parent in the shadow DOM and leaves all sizes of parent and children.
For making tabindex -1 for child elements, lets say you have a wrapper div,
// answer with respect to react, when we don't want grid filter to be accessible if its collapsed
//this answer is for a special case - where we dont have refs and tabIndex Props does matter for big nested elements
// Render method
// if Input and Button are from some kind(eg material UI) of Libraries which dont get tabIndex as a prop and doesnt give refs.
render() {
return (
<div id="wrapper" tabIndex={isCollapsed ? -1 : 0 } >
<div>
<Input />
</div>
<div>
<Button />
</div>
</div>
)
}
componentDidMount() {
this.changeTabIndex()
}
componentDidUpdate(prevProps, prevState){
if(prevState.isCollapsed !== this.state.isCollapsed) {
this.changeTabIndex();
}
}
changeTabIndex() {
const wrapper = document.getElementById("wrapper");
const buttons = wrapper.getElementsByTagName("button");
const inputs = wrapper.getElementsByTagName("input");
const arr = Array.from(buttons).concat(Array.from(inputs));
arr.foreach((elem) => { elem.setAttribute("tabIndex", this.state.isCollapsed ? -1 : 0 )});
}
I have a website that is primarily used in K-12 schools. I have some social media buttons on it like Facebook 'like' and Pinterest 'pin it'. However, I'd like to have these buttons be hidden....where you have to click once on something (like an image that is covering them up but disappears when clicked....or a tab that just sort of scrolls away to reveal the buttons behind it).
The reason for this is because these sites are usually blocked in schools (I realize there's probably nothing I can do about this) and these buttons look kind of ugly when they're blocked (it'll show a question mark or or something in place of the button in these cases). However, I do want the people who do not have them blocked to be able to access and see them easily.
I am in search of a simple solution to this where the buttons wouldn't be immediately visible until you click on something.
If you're using JQuery or any other support library, you would have plenty of way to achieve your goal, even with a lot of visual effects.
Anyway, the simplest way to achieve it is by playing with the "display" attribute of the element.
Add this in your html head tag:
<script type="text/javascript>
function showElement(){
// get a reference to your element, or it's container
var myElement = document.getElementById('elementId');
myElement.style.display = '';
hideImage();
}
function hideImage(){
var myElement = document.getElementById('imageId');
myElement.style.display = 'none';
}
</script>
Now add a click event on the element you want to use to show your hidden content:
<img id="imageId" onclick="showElement()" src="..."/>
If you want to hide your "hidden" element by default, add a inline style:
<div id="elementId" style="display:none">...your buttons here...</div>
Obviously, there are a lot of better ways to achieve it (eg. changing css classes), but I think you would be able to work with the above instructions.
Edited to improve the answer:
Create an HTML structure like the following:
<div>
<img id="imageId" alt="" src="..." onclick="showElement()">
<div id="elementId" style="display:none">
<!-- your buttons, anchors or anything else you want to be hidden by default-->
</div>
</div>
So, when you click the image, the buttons appear and the image disappear.
Thanks for your help! I tried this and it works well. I think it was a pretty simple solution (even though I don't know javascript) and accomplished just what I wanted to do, which was to basically hide those buttons until an image that is covering them is clicked. Just for the record, here's the exact code I used:
<script type="text/javascript">
function showElement(){
var myElement = document.getElementById('elementId');
myElement.style.display = '';
hideImage();
}
function hideImage(){
var myElement = document.getElementById('imageId');
myElement.style.display = 'none';
}
</script>
(All I changed was adding the missing quotation mark on the first line and took out that one line about referencing to the element since I assume that is something optional.) For the html part, here's exactly what I did:
<div>
<img id="imageId" src="/images/cover.jpg" alt="cover" onclick="showElement()" width="185" height="124" />
<div id="elementId" style="display:none">
(hidden content went here)
</div>
</div>
(I didn't change much on this part either other than closing the image tag, putting in the dimensions for the image, etc.) Hopefully, I didn't do any of this wrong, but it seems to work as intended. The only other thing that would be a nice touch would be if there was a way to make it have the 'hand with pointing finger' symbol appear when you hover over it....in order to make it clear that it is a clickable image, but if not, it's not essential.
This question may sound a bit weird/novice/stupid. Please bear with me.
The below code is a small portion of a webpage I have created using CSS,
HTML and coldfusion.
<head>
---------------------Part 1--------------------------------------
<CFIF CompareNoCase('#aid#', 0)>
<cfinclude template="show.cfm">
<cfabort>
</CFIF>
-----------------------------------------------------------------
<link rel="stylesheet" href="styles/style.css?1322665623">
</head>
---------------------------PART 2------------------------------------
<body id="wp-home">
<div id="wrapper">
<div class="header left">
<h1>Name Of Client</h1>
<div class="tagline">
<span class="left blair">home</span>
<span class="headerline"></span>
<span class="right blair">antiques</span>
</div>
</div>
--------------------------------------------------------------------
As you see, I have included a css file, style.css which contains all the style classes required to display PART 2 correctly.
Problem is, whenever part 1 is active ( is true), the same
css is applied to elements in file SHOW.CFM also. This totally messes up the page's original display.
For the time being I have placed a tag below the link to stop page from processing and the css file being loaded.
I have checked show.css multiple times and can confirm that no class from styles.css is used in it.
Hence, my question is if I can stop the styles from style.css to be applied on elements loaded from SHOW.CFM
Pardon me if the question is insanely stupid ;)
If a selector matches then a rule will apply until overridden by a rule (which sets the same property) further down the cascade.
You can either change your selectors to stop them matching the elements you don't want them to match, or you can override all your rules in that section.
HTML5 allows scoped stylesheets, but only Firefox supports it so far. There is also a polyfill JavaScript.
Therefore, you'll have to adapt your markup and styles so that it only matches part2, and not part1. In a pinch, you can precede every selector with #wrapper. For example, if a rule says a{color:red}, substitute that with #wrapper a {color:red;}.
By the way, part1 should probably be a child of <body> instead of <head>.
Use the pseudo-class :not():
.myStyle:not(.classWhereYouDontWantToApplyTheStyle) {
...
}
What about using if else instead of just if to determine which css file you should include? In other words, include styles.css only when part 2 displays. That way, you avoid inheritance and scoping issues altogether.
Is there a way to increase the duration of a tool tip displayed using the title attribute of an html tag?
Currently in IE it appears to only have about a 5 second duration and then disappears.
I think this is operating system dependent and you should not try to override that.
The best way will be to create a custom tooltip.
Here are some good ones
jQuery Tooltip Plugin Demo
How to increase default hover duration of title attribute (tooltip)
Dont use IE, no time limit in Firefox browser. Or use the code I done.
I made some code in html/css only in one file, could not make it easier.
<!DOCTYPE html><html><body><style>
.m span{display: none;list-style: none} .m {z-index:24;position:relative;display:inline-block}
.m:hover span{z-index:999;display:block;position:absolute;top:19px;left:1em;border:1px solid #000;background-color:#eee;color:#000;min-width:300px}
</style>
<div class="m"> News <span> Links inside span works good <a target="_blank" href="http://cnn.com">Cnn.com</a></span></div>
<div class="m"> Hover over here and Information comes up <span> To make complex things easy is not so easy to do. </span></div>
<br> Just som text here to give you the 3D effect <br>
</body></html>
To elaborate further on phoenix' answer. Custom tooltips will allow you great flexibility in their appearance and layout. You need to get a JavaScript library (for example, jquery, or mootools) and get a plugin to show them. Then you will link the JQuery .js file, the plugin's one, and the css, finally you will add some markup to make it work.
For example, this one: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ or this one: http://craigsworks.com/projects/simpletip/
They are usually quite simple to install, the only requirement is that your site supports javascript.
Try WZ tooltip (may no longer be maintained): Click here