I'm writing some JavaScript to implement placeholder text in browsers that don't have it.
I've successfully styled the placeholder text in Chrome 9 and Fx 4b11 using the following style rules:
::-webkit-input-placeholder { color: #969696 !important; }
input:-moz-placeholder { color: #969696 !important; }
Now I want my JavaScript to retrieve this data from the stylesheet in browsers that don't understand those rules so I can manually style the placeholder text.
Does anyone know how I can do that in YUI3? I tried:
YUI().use('node',function(Y) {
var phColor = Y.all('::-webkit-input-placeholder').getStyle('color');
});
Unfortunately this just returns:
"undefined: not bound to any nodes { _query="input::-webkit-input-placeholder", _nodes=}"
Anyone know how I can do this? Or if it's possible?
If you aren't sold on using YUI exclusively (or are willing to harvest the jQuery code from a plugin and convert it to a YUI3 module) this jQuery plugin does exactly what you are trying to do: https://github.com/mathiasbynens/Placeholder-jQuery-Plugin
I've used it in a production environment and it works great even as far back as IE6 :)
Related
I'm using a browser that does not support any addons but supports javascript & CSS. I can't seem to get this javascript to work and have narrowed it down to this part. By my basic knowledge I assume GM_addstyle works on the Greasemonkey addon & since my browser (Rambox) I'm using to access this specific website that I want this script to run, it won't
I don't have experience with JS yet to do it myself so could someone convert this into general non-Gm style. Much Thanks
GM_addStyle(`
.notion-frame span .katex {
padding-right: 0 !important;
}
`)
You can append a <style> tag to the page which has textContent of that string:
document.body.appendChild(document.createElement('style')).textContent = `
.notion-frame span .katex {
padding-right: 0 !important;
}
`;
I have been trying to manipulate CSS properties dynamically via javascript, using the stylesheet methods (deleteRule/removeRule/insertRule). It works nicely but when I check the Chrome console, it doesn't refresh the new css changes.
Here you have an example:
http://jsfiddle.net/Pz69E/4/
Full screen example: http://jsfiddle.net/Pz69E/4/show
It uses a simple external stylesheet file: body { background-color: black; }
The script changes to yellow, removing the rule (using deleteRule) and adding a new one (insertRule).
If you check chrome console now over the body, it will have the same first property { background-color: black; } without updating the new changes. :(
Do you guys know why this behavior?
Thanks!
EDITED
For some reason my example was not working in the last 12 hours, now it should work again: http://jsfiddle.net/Pz69E/4/
Looking forward to hearing from you!
It seems that this is a new feature in JQuery UI 1.9.0, because I used JQuery UI plenty of times before and this text never poped up.
Couldn't find anything related on the API documentation.
So using an basic autocomplete example with local source
$( "#find-subj" ).autocomplete({
source: availableTags
});
When the search matches it shows this related helper text:
'1 result is available, use up and down arrow keys to navigate.'
How can I disable it in a nice way, not by removing it with JQuery selectors.
I know this has been asnwered but just wanted to give an implementation example:
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++"
];
$("#find-subj").autocomplete({
source: availableTags,
messages: {
noResults: 'no results',
results: function(amount) {
return amount + 'results.'
}
}
});
This is used for accessibility, an easy way to hide it is with CSS:
.ui-helper-hidden-accessible { display:none; }
Or (see Daniel's comment bellow)
.ui-helper-hidden-accessible { position: absolute; left:-999em; }
The top answer here achieves the desired visual effect, but defeats the object of jQuery having ARIA support, and is a bit dickish to users who rely upon it! Those who've mentioned that jQuery CSS hides this for you are correct, and this is the style which does that:
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Copy that into your stylesheet instead of removing the message, please :).
According to this blog:
We now use ARIA live regions to announce when results become available
and how to navigate through the list of suggestions. The announcements
can be configured via the messages option, which has two properties:
noResults for when no items are returned and results for when at least
one item is returned. In general, you would only need to change these
options if you want the string to be written in a different language.
The messages option is subject to change in future versions while we
work on a full solution for string manipulation and
internationalization across all plugins. If you’re interested in the
messages option, we encourage you to just read the source; the
relevant code is at the very bottom of the autocomplete plugin and is
only a few lines.
...
So how does this apply to the autocomplete widget? Well, now when you
search for an item, if you have a screen reader installed it will read
you something like “1 result is available, use up and down arrow keys
to navigate.”. Pretty cool, huh?
So if you go to github and look at the autocomplete source code, around line 571 you'll see where this is actually implemented.
Adding the jquery css also worked to remove the instructional text.
<link
rel="stylesheet"
href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />
Since this is in there for accessibility reasons it's probably best to hide it with CSS.
However, I would suggest:
.ui-helper-hidden-accessible { position: absolute; left: -9999px; }
Rather than:
.ui-helper-hidden-accessible { display:none; }
As the former will hide the item off-screen, but still allow screen-readers to read it, whereas display:none does not.
Well, this question is a bit older, but the text does not show up at all when you include the according css file:
<link
rel="stylesheet"
href="http://code.jquery.com/ui/1.9.0/themes/YOUR_THEME_HERE/jquery-ui.css" />
Of course you have to insert an actual theme instead of YOUR_THEME_HERE e.g. "smoothness"
Style it how the jQuery theme itself styles it. A lot of the other answers suggest including a whole stylesheet, but if you just want the relevant CSS, this is how it's done in http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css:
.ui-helper-hidden-accessible {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
}
The jQuery CSS .ui-helper-hidden-accessible is in the themes/base/core.css file. You should include this file (at a minimum) in your stylesheets for forward compatibility.
Adding this code right after the autocomplete in your script will push the annoying helper off the page, but the people using screen readers will still benefit from it:
$(document).ready(function() { //pushing the autocomplete helper out of the visible page
$(".ui-helper-hidden-accessible").css({"position": "absolute", "left":"-999em"}) //{"display","none"} will remove the element from the page
});
I'm not a fan of manipulating CSS with JS but in this case I think it makes sense. The JS code created the problem in the first place, and the problem will be solved a few lines below in the same file. IMO this is better than solving the problem in a separate CSS file which might be edited by other people who don't know why the .ui-helper-hidden-accessible class was modified that way.
I have found a javascript function that inverts colors on webpage:
String javascript = "javascript: (function (){var newSS, styles = '* { background-color: black ! important; color: green !important; }a:link, a:link * { color: green !important; text-style: underline; }a:visited, a:visited * { color: #7f0000 !important; }a:hover, a:hover * { color: red !important; }';var elemHead = document.getElementsByTagName(\"head\")[0];var elemCSS = document.getElementById(\"darkenCSS\");if (elemCSS){elemHead.removeChild(elemCSS);}else{newSS = document.createElement('link');newSS.rel = 'stylesheet';newSS.href = 'data:text/css,' + escape(styles);newSS.id = \"darkenCSS\";elemHead.appendChild(newSS);}})();";
Is it possible to run this automatically?
By that I mean load www.google.co.uk and apply this javascript function.4
Hope that makes sense, I don't know much about javascript.
CLARIFICATION:
I want to know if this javascript function can be appended to a URL at all. Something like http://www.google.com/?Javascript_blah_blah_blah
FURTHER CLARIFICATION:
I am making a basic web browser in Android. I want to invert colours on the webpage.
I have made a button, that executes this javascript on the page. This works. But needs the user to press the button each time.
I want to make a switch to make permanently inverted.
So I need to browse to the url input and have it invert the colours automatically.
Hope this helps
Yes, paste the string without quotes into the address bar. Be sure that the psuedo-protocol javascript: is at the beginning
addition by rlemon
You first need to modify your script to unescape the escaped quotes, then add a new bookmark to your addressbar. Edit the bookmark and change the location to
javascript:%20(function%20(){var%20newSS,%20styles%20=%20'*%20{%20background-color:%20black%20!%20important;%20color:%20green%20!important;%20}a:link,%20a:link%20*%20{%20color:%20green%20!important;%20text-style:%20underline;%20}a:visited,%20a:visited%20*%20{%20color:%20#7f0000%20!important;%20}a:hover,%20a:hover%20*%20{%20color:%20red%20!important;%20}';var%20elemHead%20=%20document.getElementsByTagName("head")[0];var%20elemCSS%20=%20document.getElementById("darkenCSS");if%20(elemCSS){elemHead.removeChild(elemCSS);}else{newSS%20=%20document.createElement('link');newSS.rel%20=%20'stylesheet';newSS.href%20=%20'data:text/css,'%20+%20escape(styles);newSS.id%20=%20"darkenCSS";elemHead.appendChild(newSS);}})();
There you have it!
No, you can't "just run" javascript appended to a URL. This is security breach (will be). But you can use
bookmarklets ('URL' that begins with javascript:),
browser plugins (Chrome/FF/Safari - all can do this) or
you can look for plugin that can run userscripts. This is something like Greasemonkey.
Also you can try Fluid (Site Specific Browser, MacOS X only)... I think you get an idea.
BTW if you want/need to write bookmarlet you can run on specific site and want something to start - check this article: http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/
The easiest way if you are using Firefox (it is said the add-on works in Chrome and Opera, but I never tried it) is to install Greasemonkey and create a userscript for the domain(s)/URLs you want - www.google.co.uk/*, www.google.com/* etc.
However things like this are better done with Stylish extension, but you can use only CSS there, no JavaScript. But in what you presented, the following CSS fragment should work like a charm:
* { background-color: black ! important; color: green !important; }a:link, a:link * { color: green !important; text-style: underline; }a:visited, a:visited * { color: #7f0000 !important; }a:hover, a:hover * { color: red !important; }
There are lots of userscripts and userstyles available on the web.
You could use Chrome + http://defunkt.io/dotjs/ to achieve that. That's exactly the purpose of this extension: automatically run some JS scripts on specific websites.
It's OSX only for now but I guess there are some other extensions doing that as well.
I am looking a multi columns combo box by using HTML + JavaScript only. Is there any example or library available? As I came across some solution, they are in ASP.NET, but not pure HTML + JavaScript.
Here is an example but it is implemented using Java Swing.
If jQuery is an option, here's a plugin that looks like it can deliver this:
Jquery Multi Column Selectbox
Flexbox is probably the best one I have ever used with jQuery, with paging and JSON support :
http://flexbox.codeplex.com/
It's a real combo box, as it displays the results by typing. It can be easily restyled through the CSS.
Eg. to modify the rows :
.ffb .content .row {
border-bottom: 1px solid #828790;
clear: both;
color: #000000;
height: 20px;
}
border-bottom may be removed to get rid of lines between rows.
http://dev.sencha.com/deploy/dev/examples/form/combos.html Shows ExtJS's combo box. Their combo box can be customized with template to be used for rendering each entry. All you'd need to do is to specify a template that contains a few spans with a set width.
If you're willing to use ExtJS (not free), write it in here, and I'll show you an example