I have an ng-nestable div and inside that there is a simple button that has an ng-click event hooked up to it. When I click on that button it doesn't register the click but rather starts the drag and drop process.
Here is my HTML Code,
<div class="col-sm-1 text-right"><button ng-click="fnEditHomeSlider({{$item.SliderID}})" class="btn btn-blue btn-sm" nestable-button><i class="fa fa-edit"></i> Edit</button>
</div>
Note: Is your code something like, try it, Hope it could also matches your need or give us your code
1.) Create a custom directive
myApp.directive('nestableButton', function() {
return {
restrict: 'A',
link: function(scope, element) {
$(element).on("mousedown", function(e) {
e.preventDefault();
return false;
});
$(element).on("click", function(e) {
e.preventDefault();
window.location = $(this).attr("href"); //if you want your URL to update
return false;
});
}
};
});
2.) In HTML
</i>
</i>
Lokesh Kakran is right about this.
And here is live demo project about your solution.
demo : http://pathik.linedeer.com/ng-nestable/
code : https://github.com/pathikdevani/ng-nestable/blob/gh-pages/index.html
Related
I'm new to using jQuery and am having trouble figuring out how to show a popup using css only once per user. I got the popup to work so that it shows up every time, I just need to only happen once per user.
My HTML Code
<div id="popUpMain" style="display: none;">
<div id="popup">
<h1 id="newsHeading">Join</h1>
<button class="buttonNews">More Info</button>
<button class="buttonNews">No Thanks</button>
</div>
</div>
The script handling the jQuery
<script>
$(document).ready(function(){
setTimeout(function(){
$('#popUpMain').css('display', 'block'); }, 3000);
});
$('.buttonNews').click(function(){
$('#popUpMain').css('display', 'none')
});
</script>
Thanks in advance.
To achieve this you need to keep track of whether or not the user has been shown the popup before. The simplest way of doing this is by using localStorage to manage a boolean flag, something like this:
$(document).ready(function() {
if (!localStorage.getItem('popupPreviouslyShown') || false) {
setTimeout(function() {
$('#popUpMain').css('display', 'block');
localStorage.setItem('popupPreviouslyShown', true);
}, 3000);
}
});
Working example
I want to make my popover not dissmisive on content click while using focus trigger, because I have input inside in it.
Here are my div attributes:
data-toggle="popover" data-content="<input type='text' class='form-control'><button class='btn btn-sm btn-default' style='margin-top:5px'>Zapisz</button>" data-title="Description" data-html="true" data-trigger="focus" data-container="body"
So as you can see I have simple popover which is triggered with focus ( I know that it may be the issue why it is closing on click) but I have to close popover on click somewhere else on the screen that's why I'm using the trigger="focus".
You can add a listener (hide.bs.popover) to the popover and prevent execution of the event. In this case you need to add further listener to manually close it on button click. Something like this should work.
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover({html: true});
$("[data-toggle='popover']").on('hide.bs.popover', function(e){
e.preventDefault();
});
$("[data-toggle='popover']").on('shown.bs.popover', function(e)
{
// create your own listener after popover has shown
$("#your_button").on('click', function(e){
$("[data-toggle='popover']").off('hide.bs.popover');
$("[data-toggle='popover']").popover('hide');
});
});
});
</script>
I hope it helps.
My tooltips are working on the mainpage perfectly. In a modal which is generated later by an ajax call the tooltips won't work.
I have included the following code inside the generated modal (result of the ajax call).
To re-ini the tooltips
<script>
$('.tooltips').tooltip();
</script>
In the html of the modal
<button class="btn btn-lg default tooltips blue-madison" type="submit"
name="O" data-container="body" data-placement="top"
data-original-title="THIS TEXT FOR TOOLTIPS">
<i class="fa fa-industry blue-madison"></i> BUTTON1
</button>
<button class="btn btn-lg default tooltips green-jungle" type="submit"
name="P" data-container="body" data-placement="top"
data-original-title="THIS TEXT FOR TOOLTIPS">
<i class="fa fa-user green-jungle "></i> BUTTON2
</button>
Why don't the tooltips show- what I'm doing wrong?
The issue is because of the z-index of modal and tooltip. You can try this,
.tooltip {
z-index: 100000000;
}
Probably it's because you should call $('.tooltips').tooltip(); after the modal's content have been inserted in the document.
Otherwise, please post a fiddle with your current code where we can test it.
Another solution is to bind the tooltip to the modal using the container option:
$('#modal').on('shown.bs.modal', function() {
console.log("modal show");
$('.tooltips').tooltip({
container: $(this)
});
});
Maybe this helps someone: I had a case when needed with ajax to populate & display a bootstrap modal (render view) on click (calling showModal(url, event) below); bootstrap tooltip and also fengyuanchen/datepicker were unresponsive, so I managed to trigger them after detecting modal loading, like this:
function showModal(url, event) {
$.when(
$.ajax({
url: url,
method: 'GET',
success: function (data) {
$('#modal-wrapper').html(data);
}
})
).then(function() {
$('.loaded_modal').modal().on('shown.bs.modal', function() {
$('[data-toggle="datepicker"]').datepicker({
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
zIndex: 1070,
container: '.modal'
});
$('.modal [data-toggle="tooltip"]').tooltip({trigger: 'hover'});
// could also be on click {trigger: 'hover click'}
});
});
If you are using react I had success with a different answer. All you have to
do is give the parent container a ref and then in the overlayTrigger component you just have to pass in the ref as a param to the container.
import React, { Component } from 'react';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
class random extends Component {
constructor(props) {
super(props);
this.ref= React.createRef()
}
render() {
return (
<div ref={this.ref}>
<OverlayTrigger
placement="top"
container={this.ref}
overlay={
<Tooltip data-container="body">Some text</Tooltip>
}
>
<span className="d-inline-block">
<i className="mdi mdi-help-circle pointer"></i>
</span>
</OverlayTrigger>
</div>
);
}
}
Best way to fix this behaviour is by adding this prop inside your md-tooltip:
md-z-index="9999"
or a different z-index.
No need to hardcode this in the css.
You can also define the z-index in your scope variable inside your controller as the following
// in controller
$scope.btnOptions = {
isOpen:false,
label: 'test button',
class: 'md-scale',
zIndex: 99999
};
in you html ( normally I would use {{}} to print the variable, but I'm on laravel so I used <% %> instead
<md-button aria-label="Édit" class="md-fab md-raised md-mini">
<md-tooltip md-direction="top" md-z-index="<% btnOptions.zIndex %>">Mode édition</md-tooltip>
<i class="far fa-edit"></i>
</md-button>
I am developing an website with AngularJS and
mobile angular UI.
I have a menu bar which will show on clicking a button and should be closed when I click the options in it. But it isn't working as expected.
My files:
index.html
<div id="menuBar" ng-show="showMenu">
<div class="row">
page1
</div>
</div>
js for hiding menu
app.controller('mainController', function ($rootScope, $scope) {
$rootScope.showMenu = false;
$rootScope.$on("$routeChangeStart", function () {
$rootScope.showMenu = false;
});
});
So while switching to some other file the menu should hide ideally. But it didn't happen so.
The problem is how you show your menu. With this code:
<div ng-click="showMenu=!showMenu" class="btn btn-navbar"><i class="fa fa-bars"></i></div>
you change showMenu property of the child scope. This showMenu is not the same as $rootScope.showMenu. For this reason when you change $rootScope.showMenu in $routeChangeStart it doesn't effect child scope property. Instead you should do something like this:
<div ng-click="toggleMenuBar()" class="btn btn-navbar"><i class="fa fa-bars"></i></div>
and in controller:
$scope.toggleMenuBar = function() {
$rootScope.showMenu = !$rootScope.showMenu;
};
I'm using an icon font on my website and I want users to vote on their favorite icon. the icon font uses and CSS to display the icon. How can I accomplish this using some type of jQuery and returning the icon to the front end along with passing it value through a form?
I know I can't add a inside of an input, so i took this approach:
I started with this jsFiddle: http://jsfiddle.net/6NVpL/42/
HTML:
<div class="iconDisplay">Display's selected icon</div>
<button class="selectIcon">Select Icon</button>
<div id="iconSelector">
<span class="icon-icon1"></span>
<span class="icon-icon2"></span>
<span class="icon-icon3"></span>
<span class="icon-icon4"></span>
<span class="icon-icon5"></span>
<span class="icon-icon6"></span>
<span class="icon-icon7"></span>
<span class="icon-icon8"></span>
</div>
JS:
$(".selectIcon").click(function () {
$("#iconSelector").fadeToggle();
});
$("#iconSelector span").click(function () {
$(this).click(function(){
$("#iconSelector").hide();
});
});
Maybe this is more what you are looking for?
I fixed the click handlers:
$("#selectIconButton").click(function () {
$("#iconSelector").fadeToggle();
});
$("#iconSelector span").click(function () {
selectIcon($(this));
});
Added a function to perform the icon selection. Note: remove the return; statement and adjust the post so it will work for your application.
function selectIcon(e){
var selection = e.attr('class');
$('#selectedIcon')
.removeClass()
.addClass(selection)
.show();
$("#iconSelector").hide();
return;
$.ajax({
url: 'urltowebsite',
type: 'POST',
data: { selectedIcon: selection }
});
}
Added a UI element to show the user what icon they selected and modified the CSS slightly to accommodate the above changes.
You need a server-side script to save the data. If you do have a script for that, you can use it like that:
$("#iconSelector span").click(function () {
var xthis = $(this);
xthis.click(function(){
$("#iconSelector").hide();
$.post('/echo/html','icon='+$(xthis).attr('class'),function(){
$(".iconDisplay").html(xthis.get(0));
});
});
});
Full fiddle: http://jsfiddle.net/6NVpL/45/
PS. Change /echo/html to your save script name.