How can I prevent to have multiple popover windows open? There should only be one open at a time.
Please see my punkr: http://plnkr.co/edit/MjP1AlygixXHEOC3Jd5a
Within my plunkr, I use an updated ui-bootstrap 0.10 from jbruni (his plunkr is here:
http://plnkr.co/edit/B2wEis?p=info)
When hovering about the two windows there is a chance that two popup windows are open at the same time. :(
If you force off the animation, then the turn off delay seems to work. Not a clean solution but sort of works. You still have a chance to get two popovers at once since there is no function to delay the start of a new popover if there is one pending the turn off.
http://plnkr.co/edit/a8XHo7FKhrqv37mWTPBk?p=info
if ( scope.tt_animation ) {
// transitionTimeout = $timeout(removeTooltip, 500);
setTimeout(function(){scope.tt_animation=false;hide();},500);
} else if ( scope.tt_popdown ){
vanishTimeout = $timeout(removeTooltip, 2000);
} else {0
removeTooltip();
}
I have written a directive that wraps a popover control and uses the popover-is-open to trigger the popover opening and closeing.
To close any open popovers I trigger a custom event on the parent scope:
$scope.openPopup = function()
{
$scope.$parent.$broadcast("multiSelectSinglePopoverInstanceEvent", {});
$scope.isPopupOpen = !$scope.isPopupOpen;
}
In the custom popover controls controller I handle the event by closing the popover:
$scope.$on("multiSelectSinglePopoverInstanceEvent", function (event, args) {
$scope.isPopupOpen = false;
});
This may help
Related
I have form and grid in kendo window modal, I want to refresh the screen everytime user open the modal window, I have used refresh() but its not working...any suggetion will be appreciated....
So far tried code...
main.html
<div kendo-window="viewAttestorkWin" options="attWinOptions" k-modal="true"></div>
main.js
$scope.openAttestorSearch = function(){
$scope.viewAttestorkWin.refresh();
attestorConfig.attestorModalWinConfig.title = 'Add Attestor(s)';
$scope.viewAttestorkWin.setOptions(attestorConfig.attestorModalWinConfig);
$scope.viewAttestorkWin.open().center();
};
It should work properly with your code right now, yet I suspect setOptions make it didn't. Have you try to call the refresh method after window is open?
$scope.openAttestorSearch = function(){
attestorConfig.attestorModalWinConfig.title = 'Add Attestor(s)';
$scope.viewAttestorkWin.setOptions(attestorConfig.attestorModalWinConfig);
$scope.viewAttestorkWin.refresh().center().open();
};
is it possible to know or intercept when an accordion is open or closed with angular-ui-bootstrap, only when transition is ended?
So, when one accordion content is open i can refresh iScroll instance.
Looking at
https://github.com/angular-ui/bootstrap/blob/master/src/collapse/collapse.js
There does not seem to be any event triggered on collapseDone() or expandDone() that you can hook into.
The only way you can really do this is to watch when the class 'collapsing' exists (meaning collapsing is happening), then you know collapsing is over when that class goes away.
$scope.$watch(function() {
return $('.panel-collapse').hasClass('collapsing');
}, function(status) {
if ($scope.collapsing && !status) {
console.log('done collapsing');
}
$scope.collapsing = status;
});
Similar question: AngularJS - Find end of collapse animation
When the user clicks this camera icon the get a snapshot of the page in a modal. If they click repeatedly it will make multiple snapshots before the modal has loaded and essentially blocked the camera icon.
Is there a way that I can say if a snapshot modal has just been created do not create another one?
events: {
'click .snapshot-camera' : 'clickCamera'
}
clickCamera: (event) ->
event.preventDefault()
#snapshot = new ******.Models.Snapshot({ user_id: ******.State.get('signInUser').id })
You can use underscore's debounce method which prevents double submissions.
// prevent double-click
$('button.my-button').on('click', _.debounce(function() {
console.log('clicked');
/* .. code to handle form submition .. */
}, 500, true);
Have a look into the below article
http://jules.boussekeyt.org/2012/backbonejs-tips-tricks.html
If I have a View in backbone.js and it has an event in the events list:
events: {
'click #somebutton': 'clicked'
},
clicked: function () {
console.log('clicked');
}
How can I then disable/enable that event? So for instance if its clicked then
the event is removed (the button remains on screen but is greyed out etc). When some other part of the view is updated or whatever the event
enabled. Sure I can use jquery but I want to know if this functionality is available in backbone.
Thanks for any answers
Paul
You can always use delegateEvents() and undelegateEvents() to redo your event binding between the DOM and your Backbone View. That said, I usually just keep the event handler and add a conditional in the handler.
// .disabled class (CSS) grays out the button
clicked: function(event) {
var buttonEl = $(event.currentTarget);
if (buttonEl.hasClass('disabled')) {
// Do nothing
} else {
// Do something AND...
buttonEl.addClass('disabled');
}
}
Then you can have your other view or code simply removeClass('disabled') when you want to restore functionality.
UPDATE - disabled property
See comments, but a simpler, much better solution is to use the disabled property disabled="disabled" of buttons.
Use delegateEvents and undelegateEvents for binding and unbinding events. Check for reference: delegateEvents
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");
}