We Keep Coding

Keypress Gestures using Tampermonkey for Chrome

I'm working on a tampermonkey userscript to replace a feature that existed with FireGestures back in Pre-Quantum Firefox. The ability to open all hovered links into new background tabs. So having a combination keypress, which in FG was Ctrl + Right Click and drawing a gesture trail though every link you wanted open. Everything I have so far has been written for me by somebody else so I'm not trying to take credit and I in am way over my head. I don't have the know-how to edit and fix what is needed. This is what I have so far.
(function(delay, t, lnk, clicked) {
//config: delay before click. mouse movement will reset the delay timer.
delay = 1000; //in milliseconds. 1sec = 1000ms
t = 0;
function mousemove() {
clearTimeout(t);
if (lnk) t = setTimeout(clickLink, delay);
}
function clickLink() {
removeEventListener("mousemove", mousemove);
clearTimeout(t);
if (lnk) {
lnk.target = "_blank";
lnk.click();
lnk.target = "";
clicked = true;
}
}
addEventListener("mouseover", function(ev, el, el2) {
el = ev.target;
removeEventListener("mousemove", mousemove);
clearTimeout(t);
while (el) {
if (el.tagName === "A") {
el2 = el;
if (el !== lnk) {
lnk = el;
clicked = false;
addEventListener("mousemove", mousemove);
clearTimeout(t);
t = setTimeout(clickLink, delay);
}
return;
}
el = el.parentNode;
}
if (!el2) {
lnk = null;
clicked = false;
removeEventListener("mousemove", mousemove);
clearTimeout(t);
}
});
})();
There is a couple issues I face.
1. This doesn't require any sort of button combination. It is continually active and will click any link that is hovered over for the specified length of time. I would prefer it to only function when a button combination is pressed, ideally Ctrl + Rightclick. I found a thread dealing with combination keypresses but wouldn't know how to edit it and insert it into the existing script to fit my needs.
document.addEventListener ("keydown", function (zEvent) {
if (zEvent.ctrlKey && zEvent.altKey && zEvent.code === "KeyE") {
// DO YOUR STUFF HERE
}
} );
2. The pop-up blocker in chrome actually prevents these tabs from opening. I don't know if there is any way of remedying this other than turning off the pop-up blocker, but if there was I'd appreciate the help
3. This script opens up tabs in the foreground rather than the background. So opening up a bunch of links on a page wouldn't be possible because it would navigate to the new tab as soon as the first link is clicked. My original idea for fixing this was to just have the script just do a middle-click mouse event over every link it passed over, but I don't even know if that is something that is possible or practical.
I know I am asking a lot but I was just hoping that someone out there that knows what they are doing could help me out by either editing what I already have or writing something out themselves. I appreciate any help provided.

here's my spin on it. This is toggled rather than going on while you are holding onto the keys.
you could had the following to your TamperMonkey script, and when you press "Ctrl + Alt + S", the links on the page are modified and appended a onmouseover event. when you hit the key combination again, the event gets removed from the link. Short and simple.
document.addEventListener('keydown', function (zEvent) {
if (zEvent.ctrlKey && zEvent.altKey && zEvent.code === 'KeyS') {
var links = document.getElementsByTagName('a');
console.log(links.length);//how many links have been grabbed
for (var i = 0; i < links.length; i++) {
if (links[i].onmouseover !== null && links[i].onmouseover.toString().indexOf('function openit') > -1)
{
//toggling the funcitonality off
//remove it
links[i].setAttribute('target', '');
links[i].setAttribute('onmouseover', '');
}
else
{
//toggling the funcitonality on
//add it
links[i].setAttribute('target', 'blank');
links[i].setAttribute('onmouseover', 'function openit(elem){console.log(\'userScript will click on the link\');elem.click();};openit(this);');
}
}
}
}
);
As for popup blocking... I don't know.

How to re-activate scroll after exiting modal?

