In my project involving the Ionic floating menu button, everything is working fine. However, I have encountered an issue where when I click on the + button, I do not want to be able to click on the click me button while the menu is open (Req1.png)https://i.sstatic.net/e9IYt.png.
Another requirement is that when the - symbol is displayed, the color should fadehttps://i.sstatic.net/Pb2mS.png You can view my code at codepen.io/anujsphinx/pen/jVLRXa
Take a look at this:
(function () {
'use strict';
angular.module('ion-floating-menu', [])
.directive('ionFloatingButton', ionFloatingButton)
.directive('ionFloatingMenu', ionFloatingMenu)
.directive('ionFloatingItem', ionFloatingItem)
.factory('$ionicBackdropIon', $ionicBackdropIon);
function ionFloatingButton() {
return {
restrict: 'E',
scope: {
click: '&?',
buttonColor: '@?',
buttonClass: '@?',
icon: '@?',
iconColor: '@?',
hasFooter: '=?',
isCentered: '=?',
text: '@?',
textClass: '@?',
bottom: '@?'},
template: '<ul ng-click="click()" id="floating-button" ng-class="{\'center\': isCentered}" ng-style="{\'bottom\' : \'{{bottom}}\' }">' +
'<li ng-class="buttonClass" ng-style="{\'background-color\': buttonColor }">' +
'<a><span ng-if="text" class="label-container"><span class="label" ng-class="textClass" ng-bind="text"></span></span><i class="icon menu-icon" ng-class="{ \'{{icon}}\' : true}" ng-style="{\'color\': iconColor }"></i></a>' +
'</li>' +
'</ul>',
replace: false,
transclude: true,
controller: ionFloatingButtonCtrl
};
}
ionFloatingButtonCtrl.$inject = ['$scope'];
function ionFloatingButtonCtrl($scope) {
$scope.buttonColor = $scope.buttonColor || '#2AC9AA';
$scope.icon = $scope.icon || 'ion-plus';
$scope.iconColor = $scope.iconColor || '#fff';
$scope.hasFooter = $scope.hasFooter || false;
$scope.isCentered = $scope.isCentered || false;
if ($scope.hasFooter) {
$scope.bottom = '60px';
} else {
$scope.bottom = $scope.bottom || '20px';
}
}
// Rest of the code follows...
})();/*! CSS code here... */<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Toggle</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
HI
<input type="button" value ="click me" ng-click="test()" />
<!-- <button type="button" value="Click me" ></button> -->
</ion-content>
<ion-floating-menu>
<ion-floating-item icon="ion-camera" ng-click="first()" text="Add Contact"></ion-floating-item>
<ion-floating-item icon="ion-person" ng-click="myEvent()" text="My Contact"></ion-floating-item>
</ion-floating-menu>
</body>
</html>https://i.sstatic.net/lYs6O.png Hi everyone, I'm new to WordPress and need help changing a green button to blue. I have found the button in an anchor tag with the class "menu-separator." Is there a way for me to write custom CSS to change its color? ...
I am currently facing an issue with adjusting the size of a specific page within my application. Even though I am using <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-den ...
Confusion arises about whether ionic framework and cordova package dependencies should be local or global. Even though I initially installed ionic and cordova globally, npm install in an ionic project ended up installing a local package as well. This has ...
Currently, I am in the process of conducting unit tests on a directive that was previously created. For my initial test, I simply want to verify a specific variable within the scope of the directive. However, whenever I attempt to execute the method isola ...
Apologies for the beginner question. I am looking to incorporate filtering and sorting by name on my webpage. However, I have encountered two issues after attempting to implement this functionality using a factory in services.js: When typing a search ter ...
I am experiencing an issue with the layout of my page that has 2 divs within one nav element. When the screen width is greater than 1024px, everything looks fine. However, when I reduce the width to less than 768px, the two divs merge into one line instead ...
I'm currently working on a project that involves Angular, Express, and UI-router for managing routes. While I've properly configured my $states and included the necessary Angular and UI-router libraries in my HTML file, I am facing an issue wher ...
I am experimenting with a Bootstrap example featuring a table in the left column and 4 columns in 2 rows in the right column. Check out the code below: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ...
I am currently utilizing an ion-slide-box with ng-repeat to display images fetched from a remote server. <ion-slide-box on-slide-changed="slideChanged(index)" auto-play="true" does-continue="true"> <ion-slide ng-repeat="slide in files"& ...
Is there a way to eliminate unexpected spaces that appear between spans? One attempt was made by setting font-size: 0 within the wrapper <div>, which successfully removed spaces not only between <span> tags but also within each <span> ta ...
I am facing challenges in improving the unit test coverage of an Angular project, particularly when trying to test an AngularJS factory with multiple dependencies. The factory I am working on has 5 dependencies, and I am struggling to even write a basic t ...
Edit 7/16/15: I decided to place the following code between the <li> tags within the joyride that required the removal of the "x" button: <script>$('.joyride-close-tip').remove();</script> While not the most elegant solution ...
I'm brand new to working with Angular (so please forgive any incorrect terminology), and I'm attempting to retrieve data from the Stack Overflow API. I am able to fetch data for individual items, but when I try to display the top 10 questions usi ...
When I use the command console.log($scope.data), I am able to view my JSON file. Additionally, by using <div ng-repeat="item in data">, I can see all the items in the view. However, when I try console.log($scope.data[0]) or console.log($scope.data[0] ...
We recently switched from ng-cli to Gulp for building our Angular2 project, and we are utilizing Fuel-ui. An unusual error has come up. We have incorporated Fuel-ui's alert component into one of our components. When referencing fuel-ui from node_mo ...
I'm attempting to display two distinct div elements as blocks, one for the name and the other for the names. Here is the Fiddle The names block should be displayed as a separate block next to the name div, regardless of screen responsiveness. How ca ...
Just a quick question, I created a simple page to experiment with Angular Material. On medium-sized devices, there is a button that toggles the side navigation, but for some reason, it expands to full width. There's no CSS or Material directives causi ...
I've been struggling to implement a transition slide effect on my hero section. The height of the hero is set to 100vh on the homepage and half of that on other pages. Despite trying various methods, I haven't been able to get it working properly ...
Is it possible to style a custom HTML tag called "location" without directly modifying the DOM? For instance, having <location loc-id="14" address="blah" zipcode="14" /> Would it be feasible to render it like this: <div class="location"> ...
Assume I have a situation where the HTML below is present and I aim to dynamically conceal all the descendants of the 'overlay' div <div id="overlay" class="foo"> <h2 class="title">title</h2> ...