PDA

Click to See Complete Forum and Search --> : External js file - where art thou?

DanV
07-25-2005, 09:45 AM
I have never had a need to make an external stylesheet let alone an external js file until now when I'm working on a website. The need has come up to include a dhtml menu that has been offered free by its designer. I can get the effect if add all the code on each and every page but needless to say if it could be linked to one page that would save a lot of repetitive coding even with cut and paste.

I've tried to do this but somehow it's not working as it should. To my understanding thus far the section in red type is the sole thing that goes into the js file.

Then, again as I understand it, the second part of the menu, <div id="menu" class="menu">
<a href="http://whatever.com/contents.html" class="menuitem">contents</a>...and so forth with the other sections goes into the body of the webpage.

Then what I have read is that you place the following:<SCRIPT SRC="menu.js">
</SCRIPT> wherever you want it to appear on the webpage.

Sounds easy enough but easy seems to be on vacation when I try it.

The other question I ask myself is what do I do with .menu, .menuitem, and so on. I'm figuring I could make an external file for them but I'm already having difficulty as it is with one. Finally, there is the the menu itself (body) and I'm wondering if that has to go on every page.

I've looked all around the Net for instructions on this and the simplest instructions do not make it simple and the more elaborate ones, well, they might as well be talking Turkish.

Bottom line, I'm looking for a way to put the menu into an external file and then use it on each page of the website without having to go through the aforementioned repetition.

Any suggestions - perhaps on the level of the Sesame Street approach to javascript :-) - will be appreciated or even referred to a site where it's explained for beginners.

Thank You


_____________________________________________________

HTML
HEAD
TITLE>menu </TITLE
STYLE TYPE="text/css"
<style>