How could I re-activate scroll after exiting the modal?
http://1ne-studio.com/test2/index.html
id : test
pass : 2015
There is a link that turns modal on at the top-right corner of the grey sub-header.
I disabled the scroll on body when modal is open by adding class on the body
<script type="text/javascript">
$("#modal-name").mouseenter(function(){
$("body").css("overflow", "hidden");
$("body").addClass("modal-open");
}).mouseleave(function(){
$("body").removeClass("modal-open");
$("body").attr("overflow", "auto");
$("body").focus();
});
</script>
and disabling the parallax scroll in fsvs.js (controls the slideDown and Up)
slideDown : function(e) {
if ($("body").hasClass("modal-open")) { return false; }
if( app.canSlideDown() ) {
ignoreHashChange = true;
app.slideToIndex( (currentSlideIndex+1), e );
} else {
scrolling = false;
}
},
/**
* [slideUp description]
* #return {[type]} [description]
*/
slideUp : function(e) {
if ($("body").hasClass("modal-open")) { return false; }
if( app.canSlideUp() ) {
ignoreHashChange = true;
app.slideToIndex( (currentSlideIndex-1), e );
} else {
scrolling = false;
}
},
But after I exit from modal, scroll will not turn back on..
Is there any way to fix this problem?

I eventually found a answer..!
I took a closer look at the problem and found a solution to this.
This is not the best solution since I haven't really found a solution to the actual problem causing this.. But this did give me the result that I wanted.
I found out that, after exiting the modal, there's one way to fix this parallax and it was clicking the pagenation button on the right.
So I created
var e = new jQuery.Event("click");
e.offsetX = 100;
e.offsetY = 100;
$('#fsvs-pagination li.active').trigger(e);
which will make browser think that I clicked the pagenation button and will re-activate the parallax.
I have not yet checked every browser but this probably solved the issue.
Thank you for all of your support and please let me know if you have found a better solution.

Eliminate Recursion on Events Triggered Inside Mousewheel Event

I'm working on a project that's using a sort of dummy pagination. The body is set to overflow: hidden and currently the only way to navigate the pages is by physically clicking on either links in the nav pane, or on sroll-down/scroll-up buttons. Here's an idea of the events that are triggered when those elements are physically clicked:
var links = $('#topnav, .top-mid a'), l = links.length - 1;
var id = 0;
$('.scrollDown, .scrollUp, .top-mid a, body.home #topnav').click(function (e) {
e.preventDefault();
var $this = $(this);
if ($this.is('.scrollDown') && id < l) id++;
if ($this.is('.scrollUp') && id > 0) id--;
if ($this.is('#topnav, .top-mid a')) id = links.index(this);
// Body is animated down or up and elements are
// shown or hidden depending on what was clicked and
// and what the var id is currently equal to
});
The idea is to trigger exactly ONE click of the scroll button on a mousewheel event. So something close to as simple as this, but that actually works:
$(window).on('mousewheel', function(e){ // I realize this will not work in FF
var evt = e.originalEvent.wheelDelta;
console.log(evt);
// Scrolling Down
if (evt < 0) {
$('.scrollDown').click(); // This fires recursively as long as wheelDelta !== 0
}
});
How can I either force wheelDelta to only increment or decrement by one, or, barring that, how can I eliminate the recursion on the click event?
I've been at this for a while, and read lots of posts and haven't been able to crack it. I've also tried fullPage.js, but it's rather heavy and doesn't really suit my project for other various reasons.

I finally solved this, and of course it turned out to be quite simple. It was a matter of toggling a boolean value inside the click() event, but only after all the animations had taken place. Like this:
var scrolled = false;
$(window).on('mousewheel', function(e){
var evt = e.originalEvent.wheelDelta;
// Scrolling Down - Only fire the click event if it hasn't already fired
if (evt < 0 && !scrolled) {
$('.scrollDown').click();
// Scrolling Up
} else if (evt > 0 && !scrolled) {
$('.scrollUp').click();
}
});
// Toggle the scrolled variable inside the original click event
$('.scrollDown, .scrollUp').click(function (e) {
e.preventDefault();
var $this = $(this);
if ($this.is('.scrollDown') && id < l) {
id++;
scrolled = true;
setTimeout(function(){
scrolled = false;
}, 1500);
}
if ($this.is('.scrollUp') && id > 0) {
id--;
scrolled = true;
setTimeout(function(){
scrolled = false;
}, 1500);
}
// Other events here
// The timeout has to be set high enough to assure
// that the mousewheel event is finished
});

jQuery - when clicking on elements too fast animations get buggy

