How to make a DOM div reappear with new parameters applied to it, like different color, different number of children elements; after ng-show =false hiding it from the page?
ng-show = true is one part, but how can i modify it before it reappears or while it is reappearing? Basically, that div contains
<div> ng-show="showdiv" ; ng-repeat="x in elements" </div>
and iam trying to make it reappear with a different set of elems from elements
Set a variable in your controller where you store a boolean value. Set the ng-show to that variable. Now if you set this variable to true, the element reappears.
JS:
$scope.showDiv = false;
HTML:
<div ng-show="showDiv"></div>
You can add specific class to div which will change appearance of div:
HTML:
<div id="test">sample</div>
JS:
$('#test').addClass(class);
you can also use toggleClass if you want revert it after another change.
It's not a angular but it's jquery. Your question isn't quite explained. Describe more details (html/js) for further help.
Hope this will help you.
Related
In my app I have a deeply nested components structure. I have a component with a very long form which is scrolling vertically. Inside that scrolling block I have components with a 'cog' icon. When you click that icon, a popover should appear next to it (inside the scrolling block).
However, the popover should consider the height of that scrolling block. And depending on the position of the 'cog' icon should appear either to the bottom or to the top of it in order to fit within the scrolling block.
So, to summarise, I somehow need to know the innerHeight of the scrolling block contents and its absolute position (getBoundingClientRect) in order to position my popover properly.
Right now I've done it using the html element id. And then simply find element by id in the popover component constructor:
constructor(#Inject(DOCUMENT) private doc: Document) {
this.scrollingBlock = doc.getElementById('scrollingBlock');
}
And then simply get the properties I need from it. Like the following:
this.scrollingBlockHeight = (this.scrollingBlock.firstChild as HTMLElement).scrollHeight;
this.scrollingBlockRect = this.scrollingBlock.getBoundingClientRect();
Although, everything works now, I believe it's not very elegant/Angular-way solution. I'm using Angular 6 for my app. Is there any better way to achieve the same result?
I have an issue in dealing with a hover event that is being propagated from a child of nested elements that are of the same directive. I am pretty new to Angular, so please be gentle and bear with me if I am missing something obvious.
What I am trying to accomplish:
I have a custom attribute directive that I am writing to create a pseudo-venn diagram ui module in which a circle will expand when hovered over. The idea is that I am trying to achieve this using a single custom directive, with behaviours changing depending on the location of the element within the dom, where if the parent of an element with the directive tag is not another element with the directive tag then it is viewed as a "root circle", otherwise if the element with the tag has a parent with the directive tag then it is viewed as a "child circle" as shown below.
<div vennCircle diameter="20vh" percentOverlap="35" parentAngle="300" id="smc">
Parent
<div vennCircle diameter="30vh" percentOverlap="35" parentAngle="0" id="smc1">
child 1
</div>
<div vennCircle diameter="30vh" percentOverlap="35" parentAngle="90" id="smc2">
child 2
</div>
</div>
I followed the Angular Docs for finding a parent component through injecting in order to create the directive as shown below and have been able to use this in order to successfully distinguish the parent from the child directive element.
export abstract class Parent { name: string; }
#Directive({
selector: '[vennCircle]',
providers: [{ provide: Parent, useExisting: forwardRef(() => VennDiagramDirective) }]
})
export class VennDiagramDirective implements AfterViewInit, Parent {
name: string
constructor(private el: ElementRef, #SkipSelf() #Optional() public parent: Parent) {
console.log(el);
console.log(parent);
}
#HostListener('mouseenter', ['$event']) onMouseEnter(event: any) {
this.el.nativeElement.style.backgroundColor = 'rgba(0,0,255,1)';
}
}
Following are the Angular docs for creating a custom attribute directive (I am limited in number of links that I can post) I am trying to capture the hover event to trigger other behavior in the code above, it is simply changing the background color of the element hovered over.
My problem:
The issue that I am having is that if I hover over just the parent circle, everything works as expected and the background color changes, however if I hover over either of the two child circles, they will also change the color, but so will the parent circle since the event propagates, the following images demonstrate what it looks like:
link to picture
Now I may be new to Angular, but this behaviour alone does not surprise me, it is my understanding that events propagate or bubble up and I was under the impression that this was supposed to occur first at the lowest level and moving upward in the hierarchy. If my understanding is correct, then it should follow that the hover event should be received by the child circle directive first when the child is hovered over and then should propagate upwards in the tree to the parent circle. If that follows, then I should be able to stop propagation of the event when it is first received, resulting in only the child circle changing colors, however this is not the case.
When I printed to the console with a timestamp, it shows that the parent circle ("#smc") is receiving the event prior to its child ("#smc1"), as shown below:
ElementRef {nativeElement: div#smc}
1504205896178
ElementRef {nativeElement: div#smc1}
1504205896206
My question(s)
How, if possible, can I prevent the parent element directive from receiving the hover event of its child?
If the above is not possible, how can I determine the origin of the hover event such that I can filter out events that originated from the child elements in the parent element directive?
Notes
I am currently dead set on achieving this with a single directive, even if it is tricky, the idea being that I want to be able to use this ui module elsewhere or share it with others, in a way that only requires a single declaration/import in the module.ts. I am already aware that I could create X different components/directives for each type of circle, however I do not want that, that makes using the module too complex in my opinion.
I do not want a dev using this to have to manually setup the events in the html, an attribute directive enables this so I want to be able to use it.
Thank you all in advance for your help, please comment if you need more info, or if I did something wrong, remember that I am new and learning!
How can I go about creating a form which pops up when the user clicks a button on a Jade template? I tried the following in HTML, which works:
http://www.formget.com/how-to-create-pop-up-contact-form-using-javascript/
Now to use this in my Node.js project would I need to create a separate Jade file for the form itself? That is what I tried and then I tried to display the form like this:
function div_show() {
alert("Test");
document.getElementById('abc').style.display = "block";
}
Unfortunately that does not work. What is the recommended approach for creating a pop up form in Jade? I am really confused with Jade and I can't seem to find a good tutorial for this, there are loads for HTML...
Thanks for the help!
Normally for this you would use:document.getElementById('abc').style.visibility="visible";
To hide your table use:document.getElementById('abc').style.visibility="hidden";
When using the 'style' attribute you are using plain css commands. Make sure your default div style settings have it 'hidden', if that is what you want.This display:block;visibility:hidden;' must exist in your default settings for that div style so the DOM has a clear path to what it is controlling. By itself 'display:block;' does not hide or make objects visible, it is mostly about the shape the div creates as a container for objects.
As an option you can use:
document.getElementById('abc').style.display="block";
To hide your table use:document.getElementById('abc').style.display="none";
For this you would set your div style settings to 'display:none;visibility:visible;.
In this case 'display="none"' removes the object from all display layers and could allow other objects to fill in it's space. When it is visible it will push other objects on the same z-index out of the way. If it has a higher z-index, say +100 higher, it will pop-up above the other objects on the page. The 'visibility' attribute only controls the objects visibility, it does not remove it from the display memory. It can still take up space even though it is not visible. The 'opacity' attribute does about the same thing, except it allows you to also make an object as transparent as you like.
I have a page with a for layout where one half of the page is dynamic width an the other is fixed. This is achieved by floating the fixed width side to the right. It all displays fine but because the fixed width markup comes before the dynamic width markup the tab ordering gets thrown off.
See here: http://jsfiddle.net/BaMqG/
How can i overcome this without resorting to putting tabindex properties on the inputs?
You can use jQuery to dynamically set the tabindexes with a loop and counter variable. Check it out. http://jsfiddle.net/BaMqG/22/
$(document).ready(function() {
var i = 1;
$('.wrapper').each(function(){
$(this).children('.dynamic').children('input').each(function(){
$(this).attr("tabindex",i);
i++;
});
$(this).children('.fixed').children('input').each(function(){
$(this).attr("tabindex",i);
i++;
});
});
});
The initial value for i can be set to whatever tabindex number you want to start from.
I have managed to get the same looking form with no tab index to work by using tables.
See here: http://jsfiddle.net/ymSGM/
I would still be interested if it can be done any other way.
I have a div with a scroll bar which displays 15 months with 3 of the min each row, When the page loads I want to fix the scroll bar position to 2nd row as shown in my screenshot.As in the scroll bar should to be fixed to the position shown in my screenshot as opposed to top of the div.The reason for this requirement is we are displaying previous 3 months, but the user should see the current month when the page loads. I hope I have made it clear
I am using
<div id="key_dates" style ="overflow:scroll;width:960px;height:500px">
Can you guys please help?
Thanks,
Adarsh
You need to use JavaScript for this:
<!--
Place this script before closing </body> tag so that
DOM (HTML elements tree) is already built when the script is running
-->
<script>
// create a closure to not pollute global scope
!function () {
// cache reference to keyDates element
var keyDates = document.getElementById('key_dates');
// set scroll to the height of one row
keyDates.scrollTop = 150; // substitute `150` with height of one row
} ();
<script>
Here is the documentation of element.scrollTop
If you are using jQuery, you do it like this (and here are the docs);
<script>
$('#key_dates').scrollTop( 150 );
</script>
An example with jQuery: http://jsfiddle.net/gryzzly/CjdwX/
It seems I can't demonstrate this properly with jsfiddle, but here is a sample of code which works if you test it in a browser. Using anchors on each row, we can anchor the window to a specified location either using href or the url.
For example, if you implemented this code at www.address.tld/calendar, to show row two, you'd enter www.address.tld/calendar#row2.
You can use only an anchor on row two, and you could place it either statically or programmatically depending on your needs. It's a pretty straight forward solution, but some people don't like the hash and anchor name being in the url. It doesn't bother me.