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 am trying to create a button on a web page to increase the page size, font size image size etc. This is for a Special needs school website in order to make it more accessible. website is www.applefieldsschool.co.uk. Please note it is a work in progress.
So far I have managed to come up with this;-
<button onclick="body.style.zoom='300%'">Zoom 300%</button>
This works but simply magnifies what is rendered on the page and is not responsive. My page is HTML5 and CSS3 responsive to different viewport sizes etc.
If I use the keyboard shortcut Ctrl+ and Ctrl- This does exactly what I need. I now need to program a button to utilise the keyboard shortcut.
Sadly this is getting a little beyond my javascript skills (which I have only just, in the last week, started to play with) Thanks in advance.
It's not possible to tell your browser to 'Use the CTRL + + keys'.
Here is another thread which lists some possible alternatives. In particular:
body {
transform: scale(1.1);
transform-origin: 10% 10%;
// add prefixed versions too.
}
You can also set the font-size. Unless you did all your sizes in em, which is relative to the font size, this won't really zoom the page as such, but it will (obviously( change the size of the font (which may still be acceptable for you).
You can try this:
var value = event.keyCode;
Call it from onkeydown="keyCode(event);"
And here is the list of keycodes:
http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
I guess the zooming is browser specific (please corret me if i'am wrong)
I'd recommend to add multiple styles, that you append on the website and define by your self.
for example, some CSS
/*default -no styles*/
body
{
font-size: 14px;
}
body.big
{
font-size: 20px;
}
body.omg
{
font-size: 25px;
}
body.omg img
{
width: 150%;
}
The pain with this is, that only the text will be scaled up. You will have to adress certain items to make them appear bigger. Like the <img> in the example.
Then you can address the styles on button click (you should maybe use something like jQuery to make this more clean...)
<button onClick="document.getElementsByTagName('body')[0].className ='big';">+ Zoom</button>
<button onClick="document.getElementsByTagName('body')[0].className ='omg';">++ Zoom</button>
Update here in an working example, using jQuery: http://jsfiddle.net/9DCry/
I've noticed on a lot of sites with custom highlight colors, if you press CTRL + A, the default highlight color, blue, always manages to creep through. Why is that? In making my own site, I have my own custom color too, but I also have the same problem. Does anyone know how to keep this from happening?
http://www.smashingmagazine.com/, http://www.admixweb.com/ are both examples of the CTRL + A problem.
Selection styles are mostly browser dependant, and might not be customisable in all browsers. Here is an example of how to configure such styles.
p.normal::selection {
background:#cc0000;
color:#fff;
}
p.moz::-moz-selection {
background:#cc0000;
color:#fff;
}
p.webkit::-webkit-selection {
background:#cc0000;
color:#fff;
}
Such styling are very risky to use and should not be depended upon.
Smashing Magazine is declaring their CSS selection as follows:
::selection{background:#333; color:#fff}
::-moz-selection{background:#333; color:#fff}
Hitting Cmd + A on my Mac yields the anticipated behavior in Chrome 12.
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