Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Location
    Powell River, B.C. Canada
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Organized coding direction help

    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.

    1. 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?


    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

  • #2
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,468
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    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.



    .


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •