A+ | A - | RESET

os1 · March 22, 2006, 02:10:07 AM

hi guys...
just wondering if the text size adjuster (top right of Bz7) is going to be available in mod form??

This is a great feature and would make many forums in the UK DDA compliant.

Great work totally love TP/smf wont go to anything else!!

ontap · March 22, 2006, 02:28:46 AM

im not so sure it will be a mod, think bloc was messing about with some code?...

Xarcell · March 22, 2006, 02:53:08 AM

I don't think it was a mod, it is just a theme feature. I could be wrong though...

TwinsX2Dad · March 22, 2006, 05:12:47 AM

It appears to be a very simple theme feature - one we'd implemented years ago on various UBB boards. It is javascript, which should make it easy to customize.

Place this code in the <head> of your template:

Code Select

<script type="text/javascript">
var tags = new Array( 'div','td','tr','p','b','table','strong','emphasis','a','h1','h2','h3','pre','sub','sup','i','th','cp','ul','ol','li','dt','dd');
var pixelArray =  new Array('10','12','16','20','24','30','40');
var emArray =  new Array('0.7','0.9','1.0','1.5','2.0','2.5','3');
var initSize = 1;

function fontSizer(inc,unit) {
     if (!document.getElementById) 
          return;
     var size = initSize;
          size += inc;
     if (size < 0 ) {
          size = 0;
}
     if (size > 6 ) {
          size = 6;
}
          initSize = size;
          getBody = document.getElementsByTagName('body')[0];
     for (i = 0 ; i < tags.length ; i++ ) {
          getallTags = getBody.getElementsByTagName(tags[i]);
     for (k = 0 ; k < getallTags.length ; k++) 
          getallTags[k].style.fontSize = (unit=='px') ? pixelArray[size]+unit: emArray[size]+unit;
     }
}

</script>

Then, wherever you want to have the links for changing the font size, place these hyperlinks in your template:

Code Select

<a href="#" onMouseDown="fontSizer(1,'px')">Increase Font Size</a> 

<a href="#"  onMouseDown="fontSizer(-1,'px')">Decrease Font Size</a>

You can remove any tags you don't want resized from the array (between the head tags):

Code Select

var tags = new Array( 'div','td','tr','p','b','table','strong','emphasis','a','h1','h2','h3','pre','sub','sup','i','th','cp','ul','ol','li','dt','dd');

This can be added to an existing theme or built into a new one.

bloc · March 22, 2006, 11:09:34 AM

Quite true ..its a javascript for changing the sizes dynamically. But it also have a "remember" feature that javascript can't do alone.

Its great to change it, but really no use if you need to change it on every page.

If you notice though, its not flawless..it changes all items to one size lesser or bigger..but when you refresh the internal relAtions bewteeen items show up again. Not abig deal..but just a thing to remember, use percentages for fontsizes.

I can post the code to be used in the theme if you want..its nothing mysterious about it really.

eldacar · March 22, 2006, 11:22:13 AM

Would be nice to see this added through JS and used with an eventlistener

But there are a lot of things it would be nice to see hehe

TwinsX2Dad · March 22, 2006, 12:06:36 PM

Quote from: Bloc on March 22, 2006, 11:09:34 AMBut it also have a "remember" feature that javascript can't do alone.

I knew I was missing something.

erikman · March 23, 2006, 03:38:18 PM

