text inreasing/decreasing effect

Gallex · 2007-12-22 12:03:49

…like in this homepage

i putted this code into my sidebar form:

<div id="text-size">
<a href="" class="size_reset" onclick="resetTextSize(); return false;" title="Reset Font Size">text</a>
<a href="" onclick="decreaseTextSize(); return false;" title="Decrease Font Size">[&ndash;]</a>
<a href="" onclick="increaseTextSize(); return false;" title="Increase Font Size">[+]</a>
</div>

but it doesn’t work like this. what i am missing?

iblastoff · 2007-12-22 12:20:55

well..you kind of need to include the javascript file that has that function???

jstubbs · 2007-12-22 12:22:23

Works for me on Safari.

Gallex · 2007-12-22 13:01:03

jstubbs wrote:

Works for me on Safari.

just putted the code above into your homepage, nothing else?

mhh…in my page it doesn’t :(

iblastoff · 2007-12-22 13:10:02

i think jstubbs mistakenly thought the first link was your page when you really meant it as a working example you wanted to emulate.

gallex you need to include the js file that has increase/decreaseTextSize function. that code by itself does not do anything.

Last edited by iblastoff (2007-12-22 13:10:44)

Gallex · 2007-12-22 14:16:39

iblastoff wrote:

gallex you need to include the js file that has increase/decreaseTextSize function. that code by itself does not do anything.

clear

Sono Juventino · 2007-12-22 15:58:47

You may try to do this like it’s done on PhpBB3 forums. First of all, you need three stylesheets with different font-size:

1. “Adding javascript”
Put this line in your head-section of your page:
<script type="text/javascript" src="path_to_your_file/styleswitcher.js"></script>
Add the javascript to the right position according to you link above:
http://2dropsdesign.com/forum/styles/prosilver/template/styleswitcher.js (Download it and save as styleswitcher.js)

2. “Add the Css”:
Put these lines in your head section of your page:
<link href="./styles/prosilver/theme/normal.css" rel="stylesheet" type="text/css" title="A" /> <link href="./styles/prosilver/theme/medium.css" rel="alternate stylesheet" type="text/css" title="A+" /> <link href="./styles/prosilver/theme/large.css" rel="alternate stylesheet" type="text/css" title="A++" />
- Remeber that href (link) must be changed to fit your files position and file names.

3 “Put the font-size link on you page”:
Add this line were you want it to show up. Edit class (and add id) if you want it styled.
<a href="#" onclick="fontsizeup(); return false;" class="fontsize" title="Change font size">Change font size</a>

Good luck. Just ask if you are wondering about something.

Gocom · 2007-12-22 16:25:38

function increaseTextSize(){
	var newSize = parseInt($('content').style.fontSize.replace(/%/, '')) + 5;	
	$('content').style.fontSize = newSize+'%';
}
function decreaseTextSize(){
	var newSize = parseInt($('content').style.fontSize.replace(/%/, '')) - 5;	
	$('content').style.fontSize = newSize+'%';
}
function resetTextSize(){
	$('content').style.fontSize = '100%';
}

This is the simple JavaScript that the Quarkexpeditions.com uses. They also use cookies alongside of it but afterall it’s their code that ain’t made for stealing. How about asking permission from them :)

Cheers!

Sono Juventino · 2007-12-22 18:05:22

Nah. Code is one thing, and after my opinion, pretty ok to grab. Stealing design is another case.

Gocom · 2007-12-22 19:05:26

[offtopic]Hehe, so I can go to local market. I can steal tortillas, but not icecream? Dah, lets go and try :D[/offtopic]

Cheers!

Gallex · 2007-12-23 10:22:25

thank’s guys for answers.

at first i’ll try to get work solution Quarkexpeditions.com uses. it seems simplier…

i created application.js file Gocom’s simple code inside it and uploaded to javascripts folder. then i putted this code into my page header:

<script src="/textpattern/javascripts/application.js" type="text/javascript"></script>

(because my homepage is in textpattern subfolder) but,…it doesn’t work. is there wrong path to the javascript file or i need to put something more to javascript file?

Textpattern CMS

Textpattern CMS support forum

#1 2007-12-22 12:03:49

text inreasing/decreasing effect

#2 2007-12-22 12:20:55

Re: text inreasing/decreasing effect

#3 2007-12-22 12:22:23

Re: text inreasing/decreasing effect

#4 2007-12-22 13:01:03

Re: text inreasing/decreasing effect

#5 2007-12-22 13:10:02

Re: text inreasing/decreasing effect

#6 2007-12-22 14:16:39

Re: text inreasing/decreasing effect

#7 2007-12-22 15:58:47

Re: text inreasing/decreasing effect

#8 2007-12-22 16:25:38

Re: text inreasing/decreasing effect

#9 2007-12-22 18:05:22

Re: text inreasing/decreasing effect

#10 2007-12-22 19:05:26

Re: text inreasing/decreasing effect

#11 2007-12-23 10:22:25

Re: text inreasing/decreasing effect

Board footer