Newbie question:
I'd like to scan a page for all links where the href starts with hide? and then I'd like to add style="float:left" to the link like:
<a href="hide?6765765" style="float:left">
How do I do this?
Thank you!
Here's one way. Google any unfamiliar terms (and also "jQuery selectors").
// ==UserScript==
// #name _Float "hide" links
// #match *://YOUR_SERVER.COM/YOUR_PATH/*
// #require https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// #require https://gist.github.com/raw/2625891/waitForKeyElements.js
// #grant GM_addStyle
// #grant GM.getValue
// ==/UserScript==
//- The #grant directives are needed to restore the proper sandbox.
waitForKeyElements ("a[href^='hide?']", floatNodeLeft);
function floatNodeLeft (jNode) {
jNode.css ("float", "left");
}
Related
I have this script which closes a tab if it finds a certain element on the page:
// ==UserScript==
// #name Name
// #namespace bbb
// #match https://example.com
// #include about:config
// #version 1
// #grant none
// ==/UserScript==
var intv = setInterval(function() {
if (/(container)|(mediumheight)/i.test (document.body.innerHTML) )
{
window.close()
}
}, 1000);
How can I make it close the page if it finds this:
<span id="some">0</span>
But it has to check for both the id (some) and for the number (0). Both must be on the page for the script to fire.
If it was just the id (some) I could do it, but I need both to be true for the script to fire.
Can anyone help? Thanks
<span id="some">0</span>
But it has to check for both the id (some) and for the number (0). Both must be on the page for the script to fire.
Here is an example of how you get check it:
const sp = document.querySelector('#some'); // find id (some)
if (sp && sp.textContent === '0') {
// run the function
}
I'm a beginner is learning how to code for Tampermonkey.
I know how to click an automated clicking using a class tag or id tag.
But is there anywhere to automate a clicking based on data info such as data-id, name or image URL?
The HTML is like:
<div class="yellow-bot" data-image="//imgurl1.gif" data-id="123" data-name="Image1">...</div>
<div class="yellow-bot" data-image="//imgurl2.gif" data-id="124" data-name="Image2">...</div>
<div class="yellow-bot" data-image="//imgurl3.gif" data-id="125" data-name="Image3">...</div>
...
...
...
<div class="submitButton">
<input id="button" type="submit" value="Submit Now" class="btn-primary">
</div>
So I'd like the click to click id 124 and 125 but the class is all the same. and then click on the Submit button. Can anyone help me with this?
Reference CSS selectors and jQuery selectors.
So, selecting by attribute:
document.querySelector (".yellow-bot[data-id='124']").click ();
document.querySelector (".yellow-bot[data-id='125']").click ();
Or much more robustly:
// ==UserScript==
// #name _Click nodes by attribute
// #match *://YOUR_SERVER.COM/YOUR_PATH/*
// #require https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// #require https://gist.github.com/raw/2625891/waitForKeyElements.js
// #grant GM_addStyle
// #grant GM.getValue
// ==/UserScript==
//- The #grant directives are needed to restore the proper sandbox.
/* global $, waitForKeyElements */
waitForKeyElements (".yellow-bot[data-id='124']", clickNode, true);
waitForKeyElements (".yellow-bot[data-id='125']", clickNode, true);
function clickNode (jNode) {
var clickEvent = document.createEvent ('MouseEvents');
clickEvent.initEvent ('click', true, true);
jNode[0].dispatchEvent (clickEvent);
}
For the rest, see Choosing and activating the right controls on an AJAX-driven site.
Since IMDB search can't exclude specific genres, I would like to hide the ones who I am not interested in, using Tampermonkey or Greasemonkey.
Every movie is inside a class named "lister-item mode-advanced":
Inside that is:
<span class="genre">
Animation, Adventure, Family </span>
Looking at other answers, I thought something like this could work:
// ==UserScript==
// #name NoAnimation
// #namespace NoAnimation
// #version 0.1
// #description try to take over the world!
// #author You
// #include *.imdb.com/search*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// #grant GM_log
// #grant GM_getValue
// #grant GM_setValue
// #grant GM_addStyle
// #grant GM_openInTab
// #grant GM_xmlhttpRequest
// #grant GM_registerMenuCommand
// ==/UserScript==
$("lister-item mode-advanced") .show ()
.has ("span.genre:contains('Animation')")
.hide ();
which doesn't work of course :(
I'm doing this test on akas.imdb.com/search/title?....
I hope I was clear enough. Can anyone give me advice? :)
The main mistake is, that is not how to specify class in a jQuery selector. It should have been $(".lister-item.mode-advanced").
But there are other problems:
Brittle selectors used. For example mode-advanced is not always present. May not always be a span, etc.
Unnecessary logic (.show(), for example).
Very obsolete version of jQuery.
Extraneous and unhelpful meta info.
Here's a complete script that addresses these issues:
// ==UserScript==
// #name Hide Animations from IMBD search results
// #match *://*.imdb.com/search*
// #require http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// #grant GM_addStyle
// ==/UserScript==
//- The #grant directive is needed to restore the proper sandbox.
$(".lister-item").has (".genre:contains('Animation')").hide ();
I'm trying to remove overflow:hidden or change it with :visible in this line:
<div style="width:75px;height:95px;padding:7px;overflow:hidden;background:#fff;border:3px solid gray;border-radius:10px;">
I've tried with var overflow = visible; didn't help.
Standard JavaScript, one div for simplicity:
document.querySelector('div[style*="overflow:hidden"]').style.overflow = 'visible';
jQuery, any number of divs, needs #require meta-property:
// ==UserScript==
.........................
// #require https://code.jquery.com/jquery-2.2.4.min.js
// ==/UserScript==
$('div[style*="overflow:hidden"]').css('overflow', 'visible');
Or simply use Stylish extension with the following CSS:
div[style*="overflow:hidden"] { overflow:visible!important }
This question already has an answer here:
How do I get Greasemonkey to click on a button that only appears after a delay?
(1 answer)
Closed 8 years ago.
Ok Here is the source of the page.
<div id="socialBox"></div>
<div class="friendButton addFriend">
<a>+friend</a>
</div>
Here is my greasemonkey code
// ==UserScript==
// #name Auto click
// #namespace Auto click
// #description Auto click
// #include https://*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// #require https://gist.github.com/raw/2625891/waitForKeyElements.js
// #grant GM_addStyle
// ==/UserScript==
waitForKeyElements ("#friendButton addFriend", triggerMostButtons);
function triggerMostButtons (jNode) {
triggerMouseEvent (jNode[0], "mouseover");
triggerMouseEvent (jNode[0], "mousedown");
triggerMouseEvent (jNode[0], "click");
triggerMouseEvent (jNode[0], "mouseup");
}
function triggerMouseEvent (node, eventType) {
var clickEvent = document.createEvent ('MouseEvents');
clickEvent.initEvent (eventType, true, true);
node.dispatchEvent (clickEvent);
}
greasemonkey says its executing the code so it clearly doesn't work. Let me know if you need more info
I wonder if the code below is what you want.
document.querySelector('.friendButton.addFriend a').click()
Demo
You'd better provide a link to one of the pages on which you want your script executed, so that I can make sure the script will work as expected.