SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Dec 30, 2001, 20:59 #1
- Join Date
- Aug 2001
- Location
- Melbourne, Australia
- Posts
- 41
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Changing text size with css and javascript?
Hi folks.
We're all well aware of the nasty font size problems on different browsers, and we all know that we must make our sites as accessible as possible. But these two problems seem mutually exclusive.
To make text look the same on all platforms, you must define them in pixels, but then the user can't override this size in MSIE (NS and opera have no problem scaling absolute font sizes).
I have an idea for a solution, but I am no programmer and would not know how to go about achieving it. I am hoping someone here can help me...
What would be ideal would be the ability for users to adjust the text size of a page live by clicking on inline buttons (pehaps a small + and -). This would then instantly update the css and redraw the page. I want to define the base font size in the style sheet something like this:
body, td {font-size: 12px;}
...and then define all other font sizes (eg headings) with percentage values relative to that base.
If the user clicked on the + button once, it would change the style sheet to be a base font of 16px for example. If they clicked again, it would be 24px. The other fonts would all scale relative to the base.
It would also be necessary for the size to be remembered across all pages so the user doesn't have to keep changing the default. Perhaps with a cookie?
I've looked everywhere online for something like this, and the closest I've found is this: http://www.dansteinman.com/dynduo/ex...tscaling1.html but it only works on inline objects, not on the <body>
I would be very greatful to anyone that can help me!
Thanks!Neil Creek
http://www.gravitoncity.com
http://www.orionvisuals.com
-
Dec 30, 2001, 21:27 #2
- Join Date
- Oct 2000
- Location
- Northern California
- Posts
- 64
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
does this help?
http://glish.com/css/blogger/blogger.html
This is a great resource for CSS ..
within this template on the right of the page is
a + & _ for font size.
it may not be at all what you are thinking of or looking for..but
hth
humanz"...Planet lurches to the right as ideologies engage/suddenly it's
repression, moratorium on rights/what did they think the politics of
panic would invite/the person on the street shrugs "security comes
first"/but the trouble with normal is it always gets worse!" -- Bruce Cockburn
-
Dec 30, 2001, 21:44 #3
- Join Date
- Aug 2001
- Location
- Melbourne, Australia
- Posts
- 41
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
That's outstanding! It does exactly what I want, and more! However... The site I'm working on has to be compatible with v4+ browsers. The text formatting only works in msie5+ and NS6+.
Does anyone know of a similar system (font family changing not needed) which will work on v4+ browsers?Neil Creek
http://www.gravitoncity.com
http://www.orionvisuals.com
-
Dec 31, 2001, 01:51 #4
- Join Date
- Oct 2001
- Location
- Whistler BC originally from Guelph Ontario
- Posts
- 2,175
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally posted by neilcreek
That's outstanding! It does exactly what I want, and more! However... The site I'm working on has to be compatible with v4+ browsers. The text formatting only works in msie5+ and NS6+.
Does anyone know of a similar system (font family changing not needed) which will work on v4+ browsers?
But since I don't code for those browser I can honestly say that this is more or less an educated guess
[edit]
Sorry thought of one thing you could do. Detect the actual browser and have different style sheets for each browser. So
Code:<SCRIPT LANGUAGE="JavaScript"> <!-- if ((navigator.appVersion.indexOf("Mac") != -1)) { document.write("<LINK REL=stylesheet HREF=\"stylemac.css\" TYPE=\"text/css\">"); } else { document.write("<LINK REL=stylesheet HREF=\"stylewin.css\" TYPE=\"text/css\">"); } // --> </SCRIPT>
http://www.webreference.com/js/column6/index.html
That article will explain severl different techniques. Best of luckLast edited by Maelstrom; Dec 31, 2001 at 01:56.
Maelstrom Personal - Apparition Visions
Development - PhP || Mysql || Zend || Devshed
Unix - FreeBSD || FreeBsdForums || Man Pages
They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.
-
Dec 31, 2001, 02:55 #5
- Join Date
- Aug 2001
- Location
- Melbourne, Australia
- Posts
- 41
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I believe that it's possible to set style with javascript. This page has an example of what I've come across during my research: http://www.webreference.com/dhtml/co...menuFrJSS.html This supposedly works in NS4. I have no idea about other platforms. Not being a programmer, I have no idea what to do with this anyway... Also there's the issue with setting the user's preference to all pages.
I'd rather not call different style sheets for a number of reasons. Extra style sheets means more to download (our target audience regularly is limited to 28k or 33k), more complicated css management (this technique will be applied to hundreds of sites and could get messy with multiple css), and the fact that browser detection still leaves many holes as pointed out in the ALA article "Fear of style sheets": http://www.alistapart.com/stories/fear4/3.html (for relevent comment, scroll to "The scripting solution: foiled again").
Maybe I'm asking too much, but I'm sure this must be doable.
Thanks for your help thus far!Neil Creek
http://www.gravitoncity.com
http://www.orionvisuals.com
-
Dec 31, 2001, 20:04 #6
- Join Date
- Oct 2001
- Location
- Whistler BC originally from Guelph Ontario
- Posts
- 2,175
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally posted by neilcreek
I believe that it's possible to set style with javascript. This page has an example of what I've come across during my research: http://www.webreference.com/dhtml/co...menuFrJSS.html This supposedly works in NS4. I have no idea about other platforms. Not being a programmer, I have no idea what to do with this anyway... Also there's the issue with setting the user's preference to all pages.
[/i]
Code:document.tags.p.fontSize="20pts";
Code:document.class.fontclass.all.fontSize="20pts";
Code:<p class="fontClass">blah</p>
With IE (after 5.5 for sure) & nn6.0 use
document.getElementById('idname').style.fontSize="20pts";
so a typical tag would look like this
<p class="bob" id="bob">blah</p>
You would access its attributes through any of the above.
NOW!. The problem is you still have to use browser detection to make all of this work. So you are still going to have to hope the detection works because you are right in saying browser detection is weak.
So to sum up
Code:function adjustFont(){ if (document.layers){ //Netscape 4 document.tags.p.fontSize="20pts"; }else if (document.all && document.getElementById){ //IE5.5+ document.getElementById("idname").style.fontSize="20pts"; }else if (document.getElementById){ //Netscape 6.0 document.getElementById("idname").style.fontSize="20pts"; }else{ //other browser support } }
For references try
http://members.aol.com/grassblad/
www.webreference.com
Both of these give excellent dhtml tutorialsMaelstrom Personal - Apparition Visions
Development - PhP || Mysql || Zend || Devshed
Unix - FreeBSD || FreeBsdForums || Man Pages
They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.
Bookmarks