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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question <NOSCRIPT> help required!

    Hello Everyone,

    I have written a web page that relies completely upon javascript to position and size page elements. I am aware that the page should be written with <noscript></noscript> tags in order to ensure that it will operate even if a user has turned javascript off in their browser.

    After looking at a few basic examples of the <noscript> tag and it's use I am at a loss as to how I can make my page work when javascript is disabled.

    The page code is listed below; if anybody has any suggestions as to how I can make this code 'safer' they will be greatly appreciated.

    <html>
    <head>
    <title>Attempt at two <div> tags with identical flowing background image</title>
    <style type="text/css">
    body
    {
    background-image: url("straw.gif");
    }
    #fernGully
    {
    background-image: url("clouds.jpg");
    position: absolute;
    }
    #farmScene
    {
    background-image: url("clouds.jpg");
    position: absolute;
    }
    </style>
    <script language="javascript" src="positionernocolor.js" type="text/javascript"></script>
    <script type="text/javascript" src="doiMenuDOM.js"></script>
    <script type="text/javascript" src="functions.js"></script>
    <script type="text/javascript">

    var fgsMenu = new TMainMenu('fgsMenu','vertical');

    var homeMastMenu = new TPopMenu('Home','0','','','Ferngully Stamps Home Page');
    var homeStudMenu = new TPopMenu('Fern Gully Home Page','0','a','http://www.google.com','Ferngully Stamps Home Page');

    var myFernMenu = new TPopMenu('My Fern Gully','0','','','My Fern Gully Preferences');
    var myPrefMenu = new TPopMenu('My Site Preferences','0','','','Customize the way Fern Gully Stamps looks online');
    var surveyMenu = new TPopMenu('Craft Stamps Survey','0','','','Take our easy craft stamps survey!');

    var companyMastMenu = new TPopMenu('Company Profile','0','','','Read about Fern Gully Stamps');
    var companyStudMenu = new TPopMenu('About Fern Gully','0','','','Read about Fern Gully Stamps');

    var browseMenu = new TPopMenu('Browse Craft Stamps','0','','','Look at our large range of craft stamp designs');
    var cat1Menu = new TPopMenu('Catalogue 1','0','','','Look at Craft Stamps from catalogue one');
    var cat2Menu = new TPopMenu('Catalogue 2','0','','','Look at Craft Stamps from catalogue two');
    var cat3Menu = new TPopMenu('Catalogue 3','0','','','Look at Craft Stamps from catalogue three');
    var cat4Menu = new TPopMenu('Catalogue 4','0','','','Look at Craft Stamps from catalogue four');
    var cat5Menu = new TPopMenu('Catalogue 5','0','','','Look at Craft Stamps from catalogue five');

    var businessMenu = new TPopMenu('Business Stamps','0','','','Business Stamps');
    var selfMenu = new TPopMenu('Self Inkers','0','','','Self Inking Stamps');
    var typeMenu = new TPopMenu('Type Sets','0','','','Investigate our range of type sets');

    var scrapMenu = new TPopMenu('Scrapbooking','0','','','Scrapbooking Papers & Frames');
    var framesMenu = new TPopMenu('Scrapbooking Frames','0','','','Look at our range of Scrapbooking Frames');
    var papersMenu = new TPopMenu('Scrapbooking Papers','0','','','Look at our range of Scrapbooking Papers');

    var formsMenu = new TPopMenu('Forms','0','','','Printable order forms');
    var businessFormMenu = new TPopMenu('Business Stamps Order Form','0','','','Printable copy of our business stamps order form');
    var craftFormMenu = new TPopMenu('Craft Stamps Order Form','0','','','Printable copy of our craft stamps order form');

    var comingEventsMastMenu = new TPopMenu('Coming Events','0','','','Fern Gully Stamps news and upcoming events');
    var comingEventsStudMenu = new TPopMenu('News and Events','0','','','Fern Gully Stamps news and upcoming events');

    fgsMenu.Add(homeMastMenu);
    homeMastMenu.Add(homeStudMenu);
    fgsMenu.Add(myFernMenu);
    myFernMenu.Add(myPrefMenu);
    myFernMenu.Add(surveyMenu);
    fgsMenu.Add(companyMastMenu);
    companyMastMenu.Add(companyStudMenu);
    fgsMenu.Add(browseMenu);
    browseMenu.Add(cat1Menu);
    browseMenu.Add(cat2Menu);
    browseMenu.Add(cat3Menu);
    browseMenu.Add(cat4Menu);
    browseMenu.Add(cat5Menu);
    fgsMenu.Add(businessMenu);
    businessMenu.Add(selfMenu);
    businessMenu.Add(typeMenu);
    fgsMenu.Add(scrapMenu);
    scrapMenu.Add(framesMenu);
    scrapMenu.Add(papersMenu);
    fgsMenu.Add(formsMenu);
    formsMenu.Add(businessFormMenu);
    formsMenu.Add(craftFormMenu);
    fgsMenu.Add(comingEventsMastMenu);
    comingEventsMastMenu.Add(comingEventsStudMenu);

    </script>
    </head>
    <body onResize="window.location.href = window.location.href;">

    <script language="JavaScript" type="text/JavaScript">

    fgsMenu.SetPosition('absolute',0,0);
    fgsMenu.SetType('float');
    fgsMenu.SetCorrection(0,0);
    fgsMenu.SetCellSpacing(10);
    fgsMenu.SetItemDimension(110,40);
    fgsMenu.SetBackground('','greenmarble.gif','repeat','');
    fgsMenu.SetShadow(false);
    fgsMenu.SetFont('verdana,arial,tahoma, serif','10pt');
    fgsMenu.SetItemBorder(2,'#85B211','solid');
    fgsMenu.SetItemText('#D5D500','center','bold','','');
    fgsMenu.SetItemTextHL('#773C00','center','bold','','');
    fgsMenu.SetItemBackground('#773C00','','','');
    fgsMenu.SetItemBackgroundHL('#D5D500','','','');
    fgsMenu.SetItemBorderTopHL(2,'#773C00','solid');
    fgsMenu.SetItemBorderRightHL(2,'#773C00','solid');
    fgsMenu.SetItemBorderBottomHL(2,'#773C00','solid');
    fgsMenu.SetItemBorderLeftHL(2,'#773C00','solid');
    fgsMenu.SetItemTextClick('#004000','center','','','');
    fgsMenu.SetItemBackgroundClick('','','','');
    fgsMenu.SetItemBorderTopClick(2,'#773c00','solid');
    fgsMenu.SetItemBorderRightClick(2,'#773c00','solid');
    fgsMenu.SetItemBorderBottomClick(2,'#773c00','solid');
    fgsMenu.SetItemBorderLeftClick(2,'#773c00','solid');
    fgsMenu.SetBorderTop(2,'#592D00','outset');
    fgsMenu.SetBorderRight(2,'#592D00','outset');
    fgsMenu.SetBorderBottom(2,'#592D00','outset');
    fgsMenu.SetBorderLeft(2,'#592D00','outset');
    fgsMenu.SetPopOnClick(false);

    fgsMenu._pop.SetCorrection(0,0);
    fgsMenu._pop.SetItemDimension(150,20);
    fgsMenu._pop.SetPaddings(1);
    fgsMenu._pop.SetBackground('#773C00','','','');
    fgsMenu._pop.SetFont('verdana,arial,tahoma, serif','10pt');
    fgsMenu._pop.SetBorderTop(2,'#773c00','outset');
    fgsMenu._pop.SetBorderRight(2,'#773c00','outset');
    fgsMenu._pop.SetBorderBottom(2,'#773c00','outset');
    fgsMenu._pop.SetBorderLeft(2,'#773c00','outset');
    fgsMenu._pop.SetDelay(500);
    fgsMenu._pop.SetItemBorder(2,'#006400','solid');
    fgsMenu._pop.SetItemText('#d5d500','left','','','');
    fgsMenu._pop.SetItemTextHL('#773C00','left','','','');
    fgsMenu._pop.SetItemBorderHL(2,'#006400','solid');
    fgsMenu._pop.SetItemPaddings(0);
    fgsMenu._pop.SetItemPaddingsHL(0);
    fgsMenu._pop.SetItemBackgroundHL('#D5D500','','','');
    fgsMenu._pop.SetPadding(1,1,1,1);
    fgsMenu.Build();

    </script>

    <div align="center" id="fernGully">
    <img src="ferngullytitle.gif">
    <div>
    <script type="text/javascript">
    setElement('fernGully', 20, 5, 20, 70, 1);
    </script>
    <div align="center" id="farmScene">
    <img src="farmScene.gif">
    </div>
    <script type="text/javascript">
    setElement('farmScene', 0, 20, 12, 70, 1);
    </script>


    <script language="JavaScript" type="text/javascript">

    //<!--

    var speed=46; //This is the speed of the scroll, it will move one pixel per the time frame you choose (in milliseconds)
    var num=0;
    var bgOb1=eval('document.getElementById("fernGully")');
    var bgOb2=eval('document.getElementById("farmScene")');

    function scrollBG()
    {
    num++;
    bgOb1.style.backgroundPosition="0"+num;
    bgOb2.style.backgroundPosition="0"+num;
    }

    setInterval('scrollBG()',speed)

    //-->

    </script>

    </body>
    </html>

    P.S.:> The setElement() methods are where my greatest challenge lies!

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The noscript tags are *NOT* there to say that you need JavaScript enabled to use this site.

    They're there to provide equivalent functionality - such as a static layout, or a link to equivalent content. In this case that would probably be non-dynamic navigation to replace the JS navigation.

    The only time noscript should be used for notification is if equivalent functionality cannot be provided.

    But anyway the script + noscript paradigm has a hole in it - it doesn't cater for primitive javascript browsers, such as WebTV or Netscape 3: they won't be able to process the script, but they do support javascript, so they won't parse the <noscript> either. They would end up with nothing.

    You'd be better off taking a different approach - don't generate the menu in javascript - start with a static structure and bind DOM behaviors to that, then you won't need noscript at all, and you'll still be providing content for everyone.
    Last edited by brothercake; 03-13-2005 at 01:55 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


  •  

    Posting Permissions

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