DISCUSSION: CSS Text/Font Resizing (A+ A-) on Joomla Template

[mophsy]

i did this and is not working in a joomla template. tell me how should i call the js in template? or is already called by those 3 links?

Easiest way is to steal the Javascript-File with the Styleswitcher:

http://forum.joomla.org/Themes/joomla/m ... changer.js

and include it in your template.

This implementation is extremly generic, so copyright shouldn't be an issue.

Then include some links in your template with the necessary Javascript event handlers:

Code: Select all

<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
larger
</a>

<a href="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
smaller
</a>

<a href="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
set default
</a>

Or you may use alternate style sheets as described here:

http://www.alistapart.com/articles/alternate/

A Google search for "Javascript Style Switcher" should bring up some more ways to do this.

-- eike

[alikon]

I have implemented the text font/resizer and all goes ok.

Sometimes after i want to implement another javascript for scrolling text horiz.

Now the problem  the 2 javascript togheter don't work, i think the cause is the onload event but my javascript knowledge is very poor.

this is the scroller js can someone give me an help for makong working togheter ?

Code: Select all

var speed=50        // speed of scroller
var step=3          // smoothness of movement
var top="#top"      // name of anchor used as page top when clicking start / stop / show
var Start= "Start"  // Text for start link
var Stop = "Stop"   // Text for stop link
var Show = "Show"   // Text for show link

var x, scroll, divW, sText=""

function onclickIE(idAttr,handler,call){
  if ((document.all)&&(document.getElementById)){idAttr[handler]=new Function(call)}
}

function addLink(id,call,txt){
  var e=document.createElement('A')
  e.setAttribute('href',top)
  e.setAttribute('onclick',call)
  var linktext=document.createTextNode(txt)
  e.appendChild(linktext)
  document.getElementById(id).appendChild(e)
}

function addControls(){
  addLink('controls','clickAction(0)',Stop)
  onclickIE(document.getElementById('controls').childNodes[0],"onclick",'clickAction(0)')
  document.getElementById('controls').appendChild(document.createTextNode(' | '))
  addLink('controls','clickAction(2)',Show)
  onclickIE(document.getElementById('controls').childNodes[2],"onclick",'clickAction(2)')
}

function stopScroller(){clearTimeout(scroll)}

function setAction(node,callvalue,txt){
  var c=document.getElementById('controls')
  c.childNodes[node].setAttribute('onclick','clickAction('+callvalue+')')
  onclickIE(document.getElementById('controls').childNodes[node],"onclick",'clickAction('+callvalue+')')
  c.childNodes[node].firstChild.nodeValue=txt
}

function clickAction(no){
  switch(no) {
    case 0:
      stopScroller()
      setAction(0,1,Start)
      setAction(2,2,Show)
      break
    case 1:
      startScroller()
      setAction(0,0,Stop)
      setAction(2,2,Show)
      break
    case 2:
      stopScroller()
      setAction(0,1,Start)
      setAction(2,3,Start)
      x=0
      document.getElementById('tag').style.whiteSpace='normal'
      document.getElementById('tag').style.left='0px'
      break
    case 3:
      startScroller()
      setAction(0,0,Stop)
      setAction(2,2,Show)
      x=divW
      document.getElementById('tag').style.left=x+'px'
  }
}

function startScroller(){
  document.getElementById('tag').style.whiteSpace='nowrap'
  var p=document.createElement('P')
  p.id='testP'
  p.style.fontSize='25%' //fix for mozilla. multiply by 4 before using
  x-=step
  if (document.getElementById('tag').className) p.className=document.getElementById('tag').className
  p.appendChild(document.createTextNode(sText))
  document.body.appendChild(p)
  pw=p.offsetWidth
  document.body.removeChild(p)
  if (x<(pw*4)*-1){x=divW}
  document.getElementById('tag').style.left=x+'px'
  scroll=setTimeout('startScroller()',speed)
}

