Is it possible to make an element position absolute, relative to some special element? I'm talking about something more than the well known relative/absolute offers. Suppose this nested divs #a > #b > #c > #d each child of the previous. Now is it possible to make c's position absolute relative to a and d's position absolute relative to b? Or maybe even relative to some element that's not a parent of the element. Is it discussed anywhere? I guess it should be added in future versions of css if not present in current version.
Suppose position:relative is given to #a and position:absolute #c then it will working but if you want position:absolute to #d relative to #c then it will not work. It will take position relative of #a.
Related
I have a table with td's. I would like it so that the user sees the cursor change into a pointer when he/she reaches the right border of the specific td, and revert back to the normal pointer when the user is not hovering the right border.
Googled a lot but I cannot seem to find an answer. There's hope someone here can help me...?
I would like it to be pure CSS, but maybe there is need for some query too?
you can use CSS to modify the behavior of the type of cursor in your case you can use
your_td_tag:hover {
cursor:progress
}
If you specifically want to select border only you have to use some javascript hacky stuff
$('div').click(function(e){
if( e.offsetX <= parseInt($(this).css('borderLeftWidth'))){
$("div").css("cursor:progress");
}
});
here div can be replaced by any tag and cursor-progress can be replaced by your desired cursor.
there are various types of cursors available by default
auto
crosshair
default
e-resize
grab
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait
not-allowed
no-drop
you can also use your custom cursor as follows
your_td_tag_selector:hover{
cursor: url('some-cursor.ico'), default;
}
the default here is used as a fallback mechanism so if some-cursor.ico is not supported or not available it will fall back to default cursor.
let me know if it solves your problem..
What is the exact meaning of :: ?
And apart from parent, what else are the different things we can use?
By.xpath("parent::*/parent::*")
The shortest answer I can manage
:: separates an axis name from a node test in an XPath expression.
The longer answer
It does not make much sense to ask about the meaning of ":: in Selenium", because it's not a feature of Selenium. It belongs to XPath, which is a W3C specification in its own right and is used to navigate XML or XHTML documents.
By.xpath(" parent::*/parent::* ")
^ ^ ^
Selenium XPath Selenium
Selenium just happens to embed XPath in their web application framework (which is a good thing!).
So, I've taken the liberty to answer the question: What is the meaning of :: in XPath?
The meaning of :: in XPath
In XPath, :: does not mean anything on its own and only makes sense if there is
a valid XPath axis identifier to the left
a valid node test to the right
For example, parent::* is a valid XPath expression1. Here, parent is an XPath axis name, * is a node test2 - and :: marks the transition from the axis to the node test. Other possible axes are
ancestor following-sibling
ancestor-or-self namespace
attribute parent
child preceding
descendant preceding-sibling
descendant-or-self self
following
Of course those are not just names, they have a very clear-cut semantic dimension: each of them defines a unique way to navigate an XML document (or, rather, a tree-like representation of such a document). Their meaning is straightforward in most cases, for instance, following:: identifies something that "follows" the current context.
These tuples of axis and node test (or triples, also counting predicates) can be "chained together" with the binary / operator to form paths with several steps:
outermost-element/other/third
Navigating a simple document
<root>
<person>James Clark</person>
<person>Steve DeRose</person>
</root>
Naturally, navigation might depend very much on your current whereabouts. There are both absolute and relative path expressions. An example for an absolute path expression is
/child::root/child::person | abbreviated syntax: /root/person
As you can see, there is a / at the beginning of an absolute path expression. It stands for the document node (the outermost node of a tree, which is different from the outermost element node of a a tree). Relative path expressions look like
child::person | abbreviated syntax: person
The relative path expression will only find the person element node if the current context is the root element node. Otherwise, it will fail to locate anything.
Your XPath expression
To sum up and use what we have learned so far:
By.xpath("parent::*/parent::*")
finds the element node that is the grandparent of the current node. The names of both the parent and the grandparent node do not matter (that's what *is for). There's no / at the beginning, so it must be a relative path.
1 In fact, it is a location path, a special kind of XPath expression. Also, I have left out one important concept: predicates. Good things always come in threes, and XPath expressions come with an axis, a node test and with zero or more predicates.
2 A node test must be either a name test (testing the name of a node) or a kind test (testing the kind of node). Find ample information about node tests in the relevant part of the XPath specification.
This is xpath syntax, you can do other things like :
child::* Selects all element children of current node
attribute::* Selects all attributes of current node
child::text() Selects all text node children of current node
child::node() Selects all children of current node
Check a tutorial, especially about axes :
http://www.w3schools.com/xpath/xpath_axes.asp
I want to find a function that highlights the path from the following nodes:
a > b > c > d > a
The importance is highlighting the path back to 'a'.
Or even a function where you can predefine the route for the path.
There are several algorithms that can be used for finding paths (e.g. BFS, A*, etc).
As for highlighting, you should define your style appropriately -- probably with a highlight class or similar.
I would want to select the first instance of an element in a page where many number of such elements are present with 'ID' which will not be same always.
for example, visit, http://www.sbobet.com/euro which lists lot of sports and odds, where I want to click on the first odds.
and the html structure would be like this,
I want to click on this first span value and proceed with some test case.
Any help on how to achieve this ?
There could be two approaches two the problem:
1. If you are sure you will always need only the first instance:
driver.FindElementsByClassName("OddsR")[0];
If not, then you have collection of elemets and you can access an of those
2. Also, you can first identify any closest enclosing div and then you can use the same snippet as above:
driver.FindElementsByClassName("OddsR")[0];
This one is a better approach if page is a bit dynamic in nature
Use #class attribute. If OddsR class you are intrested in is the 1st one on the page then just use Driver.FindElement(By.ClassName("OddsR")). Webdriver will pick the 1st occurence (no matter if there are more)
Have checked your link and I agree with alecxe, you should probably start with div. But i would suggest a simpler selector :
css = "div.MarketBd span.OddsR"
The above selector will always point to the first span of "OddsR" class within div of "MarketBd" class.
Thanks for the response.
I am finally able to click on the element, by this XPATH,
"//span[#class='OddsR']"
This clicks on the first occurrence of 'OddsR' values, without giving any index.
I want to increase height of an element by X pixels by writing a YUI3 script.
Whats the best way ?
if I use 'Node' module and read the height as node.getStyle("height");
The results of FF3 shows a string "100px" where as for IE8 its just blank. :(
Please help.
node.getStyle('height') only returns a value when you have a value set in the style of the node. To get the height of a node with out a style set use node.getComputedStyle('height') or node.get('clientHeight').
If you have overflow set, you can use node.get('scrollHeight') to get the full height of the content.
To update the height of the node, use setStyle('height', value)