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!
I have a Dojo textbox with inline styling however i would like to define styling in an external css file for the item. I would like to know what class can be used to define styling for Dojo input="text" elements alone.
I have tried using DijitReset and DijitInputInner classes however this is not specific to text items only. Under is an example of the tag i am working with.
<input id="ltb" style="width: 50em;" data-dojo-type="dijit/form/TextBox" />
I am not comfortable with having inline css for tags since i have always know it to be a bad practice when doing modular development (your thoughts on this as well. seeing this is specific to Dojo framework)
Having a look at Dojo and how it does it styles
The reason for Dojo explicity saying use inline style is ( perhaps) because the classes they add are full of '!importants' ( now I say 'they' - this might just be what is in the default clara theme ) || some dojo javascript is looking for it
.dijitInputInner {
border: 0 !important;
vertical-align: middle !important;
background-color: transparent !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
I had a play here - and, through the inpsect tools in chrome , it showed that in fact the id on the input stayed put, so we could use it ...
#ltb { width:50em; }
/* but we need to overide it */
#ltb.dijitReset, #ltb.dijitInputInner { width:5em !important; }
From the trials we can see that we are also going to be battling with the CSS for the dojo containers , that are set as overlow:hidden etc.
I don't know the reason for the clara stylesheet using importants ( I'm taking it that is the default dojo theme ) - but the answer to the inline styling question is either
use the inline style ( don't fight with dojo )
or change the dojo theme file itself
Or create our own css overides using !important
or something I am missing from the docs in my very limited experience of dojo
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'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 :)
I'm invoking the navigator print function using a simple window.print(); call. It prints perfect (I want to print the same I see on the screen, so I don't really use a special CSS to print) but it showing the link locations next to the text link, something like:
Homepage (http://localhost)
To be clearer: I don't want to have the link locations near the links in the printed version, I have control over the CSS but I can't find this behaviour defined anywhere, so I think is a navigator-related issue!
EDIT:
This happens under Firefox 3.6.8 and the last Chrome, on Ubuntu an Windows XP/Vista.
So to avoid additional print-out of link information in a printed web page, add the following rules to the #media print section:
a:link:after, a:visited:after {
content: "";
}
This will remove the ugly link information like Homepage (http://localhost) and reduce it to Homepage. You may of course add rules to avoid it only in the text section (or only in the navigation, but you shouldn't display navigation in the print-out format of your web page.
Seems you are printing a page with this styling from a CSS2 compliant browser
http://www.alistapart.com/articles/goingtoprint/
In a fully CSS2-conformant browser, we
can parenthetically insert the URLs of
the links after each one, thus making
them fairly useful to anyone who has a
copy of the printout and a web browser
handy. Here’s the rule, which
restricts this effect to the “content”
div and thus avoids sticking a URL in
the masthead:
#content a:link:after, #content a:visited:after {
content: " ("attr(href) ") ";
font-size: 90%;
}
Try it out in a Gecko-based browser,
like Mozilla or Netscape 6.x. After
every link in the printout, you should
see the URL of the link in
parentheses.
content: ""; does not work
I use this:
#media print {
.noprint {display:none !important;}
a:link:after, a:visited:after {
display: none;
content: "";
}
}
This works to disable!
Currently using the content property should work in all major browsers.
#media print - or - <style type="text/css" media="print">
a:link:after, a:visited:after {
content: normal; //TODO: add !important if it is overridden
}
More options here: CSS Content.
More usefull ways of using the content attribute here: CSS Tricks
My app server (rails) required me to use a parent selector. The body element is perfect for selecting what should be the entire page.
body a:link:after, body a:visited:after {
content: "";
}
I found the other solutions don't work (anymore) cross-browser.
The following works in FF 29, Chrome 35, IE 11:
a:link:after, a:visited:after {
content: normal !important;
}
For anyone using Bootstrap 3, the selector used is:
a[href]:after { }
And can be overriden with something like:
a[href]:after {
content: initial;
}
Use additional CSS for print.
See here:
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
Adding this will help you to remove those unwanted links
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
Reading this will help
While many css options have been suggested, if you wish to get rid of the links and headings in the header/footer which is forced on each page, there is a setting just for you. As shown below.
That's it.
I found the mentioned CSS and removed it but it did not help, and I couldn't find it anywhere else in the project so I used jQuery to remove the links but still retain the text.
$('a[title="Show Profile"]').contents().unwrap();
More info here Remove hyperlink but keep text?
I faced the same problem, if you're using chrome, the trick is when displaying the print window, this one contains a left config panel which gives some configuration of display mode and other, there is a link below named : more params or more config (I had in french so I tried to translate it ), click on it after that it will show some additionnal options, among them, there is a check box "header and footer" uncheck it, and it will hide the "localhost...."
hopefully it will help
Every browser having setting of printing header and footer ,and background graphics
If you disable this setting of printing header and footer then it will not show on your print page