function initScroller(){
  if (document.getElementById && document.createElement && document.body.appendChild) {
    addControls()
    document.getElementById('controls').style.display='block'
    divW=document.getElementById('scroller').offsetWidth
    x=divW
    document.getElementById('tag').style.position='relative'
    document.getElementById('tag').style.left=divW+'px'
    var ss=document.getElementById('tag').childNodes
    for (i=0;i<ss.length;i++) {sText+=ss[i].nodeValue+" "}
    scroll=setTimeout('startScroller()',speed)
  }
}

function addLoadEvent(func) {
  if (!document.getElementById | !document.getElementsByTagName) return
  var oldonload = window.onload
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload()
      func()
    }
  }
}

addLoadEvent(initScroller)

thanks to all

[joomr]

Don;t forget to put md_stylechanger.js in templateDetails.xml and if you want it to work with SMF remove .....

body, td, th , tr
{
color: #000000;
font-size: small;
font-family: verdana, sans-serif;
}



or just the "font-size: small;' kills it

from the \Themes\classic\style.css

GOOD LUCK......

[mrmesells]

Hi All,
  Just one comment regarding this thread,  and the md_stylechanger.js file.
On multiple web sites, I see page loads are visibly resizing with every page
change, really jumpy, annoying.  Well, the only fix that I can find that works,
in all of my own instances, was to style the actual body tag with the same
default font size as the javascript defaut. I don't know, but the problem seems
possibly related to the resize coding, if over 100 or under 60, but who knows.
Please let me know if there's a better fix, http://wholives.com contact form.

Thanks.
MIkee 

[abozeed]

Hi .. I added the script and images link as following:

Code: Select all

<td width="122" align="right" background="<?php echo $thisTemplatePath ?>images/warmish_head_16.jpg">
				
<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">

<script type="text/javascript" language="javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/md_stylechanger.js">

</script>
<img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/css_larger.png" alt="" border="0" />
</a>
<a href="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
<img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/css_smaller.png" alt="" border="0" />
</a>
<a href="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
<img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/css_reset.png" alt="" border="0" /></a>
</td>

and CSS is:

Code: Select all

/*---Body */


.site_name {
	font-size: 18px;
	font-weight: bold;
	color: #C0C0C0;
}
body {
	background-color: #C0C0C0;
	background-image: url(../images/warmish_background_02.jpg);
}
td, tr, p, div {
  font-family : Verdana, Arial, Helvetica, sans-serif;
  font-size : 11px;
  color : #927D58;

}

a:link, a:visited {
	color: #996666; text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: #CEAD68;	text-decoration: none;
	font-weight: bold;
}

hr, hr.separator {
	height : 1px;
	width : 100%;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #D9D0BD;
	border-bottom-color: #EFEBE2;
}
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Mambo Menu Styling
 * ------------*/

/* menu -nav */
#mainlevel-nav {
margin: 0; padding: 0;
}
#mainlevel-nav a {
	display: block;
	float: right;
	text-decoration: none;
	color: #666666;
	background: url(../images/warmish_topmenu_19.jpg) no-repeat 0px -0px;
	font-size: 10px;
	line-height: 24px;
	font-weight: bold;
	white-space: nowrap;
	width: 131px;
	height: 28px;
	text-align: center;
}
#mainlevel-nav li {
	list-style:none;
	float: right;
	margin: 0;
	width: 130px;
	font-size: 10px;
	white-space: nowrap;
	text-indent: 15px;
	bottom: 5px;
	display: block;
	
}
#mainlevel-nav a {
float: none;

}
#mainlevel-nav a:hover {
	color: #dc8c32;
	background-position: -136px 0px;
	
}

/* menu */
a.mainlevel:link, a.mainlevel:visited {
	color: #595C73;
	width: 138px;
	line-height: 20px;
	font-weight: bold;
	padding-top: 2px;
	text-decoration: none;
	text-align: right;
	padding-right: 5px;
	padding-left: 15px;
	display: block;
	float: right;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #B3A79B;
}
a.mainlevel:hover {
	background-position: 0px -26px;
	color: #dc8c32;
	border-bottom-color: #FFFFFF;
	background-color: #CCCCCC;
}

a.sublevel:link, a.sublevel:visited {
	color: #294470;
	text-decoration: none;
	padding-right: 25px;
	padding-left: 4px;
	width: 138px;
	line-height: 14px;
	text-align: right;
}

