My website has a menu named Font Size. Basically its an option for user to change font size of website like:
smaller
small
medium
large
Default font size is "small". When user selects font size say "medium", then font size should remain medium throughout user's visit to all pages of that website(in one browser session). How to achieve this through JavaScript or jQuery or anything else.
I tried changing font size on selection but when I go to another page font size changes to default font size.
My website already using HTML5, CSS3, JavaScript, Jquery. Its on Spring MVC/Java.
In an ideal world, you would have all over the elements on your page based on a percentage of the body font size, e.g.
body{ font-size: 12px; }
h1{ font-size: 120%; }
or
h1{ font-size: 1.5em; }
If you had this set up, then you can simply change the font-size of your body element, and this will then automagically update all the fonts on the page.
As Baadshah has suggested, you can use the jQuery cookie plugin to persist your users selection across all pages.
I have put together a simple demo here at jsfiddle
You can change the body font-size based on the selection, set the cookie, and then check to see if this cookie exists, then set the font size.
if ( $.cookie('font-size') ){
console.log($.cookie('font-size')); // take this out when not debugging
$('body').css({ 'font-size': $.cookie('font-size')});
}
use cookies
var cookieFont = $.cookie("fontSize");
$("#target").css("font-size", curFont + 'px');
DEMO
Related
I am using Chrome and default font size is 16px as default.
I have an idea to adjust font-size according to screen width via media queries.
I saw some CSS experts adjusting default 16px font size to 1.6rem based system.
So idea behind scence is to equalize 1rem to 10px and use everything as rem then if needed to adjust something change only font-size so all measurements will change at same ratio.
See this example
* {
font-size: inherit;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
<p>Hello</p>
<input type="text" value="Hello">
Can anybody explain why font-size in input is greater than p ?
Also if I try to obtain font-size in dev tools I can't get any value.
If I try to get it via JavaScript like this
document.getElementsByTagName("input")[0].style.fontSize
I get ''
You get a null result on looking at the style because the inline style has not been set.
The two Hellos are not different font sizes - both are 16px, but the paragraph is Times New Roman and the input it Arial - set by the default within the browser, at least on my inspection in Chrome/Edge on Windows10.
It is worth using your browser's inspect facility to see exactly what is setting each of the styles, and it will show you the computed style as well.
I am working on a project where I need to change font style and size according to user need like if the user's devices have large font-size than font-size of web pages also large.
For example, your android or ios device has base fonts-size like below
main heading - 18px
secondary heading - 16px
content - 14px
and your web main page
Font-size is
main heading - 16px
secondary heading - 18px
content - 12px
Now I want to detect the android or ios device font-size to change my web page font size.
(continuation from comments above).
var div = document.getElementsByTagName('body')[0]; // this will set the body tag as variable
// this taken from here: https://stackoverflow.com/a/7444724/6525081
function css( element, property ) {
return window.getComputedStyle( element, null ).getPropertyValue( property );
}
alert( css( div, 'font-size' ) );
Read more about getComputedStyle here
You can check similar fiddle here
Hope that helps.
you should use media queries, this command is for you to define specific styles for certain screen sizes, follow a tutorial on how to use
Example:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Complete tutorial here
in case you want to change the source according to the size of the device source use the rem
it is a measure that takes as a base the size of the font configured in the browser
Example:
div{
font-size: 1rem
}
Here's the rem tutorial
I have problem in implementing font-weight: 100.
I want the my sentence to be ultra light/thin, but when I'm using font-weight:100, is not working.
What should I do? Do I need to import or install something?
I am using reactjs.
<p class="thin">Test</p>
.thin {
font-weight: 100;
}
In order to use specific font-weight, your font must support it, if it doesn't, then any value between 0 and 600 (not included, normal value is 400) will be interpreted as normal, and any greater value will be bold (bold normally is 700).
If your font doesn't have a light/thin variant, then I'm afraid you can't get a thinner font weight than normal (400).
EDIT NOTE : For fonts than only are normal (400), then bold is generated by default by the browser, for instance :
#import url('https://fonts.googleapis.com/css?family=Roboto');
p {
font-family: 'Roboto';
font-weight: 700;
}
<p>This is bold, but I didn't loaded Roboto 700, only Roboto 400.</p>
In this case, the render may differ from one browser to another, although it usually don't.
If you select a font on google fonts you have two choices: Embed it with the default embed code or customize it (in the overlay you get after you select a font)
If you customize it you have the ability to select which font weights you want to include. not every font supports every font weight. if you can't select it, it doesn't exist for this font.
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 have this code:
function AUTADIV () {
var BRW = window.outerWidth;
x = (BRW/1280) * 20
document.getElementsByTagName("a").style.fontSize = x
}
and the tag <a> is already under this class in a .css file:
a {
position:relative;
z-index:1;
color:White;
background-color: transparent;
font-size:20pt;
text-decoration: none;
text-shadow: blue 0em 0em 0.4em
}
When someone with a larger screen sees my site, the background does fill it all, but the font is too small. Is there any way to make it automatically resize? If not, how can I change font-size:20pt by JavaScript? My code only works if the font-size style is inline, and I need it in the CSS script.
I have found that the code I need activates with the onResize event.
If it needs to be in the CSS then it might be difficult to do. If however, it's able to be changed dynamically with JS then you can accomplish this with a simple test like:
(I'm using jquery)
$.getDocHeight = function(){
return Math.max(
$(document).width(),
$(window).width(),
/* For opera: */
document.documentElement.clientWidth
);
};
if($.getDocHeight>threshhold){ // some threshhold of a max width
$('a').style('font-size','40pt');
}
This can be done in regular js as well. It's hard to determine the width on all different browsers, thats why I included the function. But once you have the width, you just need to do a simple check and you can bump up the font-size style for your anchor tags. I suggest having static sizes so that the font is more predictable and doesn't scale with your page size.
This is a best practice when considering different types of users (like mobile users where you definitely do not want the font to be so small that all of it fits on one page).
Src for code: http://james.padolsey.com/javascript/get-document-height-cross-browser/
You may modify the rules by accessing the CSSRule-Object.
Details:
IE<9 : http://help.dottoro.com/ljcufoej.php
Others: http://help.dottoro.com/ljdxvksd.php
You might get better results using a media query:
#media all and (max-width: 1280px) {
a{font-size:12pt;}
}
You can repeat this for increasingly smaller sizes. It won't smoothly transition, but it doesn't require JavaScript (and besides so much changes when you resize a window that a jump in text size probably won't be noticed).