PDA

View Full Version : Help required with Anylink Drop Down Menu!



monique
10-14-2006, 11:45 AM
1) Script Title: Anylink Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3) Describe problem:

See following website for design and code: http://www.arti-mo.com/watubedoelt. Note this is still under construction and the links don't work yet! :o

I have used images for the menu. Suppose this is no problem in respect to accesibility for search engines? :rolleyes:

My question is the following:

The friend I am making this website for wants the menu to be shown at the bottom with the submenu going up (in stead of drop down) and horizontal (in stead of vertical). Can this be made? What should I change in the script to make it work as required? :confused:

Thanks for any good help you can give me!

Regards,
Monique

jscheuer1
10-16-2006, 06:23 AM
There is nothing so special about the menu images that they couldn't be rendered as styled text but, as long as you have the alternate attributes for the images well defined, it shouldn't be too much of a problem for search engines, text would be better for them though.

However, you've got bigger problems than that. Try looking at the page in a standards compliant browser like Fire Fox or Opera. The menu triggers and the rest of the page look similar to IE but the dropmenudiv appears at the top of the page when activated.

This is due to an overuse of position:absolute in the design of the page.

To get the menus to always move up, comment out these lines as shown:


else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
//if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
//if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
//edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
//}
}
return edgeoffset
}

But, even in IE, with all that absolute positioning, this causes them to drop up behind the other content. To fix that, add this to the style:


#dropmenudiv {
position:absolute;
width:820px;
bottom:20px;
z-index:1;
}

However, as I indicated, the entire page should be redesigned without so much absolute positioning if you want it to be accessible in other browsers.

jscheuer1
10-16-2006, 06:57 AM
I looked into this a bit more, here is an alternate stylesheet that makes this layout work in other browsers as well as IE:


<style type="text/css">

body {
background-color:#F5D388;
scrollbar-face-color:#f5d388;
scrollbar-highlight-color:#f5c55c;
scrollbar-3dlight-color:#f3ede0;
scrollbar-darkshadow-color:#f5c55c;
scrollbar-shadow-color:#f3ede0;
scrollbar-arrow-color:#502800;
scrollbar-track-color:#f3ede0;
}

#bg {
position:relative;
width:820px;
height:520px;
background-image: url(afbeeldingen/bg.jpg);
border:0px;
font-family:"verdana","arial","helvetica","sans-serif";
font-size:12px;
color:#502800;
margin:5% auto;
}

* html #bg {
top:expression(Math.max(document.documentElement.clientHeight/2-260, 0)+'px');
}

#logo {
position:relative;
width:200px;
height:100px;
}

#tekst {
position:relative;
width:770px;
height:300px;
background-color:transparent;
text-align:left;
overflow:auto;
}

#menu {
position:relative;
width:820px;
margin-left:8px;
}
#menu a {
display:block;
float:left;
}

#dropmenudiv {
position:absolute;
z-index:1;
}

</style>

It requires a DOCTYPE for the page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>

<head>
<title>Wat U bedoelt - tekstbureau, tekstschrijven, teksttrainingen, laten schrijven, leren schrijven</TITLE>


These changes to the script:


var menuwidth='150px' //default menu width
var menubgcolor='transparent' //menu bgcolor

And the width parameter used here and similar should be 150px:


onMouseover="dropdownmenu(this, event, menu1, '200px')"

not 200px as shown.

monique
10-16-2006, 10:45 AM
Thanks very much John.

I hadn't checked yet in the other browsers, and you were absolutely right, it looked awfull. Further I didn't realise that absolute positioning could cause such big problems... :o

I have followed your advise and made all the changes. Now it looks much better than before (in all browsers). :D

Have to bother you with two more questions, an 'old' one and a 'new' one:

1) Is there a way to show the submenu in a horizontal way in stead of the vertical block?

2) After the changes now in IE there is a slight stroke right from bg in a lighter colour which shouldn't be there. It only appears in IE, not in the other browsers. How did that come and how can I improve that?

Thanks again and have a nice day. :)

Regards,
Monique

jscheuer1
10-16-2006, 11:04 AM
I'm not clear on what you mean by "show the submenu in a horizontal way". About the "stroke", that is the background image bleeding, add this:


#bg {
position:relative;
width:820px;
height:520px;
background-image: url(afbeeldingen/bg.jpg);
background-repeat:no-repeat;
border:0px;
font-family:"verdana","arial","helvetica","sans-serif";
font-size:12px;
color:#502800;
margin:5% auto;
}

jscheuer1
10-16-2006, 11:15 AM
I think I got an idea of what you might mean by horizontal, if you make these like so:


onMouseover="dropdownmenu(this, event, menu1, '480px')"

and:


onMouseover="dropdownmenu(this, event, menu2, '640px')"

The menus will be horizontal. All that appears to be required is that there be enough width provided and they will stretch out by themselves but, at some point you will (especially in smaller windows) come up against the right edge of the window, this may have odd results.

Added Later:

I figured out a way to modify the script for this new problem, if this type of horizontal display is what you have in mind.

monique
10-17-2006, 08:44 AM
I changed the code for the background-image accordingly and it looks much better now. How simple can it sometimes be...?