a.sublevel:hover {
color: #990000;
text-decoration: none;
}




/* mambo core stuff */
table.moduletable {
	width: 100%;
	margin-bottom: 5px;
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
	float: right;
}
table.moduletable th {
	color: #BEB0A5;
	line-height: 19px;
	float: right;
}
table.moduletable td {	text-align: center;}

.pathway {
	color: #BACE8C;
}
a.pathway, a.pathway:visited {
	color: #CBB18F;
}
a.pathway:hover {
color: #AE7944;
}


/*** General Mambo Styles*/
.back_button{}
.pagenavbar {
	color: #CC6633;
} 
.pagenav, a.pagenav, a.pagenav:visited{
	color: #77824A;
	height: 20px;
	padding-right: 2px;
	padding-left: 2px;
	text-align: center;
	padding-top: 2px;
	border: 1px solid #BECC91;
	
}
a.pagenav:hover{
	color: #CC6633;
}

	
	
.small {
	font-size: 10px;
	font-weight: bold;
	color: #B68A78;
	
}


/**
 * Mambo Form Styles
 * -----------------
 * Here are 2 styles that Mambo uses to let users control
 * how their forms and buttons may look.
 */
 
.button {
	background-color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #C9A250;
	border-right-color: #663300;
	border-bottom-color: #663300;
	border-left-color: #C9A250;
	font-size: 10px;
	font-weight: bold;
	color: #990000;
	margin-top: 2px;
	margin-bottom: 2px;
	
}
.inputbox {
	background-color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #C9A250;
	border-right-color: #663300;
	border-bottom-color: #663300;
	border-left-color: #C9A250;
	font-size: 10px;
	color: #990000;
	
	}

/**
 * Mambo Tabbed Frontend Admin Interface
 * -------------------------------------
 * The CSS styles here defines how the frontend admin interface
 * will look like when editing and adding news through frontend.
 */
 
.ontab {}
.offtab {}
.tabpadding {} 
.tabheading {}
.pagetext {}


/**
 * Mambo General styling for Sections/Categories/Contents
 * ------------------------------------------------------
 * These stylings are either sometimes or often used across
 * Sections, categories and contents. They, therefore, deserves
 * to be mentioned and separated from others.
 */
 
.createdate {
	font-size: 10px;
	color: #BEB370;
		text-align: left;
} 
.modifydate {} 
.readon, a.readon:link, a.readon:visited{
	color: #996633;
	float: right;
	background-repeat: no-repeat;
	border: #7A713D;
	background-position: 0px -4px;
	padding-right: 6px;
		text-align: left;
}
a.readon:hover{
	color: #999933;
	float: right;
	padding-left: 20px;
	background-repeat: no-repeat;
	border: #7A713D;
	background-position: 2px -24px;
	padding-right: 12px;
	
}


/** 
 * Mambo Styling for Contents
 * --------------------------
 * All the styling for contents are listed
 * below.
 */

.contentpane {	text-align: right;}
.contentpaneopen {	text-align: right;}


.contentdescription {	text-align: right;}
table.contenttoc {	text-align: right;}
table.contenttoc td {}
.content_rating {	text-align: left;}
.content_vote {	text-align: left;}






/**
 * Mambo Styles for Categories
 * ---------------------------
 * The following are the styling for "Category" items
 * generated from the Sections area
 */
 /* For content item titles that are hyperlink instead of Read On */
.contentheading, .componentheading{}
.contentpagetitle, .category {
background-image: url(../images/topeye_24.png);
	background-position: 2px -2px;
	background-repeat: no-repeat;
	color: #CC6600;	font-weight: bold;
padding-left: 18px;

}
a.contentpagetitle:link, a.contentpagetitle:visited, a.category:link, a.category:visited {
	font-size: 12px;
	font-weight: bold;
 	color: #996600;
	text-align:right;
	}

a.contentpagetitle:hover, a.category:hover {
	color: #FF6600;
	font-weight: bold;
	background-image: url(../images/topeye_29.png);
	background-position: 2px -1px;
		text-align: right;
	
	}




