I had done one quiz application, But i want to add some animations
like fadein/fade-out, when click the prev/next button. Can any one
help me do the same. something need to change the css something need to change the CSS something need to change the css something need to change the css?
* {}
body {}
.question {
width: 70%;
margin: 0 auto;
height: auto;
display: block;
background: #eeeeee;
}
.question h1 {
text-align: center;
padding-top: 30px;
color: #666666;
}
.question h2 {
width: 100%;
font-size: 22px;
color: #0c1e5c;
padding: 1% 3% 0% 3%;
}
.question ul:nth-child(odd) {
background: #d0dff6;
width: 30%;
padding: 8px;
margin: 1% 9%;
display: inline-block;
color: #0c1e5c;
}
.question ul:nth-child(even) {
background: #d0dff6;
width: 30%;
padding: 8px;
margin: 1% 9%;
display: inline-block;
color: #0c1e5c;
}
.button {
text-align: center;
margin: 1% 0;
}
.btn {
background: #8bf8a7;
padding: 5px;
}
<html ng-app="quiz">
<head>
<meta charset="utf-8">
<title>Basic Quiz</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body ng-controller="quizCtrl">
<div class="question">
<h1>QUIZ APPLICATION</h1>
<h2>{{questions.question}}</h2>
<ul ng-repeat="option in questions.options">
<li style="list-style:none">
<input type="{{buttonType}}">{{option.text}}</li>
</ul>
</div>
<div class="button">
<input type="button" value="previous" class="btn" ng-show="isPrevious" ng-click="previousQuestion()">
<input type="button" value="next" class="btn" ng-show="isNext" ng-click="nextQuestion()">
</div>
</body>
<script>
var app = angular.module("quiz", [])
app.controller("quizCtrl", function($scope) {
$scope.data = [{
question: "1)Which of the following selector matches a element based on its id?",
type: "single",
options: [{
text: "The Id Selector"
},
{
text: "The Universal Selector"
},
{
text: "The Descendant Selector"
},
{
text: "The Class Selector"
}
]
},
{
question: "2)Which of the following defines a measurement as a percentage relative to another value, typically an enclosing element?",
type: "multiple",
options: [{
text: "%"
},
{
text: "cm"
},
{
text: "percentage"
},
{
text: "ex"
}
]
},
{
question: "3)Which of the following property is used to set the background color of an element?",
type: "single",
options: [{
text: "background-color"
},
{
text: "background-image"
},
{
text: "background-repeat"
},
{
text: "background-position"
}
]
},
{
question: "4)Which of the following is a true about CSS style overriding?",
type: "multiple",
options: [{
text: "Any inline style sheet takes highest priority. So, it will override any rule defined in tags or rules defined in any external style sheet file."
},
{
text: "Any rule defined in tags will override rules defined in any external style sheet file."
},
{
text: "Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable."
}
]
}
];
$scope.index = 0;
$scope.questions = $scope.data[$scope.index];
$scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
$scope.isPrevious = false;
$scope.isNext = true;
$scope.nextQuestion = function() {
if ($scope.index < 3) {
$scope.index = $scope.index + 1;
$scope.questions = $scope.data[$scope.index];
$scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
$scope.isPrevious = true;
if ($scope.index == 3) {
$scope.isNext = false;
}
} else {
// disble next botton logic
$scope.isNext = false;
}
}
$scope.previousQuestion = function() {
if ($scope.index > 0) {
$scope.index = $scope.index - 1;
$scope.questions = $scope.data[$scope.index];
$scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
$scope.isNext = true;
if ($scope.index == 0) {
$scope.isPrevious = false;
}
} else {
// disble next botton logic
$scope.isPrevious = false;
}
}
});
</script>
</html>
Check out ng-animate, basically what it does is it adds classes that you can style accordingly on showing dom and on hiding dom, like this:
/* The starting CSS styles for the enter animation */
.fade.ng-enter {
transition:0.5s linear all;
opacity:0;
}
/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
opacity:1;
}
And to use that functionality you would have to use ng-repeat in your html, something like this:
<div ng-repeat="item in data" ng-if="index === $index">
//Your question html here
</div>
Where data and index are $scope.data and $scope.index.
That would be the angular way of doing things.
However I see that you are using the same div, only changing scope data, that would require you to set
transition: 1s all ease;
On the question class, and then to do something like this in javascript:
angular.element('.question').css('opacity', 0);
$timeout(function() {
// change question..
angular.element('.question').css('opacity', 1);
}, 1000);
Related
How can I change css width from 50% to 100 % when click the button see more detail here >>> Sample sandbox
<template>
<div id="theSpecial">Hello World Special</div>
<button #click="changeWidth">Change width</button>
</template>
<script>
export default {
data() {
return {
testBoolean: false,
};
},
methods: {
changeWidth() {
this.testBoolean = true;
//change width to 100%
},
},
};
</script>
CSS
#theSpecial {
background-color: purple;
color: white;
width: 50%;
}
You have to make some change on your code
First of all add this to your css
.theSpecial{width:50%}
.fullWidth{width:100%}
To toggle the full width modify the method
changeWidth() {
this.testBoolean = !this.testBoolean;
//this will toggle the width on every click
},
and then use this in your component template
<div class="theSpecial" v-bind:class="{fullWidth:testBoolean}">
N.B. change the id into class, beacuse id has more css specifity.
This will toggle the class full width accordly to the value of testBoolean.
This is your Sandbox
Here you can find documentation about class binding
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div id="theSpecial" :class="{ 'full-width': testBoolean }">
Hello World Special
</div>
<button #click="changeWidth">Change width</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
testBoolean: false,
};
},
methods: {
changeWidth() {
this.testBoolean = true;
},
},
};
</script>
#theSpecial {
background-color: purple;
color: white;
width: 50%;
}
#theSpecial.full-width {
width: 100%;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
data() {
return {
testBoolean: false,
};
},
methods: {
changeWidth() {
this.testBoolean = !this.testBoolean;
//change width to 100%
},
},
.theSpecial {
background-color: purple;
color: white;
width: 50%;
}
.fullwidth {
background-color: purple;
color: white;
width: 100%;
}
<div :class="(this.testBoolean === true)? 'fullwidth':'theSpecial'">Hello World Special</div>
<button #click="changeWidth">Change width</button>
I have an image column in a grid, and I show the image to 25px x 25px so it fits in the row nicely.
I added a hover to the images and when the mouse hovers on them there are supposed be offset from the left (which it does) and then the image is supposed to get bigger so you can see it better.
2 things are happening
1) When I hover on the image, its flickers continuously
2) Even though the image goes 100px to the left, it doesn't expand to the new size.
I have no idea why this is happening.
$(document).ready(function() {
LoadCatalogsGrid();
});
var myData = [{
"RoomName": "Room 1",
"OptionImageFile": "a"
},
{
"RoomName": "Room 2",
"OptionImageFile": "b"
}
];
function optionGridImage(url) {
return "<div class='imageOptionsList'><a style='text-align:center;height:25px;width:25px;' href='" +
GetCatalogImageLocation(url) +
"'><img src='" +
GetCatalogImageLocation(url) +
"' style='height:25px;width:25px;' alt=''/></a></div>";
}
function GetCatalogImageLocation(imageName) {
if (imageName == "a") {
return "https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/king_lead.jpg?itok=4b75-ttE&resize=1100x1100";
} else {
return "https://pmcvariety.files.wordpress.com/2017/08/king-of-the-hill.jpg?w=1000&h=562&crop=1";
}
}
function LoadCatalogsGrid() {
$("#Grid").empty();
$("#Grid").kendoGrid({
scrollable: true,
selectable: "row",
filterable: false,
height: 700,
columns: [{
field: "RoomName",
title: "Room Name",
width: "120px",
template: "<div >#=RoomName #</div>"
},
{
field: "OptionImageFile",
title: "Image",
template: "#= optionGridImage(OptionImageFile) #",
attributes: {
style: "margin:0 auto;"
},
width: 50
}
],
dataSource: {
data: myData
},
dataBound: function(e) {
}
});
}
.imageOptionsList:hover a {
visibility: visible;
width: 250px !important;
height: 325px !important;
margin-left: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<div id="Grid"></div>
** Snippet Edit **
So now when I hover the image is no longer flickering, however when you hover over the image it moves left, and it shouldn't it should just stay in its spot and when hovered show a bigger version
Here you are:
$(document).ready(function() {
LoadCatalogsGrid();
});
var myData = [{
"RoomName": "Room 1",
"OptionImageFile": "a"
},
{
"RoomName": "Room 2",
"OptionImageFile": "b"
}
];
function optionGridImage(url) {
url = GetCatalogImageLocation(url);
return `
<div class="imageOptionsList">
<a style="background-image:url(${url})" href="${url}">
<img src="${url}" alt="">
</a>
</div>
`;
}
function GetCatalogImageLocation(imageName) {
if (imageName == "a") {
return "https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/king_lead.jpg?itok=4b75-ttE&resize=1100x1100";
} else {
return "https://pmcvariety.files.wordpress.com/2017/08/king-of-the-hill.jpg?w=1000&h=562&crop=1";
}
}
function LoadCatalogsGrid() {
$("#Grid").empty();
$("#Grid").kendoGrid({
scrollable: true,
selectable: "row",
filterable: false,
height: 700,
columns: [{
field: "RoomName",
title: "Room Name",
width: "120px",
template: "<div >#=RoomName #</div>"
},
{
field: "OptionImageFile",
title: "Image",
template: "#= optionGridImage(OptionImageFile) #",
attributes: {
style: "margin:0 auto;"
},
width: 50
}
],
dataSource: {
data: myData
},
dataBound: function(e) {
}
});
}
.k-grid td {
overflow: visible !important
}
.imageOptionsList a {
position: relative;
display: inline-block;
height: 25px;
width: 25px;
background-size: cover;
}
.imageOptionsList a img {
position: absolute;
top: 50%;
right: 50%;
width: 0;
height: 0;
transition: .5s
}
.imageOptionsList a:hover {
z-index: 1
}
.imageOptionsList a:hover img {
width: 50vw;
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<div id="Grid"></div>
Remove the margin-left: 100px line from your hover class. Also, try using transform for increasing image size. The code below will double the image size.
.imageOptionsList:hover img {
visibility: visible;
transform: scale(2);
}
You've got some conflicting information in your post. You mention the left offset as correct, then say it should at the end.
Below I removed the inline styles you had on the image and updated your selector to target img tags within .imageOptionsList. I've also added a transition so it doesn't do a hard snap, feel free to remove.
$(document).ready(function() {
LoadCatalogsGrid();
});
var myData = [{
"RoomName": "Room 1",
"OptionImageFile": "a"
},
{
"RoomName": "Room 2",
"OptionImageFile": "b"
}
];
function optionGridImage(url) {
return "<div class='imageOptionsList'><a style='text-align:center;height:25px;width:25px;' href='" +
GetCatalogImageLocation(url) +
"'><img src='" +
GetCatalogImageLocation(url) +
"alt=''/></a></div>";
}
function GetCatalogImageLocation(imageName) {
if (imageName == "a") {
return "https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/king_lead.jpg?itok=4b75-ttE&resize=1100x1100";
} else {
return "https://pmcvariety.files.wordpress.com/2017/08/king-of-the-hill.jpg?w=1000&h=562&crop=1";
}
}
function LoadCatalogsGrid() {
$("#Grid").empty();
$("#Grid").kendoGrid({
scrollable: true,
selectable: "row",
filterable: false,
height: 700,
columns: [{
field: "RoomName",
title: "Room Name",
width: "120px",
template: "<div >#=RoomName #</div>"
},
{
field: "OptionImageFile",
title: "Image",
template: "#= optionGridImage(OptionImageFile) #",
attributes: {
style: "margin:0 auto;"
},
width: 50
}
],
dataSource: {
data: myData
},
dataBound: function(e) {
}
});
}
.imageOptionsList img {
width: 25px;
height: 25px;
transition: height 500ms ease-in-out, width 500ms ease-in-out;
}
.imageOptionsList img:hover {
width: 250px;
height: 325px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<div id="Grid"></div>
Position: sticky doesn't support by the most mobile browsers. But position: fixed is not that thing I need (because of fixed block overlaps content in the bottom of document).
I guess for jquery it will be easy to set static position for fixed block if we get bottom of document onscroll.
But for Vue2 I haven't any idea how to do the same. Give some advice please. Or maybe better solution exists.
As I mentioned in the comments, I'd recommend using a polyfill if at all possible. They will have put a lot of effort into getting it right. However, here is a simple take on how you might do it in Vue.
I have the application handle scroll events by putting the scrollY value into a data item. My sticky-top component calculates what its fixed top position would be, and if it's > 0, it uses it. The widget is position: relative.
new Vue({
el: '#app',
data: {
scrollY: null
},
mounted() {
window.addEventListener('scroll', (event) => {
this.scrollY = Math.round(window.scrollY);
});
},
components: {
stickyTop: {
template: '<div class="a-box" :style="myStyle"></div>',
props: ['top', 'scrollY'],
data() {
return {
myStyle: {},
originalTop: 0
}
},
mounted() {
this.originalTop = this.$el.getBoundingClientRect().top;
},
watch: {
scrollY(newValue) {
const rect = this.$el.getBoundingClientRect();
const newTop = this.scrollY + +this.top - this.originalTop;
if (newTop > 0) {
this.$set(this.myStyle, 'top', `${newTop}px`);
} else {
this.$delete(this.myStyle, 'top');
}
}
}
}
}
});
#app {
height: 1200px;
}
.spacer {
height: 80px;
}
.a-box {
display: inline-block;
height: 5rem;
width: 5rem;
border: 2px solid blue;
position: relative;
}
<script src="//unpkg.com/vue#latest/dist/vue.js"></script>
<div id="app">
<div class="spacer"></div>
<div class="a-box"></div>
<sticky-top top="20" :scroll-y="scrollY"></sticky-top>
<div class="a-box"></div>
</div>
This seem to work for me
...
<header
ref="header"
class="header-container"
:class="{ 'header-container--sticky': isHeaderSticky }"
>
...
...
data() {
return{
scrollY: null,
headerTop: 0,
isHeaderSticky: false,
}
},
mounted() {
window.addEventListener('load', () => {
window.addEventListener('scroll', () => {
this.scrollY = Math.round(window.scrollY);
});
this.headerTop = this.$refs.header.getBoundingClientRect().top;
});
},
watch: {
scrollY(newValue) {
if (newValue > this.headerTop) {
this.isHeaderSticky = true;
} else {
this.isHeaderSticky = false;
}
}
}
...
...
.header-container {
&--sticky {
position: sticky;
top: 0;
z-index: 9999;
}
}
...
When creating a fluid layout, where content can be dragged around and edited inside a table I ran into a problem.
After clicking on any of the <a></a> hyperlinks the cell content should be replaced by an editable input box.
This gets done, but the cell changes its size and wrecks the original layout.
The cell size should not change after click. It should be possible to achieve this by editing the CSS and adding Bootstrap classes.
var viewModel = function() {
var self = this;
self.gridItems = ko.observableArray(
[{
"rowItems": [{
"name": "Item 1"
}, {
"name": "Item 2"
}, {
"name": "Item 3"
}]
}, {
"rowItems": [{
"name": "Item 4"
}, {
"name": "Item 5"
}]
}]
);
self.selectedRowItem = ko.observable();
};
//connect items with observableArrays
ko.bindingHandlers.sortableList = {
init: function(element, valueAccessor, allBindingsAccessor, context) {
$(element).data("sortList", valueAccessor()); //attach meta-data
$(element).sortable({
update: function(event, ui) {
var item = ui.item.data("sortItem");
if (item) {
//identify parents
var originalParent = ui.item.data("parentList");
var newParent = ui.item.parent().data("sortList");
//figure out its new position
var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);
if (position >= 0) {
originalParent.remove(item);
newParent.splice(position, 0, item);
}
ui.item.remove();
}
},
connectWith: '.sortable-container'
});
}
};
//attach meta-data
ko.bindingHandlers.sortableItem = {
init: function(element, valueAccessor) {
var options = valueAccessor();
$(element).data("sortItem", options.item);
$(element).data("parentList", options.parentList);
}
};
//control visibility, give element focus, and select the contents (in order)
ko.bindingHandlers.visibleAndSelect = {
update: function(element, valueAccessor) {
ko.bindingHandlers.visible.update(element, valueAccessor);
if (valueAccessor()) {
setTimeout(function() {
$(element).focus().select();
}, 0); //new RowItems are not in DOM yet
}
}
}
ko.applyBindings(new viewModel());
//$(".sortable").sortable({});
.sortable {
list-style-type: none;
margin: 0;
padding: 0;
width:100%;
}
.sortable li {
margin: 0 3px 3px 3px;
padding: 0.4em;
padding-left: 1.5em;
font-size: 1.4em;
height: 18px;
cursor: move;
}
.sortable li span {
position: absolute;
margin-left: -1.3em;
}
.sortable li.fixed {
cursor: default;
color: #959595;
opacity: 0.5;
}
.sortable-grid {
width: 100% !important;
}
.sortable-row {
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
}
.sortable-item {
border: 1px solid black;
margin: 0 !important;
}
.sortable-item > a {
display: block;
margin: 0 !important;
}
.sortable-item input {
display: block;
margin: 0 !important;
}
.sortable-container {
margin: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0-beta.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul class="sortable sortable-grid" data-bind="template: { name: 'gridTmpl', foreach: gridItems, templateOptions: { parentList: gridItems} }, sortableList: gridItems">
</ul>
<script id="gridTmpl" type="text/html">
<li class="sortable-row">
<table style="width:100%">
<tbody>
<tr class="sortable sortable-container" data-bind="template: { name: 'rowTmpl', foreach: rowItems, templateOptions: { parentList: rowItems} }, sortableList: rowItems">
</tr>
</tbody>
</table>
</li>
</script>
<script id="rowTmpl" type="text/html">
<td class="sortable-item" data-bind="sortableItem: { item: $data, parentList: $data.parentList }">
<input data-bind="value: name, visibleAndSelect: $data === $root.selectedRowItem()" />
</td>
</script>
On your table, set table-layout to fixed. Another improvement would be to make the inputs take up the entire space of the cell.
Here are the css changes to make:
.sortable-item input {
display: block;
margin: 0 !important;
width: 100%; /* Added this property */
}
/* Added this rule */
.sortable-row > table {
table-layout: fixed;
}
Follwing is a image for the horizontal scroll bar menu , i am trying to achieve with angular js.
Using $swipe service of angular js to perform this action.
Able to achieve the function calls at directives ng-swipe-left and ng-swipe-right.
As i have set the overflow-x:hidden for the items in the starting , how do i change the css or make the menu scrollable at the ng-swipe-left or ng-swipe-right.
Any other better suggestion to perform this action is welcomed.
Trying to make this happen by this Example . on ng-swipe-left and ng-swipe-right , incereasing /decreasing the counter below , indeed have to make the menu bar scroll.
<div ng-swipe-left="prev($event)" ng-swipe-right="next($event)">
Thanks in advance.
You could use ng-class to add the scroll effect and to show the menu you could use the $scope.index too.
I've added a boolean to change how the menu opens because I'm not sure how you'd like to open the menu.
If var openDirRight is true then index of the menu selection goes from 0 to 3 (3 = length of menu array). If it's false it goes from 0 to -3.
Later you could add $state.go('page' + index_with_formatting) to transition to the menu item.
Please have a look at the demo below or in this fiddle.
(The buttons are just for debugging on desktop because I'm not sure how to trigger the swipe on desktop.)
var app = angular.module('myapp', ['ngTouch']);
app.controller('MyCtrl', function MyCtrl($scope) {
var openDirRight = true; // true = swipe left to right shows menu index > 0
// false = swipe right to left shows menu index < 0
var stopActions = function ($event) {
if ($event.stopPropagation) {
$event.stopPropagation();
}
if ($event.preventDefault) {
$event.preventDefault();
}
$event.cancelBubble = true;
$event.returnValue = false;
};
// Carousel thing
$scope.index = 0;
// Hide menu
$scope.showMenu = false;
// Links
$scope.navigation = [{
title: "Page A",
href: "#pageA"
}, {
title: "Page B",
href: "#pageB"
}, {
title: "Page C",
href: "#pageC"
}];
$scope.checkMenuVisibility = function() {
$scope.showMenu = openDirRight ? $scope.index > 0 : $scope.index < 0;
};
$scope.isActive = function(index) {
return ( (openDirRight ? 1: -1 ) * $scope.index - 1 ) === index;
};
// Increment carousel thing
$scope.next = function ($event) {
stopActions($event);
$scope.index++;
// limit index
if ( openDirRight ) {
if ( $scope.index > $scope.navigation.length)
$scope.index = $scope.navigation.length;
}
else {
if ( $scope.index > 0)
$scope.index = 0;
}
$scope.checkMenuVisibility();
};
// Decrement carousel thing
$scope.prev = function ($event) {
stopActions($event);
$scope.index--;
// limit index
console.log($scope.index);
if ( !openDirRight ) {
if ($scope.index < -$scope.navigation.length) {
console.log('limited to -3');
$scope.index = -$scope.navigation.length;
}
}
else if ( $scope.index < 0 ) {
$scope.index = 0;
}
$scope.checkMenuVisibility();
};
});
html, body, #page {
height: 100%;
min-height: 100%;
}
.box {
background-color: #EFEFEF;
box-shadow: 0 1px 2px #dedede;
border: 1px solid #ddd;
border-radius: 4px;
}
.menu {
/*float: left;*/
/*min-height:100%;*/
/*width: 98%;*/
}
.menu ul {
}
.menu_item {
display: inline-block;
line-height:2;
}
.menu_link {
display:block;
padding-left:1em;
}
.menu_link:hover {
background: #DEDEDE;
}
.menu-grip {
float:right;
height:5em;
line-height:.5;
padding-top:2em;
text-align:center;
width:1em;
}
h1 {
background:black;
color:white;
font-size:1.1em;
line-height:1.3;
}
.big-swiper {
font-size: 5em;
height:3em;
line-height:3;
margin:.5em auto;
text-align:center;
width:3em;
}
.big-swiper:before {
content:'<\a0';
color:#dedede;
font-weight:700;
}
.big-swiper:after {
content:'\a0>';
color:#dedede;
font-weight:700;
}
.active {
background-color: blue;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-touch.js"></script>
<div id="page" ng-cloak ng-app='myapp' ng-controller="MyCtrl" ng-swipe-left="">
<h1>Angular Swipe Menu</h1>
<div class="menu-grip box" ng-show="!showMenu" ng-click="showMenu = true">.<br />.<br />.</div>
<nav class="menu box" ng-show="showMenu"> <!-- ng-swipe-right="showMenu = false">-->
<ul>
<li class="menu_item" ng-repeat='nav in navigation track by $index'><a class="menu_link" ng-href="{{nav.href}}" ng-class="{'active': isActive($index)}">{{nav.title}}{{$index}}</a>
</li>
</ul>
</nav>
<!-- buttons for testing on desktop -->
<button ng-click="next($event)">swipe right</button>
<button ng-click="prev($event)" class="pull-right">swipe left</button>
<div class="big-swiper box" ng-swipe-right="next($event)" ng-swipe-left="prev($event)">{{index}}</div>
</div>