...

View Full Version : <NOSCRIPT> help required!



Mr Cube Head
03-12-2005, 04: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, 05:36 AM
already answered your post here: http://www.webdeveloper.com/forum/showthread.php?s=&threadid=59364

brothercake
03-13-2005, 01: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum