I have a tooltip on an HTML page implemented using AngularJS uib-tooltip-html:
<div>
<i uib-tooltip-html="myTooltip='my tooltip HTML'"
class="fa fa-exclamation-triangle"></i>
</div>
It shows well on desktop browsers when I hover the icon with the mouse and disappears when the mouse is out of the icon area.
When I activate the tooltip on iPad, it doesn't disappear if I tap in other screen areas.
How to dismiss the uib-tooltip-html tooltip on iPad?
I faced a similar issue and found a solution. Hope this helps some one else looking for an answer. Add the following code to your website:
$('[data-toggle="popover"]').popover(); // close on body click
// iOS doesnt recognise 'body' click so using :not
$(':not(#anything)').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
All credits to stelco at this URL
Related
I am trying to add animation to my dropdown-menu ... It is working perfectly on large screens but on small phones and tablets (when toggle navigation appears) there is a problem: when it should slide up the drop-down list disappears without sliding up properly as you can see in my
DEMO . Please try to open in it in small browser size and click on "services" to slide down and up .
I have tried another solution using jquery:
$(function () {
$('.dropdown').on('show.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function (e) {
e.preventDefault();
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function () {
$('.dropdown').removeClass('open');
$('.dropdown').find('.dropdown-toggle').attr('aria-expanded', 'false');
});
});
});
But as you can see in this Bootply DEMO (resize your browser to a phone screen size), when sliding down, at the end there is a gray space that appears then disappears directly.
What I really need is a normal working slide animation down and up. Any suggestions of how can I adjust at least one of both methods?
I find the solution , you should remove the scrollbar from the navbar.
so add this simple code to your css file :
.navbar-collapse {
overflow: hidden;
}
you can take a look at the Demo here : https://jsfiddle.net/u9pvtLpw/2/
Here's an anchor tag with a tooltip:
<a data-toggle="tooltip" data-original-title="Sorry, pronunciation audio not available!">
<span class="glyphicon glyphicon-volume-off pronounce">
</span>
</a>
On desktop screens, the tooltip only appears when the anchor is hovered over or clicked and vanishes when the mouse pointer moves away from it. However, on mobile screens, the tooltip does appear when the anchor is tapped but then stays on forever. Is there any way to make it fade out after a set period only on mobile devices?
UPDATE: For what it's worth, my tooltip JS looks like this:
$(document).ready(function() {
$("body").tooltip({ selector: '[data-toggle=tooltip]' });
});
This may help you :
$('body').click(function(event){
if (event.target.id != 'tooltip'){
setTimeout(function(){
$('#tooltip').tooltip('hide');
}, 2000);
}
});
JS FIDDLE : https://jsfiddle.net/b2t27sg0/3/
I have problem with Edge browser. In my web site I have buttons with span tags inside them. In this span tags I bind text and icons. So far I had no problem but on Edge browser it is possible to click on disabled buttons. After investigating problem I found out that, when button contains span tags inside, it is possible to click on button. Here is how it looks on my web site:
<button id="btnRefresh" type="button" class="btn btn-primary" ng-click="refresh()" ng-disabled="performingAction">
<span ng-class="performingAction && action == 'refresh' ? 'fa fa-cog fa-spin' :'fa fa-refresh'"></span>
<span>{{ refresh }}</span>
</button>
Here is example to testing:
<button type="button" disabled="disabled" onclick='alert("test");'>
<span>Click me!</span>
</button>
One option would be to hide buttons instead of disabling, but I prefer to disable them. Please suggest solution to over come this issue.
Just set
pointer-events: none;
for disabled buttons.
Here's CSS to disable all disabled elements everywhere:
*[disabled] {
pointer-events: none !important;
}
pointer-events documentation
This is a bug in Microsoft Edge. Disabled buttons accept clicks if they contain any HTML elements (i.e. if they contain anything else than just text).
Reported multiple times via Microsoft Connect:
Event bubbles from child element into element (by SO user Ryan Joy)
Bootstrap/Jquery disabled buttons generate click events and show tooltips even disabled
The bug was still present in Build 10565 (16 October 2015).
It was fixed in the November update, Build 10586.
A possible (but ugly) workaround is to call some Javascript in onclick for every button, which then checks if the button is disabled and returns false (thus suppressing the click event).
One work around I've come up with using angularjs is inspired by Ben Nadel's blog here
So for example:
angular.module('myModule').directive(
"span",
function spanDirective() {
return ({
link: function (scope, element, attributes) {
element.bind('click', function (e) {
if (e.target.parentNode.parentNode.disabled || e.target.parentNode.disabled) {
e.stopPropagation();
}
})
},
restrict: "E",
});
}
);
Since you're not always going to be using a span element and probably don't want to create a new directive for every element type, a more general workaround would be to decorate the ngClick directive to prevent the event from reaching the real ngClick's internal event handler when the event is fired on a disabled element.
var yourAppModule = angular.module('myApp');
// ...
yourAppModule.config(['$provide', function($provide) {
$provide.decorator('ngClickDirective', ['$delegate', '$window', function($delegate, $window) {
var isEdge = /windows.+edge\//i.test($window.navigator.userAgent);
if (isEdge) {
var directiveConfig = $delegate[0];
var originalCompileFn = directiveConfig.compile;
directiveConfig.compile = function() {
var origLinkFn = originalCompileFn.apply(directiveConfig, arguments);
// Register a click event handler that will execute before the one the original link
// function registers so we can stop the event.
return function linkFn(scope, element) {
element.on('click', function(event) {
if (event.currentTarget && event.currentTarget.disabled) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
}
});
return origLinkFn.apply(null, arguments);
};
};
}
return $delegate;
}]);
}]);
I am building an iOS-app using the Ionic-framework. When I use select-elements, I do not get the header with the label "Done" when selecting items in the menu on iOS-native. However it will show up when I use the app in iOS/Safari. Screenshots and code attached. Any input/solutions on this would be much appreciated.
Screenshots:
iOS Safari Screenshot
iOS Native/Ionic Screenshot
Markup
<label class="item item-input item-select">
<div class="input-label">
Bostadstyp
</div>
<select ng-change="addParam('objectType', selectedHouseType)" ng-model="selectedHouseType" ng-options="houseType.id as houseType.label for houseType in houseTypes"></select>
</label>
The Ionic app contains a default code in app.js who hide the keyboard acessory bar, you need to comment this following line: cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
Getting something like this:
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
//cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
Regarding #emccracken's comment, according to the Ionic Team the reason for hideKeyboardAccessoryBar is "because native apps seldom have an accessary bar. It's a dead give away that an app is built with web tech and isn't native."
You can show and hide the accessory bar on demand which is explained a bit here. Taking the $timeouts out of the directive worked better for me. Here's what mine looks like.
.directive('select', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
element.bind('focus', function(e) {
if (window.cordova && window.cordova.plugins.Keyboard) {
// console.log("show bar (hide = false)");
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
}
});
element.bind('blur', function(e) {
if (window.cordova && window.cordova.plugins.Keyboard) {
// console.log("hide bar (hide = true)");
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
});
}
};
})
If you still have this issue, my case was a keyboard plugin conflict between
cordova-plugin-keyboard and cordova-plugin-ionic-keyboard.
So check on config.xml to see if you have more than one plugin and if so remove with:
cordova plugin remove [plugin-name]
then install proper plugin:
ionic cordova plugin add ionic-plugin-keyboard
https://ionicframework.com/docs/native/keyboard/
Then you will be able to use cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
Hope it helps.
If using Ionic capacitor and facing these issues, none of the fixes here will work.
According to Capacitor discussions, this is a side effect of the Keyboard plugin. Can be fixed by doing:
import {Keyboard} from "#capacitor/keyboard";
...
Keyboard.setAccessoryBarVisible({isVisible: true});
I followed this tutorial on custom controls for a video, and I can't get the fullscreen button to work:
http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos
Here is a jsfiddle:
http://jsfiddle.net/strider820/3CGdw/
// Event listener for the full-screen button
fullScreenButton.addEventListener("click", function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
When I step through the fullscreen click, it appears to go where I would expect, but then the actual function call doesn't appear to do anything. What am I doing wrong???
Any video within an iframe will fail to go fullscreen if the iframe is missing the "allowfullscreen" attribute.