I happened to discover yesterday that when typing search text in Google that my search history has suddenly stopped showing. I use the https://www.google.com/webhp?complete=0 url to prevent the auto suggestions from appearing. That used to work great, but now Google has done something to prevent that from working.
I use Firefox and have Greasemonkey installed. I have had interest in learning to script in Greasemonkey, and this seems to be an opportune time to start learning. Does anyone have any examples of changing the search input form on Google to a different style so that the search history can be viewed? I've searched around and have found examples of text box modifications, but they don't work with the particular style of input box that Google uses.
TIA,
Brian
// ==UserScript==
// #name re enable autocomplete
// #namespace http://gcomplete.user.js
// #description
// #include htt*://*.google.com/webhp?complete=0
// ==/UserScript==
////////////////////////////////////////////////
function doIt(){
document.getElementById("lst-ib").autocomplete = "on";
window.setTimeout(doIt, 5000); // wait 5 sec and reapply changes, looped.
}
window.setTimeout(doIt, 500); // wait half a second and apply changes.
this may not be the exact code you need but it should be pretty close.
i chose the loop because i'm lazy and because the textbox seems to be destroyed and recreated at least once.
"lst-ib" is the id of the text box you want, and it has the property 'autocomplete' which google helpfully sets to "off"
I've tried the code that RozzA provided, and it works so long as you click out of the text area and then click back into the text area. I made the following mods to it, and they seem to have fixed the problem:
function doIt() {
document.getElementById("lst-ib").autocomplete = "on";
document.getElementById("lst-ib").blur(); // disable focus
document.getElementById("lst-ib").focus(); // re-enable focus
// looping does not seem to be necessary.
// window.setTimeout(doIt, 5000);
}
window.setTimeout(doIt, 500); // wait half a second and apply changes.
Related
I'm coding with posenet and p5js. I made a grid on my screen which plays different audio fragments on different x ranges. This works very well. However, if I keep it running and open another tab in my chrome webbrowser, the x position gets stuck in one area (it doesn't update anymore) and the same audio fragment is repeated until you get crazy.
Is there a way I can prevent this?
Well, some code would be great to be honest, but variables shouldn't really get stuck if you open another tab and so on, are you sure you haven't just missssspelled some variable, or some function or did one of those random mistakes?
If it truly is the p5.js I guess just try checking everytime draw fires if your canvas is still focused.
I believe you can also have canvas.hasFocus... exept you'd have to declare createCanvas as a variable (cause canvas is basically just a button or a textArea to html and javascript and p5)
Also I think there's a command to only allow for one audio channel and stuff in js and p5...
function draw() {
if(document.hasFocus()){
// all of your other code even
// background() and stuff...
}
}
I am trying to write a prank program to run on chrome so that when my mom hits search on a search engine, it give a popup saying "Did you really need to look that up?". However, I am a bit of a noob and need some general direction and/or help on this one. I would like to write this in python as it is the language I know best, but if I would have to use another language, please let me know. Thank you!
There is a chrome extention, tampermonkey, that allows you to run custom javascript scripts when the page is loaded. You can use that to make a function that shows an alert when search is pressed.
Install the extension, open it, create a new userscript, remove whats inside and paste this:
// ==UserScript==
// #name alert on google search
// #namespace http://tampermonkey.net/
// #version 0.1
// #description show an alert on google search
// #author You
// #match https://www.google.*/*
// #grant none
// ==/UserScript==
(function() {
var searchButton =
document.querySelectorAll("button[type=submit]");
searchButton.onclick = function(){
alert("Are you sure?");
}
})();
The first 9 lines tells tampermonkey the name of the script and other things that aren't important now.
var searchButton = document.querySelectorAll("button[type=submit]"); creates a variable calles searchButton and puts the search button in it. The last 3 lines tells the browser that when the button is pressed, an alert should pop up.
I'm writing a Primefaces 5.1 portlet.
It consists in a unique page containing a panelMenu, and I need that it starts with any panel collapsed everytime a user change page (on page loading).
But, if I open a panel, then change page, it will start showing that panel still opened.
I wasn't able to find any option to achieve this goal (e.g. collapsed=true, ignoreCookie=true or something similar).
The only solution I found was the following Javascript code:
PrimeFaces.widgets.myPanelMenu.collapseRootSubmenu(PrimeFaces.widgets.myPanelMenu.headers);
The problem is that this code will collapse any opened panel (so on page loading user is able to see panel menu collapsing animation) but it seems it doesn't store this state in its cookie/localstorage... the result is that on any page loading user can see this animation.
I'm sure it doesn't save its state, because the only way to "solve" the problem is to manually re-open and re-collapse the panels... then, on following page change, these menus start closed (and there is no animation).
I also tried to use PrimeFaces.widgets.sideMenuPanel.saveState() after collapsing, but with no success.
Do you have any idea about?
Thank you...
I found a solution to the problem.
If you read my discussion with Kukeltje (comments on my question), you will find that latest Primefaces' versions will solve the problem.
Otherwise, if you want to avoid upgrade or modify sources, and you need a quick fix based on Javascript only please read the following part of the answer.
It directly works on the component's state using JavaScript.
First of all you need to have a variable reference to your component:
<p:panelMenu model="#{menuBackingBean.menuModel}" widgetVar="sidePanelMenu" />
Then you should add the following JS code on document ready:
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
// 1. On page loading collapses possible opened panels
panelMenu.collapseRootSubmenu(panelMenu.headers);
// following line is commented because it never should be necessary is not necessary (unless unexpected situation I never verified)
//clearSidePanelMenuPreferences();
// 2. Call the "clear preferences" actions on click on two tpe of links: first level are the panel link (used to open/close the menu) and second level are the destination links
// We need to fork also on the first level links to be sure it works after user clicks there then exit from the page in another way
panelMenu.headers.children("a").click(function(){setTimeout(clearSidePanelMenuPreferences, 500)}); // setTimeout is necessary because this event should be fired after preferences are written
panelMenu.headers.siblings().find("a").click(function(){clearSidePanelMenuPreferences();});
The function called to clear preferences are the following:
function clearSidePanelMenuPreferences() {
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
panelMenu.expandedNodes = []; // clear the opened panels lists
panelMenu.saveState(); // store this information
}
Hope it helps
Please check this block of code
PF('myPanelMenu').headers.each(
function(){
var header = jQuery(this);
PF('myPanelMenu').collapseRootSubmenu(header);
header.removeClass('ui-state-hover');
}
);
I prefer to do this in order to execute this method only once and keep the menu option selected.
$(document).ready(function() {
if(location.pathname == "/cotizador/" || location.pathname == "/cotizador/faces/login.xhtml"){
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
// 1. On page loading collapses possible opened panels
panelMenu.collapseRootSubmenu(panelMenu.headers);
panelMenu.expandedNodes = []; // clear the opened panels lists
panelMenu.saveState();
}
});
i'm using color picker from http://jscolor.com/
i'm trying to attach it to some dynamic inputs, but to no avail. dynamic inputs in terms of, on page load the input doesn't exist, only after the user click on something the input will become available. for example, I have a rows of data, and each row has different background color. this row of data are loaded using ajax. at the end of each row, there's an edit button. by clicking the edit button, it will display an input text box for the clicked row. I want to call the jscolor picker when the user clicks on the input text box. how can I do this?
thanks
For some reason jscolor.init() did not work for me, and looking at the code I called
jscolor.installByClassName("jscolor");
function.
So...
$(document).ready(function() {
jscolor.installByClassName("jscolor");
});
Hope it helps
I just had this problem too but luckily it's easy to fix. You need to (re)init jscolor after you have dynamically created your inputs:
jscolor.init()
This helped me
<script>
$(document).on('click', '#myPickerId', function () {
var obj = $(this)[0];
if (!obj.hasPicker) {
var picker = new jscolor.color(obj, {}); //
obj.hasPicker = true;
picker.showPicker();
}
});
</script>
In my case, the picker control was dynamic because it is inside Knockout.js 'with' statement which hides and recreates the picker when it needs.
Got the same problem upon adding input fields dynamically
Managed to make it work by calling
jscolor.install();
PS: jscolor v2.4.5
As of 2020, the original problem should be solvable by dynamically creating an input element, and then calling new jscolor(input). Using JQuery (you could use vanilla JS as well):
var color_input = $('<input class="jscolor" spellcheck="false">');
new jscolor(color_input[0]);
This will make the popup picker appear on click, and everything appears to work just fine. However, you cannot manipulate it programmatically. To set the color using the objects above, you would normally use a method like: color_input[0].jscolor.fromString("#B7B7B7"). But that will fail for dynamically created objects, as color_input[0].jscolor is undefined. I believe this is a bug in Jscolor (and probably very easily solvable), as the missing object is actually available with color_input[0]._jscLinkedInstance. So you can just set the object yourself on instantiation with:
var color_input = $('<input class="jscolor" spellcheck="false">');
color_input[0].jscolor = new jscolor(color_input[0]);
And then everything looks to be working as expected. Hopefully this helps someone else that comes across this answer page as I did.
How do I stop my Google Chrome extension's default action to auto-focus the first link in my popup.html? I know I could probably do some roundabout hack with JS or change the :focus CSS, but I think this is throwing off something else I'm trying to do and I'd prefer to stop the root cause of it.
The easiest (and javascript free!) way is to simply add tabindex="-1" to any element which you don't want to receive automatic focus.
Perhaps auto-focus was intended for a convenience, but often it does a disservice. Since I see no way to stop the root cause, I found some roundabouts. One is using JavaScript. Chrome puts auto-focus after a short delay after displaying the popup. It's possible to unfocus it with blur() but unfocusing it too late will flash it momentarily, and trying to unfocus too early will do nothing. So to find the right time to unfocus is not easy, and this solution tries to do this several times during the first second after the popup is displayed:
document.addEventListener("DOMContentLoaded", function () {
var blurTimerId = window.setInterval(function() {
if (document.activeElement != document.body) {
document.activeElement.blur();
}
}, 200);
window.setTimeout(function() {
window.clearInterval(blurTimerId);
}, 1000);
});
Another pure HTML solution is to add tabindex="1" to the body tag.
Wrangling the initially focused element with a tabindex attribute is probably the best way to go, using:
tabindex="-1", as suggested by Paul Ferret to prevent an element from getting focus
tabindex="1", as suggested by link0ff, to specify which element should start with focus
If your situation is more complicated and you do want to bring in some javascript, I'd recommend using link0ff's solution, except, instead of trying to guess when to blur with timeouts, listen for the initial focus in event:
function onInitialFocus(event) {
// Any custom behavior your want to perform when the initial element is focused.
// For example: If this is an anchor tag, remove focus
if (event.target.tagName == "A") {
event.target.blur();
}
// ALSO, remove this event listener after it is triggered,
// so it's not applied to subsequent focus events
document.removeEventListener("focusin", onInitialFocus);
}
// NOTE: the "focusin" event bubbles up to the document,
// but the "focus" event does not.
document.addEventListener("focusin", onInitialFocus);
I don't believe the focus event is cancelable, so you can't just suppress the event.
Another easy alternative (which preserves "tabbability") is to just add an empty link () before your first actual link. It will invisibly "catch" the auto-focus from Chrome, but any users who want to tab through the links will still be able to do so normally.
The only minor downside of this approach is that it introduces a second "dead tab" when looping; that is, users will have to press tab three times to get from the last link back to the first, instead of just twice.
tabindex="-1" worked for me. I was adding autofocus to an input and it didn't work until I used this tabindex="-1" attribute for each link before the input.
Strange to say the least.
This is the best solution to the problem. The tabindex="-1" solution harms user experience, and as opposed to #link0ff's solution, this one removes the focus instantly.
This element should be the first focusable element in the DOM:
<button class="invisible-button"></button>
This simply removes the button once it's been focused:
function removeAutoFocus(e) {
if (e.target.classList.contains("invisible-button")) {
e.target.style.display = "none";
document.removeEventListener("focus", removeAutoFocus);
}
}
document.addEventListener("focus", removeAutoFocus, true);