Making alternative menu if javascript is turned off?

G

Gernot Frisch

Hi,

I have found some menu functions. It works quite well, but how can I
replace it with a simple <a href> if javascript is turned off?

I reduced my code to:
<script>IncludeMenuHere()</script>

More, any tips about "fading" the menu item in and out (x-browser)?
Currently it's using DIVs and this.items.visibility(false);

--
-Gernot

Post here, don't email. If you feel you have to mail, revert my
forename from:
(e-mail address removed)
________________________________________
Looking for a good game? Do it yourself!
GLBasic - you can do
www.GLBasic.com
 
K

Klaus Johannes Rusch

Gernot said:
I have found some menu functions. It works quite well, but how can I
replace it with a simple <a href> if javascript is turned off?

I reduced my code to:
<script>IncludeMenuHere()</script>

<script>IncludeMenuHere()</script>
<noscript><a href="http://www.example.com/menu/">Menu</a></noscript>
 
R

Richard Cornford

Klaus said:
<script>IncludeMenuHere()</script>
<noscript><a href="http://www.example.com/menu/">Menu</a></noscript>

Script - Noscript is unlikely to be the true relationship between a
functional DHTML menu and no navigation. True, the browsers that will
not execute scripts at all will use the noscript element, but there is a
big grey aria of javascript capable browsers that are more or less
dynamic and may or may not facilitate the actions required by the
script. Leaving any that don't support the menu but are executing
scripts without any navigation.

Various strategies may be applied to the problem, of which the simplest
is probably just to provide a link to a site map in the HTML and leave
it there regardless of whether the menu works. But a functional dynamic
DHTML menu implies the ability to manipulate HTML page contents so it
would be possible for a menu that has verified that it is supported and
functional to conceal/remove alternative navigation.

Overall, probably the most viable strategy is to have the navigation
menus defined on the page as, say, nested UL lists, and have the menu
script modify those elements into a dynamic menu when possible. Leaving
all browsers that lack support for the menu showing full navigation as
part of the page contents.

Richard.
 
G

Gernot Frisch

Overall, probably the most viable strategy is to have the navigation
menus defined on the page as, say, nested UL lists, and have the menu
script modify those elements into a dynamic menu when possible. Leaving
all browsers that lack support for the menu showing full navigation as
part of the page contents.

That sounds nice, but I don't absolutely know how to do this. It's an
sophisitcated topic, is it?
Here's my menu so far:
http://GLBasic.com

-Gernot
 
R

Robert Diamond

That sounds nice, but I don't absolutely know how to do this. It's an
sophisitcated topic, is it?
Here's my menu so far:
http://GLBasic.com

-Gernot

This might not be what your looking for... but it might help ;) just some
DOM 1 stuff ;) The document elements have alot of properties you can change,
so do some googling ^.^

<script language=javascript>
function makeMyMenuStringFormMenu(menuNum) {
if (menuNum == 1) {
return '<a href="Not Blah Anymore">Not Blah Anymore</a>';
}
}

function loadMenus() {
// Make menu items color grey
document.getElementById('menuItem1').style.color = '#E0E0E0'
// Make background black
document.getElementById('menuItem1').style.backgroundcolor = '#000000'
// Change the actual HTML inbetween the <a id="name"> ... </a>
document.getElementById('menuItem1').innerHTML =
makeMyMenuStringFormMenu(1);
}
</script>

....
....
<body onLoad="loadMenus();">
....
....

<a id="menuItem1"><!--This is basic, html, without jscript version --><a
href="Blah">Blah</a></a>
 
G

Gernot Frisch

document.getElementById('menuItem1').innerHTML =
makeMyMenuStringFormMenu(1);


Ahhh.. Now, <TABLE ID="MyTable"> ...here go the links...</TABLE>

<SCRIPT>document.getElementById('MyTable').innerHTML =
MakeMyMenuReplaceTheOldTable();</SCRIPT>

will work??
Have to try that. Very cool!

BTW. JavaScript looks more and more attractive to me. Is there any
Intelli-sense IDE for it? Or at least an reference where I can read
about all methods and properties available for all object types?

--
-Gernot

Post here, don't email. If you feel you have to mail, revert my
forename from:
(e-mail address removed)
________________________________________
Looking for a good game? Do it yourself!
GLBasic - you can do
www.GLBasic.com
 
R

Robert Diamond

I just google stuff... but most things in javascript work of two things, A)
DOM and B) Java objects. So if you have:

var myStr = "some string";

or

var myStr = String("some string");

it same thing... but the cool thing is both are "String Objects" so straight
our of the Java API (and not javascript) someone could...

myStr.substring(start, end);

