I'm pretty new to AngularJS and would like to know how to do this:
$(".change-agency-clicker").on("click", function (e) {
e.preventDefault();
$(".form").fadeOut(function () {
$(".agency-change-form").fadeIn();
$("#agentForm").show();
});
});
So when the user clicks on a button it fadeout a panel and fades in a second panel.
Just follow this steps:
When the element .change-agency-clicker is clicked (ngClick), toggle the value of a variable.
If this variable is true, hide (ngHide) the element .form.
If this variable is true, show (ngShow) the elements .agency-change-form and #agentForm.
Animate all that things with CSS transitions (here is a tutorial), and don't forget transition-delay if needed.
The idea, of course, is to think "declarative" and no more "imperative"!
Related
i am learning react+typescript. i want to implement a control like fluentui dropdown:
basically I draw a div and set its position 'relative' then use absolute layout on the dropdown panel. but there is a problem:
how to dismiss the dropdown when click outside area?
Can you share good practices?
Let's assume dropdown is dom node of your dropdown area
and dismissDropdown function to dismiss it.
Then your code could look like this:
window.addEventListener("click", function (e) {
// if outside of dropdown
if (!dropdown.contains(e.target)) {
dismissDropdown()
}
});
contains: https://developer.mozilla.org/en-US/docs/Web/API/Node/contains
Basically we check if element on which user clicked is inside dropdown or dropdown itself, and if not then dismiss it.
I have a button which opens a modal on the onClick event. I want the button to become disabled after the user clicks it, and enabled back when the modal closes.
I have set the initial state of btnDisabled as false and done this: (works as expected)
<Button
label='Mybutton'
className={['btn-outline-primary']}
onClick={this.loadModel}
disabled={this.state.btnDisabled}
/>
The onClick handler of the button is as follows:
loadModel(event) {
this.setState({
ModelOpen: true,
btnDisabled: true,
});
this.activeElement = event.target;
}
The modal close button(x) handler is this:
closeModel() {
this.setState({
ModelOpen: false,
btnDisabled: false,
});
this.activeElement.focus();
}
The problem is that the focus is not shifting to Mybutton. When I try to output document.activeElement.outerHTML on console log, it outputs the close button. Because of this, my tests are failing, as they are expecting MyButton to be the active element.
UPDATE
The tests work fine if I remove the button disabling logic. Here is the assertion that fails:
expect(wrapper.find('.btn-outline-primary').html()).toEqual(document.activeElement.outerHTML);
You are adding eventListener to Button element.
In javascript cause of event bubbling the target may vary.
try using event.currentTarget to get the button instance.
Hope this helps. It will be better if you provide a snippet of issue here.
All I want to do is add a class to a div the first time it scrolls into view, then keep it there. (So, I don't want to toggle it - just fire it once). I have an animation that's based on adding a class to the parent div, and even though I specified a direction, when I check it in inspector, it's still removing the class on the reverse scroll. I don't want the animation to run every time it's scrolled over, but only the FIRST time (and then stay there in the completed-animation state).
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: '#intro',
offset: 50
})
.on("start", function(e) {
if (e.scrollDirection === "FORWARD") {
$('#welcome').addClass('animated');}
})
.addTo(controller);
I did try adding a duration but it had no effect. Any suggestions?
Yes, you can add the .reverse(false) in your scene. This will make the animation happen only one time, so if you scroll back up it won't toggle the class off.
Here is an example of how to use it and a link below to a very simple demo using it. Also for even more information here is another link to the documentation.
reverse(false)
$(document).ready(function(){
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: '.title',
triggerHook: .6
})
.setClassToggle('.title', 'animate')
.reverse(false)
.addIndicators()
.addTo(controller);
});
CodePen Demo
calling updateLayout() is causing the parent container to "jump" to the top. Setting the viewconfig on the Ext.Container.container does not seem to help
viewConfig: {
preserveScrollOnRefresh: true
},
As suggested by Alexander, overriding beforeLayout and afterLayout for the parent container did the trick.
beforeLayout: function() {
var me = this,
scroller = me.getScrollable();
me.callParent(arguments);
if (scroller) {
me.savedScrollPos = scroller.getPosition();
}
},
afterLayout: function() {
var me = this,
scroller = me.getScrollable();
me.callParent(arguments);
if (scroller && me.savedScrollPos) {
scroller.scrollTo(me.savedScrollPos);
}
},
updateLayout is not the same as refresh, and preserveScrollOnRefresh only preserves scroll on refresh. You could look into ExtJS code how they did it (they don't really "preserve" scroll, they store the scroll position and scroll back to the correct position after refresh) and implement the same for updateLayout.
To cover more options for anyone having similar problems:
Changing the layout
As mentioned in question Avoid Ext.form validation scrolling to top, sometimes just changing the layout can do the trick.
For example form in ExtJS 4.x had anchor layout specified by default (ExtJS 6 has vbox), which caused the form to scroll to top on form field validation, if you change the layout to vbox, it does not scroll to top.
Suspending layout
If you have a component, that does not need to update the layout with its change, you can use the suspendLayout configuration.
Using Wijmo Open ComponentOne's Dropdown, I tried to place it in a registration form that displays when a button is clicked. This form is inside a jquery modal window.
The problem is that it is not displayed like a wijdropdown inside the form.
I supposed that since is was hidden, then it wasn't part of the DOM and so I added a method in the callback of the function that displayed the modal window; when the modal window finishes displaying, then call the .wijdropdown() on the element. However, it didn't work.
In conclusion: the select tag is not being wijdropdowned...
¿Any recommendations?
Script
$(function() {
// show overlay
$('#product-slideshow-overlay-trigger').live('click', function() {
var $registerOverlay = $('#product-slideshow-overlay');
//left position
var positionLeft = ($(window).width() - $registerOverlay.width())/2;
$registerOverlay.css({'left':positionLeft});
//show mask
$('#mask').fadeIn();
$registerOverlay.slideDown(function()
{
console.log("Started");
/**Add WijmoDropdown***/
$('#estado').wijdropdown(function()
{
console.log("Did the wijdropdown");
});
console.log("Ended");
});
return false
});
}); // end document ready function
Refresh the wijdropdown when the dropdown is not hidden:
$('.wijmo_drp').wijdropdown("refresh");
or
Find the wijmo component and check if it's visible or not (styled or not).
And trigger the visiblity changed event when you display the modal window.
if($('.wijmo-wijobserver-visibility').is(':visible'))
{
$('.wijmo-wijobserver-visibility').trigger("wijmovisibilitychanged");
}