PDA

View Full Version : <NOSCRIPT> help required!



Mr Cube Head
03-12-2005, 05:09 AM
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! :)

A1ien51
03-12-2005, 06:36 AM
already answered your post here: http://www.webdeveloper.com/forum/showthread.php?s=&threadid=59364

brothercake
03-13-2005, 02:52 PM
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.