...

View Full Version : Organized coding direction help



Sticker
03-26-2010, 03:22 AM
Hi all, I am building a website that requires several accessibility features to aid the visually impaired. So, after I created the website I started work on the "special needs" portion. Presently I have 10 pages and several forms.


Created Specialty Nav Bar


default text size
large text size
extra large text size
no graphics
contrast




Each nav bar link has an onclick=setTextSize(size) or setNoGraphics() or setContrast() function. Presently, when the user uses a link to change the format of the page it fires the function and the "size" variable is passed to 3 cases which manipulate the DOM elements ( or BOM elements - confused) depending on the "text size" chosen. Just before the call to "break;" a cookie is created because we want to save it to the users HD so they don't have to go thru the setup process each time they come to the page.

Eventually I want to be able to combine text size change with fg and bg color changes (color blindness), as well as, the absence of graphics if chosen.

Below is a snippet of the function code to date:

function setTextSize(size){

var h3=document.getElementById('txt').getElementsByTagName('h3');
var paragraph=document.getElementById('txt').getElementsByTagName('p');
var fanpage=document.getElementById('fan_page_txt');
..

var h,p;

switch(size)
{
case 15:

height.style.height=1110+"px"; //Wrapper height
text.style.height=730+"px"; //Text container height
base.style.height=100+"px"; // Bullets Div height
base.style.width=460+"px"; // Bullets Div width
baseUl.style.height=92+"px"; // Bullets ul height
baseUl.style.width=425+"px"; // Bullets ul width
fanpage.style.height=60+"px"; // Text directly below the bullets

for ( h=0;h<h3.length; h++)//**************/ H3 text size change
{
for ( p=0;p<paragraph.length;p++)//*********/ P text size change
{
for (l=0;l<list.length; l++) //**********/ Li text size change
{
list[l].style.fontSize=size+"px";
}
paragraph[p].style.fontSize=size+"px";
}
h3[h].style.fontSize=(size+4)+"px";
}
setCookie("Default","15","January 1, 2030", "/");
break;

case 19:

etc.


So I hope you get the idea as to what I'm trying to do.
Is there a question in here you ask?

Well yes but I needed to make sure you had a better picture of what I am trying to do.

So when I get to the next page in the website I can't use the same function because the Element Id's are different, the container height's and width's are different. If I try to make it work for all 10 pages the code in that fucntion will be massive.

So what do I do? Create 10 setTextSize functions (1 for each page) and 10 unique cookies and write complex string manipulating functions to return the correct cookie values? :( It mustn't be that big, surely?:confused:


I wonder is there a more robust method of accessing the elements and the page container properties through the DOM node method or could you suggest a better logic based plan of action to go from nav bar to page manipulation to cookie, etc..

I hope I have conveyed clearly enough my dilemna :)

All ideas greatly accepted..

Thank you

mlseim
03-26-2010, 04:35 PM
You use a few CSS files (cascade style sheets .css).
You can then switch between them using either PHP and cookies, or Javascript and cookies.
I mention cookies because it will remember the setting when they return back each time.

You can use "alternate" stylesheets, switching between them at will.
All of your font sizes, colors, layout, etc. is defined in those CSS files.

You can even have a "print page" style if you want ... for a nice paper printout.

With CSS, you can also choose to "hide" images.
It basically gives you total control over all pages, as each page can use the same CSS stylesheet.



.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum