Joomla! Discussion Forums

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%



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



3. Make all text containers dynamic. This one is a HUGE PITA. Its very complex do to this. An example of this not working is http://www.joomla.org. If you make bigger, the container for the horizontal menu does not get bigger, if you use FF to go past the size that you can acheive with the buttons (ctrl+ in FF), the layout breaks. You get round it by not putting any fixed heights on containers, you can see this working at http://www.joomlashack.com. Getting the horizontal box to grow was very time consuming .

1 and 2 are essential, 3 is for the perfectionists

Hello -

I am trying to implement this - and I get this error:

Parse error: syntax error, unexpected T_VARIABLE in /www/l/libraryhouse/htdocs/templates/ms_dwtutorial/index.php on line 41


Any help?

thanks compass
i have done it atlast, thanks to you

I am not really a Pro in joomla, but I think I followed the recipe to set up the ChangeFontSize-function exactly, but nothing really happens. Can anyone have a look at www.taxibus-hannover.de/cms and tell me whats going wrong there. The paths for the *.js and image-files are definitely set correctly.

I am using a modified 247portal-template with almost the original css-file and - yes - Iknow that I have to use a relative fontsize.
Something that I really do not understand is, that everything is working quite fine if I use the function in the browser menu (ff and ie)!?!?!?!?!

Strange thing on my site:

- works fine in Opera 9.0 build 8246 (but "em fonts" look MUCH smaller than in IE);
- doesn't work with IE 6.0.2900.2180 (in some parts of my site fonts change, in some DO not).

Any ideas?

Here is a simple hack those who want to use px instead of %.
-The default font size in line 2:
var defaultFontSize = 11; 
(my favourit size is 11px)
-multiplier in line 21:
currentFontSize = parseInt(currentFontSize) + parseInt(sizeDifference * 1);
(1 is recomended)
-minimum and maximum font size from line 23:
if(currentFontSize > 12){
currentFontSize = 12;
}else if(currentFontSize < 10){
currentFontSize = 10;
}
(i use from 10 to 12)
-px instead off % in line 34:
document.body.style.fontSize = fontSize + 'px';



The hacked file:

Note: it is not perfect in IE  with some templates. The problem is  sometimes divs dont inherit font size parameters (or some other IE bugs )
Note2-edit: it seems, it works only global formatted fonts (both original and hacked version) If you use special font style for a div, script not able to change font size, especially in IE, but in O and in FF too.  (I hope you understand my poor english:) ) 

And i have a question. What are these lines in original file:

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

Thanks

Hi guys,

I managed to get the script to work, but it seems when I hit the + or - it spaces out the text but doesn't increase the font size. Is this because of the CSS, should one delete on the fixed font sizes or just make them em, I tried em and it made things go ballastic...

update: Or maybe this can be dictated by the JS itself, upon second look, the font does seem to stretch but never reaches a 10pt or 12pt

Please advise....

Thanks

They have to be in em

hi everyone welll after a few hours messing around with it i got it to work for firefox but IE 6 just will not work with it.

any ideas what i might be doing wrong?

the site im working on is

http://www.stripsinc.us


thanks for any help, its been frustrating

2 justingraybauer:

Opera 8.54 works as well...

this is what my css looks like

td,th,p,tr,div {
font-size: 1em;
/* font-size: 65%; */
/* font-size: 11px; */
}
body {
/* font-size: 11px; */
font-size: 65%;
background-color: #f6f6f6;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
color: #222222;
}
.searchfield {
background-image: url(../images/searchicon.gif);
background-repeat: no-repeat;
background-position: right;
border: 1px inset #FFFFFF;
font-size: 1em;
text-indent: 5px;
}
a:link
{
color: #4c4b22;
text-decoration: none;
}
a:visited
{
text-decoration: none;
color: #4c4b22;
}
a:active
{
text-decoration: underline;
color: #4c4b22;
}
a:hover
{
text-decoration: underline;
color: #4c4b22;
}
a.category:link, a.category:visited, a.category:hover
{
  color            : #222222;
  font-weight      : bold;
}

a.mainlevel:link, a.mainlevel:visited, a.mainlevel:hover
{
font-size: 1em;
font-weight: bold;
color: #222222;
text-align: left;
width: 100%;
text-decoration: none;
padding-top: 2px;
text-indent: 2px;
}
#active_menu, a#active_menu:link, a#active_menu:visited {
font-size: 1em;
font-weight: bold;
color: #222222;
text-align: left;
width: 100%;
text-decoration: none;
padding-top: 2px;
text-indent: 2px;
}
.componentheading, .contentheading
{
font-weight: bold;
font-size: 11px;
}

ul#mainlevel-nav
{
list-style: none;
padding: 0;
margin: 0;
float: right;
white-space: nowrap;
}
#topmenu{
height: 20px;
float: right;
width: 745px;
}
ul#mainlevel-nav li{
width: auto !important;
width: 5%;
float: left;
margin: 0;
font-size: 1em;
font-weight: bold;
height: 20px;
line-height: 20px;
white-space: nowrap;
color: #ffffff;
text-decoration: none;
margin-right: 1px;
}