and DOM is a W3C standard, DOM 0 was Netscape, but the new DOM 1 is
standard, so read up on DOM (the id="something" stuff, and the
document.domThingy (stuff under the document variable (or, at least
functionally, object) is all DOM as far as i know)... But i'm new to
jscript... only been playing with it about a week or so... I'd say read the
base object types (ie string, char, boolean, integer) in the java API to get
a feel for what your variables can do... and read up on DOM...
 
M

Michael Winter

Ahhh.. Now, <TABLE ID="MyTable"> ...here go the links...</TABLE>

<SCRIPT>document.getElementById('MyTable').innerHTML =
MakeMyMenuReplaceTheOldTable();</SCRIPT>

will work??
Have to try that. Very cool!

I can't say I like that approach. I imagine that it will still provide
poor support for some browsers. Richard's suggestion of a list modified by
CSS and scripting is the best. Though many people implement menus along
this line, the only one that I've found to be well implemented to date is
this one:

<URL:http://www.gazingus.org/html/Using_Lists_for_DHTML_Menus.html>

It is a little different in that you must click on the items to open the
menu (just like an application menu bar), but at least this means that the
menu won't disappear whilst you're trying to make a selection.

Be aware that this style of menu will mean you must provide valid pages
for the first level of links, as well as for the sub-menus. However, this
will have been a consideration with any well implemented menu.
BTW. JavaScript looks more and more attractive to me. Is there any
Intelli-sense IDE for it?

Unfortunately, it's not practical (though some vendors have implemented
them anyway). There isn't really any guaranteed set of properties and
methods that are supported by all browsers, especially with regard to
newer technologies. You could list every single known member for an
object, but that wouldn't be very helpful to the developer.
Or at least an reference where I can read about all methods and
properties available for all object types?

The group's FAQ contains some:

<URL:http://jibbering.com/faq/>

A shorter list would contain (watch for wrap)

Netscape's JavaScript references:
<URL:http://devedge.netscape.com/central/javascript/>

Note that the more recent version strip out the older host objects
(document, window, location, history, etc). I presume that this is because
they wish to focus around the World Wide Web Consortium (W3C) Document
Object Model (DOM). However, the host objects are still implemented in
browsers, and are described in v1.3 of the references.

Microsoft's DHTML reference:
<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp>

A lot of the features described are implemented only by IE, so you should
be careful what you use. The documentation is also incorrect in places.

W3C DOM technical reports:
<URL:http://www.w3.org/DOM/DOMTR>

The Level 1 specifications are fairly well supported by recent browsers,
and the more compliant browsers (Mozilla and Opera) do well with Level 2.
Level 3 has only recently reached Recommendation status, so support will
be poor.

ECMAScript specification:
<URL:http://www.ecma-international.org/publications/standards/Ecma-262.htm>

This particular piece of documentation can be very difficult to
understand, but it does specify exactly what JavaScript should support, as
well as it's syntax and features. The Netscape references give a much more
understandable, though simplified, description of most of the contents.

I'd recommend that you also read the group FAQ (link already given above),
particularly item 4.26 - How do I detect Opera/Netscape/IE? That article
contains links on how to perform feature detection - vital when using
objects that aren't always supported.

Good luck,
Mike
 
G

Gernot Frisch

To get things right:

I don't want to support browsers older than the IE4.x, I only want my
menu to be displayed, if someone disables Javascript - will the
<noscript> work then??
-Gernot
 
M

Michael Winter

I just google stuff... but most things in javascript work of two things,
A) DOM and B) Java objects. So if you have:

var myStr = "some string";

or

var myStr = String("some string");

it same thing...

Though the latter isn't very practical. You only need to use the String()
constructor as a function when you want to convert another type to a
string. For example,

var myStr = String( 7 );

will produce "7", as will

var myStr = '' + 7;

The conversion in the latter example is performed automatically.
but the cool thing is both are "String Objects"

Actually, they are both string values. However, you can still use String
object methods and properties. For example,

var myStr = "some string";
myStr.charAt( 6 ) // 't'
'7'.length // 1

To create a String object, you would use "new String(...)". However, I
don't think there's much need for you to ever do that.
so straight our of the Java API (and not javascript) someone could...

I don't see what the Java API has to do with it...
myStr.substring(start, end);

....but you can certainly do that in JavaScript.
and DOM is a W3C standard, DOM 0 was Netscape,

I believe that "DOM 0" refers to a combination of Netscape's and
Microsoft's object models during the time before DOM 1.
but the new DOM 1 is standard, so read up on DOM (the id="something"
stuff, and the document.domThingy (stuff under the document variable
(or, at least functionally, object) is all DOM as far as i know)... But
i'm new to jscript... only been playing with it about a week or so...
I'd say read the base object types (ie string, char, boolean, integer)
in the java API to get a feel for what your variables can do... and read
up on DOM...

I'd suggest reading Netscape's JavaScript Guide would be a better
start[1]. Links are in my other post.

[snip]

Mike


Please don't top-post.

[1] Skip v1.3. Though that version of the reference is good for host
objects, the guide contains information that is obsolete and should be
avoided, particularly with regard to including scripts in HTML.
 
M

Michael Winter

To get things right:

I don't want to support browsers older than the IE4.x, I only want my
menu to be displayed, if someone disables Javascript - will the
<noscript> work then??

Mark-up present in NOSCRIPT elements will be parsed when JavaScript is
disabled, but it probably won't be of much use. The advantage of menus
that use plain HTML and CSS, and are manipulated with scripts will allow
seemless degradation if JavaScript, or even CSS, is unavailable. They
won't function in the same way certainly[1], but they are still usable and
that is the goal.

I do recommend that you follow the example that was set in the first link
I gave you. It is a good implementation.

Mike


[1] Menu systems can be produced so that they will work normally with only
CSS support, but IE can't handle them.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads


Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top