How can I change a CSS attribute by Javascript when a certain minimum screen resolution size is detected

Question

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.

Hi Victor, I hope these edits help you find a faster answer, do you see how I made the changes I did? — jcolebrand
– jcolebrand, Commented Jul 13, 2012 at 0:33
It sounds like you want advice on how to specify a CSS media query and load one of many various stylesheets? Here is a reference URL that goes into some detail (and may be information overload) developer.mozilla.org/en/CSS/Media_queries — jcolebrand
– jcolebrand, Commented Jul 13, 2012 at 0:35
Thanks jcolebrand ^^, but i can't use more than JS and CSS, because it's one school project — Victor Bressani de Mello
– Victor Bressani de Mello, Commented Jul 13, 2012 at 0:37
@jcolebrand: Write up a really basic explanation of media queries and you've got yourself an answer! — Blender
– Blender, Commented Jul 13, 2012 at 0:37
Can't use anything diferent from js events or css attributes — Victor Bressani de Mello
– Victor Bressani de Mello, Commented Jul 13, 2012 at 0:38

J V · Accepted Answer · 2012-07-13 00:55:40Z

1

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/

answered Jul 13, 2012 at 0:55

J V

929 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Victor Bressani de Mello Over a year ago

i do understand that, but the "change fontSize" part in css i don't, if i use document.getElementsByTagName('a').style.Fontsize:, it will only change the font size if it's made by inline style, but what i want is to Rewrite the CSS script when the function is activated...

J V Over a year ago

right off of the top of my head, this could be done by having separate files for different screen resolutions. When you do the check you could append different lines to the header to load different files. Not sure if it'll be very clean like that though. :/ sorry I can't be of more help

Dr.Molle · Accepted Answer · 2012-07-13 01:28:18Z

0

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

answered Jul 13, 2012 at 1:28

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

Comments

Niet the Dark Absol · Accepted Answer · 2012-10-05 16:37:05Z

0

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).

answered Oct 5, 2012 at 16:37

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Collectives™ on Stack Overflow

How can I change a CSS attribute by Javascript when a certain minimum screen resolution size is detected

3 Answers 3

2 Comments

Details:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Details:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related