/**
 * Mambo Blog styling
 * ------------------
 * Not too sure where this is used yet. I tried the blog section
 * but it doesn't seem to use it. If you have info on this,
 * email me. I'll update this part.
 */
 
.blogsection{}



/**
 * Mambo's Built-in Component's Syling
 * -----------------------------------
 * These stylings are used for Mambo's built-in components
 * such as newsfeeds, weblinks, contact, search and polls.
 * A commented subtitle will guide you which is for which
 */
 
 
 /*  Polls  */
 


.poll {
	font-size: 9px;
	color: #546237;
}
table.pollstableborder {
	border: 1px solid #8189C0;
}

/**
 * Mambo Sections Styles
 * ---------------------
 * Styling of sections tables 
 */

.sectiontableheader {
	background-color : #D1C2AF;
	color            : #000099;
	font-weight      : bold;
	border: #615A29;
	
}

.sectiontableentry1 {
  background-color : #FFFFFF;
  
}

.sectiontableentry2 {
  background-color : #E6EAEE;
  
}



/*  Weblinks */
.weblinks{} 


/*  Newsfeeds */
.newsfeedheading {} 
.newsfeeddate {} 
.fase4rdf {} 


/* Search page */
table.searchintro {} 


/*  Contact's table settings  */
table.contact {	text-align: center;} 
table.contact td.icons {	text-align: right;} 
table.contact td.details {	text-align: center;}

and you can see it in : http://www.abozeed.net/jo/
its not working ...
clicking but without effect ..

any solution please

[Hoopsnl]

Hi,

A lot easier is to download a module that does the trick, go to http://futureworkz.com/downloads/task,d ... ils/gid,2/ and download and install the module and it should work.
You could adjust the php file with images and your site is ready....

[tisco_over]

Hi,

i get this to work with one little problem:

how i exclude something - for example a box? because its messing up my whole layout... 


Thanks...

tisco

[baggiesmad]

Ive tried using this tutorial on my site

http://forum.joomla.org/index.php/topic,36474.0.html

Ive followed everything it says but when I test the page out. All it seems to do is increase the spaces between the text.

Also the reset buttom does not work???

[cra2]

Pattaya, I have the same question.
The "simple" directions to implement this are confusing me.

The instruction says to download the .js file and put it in the templates folder.
Did that.

Then, it says in p5, "Replace ____1____ with the location in your template folder where you saved the .js file"

well... there IS no location in that folder where I put the .js file.
I just put it IN the folder, as directed.
The locaton IS the root of the folder, per the directions.

So I look at the code around ____1____ and it is this:
/templates/getTemplate(); ?>/_______1______">

Ok, can someone tell me what "location inside the template folder" is supposed to replace the "___1___"?
I've tried to replace ___1___ with rhuk_solarflare_ii, with rhuk_solarflare_ii/, with rhuk_solarflare_ii/md_stylechanger.js, and with md_stylechanger.js.  None of the above work.  The buttons are there, but clicking them doesn't change anything.

Thnks for your time,
cra2

update! - 11/1/06.-------------------------
I looked closely and it turns out that the script IS working.  It's changing the footer (copyright notice) at the bottom of the pages.  It's not changing the content though.  So, I think one of you must be right in that the solarflare style sheet is overriding this script with explicit font sizes.

Given that the solarflare style sheet is a pre-installed default template, I'm frustrated that you guys would create a stickied solution to resizing font that doesn't happen to work (as directed) with the installed template.
At least from what I'm seeing, further instructions need to be added to the sticky'd faq walking someone thru modification of the style sheet font sizes.

Also, the sticky should be edited because it's not clear, as I mentioned above, about what to put in field ___1____.
It says to put a "location" in.  But in fact, what's working (for me) is the name of the javascript file we were told to download.
If the name of the file is the value for ____1____, then I don't see why the instructions ask for a location (vs. a filename).
And I don't really see why that field can't just be pre-filled with the filename.
You've said "take THIS file" and put it in "THIS location".  If the people do so, then field ___1___ is simply the name of that .js file and could've already been filled in to avoid the whole confusion.  No?
--------------------------------------

