http://jsfiddle.net/9LuS2/
This code seems to work in modern browsers + IE8. But in IE7 (open up IE, hit F12 and do IE7 mode) the fiddle doesn't work at all, and in the actual page I am working on it doesn't work, but then if you click it, it appears, but then won't go away.
What is the best way to do a hover event with DIVs that will work going back to IE7.
Do I need to use JS?
If so can someone suggest either pure JS or YUI lib as I cannot use jquery for this project.
Yes, old IEs don't like .test:hover .test_hidden (selectors for inner elements of :hover).
If JS is an option, you can use the hover event in YUI:
YUI().use('node', 'event-hover', function (Y) {
var outer = Y.one('.test');
var inner = Y.one('.test_inner');
function showInnerDiv() {
inner.removeClass('test_inner_hidden');
}
function hideInnerDiv() {
inner.addClass('test_inner_hidden');
}
outer.on('hover', showInnerDiv, hideInnerDiv);
});
Related
I'm using angularjs (1.x) and angular-material in an electron app. I have two md-selects in a view, and when I try to use it in windows everything works ok. But when I use it in OS X, the md-select stops working after the first click. I click it and it opens the list of items, but if I click the md-select again, it doesn't show the items list anymore. Worth noting that if I click in the first md-select, the second md-select stops working too.
Inspecting html, I can see that, md-select has two children elements: md-select-value and div(md-select-menu-container). After I click and select any item, the md-select-menu-container disappears. Maybe its related to the issue, BUT the second md-select still has a md-select-menu-container and I can't open it.
Even tried a simple md-select without any options and it still opens only at first click.
<md-select ng-model="vm.test">
</md-select>
Anyone has any idea why this is happening?
I would put my code here, but I think the bug is somewhere else in my project. Because if I try the md-selects in the demo page of angular material, it works as expected.
My project is in github, so anyone can try it:
https://github.com/jradesenv/controle-projeto
UPDATE:
I've created a simple server with nodejs express to host the angular app, and it runs perfectly on chrome and safari. It seems to be a bug only with electron. I noticed that its not only the md-selects, but the md-dialogs and md-toast too have some weird delay to open and close, only running in electron.
Thanks!
I was using angular material 1.1.5 with this error. When i downgraded it to 1.1.0 i can see the mdSelects working as expected, but still got some other erros like delay in mdDialog close, delay to change tabs, etc. It's a bug with angular-material animations.
For anyone with this problem, I'm still using angular-material 1.1.5 , but I've disabled all the animations only in Safari, and now its working as expected.
I'm using this code to inject a specific css file and bootstrap angularjs, and in the specific css file I disable all animations:
function boot() {
if (/Safari/.test(navigator.userAgent)) {
var head = document.head,
style = document.createElement('link');
style.type = 'text/css';
style.rel = 'stylesheet';
style.href = 'styles/disable-animations.css';
head.appendChild(style);
}
window.onload = function () {
angular.bootstrap(document, ['app']);
};
}
//styles/disable-animations.css file
* {
transition: none!important;
transition-duration: 0ms!important;
transition-delay: 0ms!important;
}
I want to be able to set a keyboard shortcuts for buttons in an application I'm building. I'd like to be able to pass in the keyboard button code as a parameter to make it configurable. Here's what I have so far using the documentation before I got stuck. HTML:
<div ng-controller="BtnCtrl">
<button class="primary-btn" type="submit" ng-keypress="press($event, '12')">Button</button>
</div>
JavaScript:
angular.module('App')
.controller('BtnCtrl', function ($scope) {
$scope.press = function($event, hotKeyRef) {
if ($event.keyCode==hotKeyRef) {
//need some code here to trigger the button press
}
}
});
So using my approach, I'm unsure of a) how to trigger the button press from inside the function and b) whether this is the correct way of passing in the keyCode data.
I might also be taking completely the wrong approach, so any other guidance would be appreciated.
Thanks
For the question a).
The main uses of a < button > html element is to fire an event on a click.
So if you want to use a keypress, why use this element ? I don't really see what you want to achieve. that seems controversal.
for b) :
By default, ng-keypress is intended to be used in an input element.
Otherwise, it seems that some posts, where I inquired, manage to make it work out.
You can see what it can look like, for example on this post (Is it possible to listen for arrow keyspress using ng-keypress?)
in which the person trying to setup the konami code.
Moreover, it seems that you can have trouble depending on which browser (Chrome, Firefox, Safari, IE) you uses. Be careful.
I hope this could help you.
hi there is an excellent plugin for your scenario u can check the below link
https://github.com/chieffancypants/angular-hotkeys/
u can also check the below stackoverflow link
What is AngularJS way to create global keyboard shortcuts?
I have some problems using Material Design Lite (getmdl.io). I followed the steps showed in the getmdl.io web in order to install it (actually I use bower), but I always have the same problem, when I change the ng-route in my web, some resources don't render properly, I need to reload the page to get it properly rendered, for example.
First I have this:
then when I reload, I get what I want:
What I cant understand is why other resources like google icons or buttons work correctly but the menu button on the nav bar and other resources like this one need to reaload the page in order to render properly.
I try to include the library using the hosted method and bower method.
Any idea what is going on?
i past in my code this function
angular.module('app', ['ngRoute']).
run(function($rootScope, xxxx, xxx){
$rootScope.$on('$viewContentLoaded', function(event, next) {
componentHandler.upgradeAllRegistered();
});
});
It worked perfect! Good luck..
Libraries like MDL work by waiting for the page to load using the DOMContentLoaded event, scanning the page for things like input elements and manipulating them with JavaScript so that they can inject the bits and pieces needed to work with their components. This works fine on static websites, but the DOMContentLoaded event only fires once, so when Angular performs a page transition, the DOM changes without MDL knowing about it.
Material Design Lite has a section in its FAQ about using MDL on dynamic websites:
Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function. Here is how you can dynamically create the same raised button with ripples shown in the section above:
<div id="container"/>
<script>
var button = document.createElement('button');
var textNode = document.createTextNode('Click Me!');
button.appendChild(textNode);
button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
componentHandler.upgradeElement(button);
document.getElementById('container').appendChild(button);
</script>
Of course, this probably isn't terribly easy to do in your case, since you'd have to manually find each new element and call upgradeElement on it.
Usually, instead of doing this sort of event-based DOM manipulation, Angular uses directives to initiate DOM changes. Consider using a library built to interoperate with Angular, instead, such as Angular Material.
I'm trying to use $state.go to switch between tabs in an Ionic (+AngularJS UI Router) application, but I can't make it work with a sub-sub-state (state.substate.subsubstate). It actually works fine when moving to a sub-state (state.substate).
Here's what I mean: http://codepen.io/anon/pen/Jykmi?editors=101
Pressing the "Tab2" button neither works nor throws an error. Nonetheless, replacing the ng-click="goToState('tabs.tab2.home1')" (in line 25) with ui-sref="tabs.tab2.home1" or href="#/tabs/tab2/home1", works perfectly. Here's an example: http://codepen.io/anon/pen/DIxhC?editors=101
Even using ng-click="goToState('tabs.tab2')" would work, though that's not the intended target state.
I've found other similar questions (like this and this) but I don't think they had the same problem.
Does anybody know if $state.go should work with 3rd-level nested states?. Is the problem in my code?.
Thanks a lot in advance.
Regards,
Rafa.
As ui-sref="tabs.tab2.home1" internally use $state.go and as you said ui-sref="tabs.tab2.home1" works.
My answer is yes : $state.go() should work with 3rd-level nested states.
I actually use it in my own projet with no problems (but without ionic tabs)
I am sorry I don't have enough reputations to add a comment.
I got the exactly same problem as you do: href or ui-sref works fine while ng-click with $state.go has no effect(the address in browser changed correctly but the view remains unredirected). I solved this problem by simply use them both at the same time:
In html:
ui-sref="tabs.tabs2.home" + ng-click="goHome()"
or
href="#/tabs/tabs2/home" + ng-click="goHome()"
In controller js:
$scope.goHome = function(){
$state.go('tabs.tabs2.home');
// or, location.path works fine too:
// $location.path('/tabs/tabs2/home');
}
I don't know the reason, so this is only a workaround
I am very new to angular JS and working on a mobile application. As a part of it, I need to write a service that handles touch events like swipe-left, swipe-right, swipe-up and swipe down and I need to call back depending on which action is made. Please let me know if there any useful tutorials.
As mentioned in the comments ngTouch is a good place to start, however it only has swipe left and swipe right. I recommend using Angular Gestures; it's an angular implementation of hammer.js, and has pretty much everything you'd ever need:
doubletap
dragstart
drag
dragup
dragdown
dragleft
dragright
dragend
hold
pinch
pinchin
pinchout
release
rotate
swipe
swipeup
swipedown
swipeleft
swiperight
tap
touch
transformstart
transform
transformend
Another option is the angular-swipe module. It replaces ng-swipe and uses the same directives, adding up and down:
ng-swipe-up
ng-swipe-down
ng-swipe-left
ng-swipe-right
In html i used 5 tabs and i am able to swipe left or right smoothly.
my code given below.
RECEIVED | SENT | DELETED | ARCHIVED Reports
In html
ng-swipe-left="leftTab()" ng-swipe-right="rightTab()"
and In controller.
$scope.leftTab = function(){
if($scope.tab != 4 ){
$scope.getAlertsSummary($scope.tab + 1);
}
};
$scope.rightTab = function(){
if($scope.tab != 0 ){
$scope.getAlertsSummary($scope.tab - 1);
}
};
Here getAlertsSummary used for get tab data.