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>
Related
This seems to be a simple task but for some reason I am having issues removing a border when the display property is set to none.
From what I've always understood is that when the display property is set to none it removes that element from the html flow. However, in the example I've provided it still shows a border on the last element.
<div class="outer">
<div class="inner">
<div class="control">Foo</div>
<div class="control d-none">Bar</div>
</div>
</div>
https://jsfiddle.net/6hfzpcoL/
The 'd-none' element is still present, it is only not visible to the user. if you inspect the container you will see it is still there, so Foo isn't considered a last child - therefore border is still being applied.
What you are trying to achieve cannot be done with CSS only you would need to use Javascript or JQuery.
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]");
I would like to have 2 different configurations of addthis on the same page.
Take note that I'm using the new Addthis, where the code looks like this:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxx" async="async"></script>
<div class="addthis addthisBlogue clearfix">
<div class="addthis_sharing_toolbox"></div>
</div>
What I'm trying to do is have 1 that have the share numbers tooltips and the other doesn't
Is it possible?
Since AddThis creates HTML elements that contain the count 'tooltip' (it's not actually a tooltip) with a single class or ID element, if you want to be really specific (i.e. choose what to hide exactly where you have two or more AddThis instances on a page) you could:
add the instance where you want to hide the count inside a div with a CSS ID or unique class;
use display: none to hide the parent social media count element only inside that div.
Target the AddThis where you want to hide the count elements
Seems obvious, but For example, on this page if you inspect (e.g. in Chrome) the rendered Facebook and Twitter AddThis elements and add 'display: none' to the .pluginCountButton and .count-o styles that contain the elements you want to hide, as expected: they vanish from the display.
So if you nest your AddThis instances inside a uniquely-identified div (or any parent element) then you could simply target the one you want to hide like this:
#hiddencount .pluginCountButton,
#hiddencount .count-o {
display: none;
}
You'd need to locate the equivalent .pluginCountButton and .count-o elements for your version and instance—each social media icon has it's own so you'd have to identify each, as in the above example. You may also need more specificity between #hiddencount and the count container to get the style to apply.
NOTE: without a working example with the count links showing, this is untested. If you have a working example, I'd be happy to test it.
Through some digging I discovered the answer.
You need to add the class addthis_toolbox to your divs like so:
<div class="addthis addthis_toolbox addthisBlogue clearfix">
<div class="addthis_sharing_toolbox"></div>
</div>
source: http://support.addthis.com/customer/portal/questions/5024966-multiple-share-button-on-same-page
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 structure of divs inside divs, something like:
<div>
<div>
<div class='a'>Hello</div>
<div class='a'>Stack</div>
<div>Overflow</div>
</div>
<div>
<div>You</div>
<div class='b'>Are</div>
<div class='b'>The Best</div>
</div>
<div>
<div>Have</div>
<div class='b'>a nice</div>
<div>Day !!</div>
</div>
</div>
I would like all divs with class a to change the background color when one of them is hovered by mouse. The same for all divs with class b: when one of divs with class b is hovered, all divs with class b should change the background color.
Is that possible to implement this behavior without Javascript ?
If the answer is no:Is that possible if known that all divs with class a are consecutive divs in the same level (i.e. siblings) ?
I can add also other classes to divs, if needed.
You can get it "half working" in the simpler case where there are no container <div>s:
<div>
<div class='a'>Hello</div>
<div class='a'>Stack</div>
<div>Overflow</div>
<div class='b'>Are</div>
<div class='b'>The Best</div>
<div>Have</div>
<div class='b'>a nice</div>
<div>Day !!</div>
</div>
Then you could use the general sibling combinator, with the unfortunate caveat that it only works for elements that come after the element described on the left-hand side. So, for example, if you hovered over the <div> containing "The Best", only that and the "a nice" <div> would have a changed background:
div.b:hover, div.b:hover ~ div.b {
background-color:#CCCCCC;
}
I wasn't able to come up with a way that would fully take care of your scenario through CSS alone, though. I'm leaning towards what the others have said about it not being possible (even in the simplified case) right now.
i can't think of any solution, except there are css-parent-selectors (and, as far as myself and google know, those don't exist). if there would be things like that, you could do something like selecting the top parent af the hovered element and then select all elements of your class within that top-element (would look like .a < parent < parent < parent .a{ /*styles*/ }) - but, as said, this selectors don't exists, so the answer to you question is: no
No. Not without Javascript. CSS selectors are meant to apply styles to each element that matches the selector individually, so by design this won't happen.
Source
http://www.w3.org/TR/CSS2/selector.html#selector-syntax