As the title suggests
「 Get and search for the hovered link URL "only" 」
What corrections would be needed to achieve this?
// Pattern1⃣ Malfunction
// ① Opens all URLs that contain the specified word, regardless of mouse over target.
// ② Opens with or without mouseover.
var ele = document.querySelectorAll(".centerarticle-entry-title a");
var link = ['Loading...', 'Dance Party'];
var L = window.onload = function(load) {
window.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.keyCode === 13) { // CTRL + ENTER
for (let i = 0; i < ele.length; i++) {
for (let j = 0; j < link.length; j++) {
if (!link.onmouseenter) {
e.stopPropagation();
}
if (ele[i].innerHTML.match(link[j])) {
ele[i].innerHTML.match(link[j]).onmouseenter = window.open("https://web.archive.org/web/" + ele[i].href);
L = undefined;
ele[i].onmouseenter = undefined;
ele[i].onmouseenter = null;
}
}
}
} else {
ele[i].onmouseleave = e.preventDefault();
return false;
}
});
};
In the case of Pattern1⃣, this is practical and convenient in another sense, but the function we want to implement this time is different from Pattern1⃣.
The function you want to implement is
「 Get and search for the hovered link URL "only" 」
I am particular about it.
I've created a few other prototypes, but they're even less practical because the version of Pattern 1⃣ is even worse or the search results are empty.
// Pattern2⃣ Malfunction
// ① Opens all URLs that contain the specified word, regardless of mouse over target.
// ② There is a 'case' that opens even if you don't mouse over.
// ③ In some cases, nothing responds in the first place, in which case you need to do a super reload etc. each time.
// ④ The number of times you pressed the ENTER key to the sky may have accumulated. Alternatively, the number of hovering times can be accumulated as it is. That possibility can open duplicate TABs unnecessarily.
var ele = document.querySelectorAll(".centerarticle-entry-title a");
var link = ['Loading...', 'Dance Party'];
document.addEventListener('mouseenter', (m_enter) => {
document.addEventListener('mouseleave', (m_leave) => {
m_enter.preventDefault();
e.preventDefault();
return false;
});
window.addEventListener('keydown', (e) => {
if (!(e.ctrlKey && e.keyCode == 13)) {
m_enter.preventDefault();
return false;
}
if (e.ctrlKey && e.keyCode == 13) {
for (let i = 0; i < ele.length; i++) {
for (let j = 0; j < link.length; j++) {
if (ele.innerHTML.match(link[j])) {
link[j].onmouseover = window.open("https://web.archive.org/web/" + ele[i].href);
location.reload();
break;
}
}
}
} else {
return false;
}
});
});
// Pattern3⃣ Malfunction
// ① Opens only one (probably top) URL that contains the specified word, regardless of whether you hover your mouse over the target.
// ② Opens with or without mouseover.
var ele = document.querySelectorAll(".centerarticle-entry-title a");
var link = ['Loading...', 'Dance Party'];
window.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.keyCode === 13) { // CTRL + ENTER key
for (let i = 0; i < ele.length; i++) {
for (let j = 0; j < link.length; j++) {
if (ele[i].innerHTML.match(link[j])) {
link[j].onmouseover = window.open(("https://web.archive.org/web/" + ele[i].href));
return false;
}
}
}
}
});
// Pattern4⃣ Malfunction
// ① Opens with or without mouseover.
// ② Search results are empty or "undefined"
var ele = document.querySelectorAll(":hover");
var link = ['Loading...', 'Dance Party'];
window.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.keyCode == 13) {
link.onmouseenter =
window.open("https://web.archive.org/web/" + this.href);
return false;
}
});
The actual experiment target pages are as follows.
https://b.hatena.ne.jp/search/tag?q=bookmarklet&page=67
please tell me,
Google
Yahoo
<script>
document.onkeydown = () => {
const link = document.querySelector('a:hover')
if (link) window.open(link.href)
}
</script>
Related
I have some issues: I have this : (in a function..)
var space = 0;
setInterval(space, 20);
var keys = {}
$(document).keydown(function(e) {
keys[e.keyCode] = true;
});
$(document).keyup(function(e) {
delete keys[e.keyCode];
});
function space() {
for (var direction in keys) {
if (!keys.hasOwnProperty(direction)) continue;
if (direction == 32) {
space++;
console.log(space);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
32 == Space key, but I saw in the console that space is pressed 3 times (space == 3), keyup keypress and keydown (I think), how can I have just "space = 1" when space is pressed ?
What seems to be happening is that since it's running every 20 ms, as you hold down the space bar the space function is continuously incrementing the count. I added a flag to prevent another execution until the key is released and it works fine. Really you should just use the keypress event and check there if the keyCode === 32 to track your count. Fewer events will be fired. If you want to see what was happening you can comment out the flag and check the console.
var spaceCount = 0;
var running = false;
var keys = {}
$(document).keydown(function(e) {
console.log("keycode", e.keyCode);
keys[e.keyCode] = true;
});
$(document).keyup(function(e) {
console.log("keyup")
delete keys[e.keyCode];
running = false;
});
function space() {
if(running) return;
for (var direction in keys) {
running = true;
console.log(direction);
if (!keys.hasOwnProperty(direction)) continue;
if (direction == 32) {
spaceCount++;
console.log("count: " + spaceCount);
console.log(keys);
}
}
}
setInterval(space, 20);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I hope that will be helpful:
var space = 0;
var keys = {};
var keys2 = {};
$(document).keydown(function(e) {
keys[e.keyCode] = true;
});
$(document).keyup(function(e) {
keys[e.keyCode] = false;
});
setInterval(function(){spacing()}, 20);
function spacing() {
if (keys[32] && !keys2[32])
{
space++;
keys2[32] = true;
}
else if(!keys[32])
{
keys2[32] = false;
}
console.log(space);
}
I want to add a class to a list using keyup event but when the keyup event is called it add the class to the list. After some seconds, the class from the list will be removed then i try to use setinterval on the callback function. It work but if i try to navigate through the list it behave funny.
Here is the code
(function(){
var AutocompleteActivities = {
init: function(config)
{
this.config = config;
$("#keywords").on("keyup", this.confirm);
},
confirm: function(e)
{
var self = AutocompleteActivities;
var con = self.config.div;
key = e.keyCode;
press = e.timeStamp
//check whether there is a key up invent in the search textfield and up or down arrow is press
if(press != "" && e.keyCode == 40 || e.keyCode == 38)
{
if(con.css("display") == "block")
{
setInterval(function(){
self.navigation(key)},500)
}
}
},
navigation: function(key)
{
var con = this.config.div, // #options - the container of the autocomplete
li = con.find("ul").find(">li"),
totalLi = li.length,
firstLi = li.first(),
current = 1; // it should be zero for debug reasons it is one
if(key == 40)
{
if(current != 0) // check whether the autoComplete selection is the first in the
{
firstLi.addClass("selection")
++current
con.find("ul li").filter(function() {
return $(this).hasClass("selection");
}).next().addClass("selection").end().removeClass("selection")
return false;
}
}
}
}
AutocompleteActivities.init({
div: $("#options"),
})
})()
All,
I have three cards which can be shuffled by the user, upon hover, the target card pops to the top, the last card on top should sit in the second position. While with the code below, I can have this effect in one direction (left to right), I am struggling to come up with logic & code for getting the effect to work in both directions without having to write multiple scenarios in js (which doesnt sound like very good logic).
Hopefully the demo will do a better explanation.
Code:
$(".cBBTemplates").on (
{
hover: function (e)
{
var aBBTemplates = document.getElementsByClassName ("cBBTemplates");
var i = 2;
while (i < aBBTemplates.length && i >= 0)
{
var eCurVar = aBBTemplates[i];
if (eCurVar === e.target)
{
eCurVar.style.zIndex = 3;
} else if (eCurVar.style.zIndex === 3) {
console.log (eCurVar);
eCurVar.style.zIndex = 3-1;
} else
{
eCurVar.style.zIndex = i;
}
i--;
}
}
});
Try this:
$(function(){
var current = 2;
$(".cBBTemplates").on (
{
hover: function ()
{
var target = this,
newCurrent, templates = $(".cBBTemplates");
templates.each(
function(idx){
if(this === target){
newCurrent = idx;
}
});
if(newCurrent === current){return;}
templates.each(function(index){
var zIndex = 0;
if(this === target) {
zIndex = 2;
}
else if (index == current) {
zIndex = 1;
}
$(this).css('zIndex', zIndex);
});
current = newCurrent;
}
});
});
Trying to allow a user to type into a textarea, but if a certain word is seen, I would like the cursor to stop until that word is removed.
I have finding the word, but I am unable find a way to have the cursor stop.
Any ideas on how i would do this in javascript
$(function() {
$('#ideacomment').bind('keyup', function(e){
var characterLimit = 300;
charactersUsed = $(this).val().length;
if(charactersUsed > characterLimit){
charactersUsed = characterLimit;
$(this).val($(this).val().substr(0, characterLimit));
$(this).scrollTop($(this)[0].scrollHeight);
}
var charactersRemaining = characterLimit - charactersUsed;
$('#remainingCharacters').html(charactersRemaining);
var words = $('#ideacomment').val().split(/\b[\s,\.-:;]*/);
var wordcount = words.length;
var nonewords = new Array("f**k", "you");
var nonewordcount = nonewords.length;
//console.log(nonewordcount + ' is the count');
for(var i = 0; i < wordcount; i++) {
for(var t = 0; t < nonewordcount; t++) {
if(words[i] == nonewords[t]) {
message('No swearing please! <br><br> This post will not succeed!<br><br> Please remove it before you continue!', '430');
}
}
}
});
});
The code above counts the number of chars and also checks each word. Would I would like and I have tried without success is have it as if it ran out of space. But i have been unable to make it happen using the same code the limiter?
This is the new code. Still not working though:
$(function() {
$('#ideacomment').bind('keyup', function(e){
var characterLimit = 300;
charactersUsed = $(this).val().length;
if(charactersUsed > characterLimit){
charactersUsed = characterLimit;
$(this).val($(this).val().substr(0, characterLimit));
$(this).scrollTop($(this)[0].scrollHeight);
}
var charactersRemaining = characterLimit - charactersUsed;
$('#remainingCharacters').html(charactersRemaining);
var nonewords = new Array("hey", "you");
var nonewordcount = nonewords.length;
for(var t = 0; t < nonewordcount; t++) {
if ($(this).val().indexOf(nonewords[t]) != -1) {
message('No swearing please! <br><br> This post will not succeed!<br><br> Please remove it before you continue!', '430');
var keycode = e.charCode || e.keyCode;
console.log(keycode);
if (keycode !== 8 && keycode !== 46)
return false;
}
}
});
});
You could check which key is being pressed, and block it if it is not a Backspace or Delete. Here is a simplified example:
$(function() {
$('#textbox').keydown(function(e) {
if ($(this).val().indexOf('test') != -1) {
var keycode = e.charCode || e.keyCode;
if (keycode !== 8 && keycode !== 46)
return false;
}
});
});
jsFiddle Demo
Since you already seem to have the text-checking and notification part, all you're really missing is just the keypress-blocking part.
At the url http://www.candyundies.com/template_non_product.php, I am using an autocomplete script on the search box for suggestions. I have tested and is working in current versions of Chrome, Safari, Opera, Firefox and IE 8. However, I noticed in IE 8, it is throwing an Object expected error after the first letter is typed in the search box but the script continues to work flawlessly. I'm sure it is a syntax error or something small I have overlooked but I cannot seem to find the problem. Any help would be much appreciated.
Contents of autocomplete.js:
// global variables
var acListTotal = 0;
var acListCurrent = -1;
var acDelay = 100;
var acURL = null;
var acSearchId = null;
var acResultsId = null;
var acSearchField = null;
var acResultsDiv = null;
function setAutoComplete(field_id, results_id, get_url) {
// initialize vars
acSearchId = "#" + field_id;
acResultsId = "#" + results_id;
acURL = get_url;
// create the results div
$("#auto").append('<div id="' + results_id + '"></div>');
// register mostly used vars
acSearchField = $(acSearchId);
acResultsDiv = $(acResultsId);
// on blur listener
acSearchField.blur(function(){ setTimeout("clearAutoComplete()", 100) });
// on key up listener
acSearchField.keyup(function (e) {
// get keyCode (window.event is for IE)
var keyCode = e.keyCode || window.event.keyCode;
var lastVal = acSearchField.val();
// check an treat up and down arrows
if(updownArrow(keyCode)){
return;
}
// check for an ENTER or ESC
if(keyCode == 13 || keyCode == 27){
clearAutoComplete();
return;
}
// if is text, call with delay
setTimeout(function () {autoComplete(lastVal)}, acDelay);
});
}
// treat the auto-complete action (delayed function)
function autoComplete(lastValue) {
// get the field value
var part = acSearchField.val();
// if it's empty clear the resuts box and return
if(part == ''){
clearAutoComplete();
return;
}
// if it's equal the value from the time of the call, allow
if(lastValue != part){
return;
}
// get remote data as JSON
$.getJSON(acURL + part, function(json){
// get the total of results
var ansLength = acListTotal = json.length;
// if there are results populate the results div
if(ansLength > 0){
var newData = '';
// create a div for each result
for(i=0; i < ansLength; i++) {
newData += '<div class="unselected">' + json[i] + '</div>';
}
// update the results div
acResultsDiv.html(newData);
acResultsDiv.css("display","block");
// for all divs in results
var divs = $(acResultsId + " > div");
// on mouse over clean previous selected and set a new one
divs.mouseover( function() {
divs.each(function(){ this.className = "unselected"; });
this.className = "selected";
});
// on click copy the result text to the search field and hide
divs.click( function() {
acSearchField.val(this.childNodes[0].nodeValue);
clearAutoComplete();
});
} else {
clearAutoComplete();
}
});
}
// clear auto complete box
function clearAutoComplete() {
acResultsDiv.html('');
acResultsDiv.css("display","none");
}
// treat up and down key strokes defining the next selected element
function updownArrow(keyCode) {
if(keyCode == 40 || keyCode == 38){
if(keyCode == 38){ // keyUp
if(acListCurrent == 0 || acListCurrent == -1){
acListCurrent = acListTotal-1;
}else{
acListCurrent--;
}
} else { // keyDown
if(acListCurrent == acListTotal-1){
acListCurrent = 0;
}else {
acListCurrent++;
}
}
// loop through each result div applying the correct style
acResultsDiv.children().each(function(i){
if(i == acListCurrent){
acSearchField.val(this.childNodes[0].nodeValue);
this.className = "selected";
} else {
this.className = "unselected";
}
});
return true;
} else {
// reset
acListCurrent = -1;
return false;
}
}
Issue resolved. See comment by ocanal.