I am trying to implement a simple angular-flexslider app within my project:
https://github.com/woothemes/FlexSlider
I have been successful in sliding the images, but i cannot get the next/previous buttons to show, also, there seems to be a left margin which shows the previous image.
HTML:
<head>
<title>Angular FlexSlider Example - Basic Slider</title>
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/woothemes/FlexSlider/master/flexslider.css">
<style type="text/css">
.flexslider-container {
width: 100%;
margin: 1px auto;
}
</style>
</head>
<body ng-controller="BasicSliderCtrl">
<flex-slider slide="s in slides" animation="slide" >
<li>
<img ng-src="{{s}}">
</li>
</flex-slider>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://raw.githubusercontent.com/woothemes/FlexSlider/master/jquery.flexslider.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/thenikso/angular-flexslider/master/angular-flexslider.js"></script>
<script type="text/javascript">
angular.module('BasicSlider', ['angular-flexslider'])
.controller('BasicSliderCtrl', function($scope) {
$scope.slides = [
'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg'
];
});
</script>
</body>
</html>
Plunker: http://plnkr.co/edit/2529sAA4i6qcCzbZgCA2
Here's what i am trying to achieve: http://flexslider.woothemes.com/index.html
Thanks
I don't know if you still have this issue but I ran into both of these problems myself. The fixes that worked for me are below.
Issue 1 - next/previous buttons not showing
The next and previous buttons are shown using css. Ensure that flexslider.css is included in your page.
Also, if you open up flexslider.css you will see under an "Icon fonts" comment (its near the top) some source urls. Ensure that these source urls match the location of the flexslider font files in your project.
Issue 2 - Left Margin showing previous image
Add the following code to a css file included on your page
.carousel li {margin-right:0;}
Related
Lightbox shows the enlarged image in a popup, but nothing else. No title and no navigation and closing symbols, no frame-creating animation behavior. I must use chrome's back arrow to return to the original image. I tested Lightbox in www.yurowcreates.com/Lville60. (To view, use the tab labeled "May 3rd" then click the picture in the upper left-hand corner.) I am also using Bootstrap. Could there be any conflicts? I have followed all installation instructions including providing paths to the navigation symbols and using the proper ordering of my HTML link tags and javascript script tags. (See below)
My HTML markup is as follows:
In the head section:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css" integrity="sha384-
PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
<link rel="stylesheet" href="Style.css" type="text/css">
<link rel="stylesheet" href="lightbox.css" type="text/css">
In the body section;
<div class="container">
<div class="row mb-3">
<div class="col">
<img class="mb-5 mb-sm-0" src="images/sandyandstu.jpg" width="300" height= "200">
</div>
...two other images in the same row go here...
</div>
,,,
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
... (ajax and bootstrap scripts)...
<script src="lightbox.js"></script>
</body>
Check that image paths are correct and modify lightbox.css accordingly to your file structure
See this codepen: https://codepen.io/rscafi/pen/bNXRxY , an example of a sticky footer made with angular 1.3.2:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
If you change the version from 1.3.2 to 1.5.7 like this:
<link rel = "stylesheet" href = "//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel = "stylesheet" href = "//ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<!-- Angular Material Dependencies -->
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-messages.min.js"></script>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-sanitize.min.js"></script>
<!-- Angular Material Library -->
<script src = "//ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src = "//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/angular-material-icons.min.js"></script>
It doesnt work anymore. Does anyone know how to fix this?
the fix is remove layout="column" or layout-fill in the root div
<div ng-app="materialApp" ng-controller="AppCtrl" layout="column" layout-fill>
What happen is
It doesnt work anymore
It still work but I think in new angular-material.min.css the <footer> load into the DOM by layout-fill, layout-fill forces the layout element to fill its parent container, mean the <footer>...</footer> placed in the bottom of the window (parent) not the page (child <div>...</div> )
https://material.angularjs.org/latest/layout/options
update
Furthermore, if you want it sticky you even no need to delete but add more, so you split your page into 3 sections with
<md-toolbar> and <md-content>
update
edit CSS file with
md-content {
min-height: calc(100vh - 176px)
}
check this out
http://embed.plnkr.co/4TEtW9eQK0iXH4GYhSe9/
I'm developing an app in AngularJs, which has to display a server generated pdf to the user.
Using pdf.js I successfully downloaded and displayed a pdf, the issue is that now I have to provide to the user a functionality to print it.
I see two ways:
When the button is clicked, open a new window and re-download the pdf to show the print preview. But this'll overload the server;
Download the pdf somewhere with angular, and let pdf.js only to render it, then to print use the previous approach only with a local file. But I don't know where save the file.
I'm missing something, there are other ways?
Thank you.
Have a look at the PDF.js demo app - it includes a print button!
https://mozilla.github.io/pdf.js/web/viewer.html
There is an npm package which can do exactly this https://github.com/legalthings/angular-pdfjs-viewer
Usage
<!DOCTYPE html>
<html ng-app="app" ng-controller="AppCtrl">
<head>
<title>Angular PDF.js demo</title>
<script src="bower_components/pdf.js-viewer/pdf.js"></script>
<link rel="stylesheet" href="bower_components/pdf.js-viewer/viewer.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-pdfjs-viewer/dist/angular-pdfjs-viewer.js"></script>
<script src="app.js"></script>
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.some-pdf-container { width: 100%; height: 100%; }
</style>
</head>
<body>
<div class="some-pdf-container">
<pdfjs-viewer src="{{ pdf.src }}"></pdfjs-viewer>
</div>
</body>
</html>
I would very much like to integrate in my angular app the Basic Usage template
from Angular Materials.
I really like the transition effect when the <> is clicked.
I already did a search for that directive on their website but did not find it. The closest thing I managed to find is the Toolbar, but it's slightly different in the way that the upper corners are not rounded. Also, using a simple ng-show, will not provided that transition.
Any suggestions on how to achieve this?
You can do that with angular animations which is just some simple CSS with transitions. And you are on the right track with md-toolbar. The demos use it, you just need to set some CSS to round the top corners.
md-card md-toolbar {
border-radius: 3px 3px 0 0;
}
Now add some content below the md-toolbar that you want to toggle and use ng-show on it.
<div class="toggle-content" ng-show="open">
The toggled content!
</div>
Then just check the ngShow documentation on how to animate it with CSS. What you want to animate here is the height of the toogle-content element. When it is hidden, height: 0 is applied, otherwise height: 200px.
.toggle-content {
height: 200px;
background: red;
}
.toggle-content.ng-hide-add, .toggle-content.ng-hide-remove {
transition: height linear 0.5s;
}
.toggle-content.ng-hide {
height: 0;
}
And of course you need a md-button in the toolbar that toggles the content.
<md-button ng-click="open = !open">
Toggle
</md-button>
Complete example: http://codepen.io/kuhnroyal/pen/XXZPrE
You need to implement something akin to the slideToggle() method in jquery. The Angular Slideables directive provides this functionality.
The straight corners are a custom style implemented in addition to the md-toolbar directive.
It turns out this is the closest thing that I managed to find that suits my needs.
'use strict';
angular.module('ui', ['ui.bootstrap']);
(function() {
angular.module('ui', [
"ui.bootstrap",
"ngAnimate"
]);
var module = angular.module("ui");
module.controller("controller", function($scope) {
var model = this;
model.oneAtATime = true;
model.Operators = [{
ReportItemName: "asd"
}, {
ReportItemName: "fds"
}];
});
}());
<!DOCTYPE html>
<html ng-app="ui">
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-animate#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap#0.14.3" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.js"></script>
<script data-require="ui-bootstrap-tpls-0.11.2.min.js#0.14.3" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="controller as model">
<uib-accordion close-others="model.oneAtATime">
<uib-accordion-group heading="Custom template">
<uib-accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
<h1>Some Content</h1>
</uib-accordion-group>
</uib-accordion>
</div>
</body>
</html>
Other solutions that provide out-of-the-box functionality are very much welcomed.
first time using material design with angular and something is not going right I think.
I'm using the md-tab element and everything is fine until I add the md-border-bottom as in this example in the docs of AngularJS MD : https://material.angularjs.org/#/demo/material.components.tabs
the bottom border just won't appear.
here's my template:
<md-tabs md-border-bottom>
<md-tab ng-repeat="league in leagues" label="{{league.caption}}">
{{league.caption}}
</md-tab>
</md-tabs>
and here is the output : http://screencast.com/t/OZrD9xFlQA
I want to mention that this is not the only MD attribute that is not working for me, i assume I've done something wrong, or I'm missing something.
Here is the css and js I linked to my html:
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
Thank you very much!
The line on the border appears to come from this CSS rule:
md-tabs[md-border-bottom] md-tabs-wrapper {
border-width: 0 0 1px;
border-style: solid;
}
That's in docs.css, which means it's a style provided specifically for the documentation, not to all consumers of the library. If you want a border, you'll have to apply the style yourself.