View Full Version : JavaScript CSS Text Resize

07-19-2008, 06:40 AM
I need some help.

How exactly would I write this? I cannot get this to work.

If screen width is less than or = 800 than change then change the CSS font-size to 10px;
Else don't do anything.

I would like to integrate it into the following function

<script language="javascript" type="text/javascript">
function resize() {
// Variables to be sent to PHP. The PHP variables to be sent are in "" (ie width=, imgpath=)
var width = "width=" + screen.width; // Set variable width to users screen width
var path = "imgpath=images/&"; // Set the path to the image
var logo = "imgname=scrfix-logo.png&"; //Name of my image
var shopping = "imgname=shopping-cart.jpg&"; //Name of my image
var forums = "imgname=forums.jpg&"; //Name of my image
var signin = "imgname=sign-in.jpg&"; //Name of my image
var contact = "imgname=contactus.jpg&"; //Name of my image
var printer = "imgname=printer.jpg&"; //Name of my image
// End of Variables to be sent to PHP. The below variables are only for this script.
var script = "shrink.php?"; // The name of the php script
var scrpth = script + path; //Combine both the script and the path to make it less to work with below.

// CSS Reduced Text Based Upon Width
if(width <= 800){
document.write('<link rel="stylesheet" type="text/css" href="../css/size.css" />');

document.write('<a href="/"><img border="0" class="headerimages" src="' + scrpth + logo + width + '" alt="Spectacular Computer Repair" title="Spectacular Computer Repair" /></a>');
document.write('<a href="/catalog/"><img border="0" class="headerimages" src="' + scrpth + shopping + width + '" alt="Computer Repair Shopping" title="Computer Repair Shopping" /></a>');
document.write('<a href="/computer-repair-forums/"><img border="0" class="headerimages" src="' + scrpth + forums + width + '" alt="Computer Repair Forums" title="Computer Repair Forums" /></a>');
document.write('<a href="/coordinator.php"><img border="0" class="headerimages" src="' + scrpth + signin + width + '" alt="User Sign In" title="User Sign In" /></a>');
document.write('<a href="/contact.php"><img border="0" class="headerimages" src="' + scrpth + contact + width + '" alt="Contact Spectacular Computer Repair" title="Contact Spectacular Computer Repair" /></a>');
document.write('<a href="#" onclick="window.print();return false;"><img border="0" class="headerimages" src="' + scrpth + printer + width + '" alt="Print This Page" title="Print This Page" /></a>');

return 0;



07-19-2008, 07:03 AM
Try to add the higlighted:

if(width <= 800){
document.write('<link rel="stylesheet" type="text/css" href="../css/size.css" /><style type="text/css">body{font-size:10pt;}</style>');

07-20-2008, 03:49 AM
I did however it cancels out at the last } because it thinks it is part of the function. It doesn't work. Also I am looking for the anchor text so it would be a { font-size:10pt; }; but every time I do it I get errors. Is there another way?

07-21-2008, 07:33 AM
Could you please show us your complete modification.