BODY { background-color: #000000 }

.menu { position: absolute;
width: 100px;
top: 0px;
left: 0px;
background-image: url(dscript107/back1.png);
visibility: hidden;
border: 1px solid;
border-color: #eeeeee #666666 #666666 #eeeeee;
padding: 2px;
z-index: 5;
filter: alpha(opacity=0);
-moz-opacity:1
}
.menuitem {
padding: 2px 4px 2px 4px;
color: #ffffff;
text-decoration: none;
font-family: ms sans serif;
font-size: 7px;
font-weight: normal;
display: block;
}
a.menuitem:hover {
color:lime;
background-color:gray;
background-image: url(dscript107/back.png);
}
</style>
<script type="text/javascript">

var ie5 = (document.getElementById&&document.all);
var n6 = (document.getElementById&&!document.all);
var x,y,el,pageW,pageH;
if (n6) document.addEventListener("mouseup",showMenu,false);
if (ie5) document.attachEvent("oncontextmenu",showMenu);
if (ie5) document.attachEvent("onclick",showMenu);

function showMenu(event) {
if (document.getElementById) {
pageW = document.body.offsetWidth;
pageH = document.body.offsetHeight;
x = event.clientX
y = event.clientY
el = document.getElementById("menu");
if ((ie5&&event.type=="contextmenu")||(n6 && event.which>1)) {
if ((x+parseInt(el.offsetWidth))>=pageW) {
x = parseInt(el.offsetWidth);
y = parseInt(el.offsetHeight);
}
el.style.top=y+"px";
el.style.left=x+"px";
fadeIn();
return false;
}
if ((ie5&&event.type=="click")||(n6 && event.which==1)) {
el.style.visibility="hidden";
fade_index = 0;
}
}
}
document.oncontextmenu=new Function("return false") ;
fade_index = 0;

function fadeIn() {
if(ie5 || n6) {
document.getElementById('menu').style.visibility = 'visible';
if(ie5) {
document.getElementById('menu').filters.alpha.opacity = fade_index;
}
if(n6) {
document.getElementById('menu').style.MozOpacity = fade_index/100;
}
fade_index += 3;
goIn = setTimeout("fadeIn()", 50);
if(fade_index >= 100)
clearTimeout(goIn);
}
}

</script>

</HEAD>
<BODY>

<!-- menu start -->
<div id="menu" class="menu">

<a href="http://whatever.com/contents.html" class="menuitem">contents</a>

<a href="http://whatever.com/instructions.html" class="menuitem">instructions</a>

<a href="http://whatever.com/introduction.html" class="menuitem">introduction</a>
LeeU
07-25-2005, 10:44 AM
Put this part into an external file called "menu.js":

var ie5 = (document.getElementById&&document.all);
var n6 = (document.getElementById&&!document.all);
var x,y,el,pageW,pageH;
if (n6) document.addEventListener("mouseup",showMenu,false);
if (ie5) document.attachEvent("oncontextmenu",showMenu);
if (ie5) document.attachEvent("onclick",showMenu);

function showMenu(event) {
if (document.getElementById) {
pageW = document.body.offsetWidth;
pageH = document.body.offsetHeight;
x = event.clientX
y = event.clientY
el = document.getElementById("menu");
if ((ie5&&event.type=="contextmenu")||(n6 && event.which>1)) {
if ((x+parseInt(el.offsetWidth))>=pageW) {
x = parseInt(el.offsetWidth);
y = parseInt(el.offsetHeight);
}
el.style.top=y+"px";
el.style.left=x+"px";
fadeIn();
return false;
}
if ((ie5&&event.type=="click")||(n6 && event.which==1)) {
el.style.visibility="hidden";
fade_index = 0;
}
}
}
document.oncontextmenu=new Function("return false") ;
fade_index = 0;

function fadeIn() {
if(ie5 || n6) {
document.getElementById('menu').style.visibility = 'visible';
if(ie5) {
document.getElementById('menu').filters.alpha.opacity = fade_index;
}
if(n6) {
document.getElementById('menu').style.MozOpacity = fade_index/100;
}
fade_index += 3;
goIn = setTimeout("fadeIn()", 50);
if(fade_index >= 100)
clearTimeout(goIn);
}
}

don't include the <script> tags.

Then put this link into your <head> section:

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

Then put the other sections into the <body>.
Kor
07-25-2005, 10:45 AM
you have a lot of solutions to avoid repeating the codes:

- use iframes/frames
- use external js and CSS files
- use server-side includes

Now... which one should suit to u?
DanV
07-27-2005, 11:41 AM
LeeU

Thank you, I got the menu working. I guess what I have to do now to even further minimize the webpages code is make a .css file. Too bad there isn't a way to put everything that pertains to the menu on one file and then on the pages just a simple indicator.

Kor

As soon as I learn about iframes and server-side then I can decide which one suits best. :-)


DanV
Exuro
07-27-2005, 12:08 PM
Too bad there isn't a way to put everything that pertains to the menu on one file and then on the pages just a simple indicator.That might actually be possible, but I'm not sure exactly what you mean, so I can't say for sure.
DanV
07-27-2005, 10:21 PM
Exuro

If you look at my initial posting I meant everything that is there that pertains to the menu including what's in the body tag.

Thus, when I wanted to include the menu on all the pages of the website all I would have to do is put a few lines in each page which amount to basically
"put the menu here".

As it stands right now, and please correct me if I'm wrong in this, all one can do is make a js file with only the "operation" code. Anything else pertaining to the menu such as font, color, the menu categories themselves and on and on has to go either in every page or more economically in a css external file.

So you see where I was wondering if there was a "super" js file and then the only thing to bring it all up is a few words of code, like a master key so to speak. If there isn't such a thing now I'm sure someday they will make it
Exuro
07-28-2005, 01:47 AM
Well, you could build the menu with JavaScript DOM and then append it to the page, but that's really not such a great idea because then anyone without JavaScript enabled won't be able to use your menu... Do you have any server-side technology available? If not, I suppose you could always provide a link to a frames version of the menu in a <noscript> tag, but server-side includes are really the way to go.