ul#mainlevel-nav li a{
font-weight: normal;
height: 20px;
display: block;
padding-left: 5px;
padding-right: 10px;
text-decoration: none;
color: #ffffff;
margin-left: 5px;
font-weight: bold;
white-space: nowrap;
}

ul#mainlevel-nav li:hover, ul#mainlevel-nav li.sfhover {
text-decoration: none;
font-weight: bold;
color: #ffffff;
}

ul#mainlevel-nav li:hover a, ul#mainlevel-nav li.sfhover a{
text-decoration: none;
font-weight: bold;
color: #ffffff;
}

I'm using ddj003 and I followed all of the steps.  I have the icons on my site and clicking them makes the site blink, but nothign happens.  I added the body changes (default font stuff) and still nothing.  My css is all in px so I went through all of the font-size=11px and changed those to font-size=1em.  There were a LOT of other font sizes though like 13px, 14px, and even 40px.  I used 1.18em, 1.27em and 3.63em for those but it not only made my sight look awful (too large of fonts), but the buttons still didn't change the font sizes.  Should I be deleting all of the font sizes or did I do the right thing by changeing them the way I did?  I'm pretty confused.  I'm attaching my css in .txt form - maybe this template just isn't very good for this...

I tried implementing this too but I encounter 3 problems.

1. I first used 11px... What should I use in em?
2. If I use, for example, 1em the font-size in Firefox is way to small and in Internet Explorer way to big.
3. The font-resizing works in Firefox but in Internet Explorer there's nothing happening.

Thanks in advance. I could really need some help...

I need the same help.  I think someoen I read that 11px=1em, but I could be wrong.  Can someone explain what type of templates can be used and how to modify the ones that are not ready for it?

You need to set font size to 76% in body tag:


Excerpt from Joomla template tutorial

I did that, btu tdoes that mean I have to set all all of the remaining font-size references to 1em or delete them?  In other words, do I only need that one font-size in the body and nothing else?

You need the 76% AND everything needs to be in em's

what would be em for 11px, 13px, 14px and 40px?

mmm, thats a "how long is a bit of string" question. Trial and error is recommended

*usually* 1em ~ 11px, 2em is 22px, etc

someone posted a hack so you can use px, but it didn't work for me... did it work for anyone else?

How come in FF the text in em is little and in IE big when I do this?

if you are previewing a site while it is offline I have seen this happen... no idea why

I tried it on a live site yesterday...

Went through my template, easy to make just a very few changes to switch from px to em.

Everything LOOKS good, but Internet Explorer now reloads every single image on the page every time I resize.

Firefox and Opera do not exhibit this behavior. Any suggestions?

Fun....    The Google Maps module does NOT seem to work with this enabled. I believe there is a conflict in the multiple javascript files used in the Google Maps Module and the Resize code.

But I want to have my cake and eat it too!

My first instict was to go back to my pre-resize template. You keep backups, don't you? and assign it to just the pages that call the maps module. No go.

So, time to hack away. You'll need to fix your template.

When com_googlemaps is active, we need to make sure the resize script is turned off, because they conflict.

Assuming some other hapless soul will have the same problem I did, here is my temporary solution until somebody comes up with something better.

I took the cue from the Google Maps module code itself and did the following.

Fixed my HTML tag to the following:



Reason: When the javascript to resize is turned off, the text size is set to the largest possible. Not pretty. The php if statement checks whether the com_google_maps is active, and if it is, outputs a style on the html tag.

Fixed my call to the resize javascript to:



Reason: The code is not called, there is no conflict with the javascript from the google maps module. The php code checks if com_google_maps is active, and then chooses NOT to print out the call to the javascript. The user's browser does not see, does not attempt to load it, and there is no conflict.

Extend this last bit of code to include your buttons, remember to escape the quote characters... Better they don't show if you are not going to be able to use them on that page anyway. I didn't want to make this example too long.

Mileage may vary...

Suggestions for better code welcome.

I have implemented all your html code, and copyed the .js file in to my template... I still can't get it to work... is it because:

"site doesn't use style classes"

What does it mean?

Hi,

Also need help with this, I was wondering if you could give me a little help on it. I am quite new to php, and wanna know where (what file) you added the above code.

Thanks

K

The changes I refer to where made in the index.php file of the current template.

that is, you need to edit your template.

Specifically, the tag for the resize script to be disabled when google maps is active.

Also, the tag needs a condition. The way I put them in should work.

Backup your index.php file from your current template before trusting my sloppy codework!

Good luck,

Carlos.

For those who has probs with "manual" implementing of text sizing:

http://extensions.joomla.org/component/ ... Itemid,35/

That module works fine for me with all browsers.