Resizing font size on pageload
-
Hi everyone, Please forgive me if this seems like a dumb question. I'm not very familiar with web development so whilst I go trawling the web for answers I thought I put up a quick post to see if anyone out there could help... Since a member of our team left I've been asked to look at a problem with our Internet Explorer based windows app and I'm not really too sure a) exactly what the problem is and b) how to fix it. When our app is minimised and an event causes the page to reload the text shrinks so that when the page is restored the text is unreadable. As soon as the page is reloaded the normal text size is restored. In the template for all pages is some script that is called from the body tags' onresize event handler that I think applies:
function SetTextSize() { document.styleSheets[0].rules[0].style.fontSize = document.body.offsetWidth/40; }I believe this is a way of dynamically resizing the text depending upon the width of the window, however it is though the width of the window becomes very small when minimised, hence the text shrinking. Does anybody know if this is a stadard thing to do? Is there a better way to do it that will maintain the dynamic resizing of text but not shrink the text when the page is minimised? -
Hi everyone, Please forgive me if this seems like a dumb question. I'm not very familiar with web development so whilst I go trawling the web for answers I thought I put up a quick post to see if anyone out there could help... Since a member of our team left I've been asked to look at a problem with our Internet Explorer based windows app and I'm not really too sure a) exactly what the problem is and b) how to fix it. When our app is minimised and an event causes the page to reload the text shrinks so that when the page is restored the text is unreadable. As soon as the page is reloaded the normal text size is restored. In the template for all pages is some script that is called from the body tags' onresize event handler that I think applies:
function SetTextSize() { document.styleSheets[0].rules[0].style.fontSize = document.body.offsetWidth/40; }I believe this is a way of dynamically resizing the text depending upon the width of the window, however it is though the width of the window becomes very small when minimised, hence the text shrinking. Does anybody know if this is a stadard thing to do? Is there a better way to do it that will maintain the dynamic resizing of text but not shrink the text when the page is minimised?I've never seen anyone do anything like that before. I'd ditch it. Seems like an obvious way to solve the problem. Or even just have code so it doesn't go below a certain base level.
Christian Graus - Microsoft MVP - C++ "I am working on a project that will convert a FORTRAN code to corresponding C++ code.I am not aware of FORTRAN syntax" ( spotted in the C++/CLI forum )
-
I've never seen anyone do anything like that before. I'd ditch it. Seems like an obvious way to solve the problem. Or even just have code so it doesn't go below a certain base level.
Christian Graus - Microsoft MVP - C++ "I am working on a project that will convert a FORTRAN code to corresponding C++ code.I am not aware of FORTRAN syntax" ( spotted in the C++/CLI forum )
Having looked around the web I've seen a couple of examples where it's done. I've looked a little closer at my template and realised why it won't work. There is a body tag 'onresize' event handler that calls the SetTextSize function but that isn't working, presumably because it's not valid html anymore. This should overcome the small font problem because the resize event will be fired when the page is maximised (I think) and so reset the font size. I think a new valid implementation of the resize event should be implemented in the form of: window.onresize = function; I have tried this and it won't work for me either. Any guesses? I've included the code for reference.
None function LoadActions() { SetTextSize(); window.navigate('event?IP=PAGELOAD'); } function SetTextSize() { document.styleSheets[0].rules[0].style.fontSize = document.body.offsetWidth/40; } window.onresize = SetTextSize; $$BODY_CONTENT$$ -
Having looked around the web I've seen a couple of examples where it's done. I've looked a little closer at my template and realised why it won't work. There is a body tag 'onresize' event handler that calls the SetTextSize function but that isn't working, presumably because it's not valid html anymore. This should overcome the small font problem because the resize event will be fired when the page is maximised (I think) and so reset the font size. I think a new valid implementation of the resize event should be implemented in the form of: window.onresize = function; I have tried this and it won't work for me either. Any guesses? I've included the code for reference.
None function LoadActions() { SetTextSize(); window.navigate('event?IP=PAGELOAD'); } function SetTextSize() { document.styleSheets[0].rules[0].style.fontSize = document.body.offsetWidth/40; } window.onresize = SetTextSize; $$BODY_CONTENT$$Christian's suggestion was good - ditch the technique. I'd be very annoyed with a website if it started changing the size of fonts when I resized the browser, and would more than likely never use it again. Also, I'm not sure if you're aware, but the onload attribute is spelled önload (note the umlaut)
-
Christian's suggestion was good - ditch the technique. I'd be very annoyed with a website if it started changing the size of fonts when I resized the browser, and would more than likely never use it again. Also, I'm not sure if you're aware, but the onload attribute is spelled önload (note the umlaut)
Ok guys, thanks very much for your help. I've taken your advice and I'm going for a font defined by the fixed screen width. Cheers, Chris.