Hi there,

This is content of the .js file I'm not sure I understand what you mean by the following instruction...what file and in what location is it reffering to?



p 5: Do all of the following:

Replace ____1____ with the location in your template folder where you saved the .js file
Replace ____2____ with the name of your A+ image
Replace ____3____ with the name of your A- image
Replace ____4____ with the name of your Reset image

Code: Select all

var prefsLoaded = false;
var defaultFontSize = 76;
var currentFontSize = defaultFontSize;

function revertStyles(){

	currentFontSize = defaultFontSize;
	changeFontSize(0);

}

function toggleColors(){
	if(currentStyle == "White"){
		setColor("Black");
	}else{
		setColor("White");
	}
}

function changeFontSize(sizeDifference){
	currentFontSize = parseInt(currentFontSize) + parseInt(sizeDifference * 5);

	if(currentFontSize > 100){
		currentFontSize = 100;
	}else if(currentFontSize < 60){
		currentFontSize = 60;
	}

	setFontSize(currentFontSize);
};

function setFontSize(fontSize){
	var stObj = (document.getElementById) ? document.getElementById('content_area') : document.all('content_area');
	document.body.style.fontSize = fontSize + '%';
	
	//alert (document.body.style.fontSize);
};


function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
};

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
};

window.onload = setUserOptions;

function setUserOptions(){
	if(!prefsLoaded){

		cookie = readCookie("fontSize");
		currentFontSize = cookie ? cookie : defaultFontSize;
		setFontSize(currentFontSize);
		
		prefsLoaded = true;
	}

}

window.onunload = saveSettings;

function saveSettings()
{
  createCookie("fontSize", currentFontSize, 365);
}

[providence]

mod_FWresizeFont worked for me

but how can i limit the size?
I've tried other solutions, and only FWresizefont worked for some reason.

here's the php code

Code: Select all

<?php
//FW Resize Font//
/**
* FW Resize Font Module
* @package Joomla
* @copyright Copyright (C) 2006 Futureworkz Pte. Ltd. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
* 
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*/

defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );

$class_sfx = $params->get( 'class_sfx', '' );
$tagsArray = explode(',', $params->get( 'tags', 'div,td,tr,p,b,table,strong,em,a,h1,h2,h3,pre,sub,sup,i,th,cp,ul,ol,li,dt,dd,input' ));
$defaultSize = $params->get( 'defaultSize', '12' );
$increment = $params->get( 'increment', '2' );
$spacer = $params->get( 'spacer', '' );
$increaseTitle = $params->get( 'increaseTitle', 'Increase Size' );
$decreaseTitle = $params->get( 'decreaseTitle', 'Decrease Size' );
$resetTitle = $params->get( 'resetTitle', 'Reset Size' );

$tags = "'" . $tagsArray[0] . "'";
for ($i = 1; $i < count($tagsArray); $i++) {
	$tags .= ", '" . $tagsArray[$i] . "'";
}

echo "
<script language='javascript' type='text/javascript'>
<!--
tags = new Array( $tags );
defaultSize = $defaultSize;
resizeCounter = 0;
increment = $increment;
//-->
</script>
<script language='javascript' src='$mosConfig_live_site/modules/FWResizeFont.js' type='text/javascript'></script>
";

echo "
<div id='fwrfId$class_sfx'> 							
    <a href='index.php' title='$increaseTitle' onclick='FWresizeFont(1);return false;' id='fwrf_increaseFontId'><span>A+</span></a>
	<span class='fwrf_separator'>$spacer</span>
    <a href='index.php' title='$decreaseTitle' onclick='FWresizeFont(-1);return false;' id='fwrf_decreaseFontId'><span>A-</span></a>
	<span class='fwrf_separator'>$spacer</span>
    <a href='index.php' title='$resetTitle' onclick='resetFontSize(); return false;' id='fwrf_resetFontId'><span>Reset</span></a>
</div>
";

?>

and here's the JS

Code: Select all

//FW Resize Font Javascript//
/**
* FW Resize Font Javascript
* @package Joomla
* @copyright Copyright (C) 2006 Futureworkz Pte. Ltd. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
* 
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*/

