Greetings & peace to you all,
I am in a unique situation. I will try to explain everything, as consicely as possible. Please offer any advice, help, tips etc.. possible.
Current Position:
I have, on a website I am working on, an online book. One book, many chapters, each on a seperate page. I tried to spice things up, by adding a php style switcher, for graphical enhancement. It works by the author (me) pre defining the format, layout, colours, images etc.. by writing it up in a header.php and footer.php file. While the main "body" content remains the same and constant. However, the site users are limited to the "styles" I have already designed.
My aim:
I would like to implement, and present to the site users, the option to format the text, on the fly, from their end. This would include, the option to change the font face, font colour and font size.
Some Examples:
[1]
http://www.glish.com/ (in the top right corner there is a text preferences box)
[2]
http://www.glish.com/css/blogger/blogger.html (similar, but has randomly changing background, and uses different javascript file which can be found @
http://www.glish.com/css/blogger/ .)
[1] Is the example I am very interested in. However, when I tried to implement their code into my site, some problems arose;
i. font size changes didn't apply to <td> elements, but did work on anything outside of that, such as <p> and <div>. The links in the footer were affected, (as an example).
ii. Font face changes worked, on all elements, great ! but the cookies would not set properly. It would remember them for a certain page, then it would change on the next link you clicked, then if you went back to the original page, it was the same font, and after another click, everything was dropped, and no preferences saved. Ugh !
Here is another example, but this is only a font sizer;
http://www.dyn-web.com/dhtml/sizefont/ (blue + - R boxes on left to change size)
What I have tried so far:
As I said before, I am using a php style switcher. I have yet to redo the whole thing, but for now, I have tried to test out these font scripts on a seperate "skin/theme/style". On the site, "theme 6" includes the first example, and "theme7" has the 2nd example.
-----
http://www.quranviewer.com/home/index2.php?newskin=6----
http://www.quranviewer.com/home/index2.php?newskin=7I'm sure you can find your way through.
Skin 6 changes the font size, on all elements (after much trial and error), however it does not save the preferences as a cookie. Interestingly, it seems to work a little on the chapter pages, but nowhere else.
Skin 7 is the more advanced script. It changes the font face (style) on all elements, but the font size changer does not work on the <td> elements, but outside of that, it seems to work, (like in the footer area with the links). Also, it does not save the preferences as a cookie very well.
On the site, the script is called textResizer.js and there is another called glish.april.js but I don't know if the second one is relevant but I thought it was so I included it anyway.
http://www.quranviewer.com/textResizer.jshttp://www.quranviewer.com/glish.april.jsFor your convenience I have placed them into a text file;
http://www.quranviewer.com/textResizer.js.txthttp://www.quranviewer.com/glish.april.js.txtIn my page, here is what part of the code looks like;
--------------------------
----------
----------
----------
----------
----------
----------
----------
----------
--------
<head>
<script language="javascript" src="/glish.april.js?" type="text/javascript"></s
cript>
<script language="javascript" src="/textResizer.js?" type="text/javascript"></s
cript>
</head>
<body id="body">
<div id="Content">
<center><div id="preferences"></div></c
enter>
<script type="text/javascript" id="controlsScript">writeC
ontrols()<
/script>
--------------------------
----------
----------
----------
----------
----------
----------
----------
----------
---------
The <div id="preferences"></div> is the place where the drop down box, and font changer buttons are placed.
It might be work noting that I have slightly modified the javascript files. I added extra font options in the textResizer.js file, aswell as a "td" where other elements where positioned.
In the glish.april.js file, I took out, what looked like excess/seperate code, and left what resembled a cookie. I don't know if this file is essential or not.
Regardless, here are both the files, in their original form;
http://www.glish.com/textResizer.jshttp://www.glish.com/glish.april.jsAs the script on glish.com shows, a font styler and size switcher, which happens virtually instantly. I am hoping to implement such a script, with the extra option of changing text colour. Maybe a colour picker box, to select and apply a visual choice. Here is a site that has a color picker box;
http://www.wannabegirl.org/firdamatic/ (scroll down and click on the "pick" link).
I have downloaded the tigra colour picker from their site, but don't know how I would set that up with the font text colour changer.
Another thing; I was hoping to have an extensive font range. 2 possibilities;
1. - Embed them. I don't know how, nor if it would be practical.
2. - Offer my visitors a download pack, and let them install the fonts on their system locally.
[1] sounds really nice, but I don't think it is realistic, especially with all these other obstacles, but if possible to do with the font face changer, that would be really neat. [2] is just as good. Like they say; beggars can't be choosers. lol
That is all I guess. In a nutshell, the option to choose font face, font size, and font colour (from a colour picker if possible), which would format the page, instantly, like in the examples above.
Usually, I do the research and try to find the solution by looking at other examples, and some websites that explain it, but after countless hours, actually nights, of search, trial and error, I am stuck in a predicament. I do not have any experience in Javascript, and I don't have a clue how to set the cookies, or check for the errors. I tried, but my efforts are proving fruitless.
I realize this requires quite abit of work, and to my knowledge, there is no other script like it (with the exception of
http://www.afb.org/myafb.asp but it is nowhere near this standard). So this is a first ! and if it works out, I will try to repay my debt to all conscious beings by providing a how to. Is there anyone willing to write out and develop the code for this?
I really hope so. I have been working on this for the past few days, continuously. It has been over 24 hours since I last slept, which was only for a couple of hours. I was sitting at the computer, and too tired to get up, I took a small nap in my leather chair, right in my workstation, and have been up for nearly 2 days, just sitting here, scratching my head. I am a new user here, and I only have 325 points, so they are all yours. If anyone will take the time out and help me personally, I will try to make it worth your while, in any way I possibly can. If it works, there may be more than just points, instore for you :) So please, someone come forward. Help out a brother in need. Thanks.