I've been working on this jQuery effect heres the fiddle:
http://jsfiddle.net/abtPH/26/
Everything's pretty good so far, however when I click on the elements too fast it seems to get buggy and get weird behavior. If you take your time and click on the elements it works fine.
I've tried using :animate
stuff to make sure the animation ends before the user can click on the next one. I do not like this approach though because from a end user it seems like the effects are laggy. I want the user to be able to click on the elements fast and have the desired effect.
Here's my jQuery so far:
$('li').on('click', function (e) {
e.preventDefault();
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
$(this).find('.outer').fadeIn('medium', function () {
active.toggleClass('active', 400).find('.outer').fadeOut('medium');
});
} else {
$(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
$(this).find('.outer').slideToggle();
}
} else {
$(this).find('.outer').slideToggle();
}
$(this).toggleClass('active', 400);
});
$('.outer').on('click', function (e) {
return false;
});

Use .finish() complete all the queued animation before beginning a new one
$('li').on('click', function(e){
e.preventDefault();
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
$(this).find('.outer').finish().fadeIn('medium', function(){
active.finish().toggleClass('active', 400).find('.outer').finish().fadeOut('medium');
});
} else {
$(this).siblings('.active').finish().toggleClass('active', 400).find('.outer').finish().slideToggle();
$(this).find('.outer').finish().slideToggle();
}
} else {
$(this).find('.outer').finish().slideToggle();
}
$(this).finish().toggleClass('active', 400);
});
$('.outer').on('click', function(e){
return false;
});
Demo: Fiddle

scrollTo div on hover

I asked this question and the answer works really well.
The only thing though is that now I need a version that scrolls directly to the respective div instead of scrolling through all of them (i.e. if you hover over the last link, it won't scroll through 6 former divs to get to it).
It still needs to return to the first div when you aren't hovering over the link.
Also, it would be most ideal if there was also a way to stay on that div if you hover over it as well as its link. As of now, the div is not intractable because when you hover over it and leave its link, it scrolls away.
Thanks.

Try that way:
DEMO fiddle
var flag = false,
goto = 0,
hre;
$('#nav li a').bind('mouseenter mouseleave', function(e) {
if (e.type === 'mouseenter') {
flag = true;
hre = $(this).attr('href');
goto = $(hre).position().top;
$('#sections').stop().animate({top : '-'+goto },800);
} else {
flag = false;
setTimeout(function() {
if( flag != true ){
$('#sections').stop().animate({top : '0' },800);
}
}, 1000);
}
});
$('#sections').mouseenter(function(){
flag = true;
});
After you hover an anchor, go fast into the 'wrapper' and it won't go back to the 1st slide.
BTW... why you just don't create something more... practique? :)
EXAMPLE fiddle

I'm pretty sure what you are asking is impossible for this reason:
First you want to have the animation return the top when the user is not hovering over the link BUT you also want to be able to stay on the div when the user LEAVES the link and hovers over the div it scrolled to.
Here is a jsfiddle which does the first part of your question though.
http://jsfiddle.net/YWnzc/8/
I just set the animation time to 0

Just move the elements around before animating: http://jsfiddle.net/YWnzc/12/.
I made use of $.doTimeout and $.scrollTo for convenience. Also I parsed the number out with a regexp. The timeout is to allow for movement into the div without scrolling back.
var current, prev;
jQuery( "#nav").delegate( "a", "mouseenter mouseleave", function(e){
var i, self = this, pos;
if( e.type == "mouseleave" ) {
i = 1;
} else {
i = $(this).attr("href").match(/(\d)$/)[1];
}
//stop the previous animation, otherwise it will be queued
if(e.type === "mouseleave") {
var elem = $("#section1").insertBefore(current);
elem = $("#section1");
$.doTimeout("test", 500, function() {
current = $("#section1");
jQuery("#wrapper").scrollTo(elem, 250);
});
} else {
var elem = $("#section" + i);
elem.insertAfter(current || "#section1");
current = elem;
$.doTimeout("test");
jQuery("#wrapper").scrollTo(elem, 250);
}
});
jQuery( "#wrapper").on("mouseover", function() {
jQuery( "#wrapper").stop();
});

Just remove the animation scroll and do a direct scrollTop() call
Fiddle Demo: http://jsfiddle.net/YWnzc/9/