function FWresizeFont(resize) {
	if (!document.getElementById) {
		return;
	}
		
	docBody = document.getElementsByTagName('body')[0];
	for (i = 0 ; i < tags.length ; i++ ) {		
		allTags = docBody.getElementsByTagName(tags[i]);
		
		if (resize > 0) {
			for (k = 0 ; k < allTags.length ; k++) {
				var size = parseInt(allTags[k].style.fontSize.substring(0,allTags[k].style.fontSize.length-2));
				if (size) {
					allTags[k].style.fontSize = (size + increment) + 'px';
				} else {
					allTags[k].style.fontSize = defaultSize + 'px';
				}
			}			
		} else {
			for (k = 0 ; k < allTags.length ; k++) {
				var size = parseInt(allTags[k].style.fontSize.substring(0,allTags[k].style.fontSize.length-2));
				if (size && size > 2) {
					allTags[k].style.fontSize = (size - increment) + 'px';
				} else {
					allTags[k].style.fontSize = defaultSize + 'px';
				}
			}			
		}
	}
	
	resize > 0 ? resizeCounter++ : resizeCounter--;
}

function setFontSize(resizeCounter) {
	docBody = document.getElementsByTagName('body')[0];
	for (i = 0 ; i < tags.length ; i++ ) {		
		allTags = docBody.getElementsByTagName(tags[i]);		
		for (k = 0 ; k < allTags.length ; k++) {
			var size = parseInt(allTags[k].style.fontSize.substring(0,allTags[k].style.fontSize.length-2));
			var resize = size + resizeCounter;			
			if (!size) {
				allTags[k].style.fontSize = (parseInt(defaultSize) + parseInt(resizeCounter)) + 'px';
			} else if (size && resize > 0) {
				allTags[k].style.fontSize = resize + 'px';
			}
		}
	}
}

function resetFontSize() {
	docBody = document.getElementsByTagName('body')[0];
	for (i = 0 ; i < tags.length ; i++ ) {		
		allTags = docBody.getElementsByTagName(tags[i]);		
		for (k = 0 ; k < allTags.length ; k++) {
			allTags[k].style.fontSize = defaultSize + 'px';
		}
	}
	
	resizeCounter = 0;
}
//cookie functions for remember the font sizes across pages
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
		else expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function setUserOptions(){
	cookie = readCookie("FWresizeFont");
	if (cookie) {
		resizeCounter = cookie;
	} else {
		return null;
	}
	
	setFontSize(resizeCounter);
}

function saveSettings()
{
  createCookie("FWresizeFont", resizeCounter, 365);
}

window.onload = setUserOptions;
window.onunload = saveSettings;

I took the code itself and added it to my site, but then sometimes when i click A+ it makes the text big like 100x

[jvalal]

I implemented the code but I am having two issues.

1. The Buttons aren't where I placed them in my template.  They keep showing up at the bottom
2. They don't work.

http://www.w-rehab.com

Please advise.

Thanks

[beans_etc]

Hi, I'm trying to use your fontchanger code and it works perfectly fine for me if I include everything one single page of code, but I'm using PHP includes for a header and footer, and once I put those in the font changer stops doing anything.  Can anyone help me figure out how to make this work but still include the PHP header and footer?  (I don't have the buttons included right now for the font changer, they're just text links.)

http://www.beans-etc.com/htmllarche/index.php (main url - the font changer is above the banner at the top)

http://www.beans-etc.com/htmllarche/include/header.php
http://www.beans-etc.com/htmllarche/include/footer.php
http://www.beans-etc.com/htmllarche/include/styles.css

I'm completely lost.  Any ideas or is it just a little bug that I'm missing somewhere?

Thanks,
Beans

[sachab]

The info below was the key for getting this technique to work for me. Before I read this, I had a nice template.css , but every font-size was defined in px not em. Making the change below to my CSS immediately made this javascript work in my template in Firefox and IE7. I still can't get it to work in older versions of IE (eg. IE6!!)... don't know why yet. Obviously the same javascript works on the joomla.org site in IE6, so it must be something in my CSS.

