Forum Moderators: open
"This is a Javascript menu and your browser apparently doesn't support Javascript. Please turn it on or use the footer at bottom of page ..."
How do I prevent this?
lorel
//this is a js comment
or a message that your site needs js enabled to work.
If it is the latter then make your site work without needing js to stop this from happening. SE aren't the only readers that don't execute js and you will be better off allowing visitors who don't support js.
My site validates. The comments are in between the Noscript tags (I probably wrongly called it a "comment") This is what shows up in some search engines instead of the meta tag description:
<noscript>This is a Javascript menu and your browsers apparently doesn't support Javascript. Please turn it on or use the footer at bottom of page</noscript>
Lorel
Why would you need a JS menu to be accessible by search engines and non-JS browsers?
Your pick :)
That still doesn't fix the problem with the menu being completely inaccessible to search engines and non-JS capable browsers. And, it wouldn't alter the need for a <noscript> section...
I understand that Search Engines cannot read JS menus so I have a footer with normal navigation on each page.
I don't write Javascript myself--I found a free script from Dynamic Dirve that is supposed to work in all browsers. So if there is something I need to do with it I'm not aware of what that might be so if you have any tips I'd appreciate it.
And my site mter doesn't indicate anyone visiting my site with JS unsupported so hopefully this isn't an issue except for what the search engines are recording.
Is there a way to indicate they shouldn't record this and still allow non JS browsers to see it?
Is there a way to indicate they shouldn't record this and still allow non JS browsers to see it?
Without cloaking -- no. The spider is a "non-JS browser"...
Why not put text links to all of your important pages in the <noscript> tag - this will let users with js disabled navigate your site and search engines to follow the links.
I suppose that would work but then folks with no JS would have to read to the bottom of the list for the JS note.
a question for Dr. Doc:
You mention earlier about a JS enabled menu. Can you explain what you meant?
I have about 60 pages on my site so I really do need a collapsable menu of some kind.
Lorel
That might work on another site but I need a dropdown horizontal menu on the site I'm working on and also absolute positioning from left side. Can you give me a clue as to how to write something like that when it's not in list form?
Lorel
[css.maxdesign.com.au...]
[accessify.com...]
The list-o-matic links were very helpful. I have the 1st tier of menu items worked out now.
I also checked out the other link above where you had posted in another WW forum what I assume is a JavaScript Enabled Css List menu.
Is it possible to change the CSS so the 2nd tier will display on mouseover or on Hover or Active (being as hover is not supported by all browsers)?
I think I can figure out the rest of it once I get that figured out.
thanks much,
Lorel
I've checked out and studied and tried all the drop down codes links you mentioned earlier and can't get any of them to work right. Re the one you posted in another forum also mentioned above can you explain what to do with the following:
<a href="#" id="a0" onclick="disp(0)">»</a><a href="#" id="b0" onclick="disp(0)">«</a></li>
Here is a short snippet of the menu I'm working on. the first one has no sub menu but the 2nd does and I'm not sure where to put the above line and does the "#" indicate where the url goes? I don't need the directional arrows.
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="products.htm">Products</a>
<ul>
<li><a href="tapes.htm"></a></li>
<li><a href="books.htm"></a></li>
<li><a href="video.htm">Instruction Videos</a></li>
<li><a href="adults.htm">Languages for Adults</a></li>
<li><a href="children.htm">Languages for Children</a></li>
<li><a href="products.htm">Related Products</a></li>
<li><a href="allposters.htm">All Posters</a></li>
</ul>
</li>
</ul>
I gave up on the menus mentioned in this thread because I couldn't figure out how to edit them to suit my needs.
I found a drop down menu code that is supposed to work on all browsers (so far it is working on Net 4.75 and IE 5 for the Mac) and free for commercial use that uses HTML, CSS and JavaScript and written in a code that I understand.
I have it working now except the 2nd tier menu will not expand beyond the width of the 1st tier and I don't know how to change this. Can someone advise me on this?
I'm not sure what data is needed but here is a shortened version of the menu with what I think are the relevant parts.
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td valign="top">
<img src="logo.jpg" width="760" height="135" border="0" alt="upper menu"><br>
<div id="menu">
<table cellspacing="0" cellpadding="0" border="0">
<tr><td>
<div class="top"><a href="index.htm">Home</a></div>
</td><td width="10">
</td><td>
<div class="top"><a href="products.htm">Products</a></div>
<div class="section">
<div class="box"><a href="music.htm">Music</a></div>
<div class="box"><a href="books.htm">Books</a></div>
<div class="box"><a href="instruction_video.htm">Instruction Video</a></div>
</div>
</td></tr></table>
</div>
</td></tr></table>
==============================
THE CSS FILE:
==============================
#menu {
background-color: #996699;
position: absolute;
top: 114px;
left: 180px;
}
#menu div.top {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 6px;
padding-right: 8px;
width: 100%;
}
#menu div.section {
position: absolute;
display: inline;
z-index: -1;
}
#menu div.box {
background-color: #663366;
padding-top: 4px;
padding-bottom: 5px;
padding-left: 6px;
padding-right: 8px;
border-color: #666666;
border-width: 1px;
border-style: none none solid none;
position: relative;
visibility: hidden;
width: 100%;
}
#menu a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #DDDDDD;
text-decoration: none;
white-space: nowrap;
}
#menu a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
white-space: nowrap;
}
============================
THE JAVASCRIPT FILE
============================
/*
* DO NOT REMOVE THIS NOTICE
*
* PROJECT: mygosuMenu
* VERSION: 1.0.4
* COPYRIGHT: (c) 2003,2004 Cezary Tomczak
* LINK: [gosu.pl...]
* LICENSE: BSD (revised)
*/
var menuTimeout = 400
var menuSections = new Array()
var menuCountHide = new Array()
var menuSectionCnt = 0
var menuBoxCnt = 0
function menuShow(section, elements) {
for (var i = 0; i < menuSections.length; i++) {
if (menuSections[i]!= section) {
menuHide(menuSections[i], menuCountNodes(menuSections[i]))
}
}
for (var i = 1; i <= elements; i++) {
document.getElementById(section + '-' + i).style.visibility = 'visible'
}
}
function menuHide(section, elements) {
for (var i = 1; i <= elements; i++) {
document.getElementById(section + '-' + i).style.visibility = 'hidden'
}
document.getElementById(section).style.zIndex = -1
}
function menuTryHide(section, elements, countHide) {
if (countHide!= menuCountHide[section]) {
return
}
menuHide(section, elements)
}
function menuCountNodes(element) {
ret = 0
nodes = document.getElementById(element).childNodes.length
for (var i = 0; i < nodes; i++) {
if (document.getElementById(element).childNodes[i].nodeType == 1) {
ret++
}
}
return ret
}
function menuInitSection(section) {
var elements = menuCountNodes(section)
for (var i = 0; i <= elements; i++) {
var s = (i == 0? (section + '-top') : (section + '-' + i))
if (i == 0) {
document.getElementById(s).onmouseover = function() {
menuShow(section, elements)
menuCountHide[section]++
for (var ii = 0; ii < menuSections.length; ii++) {
document.getElementById(section).style.zIndex = 1
if (menuSections[ii]!= section) {
document.getElementById(menuSections[ii]).style.zIndex = -1
}
}
}
} else {
document.getElementById(s).onmouseover = function() {
//menuShow(section, elements)
menuCountHide[section]++
}
}
document.getElementById(s).onmouseout = function() {
setTimeout("menuTryHide('" + section + "', " + elements + ", " + menuCountHide[section] + ")", menuTimeout)
}
}
}
function menuMakeId(nodes) {
for (var i = 0; i < nodes.length; i++) {
switch (nodes[i].className) {
case 'top':
menuSectionCnt++
menuBoxCnt = 0
nodes[i].id = 'menu-' + menuSectionCnt + '-top'
break
case 'section':
nodes[i].id = 'menu-' + menuSectionCnt
menuSections[menuSections.length] = nodes[i].id
break
case 'box':
menuBoxCnt++
nodes[i].id = 'menu-' + menuSectionCnt + '-' + menuBoxCnt
break
}
if (nodes[i].childNodes) {
menuMakeId(nodes[i].childNodes)
}
}
}
function menuInit() {
menuMakeId(document.getElementById('menu').childNodes)
for (var i = 0; i < menuSections.length; i++) {
menuCountHide[menuSections[i]] = 0
}
for (var i = 0; i < menuSections.length; i++) {
menuInitSection(menuSections[i])
}
}
</body>
</html>
I figured it out. Just putting a width in the div.section below widens the background of the sub menu.
If anyone wants to see this menu in action sicky me.
Lorel
#menu {
background-color: #996699;
position: absolute;
top: 114px;
left: 180px;
}
#menu div.top {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 6px;
padding-right: 8px;
width: 100%;
}
#menu div.section {
position: absolute;
width: 160px;
display: inline;
z-index: -1;
}
#menu div.box {
background-color: #663366;
padding-top: 4px;
padding-bottom: 5px;
padding-left: 6px;
padding-right: 8px;
border-color: #DDDDDD;
border-width: 1px;
border-style: none none solid none;
position: relative;
visibility: hidden;
width: 100%;
}
#menu a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #DDDDDD;
text-decoration: none;
white-space: nowrap;
}
#menu a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
white-space: nowrap;
}
