I'm using ui bootstrap v0.10 in my angular project. When I try to use the modal window, I can setup the width to a smaller size using the windowClass, however it changes also throws the window position to most right.
Can anyone help me?
the code that I'm using to try changing the width is as follows:
$stateProvider.state("signin", {
url: "/signin",
onEnter: function ($stateParams, $state, $modal) {
$modal.open({
templateUrl: 'Pages/Modals/Signin.html',
windowClass: 'fs-login-modal',
controller: ['$scope', function ($scope) {
$scope.dismiss = function () {
$scope.$dismiss();
};
}]
}).result.then(function (result) {
if (result) {
return $state.transitionTo("/");
}
});
}
});
My css class is setup as follows:
login-modal {
width:270px;
}
Best regards,
Chen
If memory serves me right, add a negative margin-left of half the width.
.login-modal {
width:270px;
margin-left: -135px;
}
I remember it being a bit more complicated, maybe dealing with a .modal-inner class or something, but this should get you on the right track.
Related
I want to make the maintenance tool window wider. Users are confused by the version page, as it is truncated and they do not see what the new version is.
I tried making a really long title description, but that did not work.
I have not found a scripting solution, but here is my installscript.js
function Component()
{
}
Component.prototype.isDefault = function()
{
// select the component by default
return true;
}
Component.prototype.createOperations = function()
{
try {
component.createOperations();
if (installer.value("os") === "win") {
component.addOperation("CreateShortcut", "#TargetDir#/winnow.exe", "#StartMenuDir#/Winnow.lnk");
}
} catch (e) {
console.log(e);
}
}
Use WizardDefaultWidth WizardDefaultHeight in config.xml
see http://doc.qt.io/qtinstallerframework/ifw-globalconfig.html
I am working with AngularJS (pretty new). I have encountered a challenge which is if the textarea value is to big I have to make it scrollable as well as the border around it and if not I have to remove the border and scrolling as well. I try adding the directive but couldn't make it work.
Let me know if there is any work around it. I appreciate your time and help.
Updated:
angular.module('myApp')
.directive('removeBorder', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
if (element[0].clientHeight < element[0].scrollHeight) {
console.log(element.clientHeight);
console.log(element.scrollHeight);
console.log('ELEMENT: ' + element[0]);
angular.element(element[0]).removeClass('scroll');
}
}
};
});
I made you an example with nativeJS and angularJS with native JS. Just check Elements clientHeight and scrollHeightattribute to make it work.
angularJS directive
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {}])
.directive('removeBorder', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
if (element[0].clientHeight >= element[0].scrollHeight) {
console.log(element[0].clientHeight);
console.log(element[0].scrollHeight);
angular.element(element[0]).addClass('no-scroll');
}
}};
});
Native JS - Plunker
function hasScrollbar(elemId) {
elem = document.getElementById(elemId);
if (elem.clientHeight < elem.scrollHeight) {
alert("The element #" + elemId + " has a vertical scrollbar!");
} else {
alert("The element #" + elemId + " doesn't have a vertical scrollbar.");
elem.style.border= "0";
}
}
Scrollable shoulb be set automatically. Or use css:
textarea { overflow-y:scroll; }
I am loading content in the magnific popup using the iframe method.
It works just fine, except that it take awhile to load the iframe content. Until the content is loaded the iframe is just a blank dark and empty popup and the user has no clue as to what is happening.
Is there a way to make the iframe show a loading message or animation until the content arrives?
The .mfp-preloader css class is of no help because it is hidden behind the iframe.
I'm thinking the best was is to somehow hide the iframe until it has content.
Thanks
Thanks to Dmitry who pointed me in the right direction, here is the answer that worked for me:
The callback:
callbacks: {
beforeAppend: showIframeLoading
}
The showIframeLoading function:
var showIframeLoading = function() {
var curLength = 0;
var interval = setInterval(function() {
if ($('iframe').length !== curLength) {
curLength = $('.column-header').length;
$('.mfp-content').hide();
$('.mfp-preloader').show();
}
}, 50);
this.content.find('iframe').on('load', function() {
clearInterval(interval);
$('.mfp-content').show();
$('.mfp-preloader').hide();
});
};
You may use popup events to create custom actions, e.g.:
callbacks: {
beforeAppend: function() {
console.log('before iframe is added to DOM');
this.content.find('iframe').on('load', function() {
console.log('iframe loaded');
});
}
}
Instead of polling, how about if we just detect iframe and toggle the mfp-s-ready class from the container.
In case of images, mfp-s-ready is added to the mfp-container div when image has loaded. We can simply toggle that ourself for video (iframe) + use some custom css to our advantage.
callbacks: {
beforeAppend: function () {
if (this.currItem.type === 'iframe') {
$('.mfp-container').removeClass('mfp-s-ready');
}
this.content.find('iframe').on('load', function () {
$('.mfp-container').addClass('mfp-s-ready');
});
}
}
and add this CSS:
.mfp-container .mfp-content {
display: none;
}
.mfp-s-ready.mfp-container .mfp-content {
display: inline-block;
}
This will also support mixmode galleries with videos and images.
I have this iframe working with basic JavaScript:
<iframe id="upload_iframe" name="upload_iframe" onLoad="uploadDone();"></iframe>
Which triggers the method uploadDone(); when the content of the iframe has been loaded.
How do I do the same thing in Angular?. I want to call a function on the controller when the iframe loads, but I haven't seen a ng-onload so far.
Commenting on a year old question.
For cases where there are more than 1 iframes, I needed to bind "onload" events on to.
I did this approach.
Directive
APP.directive('iframeOnload', [function(){
return {
scope: {
callBack: '&iframeOnload'
},
link: function(scope, element, attrs){
element.on('load', function(){
return scope.callBack();
})
}
}}])
Controller
APP.controller('MyController', ['$scope', function($scope){
$scope.iframeLoadedCallBack = function(){
// do stuff
}
}]);
DOM
<div ng-controller="MyController">
<iframe iframe-onload="iframeLoadedCallBack()" src="..."></iframe>
</div>
try defining the function within controller as:
window.uploadDone=function(){
/* have access to $scope here*/
}
For anyone using Angular 2+,
It's simply:
<iframe (load)="uploadDone()"></iframe>
No global function, works with multiple iframe.
For anyone ending up here, the ng-onload plugin is the perfect solution to this issue. It doesn't pollute the global namespace and doesn't require you to create one-off directives when all you want is to call a simple scope function.
for those that inject the iframe dynamically, you could do the following
html...
<div #iframeContainer></div>
ts...
#Component({
selector: 'app-iframe-onload',
templateUrl: './iframe-onload.component.html'
})
export class IframeOnload implements AfterViewInit {
#ViewChild('iframeContainer') iframeContainer: ElementRef;
ngAfterViewInit(): void {
this.injectIframe();
}
private injectIframe(): void {
const container = this.iframeContainer.nativeElement;
const iframe = document.createElement('iframe');
iframe.setAttribute('width', '100%');
iframe.setAttribute('src', 'https://example.com/');
iframe.setAttribute('height', 'auto');
iframe.setAttribute('frameBorder', '0');
iframe.addEventListener('load', this.iframeOnLoadtwo);
container.appendChild(iframe);
}
public iframeOnLoadtwo(): void {
console.log('iframe loaded...');
}
}
I have a div which is placed in any pages. When you click on this div, it will be closed by using jquery checking on its css class:
$('.content-box-header').click(function
() {
$(this).parent().children('.content-box-content').slideFadeToggle(200);
}
In several pages, I need to set that div with a specific ID in order to perform some tasks after that div closed. For example:
$('#divleft').live('click', function
(e) { runTask(); }
The above sample is trigger on that div with the specific ID = divleft.
The problem is that, I would like to check something ONLY after the div is really closed, but in my current situation, runTask() is performed before the div is closed.
SO my question is that how could the method runTask(); is delayed after the div is really closed?
Thanks in advance!!!!
I think what you are looking for is .queue(). See the documentation here: http://api.jquery.com/queue/
You can call this on a set of matched elements to get some information about the remaining effects to be run. So in your case you could do something like this:
$('#divleft').live('click', function (e) {
runTaskAfterAnimation()
});
function runTaskAfterAnimation() {
if ($('.content-box-content').queue('fx').length == 0) {
runTask();
} else {
setTimeout(runTaskAfterAnimation, 10);
}
}
View a demonstration here: http://jsfiddle.net/LeHHj/2/
This time it definitely works ;)
In your case, just use
$('.content-box-header').click(function () { $(this).parent().children('.content-box-content').slideFadeToggle(200, function() { runTask(); }); }
You can store the function on the div using jQuery's data() method.
This lets you set an 'afterClick' function on your element:
$('.content-box-header').click(function () {
var $this = $(this);
$this.parent().children('.content-box-content').slideUp(200, function () {
var after = $this.data('afterClick');
if (after) after();
});
});
$('#divleft').data('afterClick', function () { runTask(); });
You need to check if the item you are wanting to runTask() on is :animated and if so 'register' a callback (via .data()) for when it's done
.live('click', doRunTask);
doRuntask = function() {
if ($(this).is(':animated'))
$(this).data('afterAnimation', runTask);
else
runTask();
});
$('.content-box-header').click(function () {
$(this).parent().children('.content-box-content').slideFadeToggle(200, function() {
var cb = $(this).data('afterAnimation');
cb && cb();
});
}