I am trying to create navigation via key events between entries. Left and right keys to move towards either end. It works similarly to this JsFiddle i modified from someone although in the actual one each entry would have its own links to the previous and next one.
angular.element($document).bind("keyup", function(event) {
if (event.which === 37) {
$scope.$apply(function() {
$location.path("/Book/Moby");
});
} else if (event.which === 39) {
$scope.$apply(function() {
$location.path("/Book/Gatsby");
});
}
});
It seems to work fine in the JsFiddle but if you look at the console and see the amount of events fired from left and right keyups it will seriously slow down navigation. Each one of those events will run $location.path.
Any advice on how to listen to an event only once or flush old events would be great
You can unbind it before binding it.
angular.element($document).unbind('keyup');
First of all you have to check whether it is hide from bottom side or upper side.
Let's suppose element is li,which used to be most common dom .
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<ul>
then every li height is relative postion of ul .If there are 1000 elements then if you want find out the position of 900th element then you can find out with offset() but when you apply animate and make them visible you will got stuck that scroll is not moving element which is hidden it should be more .
use some Mathematics Height*nth:child will always give you a right position
providing fiddle expamle so that basic concept will get clear
http://jsfiddle.net/MGwVM/108/
Related
Ok, I know that title could use some work, but I'm not sure how else to put it.
Here's the setup.
I have a (potentially) massive table that gets generated via an ng-repeat. All the rows need to be editable but, when the dataset is so large, all those bindings slow things to a crawl. I could literally be waiting upwards of 20 seconds for large sets to load!
We noticed that dumping the data in a read-only state significantly decreased the load time. So, we came up with the idea of loading it read-only, but, when the table row was clicked, it became editable. This is accomplished like so. I have two cells output. editableRow is initially false. When the row is clicked, editableRow becomes true. The idea being that, when editableRow becomes true, I see the other cell.
(proprietary code obfuscated)
<TABLE-CELL class="value-col" ng-if="readtime.editableRow === true">
<input type="text"
name="readingTime"
ng-model="<data model>"
ng-disabled="<param>"
ng-change="<function>"
ng-class="<classes>"
/>
</TABLE-CELL>
<TABLE-CELL class="value-col" ng-if="readtime.editableRow === false">
<input type="text"
placeholder="{{<data model>}}"
ng-class="<classes>"
/>
</TABLE-CELL>
The problem is, on the click, for a tiny fraction of a second both cells are visible. It really is only visible on the first click. Subsequent clicks still do it, but it goes so fast that the human eye can't catch it. I know it's there since I slowed everything down with a breakpoint on the mouse click. This also revealed that this happens as the value turns true - turning on the first cell, but the second one doesn't disappear in the same moment. So, it causes a "flicker" of sorts. This seems to happen outside my actual code, inside the jQuery, so I'm not sure how to short circuit it.
I've tried playing with using ng-show/hide instead, which worked a little bit, but also totally negated the time-saving aspect, since it actually renders everything, and it took a long time. I've also tried ng-cloak with no effect whatsoever.
The breakpoint that it keeps stopping on (when I told it to stop on event listeners to do with the mouse click) is the following code in jquery.js:
if ( !(eventHandle = elemData.handle) ) {
eventHandle = elemData.handle = function( e ) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
jQuery.event.dispatch.apply( elem, arguments ) : undefined;
};
}
It hits that line about 4 times, and, on the last one, both cells are visible. Then, the second one disappears.
I'm out of ideas and would appreciate any thoughts on this.
I finally found an answer that works!
On this page: disable nganimate for some elements the answer right BELOW the accepted answer is what finally worked!
To disable ng-animate for certain elements, using a CSS class, which follows Angular animate paradigm, you can configure ng-animate to test the class using regex.
Config
var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.config(function($animateProvider) {
$animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);
})
Usage
Simply add the ng-animate-disabled class to any elements you want to be ignored by ng-animate.
I am stuck with an issue with react-slick. The subject line may not make sense, but I will try to explain the scenario in detail. See this example fiddle to see the issue in action.
var DemoSlider = React.createClass({
getSlides(count) {
var slides = [];
for(var i = 0; i < count; i++) {
slides.push((<img key={i} src='http://placekitten.com/g/400/200' />));
}
return slides;
},
render: function() {
var settings = {
dots: false,
infinite: false,
slidesToShow: 3,
slidesToScroll: 3
}
var slides = this.getSlides(this.props.count);
return (
<div className='container'>
<Slider {...settings}>
{ slides }
</Slider>
</div>
);
}
});
In this demo, initially the slider shows 20 slides (3 per page). The idea is that if you click the button, it will generate a random number, which would be the new number of slides. The code is fairly simple and self-explanatory.
To reproduce the problem,
1. keep on clicking Next arrow until you reach the last slide.
2. click on the button that says 'Click' to generate a new random number of slides.
My expectation was that the slide will go back to the first slide but not to stay on the page where it previously was. Even worse, if the new number of slides is lower than the previous number, the user will see a blank page with no slides. On clicking Previous error, he/she can go to the previous slides, and everything works normally but the initial display ruins the user experience.
Is there something I am missing to add in the code, or is this a bug?
Thanks,
Abhi.
I would say it is rather a buggy behavior, but still you can achieve what you want by forcing a redraw after new collection has been passed as props, by resetting react's key:
<DemoSlider key={Date.now()} count={this.state.count}/>
UPDATED FIDDLE
Quick workaround: When you change to a new set of slides, remove the component, and reconstruct it again. It would then start with the first slide. You can do this by incrementing the key attribute of DemoSlider.
For a proper fix, you'd need to tell the component to change the 'current slide', so that it's not looking at a slide index beyond the end, but a casual look at the source at https://cdnjs.cloudflare.com/ajax/libs/react-slick/0.11.0/react-slick.js suggests it currently does not allow this. A change would need to be made to InnerSlider.componentWillReceiveProps() to check state.currentSlide against props.slidesToShow and state.slideCount.
It would also benefit from allowing currentSlide to be passed as props.
Html code
<button type="button" ng-click="submitPosition($event, true);navigate($event,'/#/project')" class="btn btn-main" name="submit">CREATE POSITION AND AUTOSOURCE</button>
My code.
Two buttons have same class name so am using filter.
element.all(by.css('button.btn.btn-main')).filter(function(button,index){
return index == 1;
}).each(function(button){
button.click();
});
I am getting this error
UnknownError: unknown error: Element is not clickable at point (1049, 162). Other element would receive the click: <ul class="modal-breadcrumb list-unstyled block">...</ul>
(Session info: chrome=43.0.2357.132)
Please help me.
Based on the error, it looks like you've got a modal blocking your click. Not seeing the rest of the code, it's hard to say, but you'll need to get around that. That said, the overall issue could be your locator strategy. Using filter here is overboard, and perhaps trying to clicking the wrong thing?
I would try:
element(by.cssContainingText('button.btn.btn-main', 'CREATE POSITION AND AUTOSOURCE'));
or
$$('button.btn.btn-main').get(1); // assuming index 1 is the button you're after
or if it's the only submit:
$('button[name="submit"]');
This may result due to the following reason ,
The button you want to click on is at the bottom of the page(not visible on the page).
you have to scroll down a bit to expose the button in our browser.Then you can click on it.
You can use mouseMove() to scroll to element first:
browser.actions().mouseMove(btnSave).click();
or
use browser.executeScript() function to do the scrolling:
browser.executeScript('window.scrollTo(0,document.body.scrollHeight);');
you should give a specific id to your button and use the by id to click
element(by.id('buttonId')).click();
I'm not sure if the modal eventually goes away? or if you have to click on something else for the modal to go away but I've found using the expected conditions to be helpful
var button = element.all(by.css('button.btn.btn-main')).first();
var IsClickable = EC.elementToBeClickable(button);
browser.wait(IsClickable, 5000, "Failed to click the button").then(function() {
button.click();
});
I have menu filled with $http method
<ul class="nav">
<li ng-repeat="(itemIndex, item) in menuItems.menu_items">
<a ng-click="showSubmenu(itemIndex)" ng-href="{{item.link}}">{{item.title}}</a>
<ul class="sub-nav" ng-show="isShowing(itemIndex)">
<li ng-repeat="subItem in item.submenu">
<a ng-href="{{subItem.link}}">{{subItem.title}}</a>
<span>{{subItem.desc}}</span>
</li>
</ul>
</li>
</ul>
And in controller
$scope.activeMenuIndex;
$scope.showSubmenu = function(item) {
$scope.activeParentIndex = item;
}
$scope.isShowing = function(index) {
return $scope.activeParentIndex === index;
};
Basically it works - click on menu element hides other elements and expands clicked one. The problem is when I click on opened menu element - it won't hide.
Maybe you know a better idea of the solution, than my (incomplete) way?
Greetings!
You need to add condition like this:
$scope.showSubmenu = function(item) {
if($scope.activeParentIndex === item){
$scope.activeParentIndex = "";
}else{
$scope.activeParentIndex = item;
}
}
As #fliborn said, you can just put that logic in the showMenu. Or, for clarity, consider renaming showMenu(id) to toggleMenu(id) -- so it's more clear that it handles the closing case if you call it with an id that is active.
But, in either case, you'd do as #fliborn said and set the activeParentIndex to null if you toggle the id that is currently active.
From an Angular perspective, that's certainly a reasonable way to go (i.e. that's a good technical way to implement that behavior, if that's the behavior you want).
The other thing to consider is whether your approach is ideal from a UI perspective. Is it clear to your end users that they can click on the open one in order to close? If unclear, consider putting a "+" icon to the left side of all the inactive headers, and have a "-" show next to the active one (use ng-class if using glyphicons, or ng-show and ng-hide if you are just going to use text or graphics).
That way, when a user clicks to open a section, the "+" turns into a "-" as it opens up, and the user realizes that they can click on the header again to close it.
I have a div that I want to make draggable or not, depending on the state of some other stuff on my page. I seem to be able to easily make it draggable, but I can't seem to figure out how to best remove the draggability from the div.
I am making it draggable with:
var dd = Ext.create('Ext.dd.DDProxy', mydiv, 'myDDGroup', { isTarget: false });
And I've tried to then remove the draggability by removing the only group it's a member of
dd.removeFromGroup('myDDGroup');
and just destroying the dd object with
delete dd;
Neither of these seem to actually keep me from starting a drag on the element. I suspect I should be able to use the b4Drag override in some way to simply cancel a drag of my div before it even begins, rather than toggling the draggable state of the div at all, but I can't seem to find docs on how I might cancel the drag during the b4Drag call.
So, how can I make a div undraggable after I have already made it draggable?
Seems to be working for me.
Here is the JSFiddle http://jsfiddle.net/01gx33h0/
var dd = Ext.create('Ext.dd.DDProxy', 'test123', 'myDDGroup', { isTarget: false });
Ext.fly('btn123').on('click', function() {
dd.removeFromGroup('myDDGroup');
});
Can you give me the sample code where it is not working. And what version of ExtJs are using?
You have to unreg. Not removeFromGroup.
It just removes from group. But events are not removed on that element.
dd.unreg();
https://fiddle.sencha.com/#fiddle/1eun
When looking at something specific that needs to be dragged, you might consider that allowing dragging is something users expect, for general ease of use you might try the ondragstart="return, this could be appended to your images, or links like so:
<a ondragstart="return false" href="#link">link</a>.