Thanks, but my design doesn`t support it...

(using on normal php-page)

os1 · March 23, 2006, 08:16:11 PM

QuoteI can post the code to be used in the theme if you want

That would be great bloc.

PZsHosting · March 23, 2006, 08:19:16 PM

Please and Thank You.

bloc · March 23, 2006, 11:11:39 PM

ok, here goes. Beware its a chunk to insert.

First off, open index.template and find this code:

Code Select

	if ($context['browser']['needs_size_fix'])
		echo '
	<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/fonts-compat.css" />';

and insert this:

Code Select

	// set the body font-size here, so it can be changed
	echo '<style type="text/css"><!--
	body
	{
		font-size: ' , !empty($options['mysize']) ? $options['mysize'] : 'small' , ';
	}
	 --></style>';

...then find this:

Code Select

	echo '
				document.getElementById("upshrink_ic").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");

				document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";

				current_header_ic = mode;
			}

and insert this right after:

Code Select

			var mysize = "', !empty($options['mysize']) ? $options['mysize'] : 'small', '";

			function setmysize(size)
			{';

	if ($context['user']['is_guest'])
		echo '
				document.cookie = "size=" + size;';
	else
		echo '
				smf_setThemeOption("mysize", size , null, "', $context['session_id'], '");';

	echo '
			}

/*------------------------------------------------------------
	Document Text Sizer- Copyright 2003 - Taewook Kang.  All rights reserved.
	Coded by: Taewook Kang (txkang.REMOVETHIS@hotmail.com)
	Web Site: http://txkang.com
	Script featured on Dynamic Drive (http://www.dynamicdrive.com)

	Please retain this copyright notice in the script.
	License is granted to user to reuse this code on
	their own website if, and only if,
	this entire copyright notice is included.
--------------------------------------------------------------*/

//Specify affected tags. Add or remove from list:
var tgs = new Array( \'div\',\'td\',\'tr\');

//Specify spectrum of different font sizes:
var szs = new Array( \'xx-small\',\'x-small\',\'small\',\'medium\',\'large\',\'x-large\' );
';

// setup the array to start with
$fsize=array('xx-small' => 0 , 'x-small' => 1, 'small' => 2, 'medium' => 3, 'large' => 4, 'x-large' => 5);
if(!empty($options['mysize']))
	$what=$fsize[$options['mysize']];
else
	$what=2;

echo '
var startSz = '.$what.';

function ts( trgt,inc ) {
	if (!document.getElementById) return
	var d = document,cEl = null,sz = startSz,i,j,cTags;

	sz += inc;
	if ( sz < 0 ) sz = 0;
	if ( sz > 5 ) sz = 5;
	startSz = sz;


	if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];

	cEl.style.fontSize = szs[ sz ];

	for ( i = 0 ; i < tgs.length ; i++ ) {
		cTags = cEl.getElementsByTagName( tgs[ i ] );
		for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
	}
    setmysize(szs[ sz ]);
 }

 function tsreset( trgt ) {
	if (!document.getElementById) return
	var d = document,cEl = null,sz = startSz,i,j,cTags;

	sz = 2;
	startSz = sz;


	if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];

	cEl.style.fontSize = szs[ sz ];

	for ( i = 0 ; i < tgs.length ; i++ ) {
		cTags = cEl.getElementsByTagName( tgs[ i ] );
		for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
	}
    setmysize(szs[ sz ]);
 }

And finally , find the spot where you want the links, and use this code:

Code Select

echo '<a href="javascript:ts(\'body\',1)">A+</a> | <a href="javascript:ts(\'body\',-1)">A -</a> | <a href="javascript:tsreset(\'body\')">RESET</a>';

Make sure all sizes are percentages, apart from the fontsize for body. That should be set as "small".

PZsHosting · March 23, 2006, 11:19:48 PM

Thank You!

This should make things much nicer for my visually impaired members

And my eyes, when I've been staring at code too long

TwinsX2Dad · March 23, 2006, 11:21:45 PM

Visually impaired folks probably already have discovered their browser font settings.

PZsHosting · March 23, 2006, 11:29:49 PM

Quote from: TwÃƒÆ'Ã,ÂnsX2DÃƒÆ'Ã,Â¥Ã,,â€˜Ãƒâ€šÃ,Â³ on March 23, 2006, 11:21:45 PM
Visually impaired folks probably already have discovered their browser font settings.

It snuck up on some of them, some of them only use the web to visit the board, some are not all the computer savy and I'll still have to point this out to some of them, because they won't see it unless I do.

TwinsX2Dad · March 23, 2006, 11:39:47 PM

Makes you wish you could sit on their lap and slap them around from time to time, doesn't it?

PZsHosting · March 24, 2006, 12:51:41 AM

Quote from: TwÃƒÆ'Ã,ÂnsX2DÃƒÆ'Ã,Â¥Ã,,â€˜Ãƒâ€šÃ,Â³ on March 23, 2006, 11:39:47 PM
Makes you wish you could sit on their lap and slap them around from time to time, doesn't it?

If they weren't such nice old folks, perhaps

But now that I'm starting to realize the early stages of aging, I better be nice

os1 · March 24, 2006, 01:07:45 AM

WOW.. thanks i got it installed and working just great

G6Cad · March 24, 2006, 08:25:42 AM

WOHOOOOO, sometimes am really happy that I atleast can make backups properly

This totally messed up and i didnt even manage to remove the code i pasted in to get it to work.
Backups is really a lovley thing to have sometimes

This one have to wait until i can get it allready built in a theme

bloc · March 24, 2006, 01:28:00 PM

yes..its importnant to set it up so it works php-wise. One wrong palcement and you get errors. And since index.template is called everytime, everything stops with an error screen.

But I can help if you need it..is it the default theme?

G6Cad · March 24, 2006, 01:45:34 PM

No, i try out things at my testforum, so no need to help

Im just testing out things on that forum to learn more about how things work.

Thanks for the offer though

China-Garten · March 04, 2008, 01:46:53 PM

I'm sorry to revive this old topic...

I have tried to implement this script into my site. It does work, but the size change is not remembered. Every time I click on something the font-size is at default size again.

What could I have done? What infos do you need to help?

China-Garten · March 05, 2008, 09:33:05 AM

All sizes are put to percentages. All I did was copying the chunks of code into the index.template.php as provided by bloc. Oh yeah, I changed the arrayfor the sizes from 1-5 to 1-4, and changed the other bit to "if ( sz > 4 ) sz = 4;". Now if the arrays are not handled different than when using Ruby it should work fine.

You can see the test forum here:

http://www.fat-seiten.de/simplemachines/index.php

I would really appreciate your help. I tried to solve it myself over the last days, but no luck yet.

Recent

User

Stats

Members

Stats

Users Online

A+ | A - | RESET

os1

ontap

Xarcell

TwinsX2Dad

bloc

eldacar

TwinsX2Dad

erikman

os1

PZsHosting

bloc

PZsHosting

TwinsX2Dad

PZsHosting

TwinsX2Dad

PZsHosting

os1

G6Cad

bloc

G6Cad

China-Garten

China-Garten

This website is proudly hosted on Crocweb Cloud Website Hosting.