I am creating an slider in JS (with angular) + CSS where the user should control via keyboard (left and right arrows). I made it simple as you can see below.
My code works this way: When the user clicks right, it adds one object in the begining of a array and delete the last one. When I click left, it makes the opposite.
slideEffect = function(dir) {
if (dir == 'left') {
lastChamp = champs[champs.length-1];
champs.unshift(lastChamp);
champs.pop();
} else {
firstChamp = champs[0];
champs.push(firstChamp);
champs.shift();
}
}
The thing is. It works just fine when the user press "left arrow" but it goes wrong as soon as the user press right as you can see at: http://brunoornelas.com.br/test/pfc/
Does anyone have any clue on how to solve it the simplest way as possible and using Javascript? (I can't use jquery).
Thank you!
Your animation is working, it's just that the push from first to last messes the effect. Ideal way would be to wait till the transition ends before pushing the element. Since we don't really have access to your actual code, it's a bit hard to give a proper solution, ideal solution would be to add a transitionend listener and push then. But quickly, you can try this in your slide right function, you'll see what needs to be done:
firstChamp = champs[0];
champs.shift();
setTimeout(function(){champs.push(firstChamp)},100);
Related
I have a difficult question to explain and I'm way out of my comfort zone as far as expertise in Javascript, TrueType, Angular and MxGraph are concerned... Hope to be able to explain.
I have an Angular component displaying and MxGraph. I was able to integrate MxGraph with Angular following this link (How to integrate mxGraph with Angular 4?). Even if I use Angular 7, the solution still works...
The graph is displayed correctly on the page and everything works fine, including my override of the function graphHandlerMouseUp, which I do with this code:
// Save the position of the mouse when releasing the button: used for
// detecting the target in a drag and drop
mx.graphHandlerMouseUp = mx.mxGraphHandler.prototype.mouseUp;
mx.mxGraphHandler.prototype.mouseUp = function( graph, evt ) {
currentdropX = evt.graphX;
currentdropY = evt.graphY;
mx.graphHandlerMouseUp.apply(this, arguments);
}
When I run this page for the first time, no problem happens.
Then through a button I call a page with another component (through routing). If from this page I go back to the first component (again through a routerlink) the page and the component with the MxGraph loads correctly, BUT when I use this function (i.e., release the mouse button).
It seems to me a recoursive problem, as when I put a console output like this:
// Save the position of the mouse when releasing the button: used for
// detecting the target in a drag and drop
mx.graphHandlerMouseUp = mx.mxGraphHandler.prototype.mouseUp;
mx.mxGraphHandler.prototype.mouseUp = function( graph, evt ) {
currentdropX = evt.graphX;
currentdropY = evt.graphY;
// INIFINTE LOOP HERE
console.log("Test");
mx.graphHandlerMouseUp.apply(this, arguments);
}
The "Test" is written a number of times which is continuously growing. Yet, if I understood, this was the correct way of overriding the function. Of course on the first load of the page, "Test" is displayed once. Passing to another component and then back on this it is displayed an "infinite" number of times (until I reach the: "ERROR RangeError: Maximum call stack size exceeded")...
I tried also to remove that override, and besides the obvious lack of the functionality, the very same problem happened to the function "mxDragSource", which is overridden with the same approach.
As I said: I'm not expert enough in javascript, truetype, MxGraph or Angular, so any hint, even if obvious, is very welcome!
Thanks!
The first time you run your code, you store mx library's mouseUp event in a variable and you assign a new function to mouseUp event in which you call the old mouseUpEvent.
The second time you run your code, you store your current mouseUp event (that you have modified) and you assign a function in which you call the old mouseUpEvent, which is the same you stored previously. There goes your recursion !
What you need to do is override the third-party function properly, so you don't execute your code twice.
How to do it ?
You can create a mixin and use this mixin in your componentB/ If you have no idea what is it and how to do it, please reproduce your problem in a stackblitz I'll be glad to help you to implement it.
In facebook.com there's your conversations page.
In desktop view, you can scroll down this div to see all your messages.
The div's class is .uiScrollableAreaBody.
I desire to go into the conversations page, execute in console the relevant code, and start to scroll down until the possible end, until I'll be scrolled down maximally (after all scroll down "stops" or "stations" have been passed by my script).
That's instead me need to site there and scroll down, "stop after stop" or "station after station" (sorry or the terminology, I know nothing better than these terms to describe it).
Here's one of the codes I tried to achieve it automatically:
document.querySelector(".uiScrollableAreaBody").scrollHeight;
// Outputted: 1398.
And:
document.querySelector(".uiScrollableAreaBody").scrollTop=100;
// Outputted: 100.
Do you know how to do so in vanilla JS?
BTW, I just give facebook.com's conversations page as an example - I call no one to scrap that site or any other site.
I think by your "stop after stop" or "station after station" terminology you are meaning their infinite scroll loading system.
And yes you had the right idea, setting scrollTop will trigger a scroll event which seems to do a load more request if needed.
You simply were targeting the wrong element. The element that needs it's scrollTop property set is uiScrollableAreaWrap
document.querySelector(".uiScrollableAreaWrap").scrollTop=100;
As for making it exhaust the infinite scroll, you can setup a MutationObserver to watch for additions into the content area and when it does, do the next scroll.
let contentScroller = document.querySelector(".uiScrollableAreaWrap");
let observer = new MutationObserver(mutations => {
//In the case of FB message window you scroll up to load more
//change this to the scrollHeight value if needing to scroll down.
if(contentScroller.scrollTop > 0) {
contentScroller.scrollTop = 0;
}
});
observer.observe(contentScroller, {childList:true, subtree:true});
Patrick was right, I used the wrong selector, but sadly, the mutation observer didn't work (to repeat the action).
What helped me was this (note the 10000, instead 1000):
setInterval(()=>{
document.querySelector(".uiScrollableAreaWrap").scrollTop=10000;
}, 1000);
so I am working on a really small chrome extension. There is a webpage and I want to click the buttons on this webpage. After I click all of them I want to click the next page button and keep doing the same thing.
I have no problem finding the buttons or the nextpagebutton. I am also able to do it using setInterval functions but I feel like it is kind of a hacky way to do this.
The below code is what I have so far
function clickButtons(){
var followButtons = $('.buttonClass');
var numberOfButtons = followButtons.length;
for(var i=0; i<numberOfButtons; i++){
followButtons[i].click();
}
setTimeout(nextPage, 500);
}
function nextPage(){
var nextPageBtn = $('.nextPageButtonClass');
nextPageBtn.click();
setTimeout(clickButtons,500);
}
so my question is
1. My for loop to click all the buttons is not working. Is there a better way to click every button class?
2. I need to call the second function after the first one. And when the second one is finished, I need to call the first one again and they must follow each other constantly. I tried setting a timeout and calling the other one ın both functions. But it is not working. How can I do this?
This code basically doesn't do anything. And I have been scratching my head. Sorry I am a huge javascript noob
I want to customize the behaviour of previous and next buttons inside the PDF.JS Viewer. I've found that inside viewer.js there is:
document.getElementById('previous').addEventListener('click',
function() {
PDFView.page--;
});
document.getElementById('next').addEventListener('click',
function() {
PDFView.page++;
});
For example I would like that, by clicking on the next button, does not change the page but just scroll down about 10 lines.
I hope that someone could help me.
Thanks
-Antonio
You have made half your way to the destination.
However, you need to check the
scrollIntoView = function pageViewScrollIntoView(dest){...}
the PDFView.page is responsible for the page,
the scrollIntoView is responsible for the offset, which in this case what you are looking for.
http://tympanus.net/Development/ContentRotator/example2.html
Currently this Content Slider lets you scroll every 4 thumbnails (a set) when you click on the arrows. How can I make it so that clicking the arrows moves onto the next thumbnail instead?
Also, it is currently on AUTOPLAY, but once you click on a thumbnail, it stops. How do I make it continue to autoplay even after being interrupted by a click?
This is the tutorial page: http://tympanus.net/codrops/2011/07/29/content-rotator/
The script for the slider can be found here:
http://tympanus.net/Development/ContentRotator/js/jquery.crotator.js
It's not a well written plugin and unfortunately the script itself doesn't allow for customizations (i.e. you cannot pass in a list of options). There isn't an option to prevent it stopping on interaction. To achieve what you want you'll need to edit the code.
I had a look at the code and the slider will continue to work so long as the variable config.slideshow = true. However, there are a number of event bindings that have code to unconditionally set the value to false. E.g.
$navNext.bind('click.crotator', function(e) {
...
config.slideshow = false;
...
}
You could remove the code where the value is set to false and that would solve your problem. However, since you're going to touch the code it's better to allow the plugin to accept options. You could make it allow an option like 'stopOnInteraction' where it basically does the following line in the event handlers:
if (config.stopOnInteraction) {
config.slideshow = false;
}