AnyLink Vertical menu

[francinehds]

Script: DD AnyLink Vertical Menu
http://www.dynamicdrive.com/dynamicindex1/anylinkvertical.htm

Hi all,

I'm new around here....

I'm working on a website for a non-profit organization that I volunteer with, and I have a small issue.

I've been using the "AnyLink Vertical Menu" found HERE (http://www.dynamicdrive.com/dynamicindex1/anylinkvertical.htm) on this site, and have to say that it's EXACTLY what I was looking for. Only problem is, that although it works, I can't get it positioned properly. Instead of popping out right next to the word, the menu appears at the top left of the page. It's annoying :P

I learned basic CSS about 2 weeks ago, so I'm new to this stuff too. I've been working with HTML for about 7 years, so I do get the basic principle, and I know I'm missing something minor.

Is it the "position: absolute" that's the problem? If it helps at all, the site is here (http://www.heartdefectssociety.org/new/) (Keep in mind it's under construction, so the links don't go anywhere yet.... and the "Home" link doesn't have a submenu.)

Thanks all!!!

[francinehds]

Hi all,

I figured it out. I copied and pasted the first part of the code (the script stuff) into the CSS file, instead of into the HTML file. Was just laying in bed falling asleep (trying anyway) when I realized I probably interpreted the instructions wrong. :o

All fixed :) and I'm all proud of myself now!!! :D

Now, just to get the links working and redo the whole site and I'm done :D

Actually, one other question... if I wanted to leave pretty much the left hand bar and the top the same throughout the site, could I make THAT part a CSS file, and then just change the part in the grey depending on the page? I'm assuming yes, but I know I'd have to change some of the parameters to read : instead of = (to change HTML to CSS). Is there an easier way to do that? Or would "copy and paste" work just as easily?

Sorry if I'm a pain :P

[ddadmin]

Warning: Just for future reference please post in the correct forum for DD related questions. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.



Actually, one other question... if I wanted to leave pretty much the left hand bar and the top the same throughout the site, could I make THAT part a CSS file, and then just change the part in the grey depending on the page? I'm assuming yes, but I know I'd have to change some of the parameters to read : instead of = (to change HTML to CSS). Is there an easier way to do that? Or would "copy and paste" work just as easily?


There are ways to easily include the same content across multiple pages. For example, if your server supports SSI (your pages end in the .shtml extension), here's a tutorial (http://www.javascriptkit.com/howto/ssi2.shtml) discussing using SSI to embed the same content onto pages. There are similar techniques if you server supports PHP (http://ca.php.net/manual/en/function.include.php) or ASP, for example.

[Veronica]

If your server doesn't support ssi or php, you could also simplify things by putting the css and javascript into a single file, so you don't have to copy and paste quite as much. (And also so if you change something, you only have to do it on one page)

What you need for that is to make the css and js external. To do that, you would either add the css to your current "site.css" Or create a new external css, save it to the css directory and just add a link to it under the link to site.css

For the javascript, copy everything in the javascript, except the js tags at the top and bottom. Paste what you've copied into a blank file, and call it menu.js
Save menu.js into a directory called "scripts". Then replace all of the js code (this time including the tags) with the following.



<script src="scripts/menu.js" type="text/javascript">