haven't tried it in Safari, Opera, etc.

Note for folks not familiar with em : 11px is about 1em, and smaller fonts are less than 1em.... eg. 9px is about .80em, 12px is about 1.1em, etc.

sachab

As a general rule for best cross-browser consistancy, you need to do a few of things for text resizer buttons to work well:

1. in the body tag, define a font size of 76%

Code: Select all

body {
font-size:76%;
}

2. Define all font sizes in "em". This is a relative unit, for example:

Code: Select all

p {
font-size:1em;
}

[jvalal]

Why doesn't someone just create a module for this?

[eskimex]

i think ive read everything there is to read on this... but i stil cant seem to get the resize working in ie. it works fine in ff. but ie wont budge. any ideas? please?

[rospus]

Hello to all.

Resizing works well on my template, but I was wondering what to do in order to make the resizing steps to enlarge the text more than the default.
What I would like to achieve is having bigger text when clicking on A+...

Thank you in advance.

[valkyr]

Does anyone know why it's not working on my site here?

http://evareborn.com/index.php

What do I need to fix/change in the CSS?

[absalom]

mod_FWresizeFont worked for me

but how can i limit the size?

It's not limited. It starts at 12 pixels and continually adds 2 pixels every time. Really, it should be relative pixel (1em) and increments that way, but my hacks to convert it to relativity haven't worked.

[elbusca22]

Hi !
I have including the js but instead of changing the font size, the buttons change the space between lines. i'm using the rhuk_solarflare_ii tamplate, any suggestions?

[stanis2004]

Hi,

A lot easier is to download a module that does the trick, go to http://futureworkz.com/downloads/task,d ... ils/gid,2/ and download and install the module and it should work.
You could adjust the php file with images and your site is ready....

This is very good: it works well where md_stylechanger.js don't works (template orangejuice)

[davesplace80]

I hope an easy solution can be found for this one. I can't seem to call any js file from my index.php. I keep getting a 404. I am sure that the file exists and it is named correctly. Any ideas?

Code: Select all

<script type="text/javascript" language="javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/styleswitcher.js"></script>

Code: Select all

http://templatedemo.distributiontips.com/season/templates/dt_Summer/js/styleswitcher.js

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML><HEAD>
<TITLE>403 Forbidden</TITLE>
</HEAD><BODY>
<H1>Forbidden</H1>
You don't have permission to access /season/templates/dt_Summer/js/styleswitcher.js
on this server.<P>
<P>Additionally, a 404 Not Found
error was encountered while trying to use an ErrorDocument to handle the request.
<HR>
<ADDRESS>Apache/1.3.37 Server at templatedemo.distributiontips.com Port 80</ADDRESS>
</BODY></HTML>

[davesplace80]

Sometimes when you look too long you miss the obvious. It was a permissions error on the file .js file.

[krishnna]

I'm very much a newbie and after getting frustrated with everything beginning from where to paste the script I was able to figure it out, finally. I'm sharing the steps I did, it might help newbies like myself.

1) I've downloaded the md_stylechanger.js and uploaded it in the directory of the template I'm using. I'm using jj_serenity and my directory looks like this: /templates/jj_serenity/md_stylechanger.js.

2) Open your index.php file and paste this code within the , below all the style scripts that you have. I put mine just before the . It looks like this:



All other stuff you have in the header....




3) Then I copied and paste the code below provided by one of the Sr. members here in the forum, in the , where you want the  text resize icons or text to appear. I put mine at the top most bar, right of contact us, register, log in. My codes look like these:
I decided to put it within the "top_a_right" division id.

contact us | register | login


larger


smaller


set default

4) Check if it works. (It worked for me) Now I'm going to try substituting the text with graphics, just like the buttons with A+ and A- I see here in Joomla.

[cschm]

Count me in to the guys, who have problems with this script. I put it in my project on localhost. With that said, the script runs perfect on Firefox, but IE 6.0.2900.2180 (I keep this anachronism for testing purpose), it shows just the background color and nothing more. The sourcecode contains everything, what should be there. But the IE window stays empty.

Any advice?