I added 3 images in one page that one link triggers them, completely standard.
<div class="col-md-4 col-lg-4">
<a href="img/nibe-cert.jpg" data-lightbox="nibe-cert" data-title="ISO 9001-14001 SERTİFİKASI">
<img alt="Nibe Cert" class="border--round box-shadow-wide" src="img/nibe-cert.jpg">
</a>
</div>
And I added:
<script>
lightbox.option({
"showImageNumberLabel": false
});
</script>
But I still can see the text: image 1 from 3
It seems that you have to set an extra option, although the documentation does not mention directly that this option is related to showImageNumberLabel.
Your code needs "albumLabel": false, so it becomes:
<script>
lightbox.option({
"albumLabel": false,
"showImageNumberLabel": false
});
</script>
Related
I'm stuck. Cannot figured this out. This question is very simple to show, but I'm not really sure how to put it as a question, therefore I'll try my best.
First, here's the layout of my whole app (The problem lies in the Header.jsp):
<jsp:include page="../home/Header.jsp" />
<jsp:include page="../home/Modals.jsp" />
<div data-ng-view data-save-scroll-position data-position-relative-to-menu></div>
<jsp:include page="../home/Footer.jsp" />
The problem is very simple. I have the following data-ng-class in the data-ng-view section that change a tab to active if something is true (The problem is it won't work in one scenario even though it displayed true in the tab name):
<ul class="nav nav-tabs">
<li role="presentation" data-ng-class="tab.isSelected ? 'active' : ''" data-ng-repeat="tab in ctrl.tabs"
data-ng-click="ctrl.fetchBIReports(tab)">
</li>
</ul>
In the JSP that use data-ng-include for the above markup, there's a side nav to change to this page. Once clicked this side-nav, it highlighted the tab 'active' as expected (trying not to include the whole jsp):
<div class="side-navbar">
<ul>
<li class="{{ ctrl.navigate.path == 'bi/schedule' ? 'active-link' : 'normal-link'}}">
Schedule Reports
</li>
</ul>
</div>
<div class="content-right" data-ng-include="ctrl.navigate.path"></div>
content-right includes the JSP mentioned in the second markup.
So far, so good. Here's a demo of it working (including both side-navbar and content-right):
The problem is, in my Header.jsp, there's a nav bar that takes me to the same page. If it is clicked from a different page with different controller, then it works. But if I'm in the current controller and click that nav bar link, then data-ng-class does not take 'active' as its class. Here's the markup for the Header.jsp for that link:
<li class="dropdown" data-roles="['ROLE_ADMIN']">
<a href="#/bi" class="dropdown-toggle" data-toggle="dropdown" data-ng-click="ctrl.changeNavigation('bi/schedule')"
role="button" aria-haspopup="true" aria-expanded="false">BI Management<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Schedule Reports</li>
</ul>
</li>
Here is the demo of it not working even though it is printing out true in the UI:
The only problem is with this UI. All the data are populated. Records are displayed for the correct tab. Even side nav-bar is displaying the correct active class.
Your syntax for ng-class is off a bit. The format is "{ '[class-name]': [expression that evaluates to true or false] }". You can have multiple class values separated by commas each with their own expression. When an expression is true, the corresponding class is applied to the element and when it is false the class is removed from the element. The way you have written it would almost work for the plain class attribute, but you would need to include the interpolation characters: {{ and }}. Here is a very simple example to illustrate ng-class.
angular.module('app', []);
.red {
color: #fff;
background-color: #e21d1d;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<label>
<input type="checkbox" ng-model="applyRedClass" /> Apply 'red' class
</label>
<div ng-class="{'red': applyRedClass}">
This is a simple example of how to use ng-class.
</div>
</div>
I have implemented accordion in my application. but close-other = "true" seems not working.
I implemented a common compenent to use collapsible component in my application-
Component-
var uiCollapsiblePanel = {
transclude: {
header: 'uiCollapsiblePanelHeader',
body: 'uiCollapsiblePanelBody'
},
bindings: {
isBlockExpanded: '<',
triggerCollapse: '&'
},
templateUrl: './ui-collapsible-panel.html',
controller: 'uiCollapsiblePanelController',
controllerAs: 'ucpc'
};
angular
.module('common')
.component('uiCollapsiblePanel', uiCollapsiblePanel);
ui-collapsible-panel.html -
<div class=" ui-collapsible-panel">
<uib-accordion close-others="true">
<div uib-accordion-group is-open="$ctrl.isBlockExpanded">
<uib-accordion-heading>
<div ng-transclude="header">
</div>
</uib-accordion-heading>
<div ng-transclude="body"></div>
</div>
</uib-accordion>
</div>
Calling ui-coolapsible-component-
<div class="app-custom-accordian">
<ui-collapsible-panel is-block-expanded='false'>
<ui-collapsible-panel-header>
<request-header all-requests-data="mrtt.allRequestsData">
</request-header>
</ui-collapsible-panel-header>
<ui-collapsible-panel-body>
<request-body all-requests-data="mrtt.allRequestsData" class="request-body-container"></request-body>
</ui-collapsible-panel-body>
</ui-collapsible-panel>
</div>
<div class="app-custom-accordian">
calling-ui-collapsible-component
</div>
<div class="app-custom-accordian">
calling-ui-collapsible-component
</div>
<div class="app-custom-accordian">
calling-ui-collapsible-component
</div>
can someone help me to identify whats the issue?
In this example you implemented single accordion. This function will work if you have multiple uib-accordion-group's. And opening of one will cause other to close.
By documentation (https://angular-ui.github.io/bootstrap/): close-others $ C (Default: true) - Control whether expanding an item will cause the other items to close."
Hope, it will help.
If this is not the case, i suggest to expand example with more details
(edited)
so as i understood correctly you are trying to do generic reusable accordion. For that you created 'ui-collapsible-panel.html'.
The root wrapper 'uib-accordion' needs multiple uib-accordion-group's.
In this example you are transcluding inside one group.
<div uib-accordion-group is-open="$ctrl.isBlockExpanded">
<uib-accordion-heading>
<div ng-transclude="header"></div>
</uib-accordion-heading>
<div ng-transclude="body"></div>
</div>
Which means you wont able to use 'close-others'.
For this to work, you either need some ng-repeat or transclude directly uib-accordion-group's. Basicaly this multiple transclude (for header and body) is not usefull, because all this data must be in same parent "uib-accordion". Example of direct transclude:
<ui-collapsible-panel>
// preload some data (for example groups)
<div uib-accordion-group is-open="$ctrl.isBlockExpanded" ng-repeat="group in $ctrl.groups">
<uib-accordion-heading>
// and use group data to for request-header and request-body
<request-header all-requests-data="mrtt.allRequestsData"></request>
<uib-accordion-heading>
<request-body all-requests-data="mrtt.allRequestsData" class="request-body-container"></request-body>
</div>
</ui-collapsible-panel>
Reference https://angular-ui.github.io/bootstrap/ (orignal uib-bootstrap plunker example)
I'm building an Single Page App where the paypal button is generated on ng-click from a button (Add products).
The problem I'm facing, is that if the user clicks this button several times, the app will generate several buttons one after the other.
This can very well happen as the user might click the button, but then go back and add an extra product, before finish the purchase.
How could I manage to remove all existing buttons before adding the new one?
The function looks like this:
$scope.formulari = function(){
paypal.Button.render({
env: 'production', // Or 'sandbox'
locale: 'es_ES',
style: {
label: 'paypal',
...
And after a few clicks, my initial HTML button <a id="paypal-button"></a> looks like this:
<a id="paypal-button">
<div id="xcomponent-paypal-button-6d3dcbc0c4" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
<div id="xcomponent-paypal-button-46823018c3" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
<div id="xcomponent-paypal-button-41aad29e14" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
<div id="xcomponent-paypal-button-48d3247535" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
</a>
Generating a button on click might not be the way you want to go with an AngularJs structure. Editing your DOM structure is more a jQuery thing and in general you don't want to mix the two (Some explanations of why: 1, 2).
An Angular way to pick this up would be the following (Explanation beneath snippet):
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.articles = ['PC', 'Playstation', 'Xbox'];
$scope.cart = [];
$scope.addArticleToCart = function(article) {
$scope.cart.push(article);
}
$scope.clearCart = function() {
$scope.cart = [];
}
$scope.doPaypalThings = function() {
//REST API stuff
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="article in articles">
<button ng-click="addArticleToCart(article)">
{{article}}
</button>
</div>
<br>
<div ng-show="cart.length > 0">
<button id="paypal-button" ng-click="doPaypalThings()">
Paypal
</button>
</div>
<br>
<div>
In cart:
</div>
<div ng-repeat="item in cart">
{{item}}
</div>
<br>
<div>
<button ng-click="clearCart()">
Clear cart
</button>
</div>
</div>
</body>
</html>
With this method the button always exists, it just isn't visible until the requirements within the ng-show are met. In the example, the requirement is that there are items in the cart. You will notice that once the requirements are no longer met the button will disappear again.
An opposite of ng-show is ng-hide which can be used in the same way:
ng-hide="cart.length == 0" or ng-hide="cart.length < 1
If you're dead set on using your current method, you can check out this answer here, although it is not Angular.
A few months ago I've be created the topic: Try to render two templates in same View (Ui-Router), where I asked about how to render multiple views in the same page. My objective with this was created a web app as an desktop one, with views to minimize, maximize, close and stuff like that.
Well, my app is ready but I'm getting a problem, when I up my app to the production some computers are taking a long time to render all the Views. In the image bellow we can se a lot of requisitions that server take to return my templatesURL's.
There is a way to avoid this ? I was looking for an lazy load to templateURL but I Didn't find any. :(
This plunkr was the approach what I used. I have only one state for all my Views (My current app.config has 103 Views):
routerApp.config(function($stateProvider) {
$stateProvider.state('mainState', {
views: {
'CompanyView': {
templateUrl: 'Company.html'
},
'PeopleView': {
templateUrl: 'People.html'
},
.....
....
}
})
});
Introduction
The way you approached the solution is the cause of the problem you're facing, because you have too many views for a single state, it'll end up having to load all of them in order to set that state, so every time you access your state, ui-router has to load every template in order to set the views. It might not cause problem for a few number of templates, but, for larger numbers like yours it is definitely an issue.
Ng-Templates
You can try to cache your templates in your page using <script type="text/ng-template"... in order to prevent the loading time, it's a good practice by the way. Usually it's part of the production build optimization, load all templates in the template cache, so that the application load time decreases significantly provided that you don't have to wait for an http call to load a page. It will indeed increase the performance in your case, but I don't have a benchmark that ensure if it'd be enough for your scenario.
Component Based Solution
Anyhow, you can always implement interface components to behave the way you want, optimized in such a way that it doesn't have to load one hundred templates to show a single panel for the user.
My suggestion is, instead of using ui-router, use a component based solution, create a directive component to hold the panel content of each window and its behavior; and use a controller to manage the state of opened and closed panels, holding and managing each opened panel in a list and so on. For example:
<nav>
<button ng-click="openPanel({title: 'My Panel Title', templateUrl: 'myPanel.html'>">
Open myPanel
</button>
<nav>
<main>
<panel ng-repeat="panel in openedPanels"></panel>
</main>
The following snippet implements this approach using bootstrap 4 css, each panel is a bootstrap card, and it has a list of panels it can open and on click of a nav list it adds the respective panel to the opened panels list where angularjs can render it on the html using ng-repeat. This way, only the opened window will be rendered, therefore, only the opened window template will be loaded.
Disclaimer: This is a very simple example implemented not using the best practices available out there. If you intend to use this approach you should implement it based on your application to fit better the needs of your architecture, this one is not a complete functional component, it's just an example for the sake of the demonstration.
angular.module('app', [])
.controller('PanelsCtrl', function($scope) {
// available windows to be opened
$scope.panels = [
{ title: 'Window 1', templateUrl: 'window1.html' },
{ title: 'Window 2', templateUrl: 'window2.html' }];
// all currently opened panels
$scope.openedPanels = [];
// opens a panel (a.k.a, adds a panel
// to the opened panels list)
$scope.openPanel = function(panel) {
if ($scope.openedPanels.indexOf(panel) === -1)
$scope.openedPanels.push(panel);
};
// close a panel (a.k.a, removes a panel
// from the opened panels list)
$scope.onClosePanel = function(panel) {
$scope.openedPanels.splice($scope.openedPanels.indexOf(panel), 1);
};
})
.directive('window', function($templateRequest, $templateCache, $compile) {
return {
restrict: 'E',
scope: {
panel: '=',
onClosePanel: '&'
},
template: `
<div class="card">
<h4 class="card-header">
<span>{{ panel.title }}</span>
<button
ng-click="onClosePanel(panel)"
type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</h4>
<div class="card-body">
<ng-include src="panel.templateUrl"></ng-include>
</div>
</div>
`
}
})
// example controlelr to be used with ng-controller
.controller('Window1Ctrl', function($scope) {
$scope.window1Prop = 'This is a property from Window1Ctrl'
})
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css'
<div ng-app="app">
<div class="container" ng-controller="PanelsCtrl">
<div class="row">
<div class="col-sm-3">
<ul class="nav flex-column">
<li class="nav-item" ng-repeat="panel in panels">
<a class="nav-link active" href="#" ng-click="openPanel(panel)">
{{ panel.title }}
</a>
</li>
</ul>
</div>
<div class="col-sm-9">
<window ng-repeat="panel in openedPanels" panel="panel" on-close-panel="onClosePanel(panel)">
</window>
</div>
</div>
</div>
<!-- NG-TEMPLATES -->
<script type="text/ng-template" id="window1.html">
<div ng-controller="Window1Ctrl">
<b>{{panel.title}}</b>
<h5>window1Prop: {{ window1Prop }}</p>
</div>
</script>
<script type="text/ng-template" id="window2.html">
<em>{{panel.title}}</em>
</script>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
I am building an app for a scheduler using Appgyver Steroids, and on the navbar, I have a button to switch days, but I can't figure out how to switch de label:
index.html
<script src="/scripts/application.js"></script>
<super-navbar-button ng-bind="dayTitle" side="right" onclick="supersonic.ui.drawers.open('right')">Day</super-navbar-button>
drawerMenu.html
<script src="/scripts/application.js"></script>
<li class="item" onclick="supersonic.ui.drawers.close('right')" ng-model="day" ng-click="newDay()">Monday</li>
<div style="clear: both;"></div>
<li class="item" onclick="supersonic.ui.drawers.close('right')" ng-model="day" ng-click="newDay()">Tuesday</li>
<div style="clear: both;"></div>
application.js
angular.module('SteroidsApplication', [
'supersonic'
])
.controller('IndexController', function($scope, supersonic) {
$scope.newDay= function(){
supersonic.logger.log("Got here");
$scope.dayTitle= $scope.day;
}
});
Right now I'm not even logging the "Got here" text, probably I have a minor error or something I'm missing. This is my first steroids/supersonic/angular/hybrid application. Thanks in advance.
two things dont do onclick with angular, instead do ng-click
did you tried doing
{{ day }}
instead of writing the day?