/***********************************************
* AnyLink Vertical Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>


Make sure you include the credit to DD in your html file! (Hope I got it right this time...)

And by the way, good job figuring out the original problem

[francinehds]

Warning: Just for future reference please post in the correct forum for DD related questions. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

Oooops!! Thanks for pointing that out :)



There are ways to easily include the same content across multiple pages. For example, if your server supports SSI (your pages end in the .shtml extension), here's a tutorial (http://www.javascriptkit.com/howto/ssi2.shtml) discussing using SSI to embed the same content onto pages. There are similar techniques if you server supports PHP (http://ca.php.net/manual/en/function.include.php) or ASP, for example.

I don't have SSI support on my servre, and I don't think I have PHP either... checking on the ASP.

Thanks :)

[francinehds]

Hi Veronica,

Okay, I'm a little lost. :confused:

Right now I have 2 CSS files, 1 JS file, and one HTML file....

site.css is as follows:

<link rel="stylesheet" href="menu.css">

<!--Main Style Sheet for Fonts-->

.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
line-height: 20px;
}
........

menu.css is as follows (Truncated):

<script src="css/dropdown.js" type="text/javascript">

</script>
<link rel="stylesheet" href="dropdown.js">

<!--Drop Down Menu Information-->
#dropmenudiv{
position:absolute;
background-color: #1A3A77;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100&#37;;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #1A3A77;
}

dropdown.js is as follows: (Truncated)

<script src="css/dropdown.js" type="text/javascript">

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="history.html">HDS History</a>'
menu1[1]='<a href="board.html">Board of Directors</a>'
.....

and the html file's header is as follows:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1" />
<title>Heart Defects Society of Windsor and Essex County</title>

<link rel="stylesheet" href="css/site.css">


<!--/***********************************************
* AnyLink Vertical Menu- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/-->


</head>

I know I'm messing up the links somewhere! It's not working anymore, so I know something's not right. I was all schmart though, and made a back up copy before I started messing with it :) (I didn't upload the "test" version to the site yet).

Thanks for trying to help!! I'm usually pretty good with stuff like this, but when I get lost on some small thing, it can mess me up for life :p then I get all frustrated and drop it. I love the way the site's looking so far, though, so I don't want to drop it!!!

[Veronica]

OK, in site.css, remove these top two lines that you have: <link rel="stylesheet" href="menu.css"> <!--Main Style Sheet for Fonts-->

Make sure menu.css doesn't have any <style> or </style> tags in it. Put menu.css in the same folder where you have site.css

Next - In menu.css, remove these top 4 lines that you have: <script src="css/dropdown.js" type="text/javascript"> </script> <link rel="stylesheet" href="dropdown.js"> <!--Drop Down Menu Information-->

Next - It loosk like you saved all the javascript into a file called dropdown.js? OK, in dropdown.js, remove the top line <script src="css/dropdown.js" type="text/javascript"> plus any </script> line you may have at the bottom.

For the sake of ease, put it in the same directory as your css files for now.

Finally, this should be the way your html file looks at the top


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Heart Defects Society of Windsor and Essex County</title>

<link rel="stylesheet" href="css/menu.css">

<link rel="stylesheet" href="css/site.css">

<script src="css/dropdown.js" type="text/javascript">
/***********************************************
* AnyLink Vertical Menu- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

...

[francinehds]

WOOOOOHOOOOO!!!!!!!

Coolness!! Thanks so much!!! :D

Okay, so basically, what I did wrong was try to get the javascript to read from the CSS file, which was trying to read the other CSS file, or something like that. So, all of the <link.... and <script... stuff goes into the HTML then. Got it.

Thanks!!!

Now, to test drive this with more than one page... btw, this won't copy all the text to each page, will it? So if I want to update the news at the bottom of the page, I'll have to carry it over to every page? Or can that be put into a script or CSS too?

I guess the easiest way to explain it is that I just want to edit the stuff that's in the greyish area, under the slogan and picture... but the rest of the page I would like to have the same throughout the site....

[Veronica]

Your enthusiastic reply made my day :)

You're right - you don't want to be regularly editing something that's on every single page. Are you just using a text editor? You could use an external javascript to write, for example, the meeting date to each page. That way you'd just have to change the 1 js file and it would change on all the pages.

But for now, you might want to take the meeting info and news section out of the navigation, and just put it on the home page. That way, you just update the home page when you need to.

[francinehds]

Your enthusiastic reply made my day :)

I am to please ;) It doesn't take much to get me excited, either. If something I'm trying to do is working, I'm all happy! :D


You're right - you don't want to be regularly editing something that's on every single page. Are you just using a text editor? You could use an external javascript to write, for example, the meeting date to each page. That way you'd just have to change the 1 js file and it would change on all the pages.

But for now, you might want to take the meeting info and news section out of the navigation, and just put it on the home page. That way, you just update the home page when you need to.

Off to read some more about JavaScript to see if I can figure this out for myself :) (if not, "I'll be Bach"...)

[Veronica]

If you really really want to have the meeting stuff on each page, here's a fairly simple way you can do it.

First - In place of the meeting info you have, on your html pages, put this:



<script type="text/javascript" src="meeting.js"></script>


Remember, that part goes in your html pages.

Then, you're going to create a new file, and call it meeting.js. In this new file, you're going to copy and paste :



document.write('<div align="justify" class="style11">The next meeting will be held on Monday, June 25, 2007 at 7:00 pm in the Community Room of the Real Canadian SuperStore on Walker Road in Windsor.</div>')


Upload this file to the same directory as your html file.

When you need to change the meeting info, you need only change the one file (meeting.js) and upload it and it will change on all the html pages.

Some warnings:

-The whole thing needs to be on a single line. Don't hit your enter key.
- Only edit meetings.js in a text editor like notepad. And again, make sure everything is on a single line.
- The parts that are in red are essential to make the script work. The only parts you should be changing each month are in blue. (Obviously they won't be in blue or red on your text editor, this is just for the example - but I guess you know that!)
- Do not use any single quote marks.

Good luck!

Also, if you have any more questions, probably best to start a new thread, as this is getting long.

[francinehds]

Hi Veronica,

I do believe you're my new best friend!! lol

Thanks for all your help... and since we're on a different topic entirely now, I guess I'll start another thread.... probably in the JavaScript forum.

I appreciate the time you took to answer my questions (even the unasked ones!!) :)

Francine

ETA: WOOOOHOOOOO!!!!!! I did it! It works!!! I'm all happy now.
*does Snoopy Happy Dance*
Thanks again!!!!!