Indeed you had the right idea of what I meant by 'horizontal'. If you now look again on the site (http://www.arti-mo.com/watubedoelt) you will see the menu horizontal. Meanwhile I created a few more items in the various menus (for this I used the image of 'persbericht' a few times). Is there a way to start the submenu always on the left - so that it will always start above 'home'? Or do you think that will look 'confusing' to visitors of the site?

Thanks very much again!

Monique

jscheuer1
10-18-2006, 08:51 AM
All you need to do is set the home link as the object in the function dropdownmenu(obj, e, menucontents, menuwidth). To do that, add this line:


function dropdownmenu(obj, e, menucontents, menuwidth){
var obj=document.getElementById? document.getElementById('setleft') : document.all['setleft'];
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhid . . .

And add the id to the home link:


<a id="setleft" href="home.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '480px')" onMouseout="delayhidemenu()"><img src="afbeeldingen/menuknophome.jpg" border="0" alt="home"></a>

monique
10-18-2006, 06:09 PM
Wow, this is really wonderful! :cool:

I very much envy your knowledge about all this! ;)

Tomorrow I have a meeting with my friend to discuss everything. Hope she'll like it too...

Thanks, Monique

monique
10-25-2006, 02:54 PM
Hi John,

Sort of promised you to come back on my 'challenges'. As said I had a meeting with my friend to discuss the design for her website. She loved much of it though not all, so I had to make some changes again. The submenu is now again showing vertical... all that effort for nothing... :o Well I believe I have learned a lot anyway :D

Personally I would make the colours/design a bit more vivid, but than, who am I... it's her website... ;)

Can I ask you one more question please?

You know I have fallen in love with Dynamic Drive and I definitely want to use only Dynamic Drive scripts :) Does Dynamic have a script like this: http://www.websonic.nl/javascripts/statusbalk/status1.php? I'd like to set up a text in the status bar that is "being typed" while reading it... Or do I have to ask this question in another forum?

Many many thanks,
Monique

brianvu
10-25-2006, 04:26 PM
Hi John or to whom it may concerns,

I'm using your script for website learning and I love it. It's easy to be implemented into the html code. I tried to create a submenu in the drop down menu (different layers of menus that means when user points to the link, a drop down menu appears, user points to a link in the drop down menu, another menu appears next to that link.) Can you please help? Does this script work or I need another new script? Thanks.

Brian

jscheuer1
10-26-2006, 05:07 AM
Can I ask you one more question please?

You know I have fallen in love with Dynamic Drive and I definitely want to use only Dynamic Drive scripts :) Does Dynamic have a script like this: http://www.websonic.nl/javascripts/statusbalk/status1.php? I'd like to set up a text in the status bar that is "being typed" while reading it... Or do I have to ask this question in another forum?

Many many thanks,
Monique

Hmm, DD (with which I have no direct affiliation) may have a similar script, not sure. However, such scripts are rather limited in utility and most people find them annoying and there is another reason not to use them. So, I would advise against using such a script.

These scripts are limited in utility because the status bar is optional in all modern browsers and optionally beyond the reach of javascript in many.

Most people find these scripts annoying because any repetitive animation just has that effect on most people. Also because if someone has their status bar active, they may resent it being co-opted for your animation when what they want to see there is the status report of hovered links' destination URL's, image and page load progress.

Which hints at the other reason. The status bar is really a part of the user interface (as opposed to the display area) of the page, and although there is spotty support for its manipulation, it is somewhat arrogant to usurp its normal function. This can even lead some users to suspect that you are trying to hide the true activity of the page for possibly nefarious purposes.

codeexploiter
10-26-2006, 05:12 AM
Moreover most of the popular browser disabled the way to change the status bar messages using a script. Though you get some script you mentioned in your postiing it won't do much good for you like John pointed out

jscheuer1
10-26-2006, 05:12 AM
Hi John or to whom it may concerns,

I'm using your script for website learning and I love it. It's easy to be implemented into the html code. I tried to create a submenu in the drop down menu (different layers of menus that means when user points to the link, a drop down menu appears, user points to a link in the drop down menu, another menu appears next to that link.) Can you please help? Does this script work or I need another new script? Thanks.

Brian

You really should start a new thread if you have a different question than the topic of the thread. Also, in this case, if you had searched the archived posts on this topic you probably would have discovered that the best way to get such a multilevel menu is to use one of the ones already designed for that. There are many such menus available on the web and, here at DD, there is this section of them:

http://www.dynamicdrive.com/dynamicindex1/indexc.html

monique
10-26-2006, 09:52 AM
Ok, clear reply, I understand. Enough good reasons not to use it!

To satisfy my curiosity one last (general) question: can someone tell me why and how this thread has become a "hot thread"? How does that work?

Bye,
Monique

jscheuer1
10-26-2006, 04:03 PM
I used to wonder why one thread would get 'hot' and another not. just about all of this sort of thing is done by (presumably configurable by the administrator) filters. I never figured out the precise reason but, after observing over time which ones this happened to, I've concluded that it has to do with the number of views and the number of posts. The more of each of these, the more likely that it will be selected by the forum's 'hot' filter.

monique
10-27-2006, 07:13 AM
Thanks John for the clarification. I was just being curious - as always... ;)

Although you are not affiliated with DD, you seem to be very busy here with an everage of approx. 15 messages a day, 7 days a week, 365 days a year... :D

Anyway, thanks very much for all your help so far and 'see you later alligator' :)