Forum Moderators: open
Basically, I want to use a piece of javascript to manipulate a CSS Class
I have a number of content pages (a few hundred, soon to be more) which all work in 800x600 and 1024x768. My visitors are split almost 50/50. The problem is, to make the text small enough to fit into the 800x600 without breaking things up, it looks sort of empty in the 1024x768.
What I wanted to do, was put a little screen.width test in the javascript, and then change the font-size of a specific class accordingly. Either to 13px or 14px.
All of the text I need this to effect is in a single <div>, so it should work out.
My question is, is it possible to do this?
Thank you :)
Let me get back to you on this one, its a quite interesting task.
Becoming quite popular lately on many blogs is the javascript style switcher that lets the user change CSS referers using buttons on the page interface. This could probably be extended to automaticly choose one style depending on the screen-detection result.
There is an article about the style switcher at the famous a list apart site. The url is for some reason blacklisted here at the forums, but just remove the spaces in "a list apart" and add a .com in the end :)
This script uses 2 functions, one to check if the browser is DOM compatible, initiate the users screen res, and call the changeText function with a value depending on the screen res value.
The changeText function grabs all the <p> tags in the document and changes the text-size in them according to the value that was called from the previous function.
This could easily be manipulated so it fits your needs. Please let me know if you find this useful.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Change size from screen Res</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function doIt() {
if (document.getElementById) {
var screenRes = screen.width + "x" + screen.height;
if (screenRes == "640x480") changeText(9);
if (screenRes == "800x600") changeText(10);
if (screenRes == "1024x768") changeText(11);
if (screenRes == "1152x864") changeText(11);
if (screenRes == "1280x1024") changeText(12);
if (screenRes == "1600x1200") changeText(13);
if (screenRes == "1600x1280") changeText(13);
}
}
function changeText(sz) {
var yo = document.getElementsByTagName("p");
for (var i=0; i < yo.length; i++) {
yo[i].style.fontSize = sz + "px";
}
}
</script>
<style type="text/css" media="screen">
body { margin:40px; padding:0; }
p {font: small/1.8em verdana, tahoma, arial, sans-serif; }
</style>
<body onload="doIt();">
<p>This text Should have different sizes depending on the users screen resolution.</p>
</body>
</html>
You see, I have many many <p>'s, since both my left and my right navbar's are all in text, etc. And I don't want those to change, just the main content.
I guess I have two choices, either find another tag to use for just the text I want to affect, or get rid of all the other <p>'s and use <br>'s and such.
Any ideas?
function changeText(sz) {
var yo = document.getElementById("content").getElementsByTagName("p");
for (var i=0; i < yo.length; i++) {
yo[i].style.fontSize = sz + "px";
}
}
and your html to:
<div id="content"><p>This text should change</p></div>
<p>This text should NOT change</p>
Now, only the <p>'s in the #content div changes. Tada!
I don't know how to thank you enough, except for thank you eversomuch :) This would have taken hours of research on my part. You're a time saver! If there's ever anything I can do for you... ;)
