I am having trouble writing the exact location of the second div.row element based on the child element preceding it (which is the second div.trigger element in the page)
<div id='subscription'></div>
<div class='settings'></div>
<div class='generic'></div>
<div class='trigger'></div>
<div class='row'></div>
<div class='trigger'></div>
<div class='row'></div>
The reason for this is that, upon loading a page, no trigger elements initially appear. But when I click on a checkbox, one trigger appears, and so on since there are at least 3 checkboxes in the page.
Sorry for the noobness of this question, but i haven't found a solution yet and i'm hopelessly stuck. Any help will be appreciated. Thanks!
Take all div with class 'row' and than take 2-nd one
//div[#class='row'][2]
Try xpath-expression like below which should work:
By.xpath("//div[#class='settings']/child::div[position()=2][attribute::class='row']");
(or)
By.xpath("//div[#class='settings']/following-sibling::chapter[position()=1]");
Related
So here is my layout
<div contenteditable=true>
///
<div contenteditable=false>not editable</div>
///
</div>
I have one issue, when the non-contenteditable div is the first element of a new line, I cannot place the cursor in front of the div by using arrow keys or clicking in front of the div.
I've tried every solution posted here but none worked and all had the same issue, wondering how this is solvable.
The only way I can think of is to put a zero width character before the div - but if the non editable element is one that causes a line break you'll have to put one of those in as well.
Obviously definitely not ideal as it adds a character to the editable code which you'll have to deal with later on
<div contenteditable=true>
///<br>
<div contenteditable=false style="display: inline-block;">not editable</div>
///
</div>
Since I can't really figure out where the problem is the cite is here
I'm sure most people know ctrl-u will allow you to see the coding.
The scroll bar should move the content in the box.
Any suggestions are helpful but please don't be rude
The scrollbar is transparent but it should wok like the one on this page
Based on what I'm currently seeing - your problem is that you have two separate <div id="entries"> divs. The second one (line 1060 of your compiled source, as I'm seeing it in Firefox) is blank - it contains an empty <div id="post"> and nothing else.
id properties have to be unique - because this one is repeated, the style attributes aren't being applied to it correctly. Simply delete the second <div id="entries">, and your scrollbar will work.
Is it possible to prevent the effect of ng-show on a specific child element.
Lets say I have the following html.
<div ng-show="showParent" class="parent">
<div class="childOne"></div> <!-- don't hide this -->
<div class="childTwo"></div>
</div>
Now what I would like to achieve is hiding everything except childOne. Actually hiding a parent, but one or some of its children?
No, you can't. The HTML standard prevents that. All children get hidden when the parent gets hidden, and AngularJS just adds things to HTML, it doesn't change it.
However, AngularJS allows one variable to control multiple elements, and can probably help us get the same affects you want. So let's go back to what you are really trying to accomplish. To do this, we're going to need some more details that you took out in this question to make the question smaller (and thank you for that). What about just hiding childTwo is not working for you? Are there other things in parent you need to hide? We can put those in seperate elements (div or span or something) and hide those with the same variable as we hide ChildTwo. Does parent have some formatting (say, a border or something) you need to hide? We can change what classes are on parent based on the same variable we use to hide the other elements to something that removes the border and any other styling, effectively making it not visible, although still technically present in the DOM.
ngShow relies on a CSS class (.ng-hide). You may be able to override that class with your own more specific selector for just the divs you want excluded from the directive.
<div class="parent" ng-show="showParent">
<div class="childOne nghide-override"></div>
<div class="childTwo"></div>
</div>
Source: https://docs.angularjs.org/api/ng/directive/ngShow
(I'm unable to test this right now, but I'll mock something up shortly and edit/remove this if it doesn't work.)
You could also just split the children out into divs and hide the second div:
<div class="parent">
<div class="shown children">
<div class="childOne"></div>
</div>
<div class="hidden children" ng-show="showParent">
<div class="childTwo"></div>
</div>
</div>
Use Jquery unwrap.
Include jquery in your application:
bower install jquery --save
Set on ready unwrap to specified div:
<script type="text/javascript">
$(document).ready(function() {
$(".childOne").unwrap();
});
</script>
Suppose I have the following html:
<div style="width:200px;height:200px;overflow:scroll">
...
</div>
If the stuff in this div ends up overflowing, the most popular way to change the scrolling position of this item is to use jQuery.scrollTop(). However, I have a situation where I would like to set the initial scroll position of the div using the source HTML. Is there a way of doing this? All examples I see online for doing this end up using javascript.
One way I tried is to write a scrollTop property on the element, like so:
<div scrollTop=20 style="width:200px;height:200px;overflow:scroll">
...
</div>
However, this does not work. Surely, there must be a way to set the initial scrolling position of an overflowing item via HTML/CSS...
Here is a full version of this code that illustrates that it doesn't work- The vertical scrollbar remains at "0": http://jsfiddle.net/gueBZ/1/
Can anyone help me to make it work? Thanks so much for any pointers!
<div style="width:200px;height:200px;overflow:scroll">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="hello">autoscroll here</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
then open the page as
page.html#hello
this is the only thing you can do, with HTML only
I have a situation that looks something like this
<div class="x" href="foo">
<div class="y" href="bar"></div>
<div class="z"></div>
<div class="y" href="baz"></div>
fooz
</div>
x is a badge that should be clickable. The problem is that the badge also contains links that also should be clickable. In addition y and z are clickable. Unfortunately clicking the child links only leads to the outter x being pressed. How should I best handle something like this?
Continuing from my previous comment (assuming my understanding of your scenario was correct), here is your solution: http://jsfiddle.net/chricholson/7yzxQ/12/
It involves using stopPropagation to prevent the click being detected up the tree structure http://api.jquery.com/event.stopPropagation/
This doesn't work and it's not valid html, because nested a-elements are not allowed. For a solution more information is needed.
I think that you should not place <a> tags into another <a>. The solution here would be either using javascript, and event bubbling or you should separate the links and place/style them in a way where you see one integral badge. In the html you would actually build it from separated elements.
Personally I would go for the javascript way, as it is much more straightforward.