Simple question (ul in an external js file)

[nate51]

I have a huge multilevel menu that works off <ul> <li> tags and it will be displayed on multiple pages, I got the idea from the suckerfish drop downs idea http://qrayg.com/learn/code/cssmenus/

But I am not sure how to place all my <ul> information into a js to be called up by each page instead of each page having a massive amount of code.

Can anyone help me? I am finding all the tutorials on this site for drop downs are all in the page they are displaying on.


-- Nate

[Spinethetic]

You can use
Javascript

document.write("<ul>")
document.write("<li class='style_selector'>bLaH!</li>")
document.write("</ul>")

and put script into each page you want to display js file on:
HTML

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

However this is very inefficient and unwise as I have learned through experience. Just about everybody on here will tell you the same. Use PHP instead:

external.php

<?php
echo "<ul>";
echo "<li class='style_selector'>bLaH!</li>";
echo "</ul>";
?>

PHP to copy into each page loading external php

<?php
include("external.php");
?>

Trust me, you really want to use PHP instead of javascript. I had the same idea for a site of mine, loading external javascript files into every page so that I could just edit the external file to make changes globally. Seemed efficient at the time, but after a while it becomes hell when your visitors tell you parts of your site are not showing correctly or sometimes not at all. The PHP engine on your server parses the data in external.php and displays it in plain HTML on whatever page you have it loaded into so there will be no problems with visitors who have random javascript settings in their browser.

Hope this helps

[jscheuer1]

You don't want to (as noted by Spinethetic) use javascript for an external markup file for a menu like this, as it defeats the purpose of using markup and css as the primary engine of a menu that will be accessible even without javascript. PHP or other server side includes are much better.

[nate51]

I didn't know you could use php like a javascript and I agree with both of you that people have so many different java settings that I do want something that can be universal to everyone.

But fair warning I am really new to this idea so I might ask some stupid questions about this. I am laying out the php page with the <ul> tags do I have to

echo "ul code";

everything?

I added this part...

<td>
                    <?php
include("menu.php");
?></td>

to the page that calls up the php page and I have my php page laid out like this...

<?php
echo "<ul id="navmenu-v">";
                    echo "<li><a href=""><img src="images/nav/awards_btn.jpg" name="awards" width="119" height="38" border="0"></a>";
                    echo "<ul>";
                    echo "<li><a href="">Acrylics</a>";
                      echo "<ul>";
                      echo "<li><a href="">Our Patented Process</a></li>";
                      echo "<li><a href="">Embedments</a></li>";
                      echo "</ul></li>";
                    echo "<li><a href="#">Glass</a>";
                      echo "<ul>";
                      echo "<li><a href="#">Our Patented Process</a></li>";
                      echo "<li><a href="#">Etched, Sandblasted, Filled</a></li>";
                      echo "</ul></li>";
                    echo "<li><a href="#">Metal Plate Awards</a>";
                      echo "<ul>";
                      echo "<li><a href="#">Our Patented Process with Photos Colour</a></li>";
                      echo "<li><a href="#">Photo Etch/Silkscreen Perpetual</a></li>";
                      echo "</ul></li>";
                    echo "<li><a href="#">Achievement + Recognition Programs</a>";
                      echo "<ul>";
                      echo "<li><a href="#">Certificate Programs</a></li>";
                      echo "<li><a href="#">Plaques and Frames</a></li>";
                      echo "</ul></li>";
                    echo "<li><a href="#">Lapel Pins, Jewelry, Gavel, Cups</a>";
                      echo "</li></ul></li></ul></td>";
                  echo "</tr>";
?>

And I find the drop downs are now missing on the page that calls it up, do I need something before the body tag to call up the php page?

How the page should look
http://ne-media.com/test/index.html

How it is coming out with the php
http://ne-media.com/test/index_test.html

[jscheuer1]

Both your links are to the 'PHP' page, so I copied the one that was different in the text, that's the 'non-PHP' one. Unless your server has a special directive to treat pages with the htm or html extensions as PHP, you need to make your page that has the include directive on it a .php page.

Also, your included page need not have any PHP code on it unless some of the markup it is supplying needs to be open to change on-the-fly according to server side variables. If not, it can appear as normal html code, usually without the body tag or anything that would go outside the body tag.

These are just two basic issues (and a comment on the links in your post). The second 'issue' is only an observation, not a problem. There could still be other issues.

[nate51]

jscheuer1,

Thanks for pointing out the links, I have corrected them.

I am not really sure where to go from the description you gave me above.

Are you saying I need to drop in a line before the body tag to include the php file?

[jscheuer1]

No, I'm saying that for the server to use the include instructions that you already have on this page:

http://ne-media.com/test/index_test.html

it probably needs to be renamed to:

http://ne-media.com/test/index_test.php

In fact, after having looked at the served source, I'm like 100% sure of this. But there could still be other problems.

The other thing I mentioned, about not needing any PHP code on the external include page itself, I hope you got that, if not - ask about it.

[nate51]

ok,

I have changed the page from .html to .php and it still is doing the same thing.

[nate51]

alright, I tried this. I copied the example you gave above and it works as a javascript, I am coming to the conclusion that the longer the list I have that's where things get messed up.

Your example of...

document.write("<ul>")
document.write("<li class='style_selector'>bLaH!</li>")
document.write("</ul>")

And mine doesnt...

document.write("<ul id="navmenu-v">")
document.write("<li><a href=""><img src="images/nav/awards_btn.jpg" name="awards" width="119" height="38" border="0"></a>")
document.write("<ul>")
document.write("<li><a href="">Acrylics</a>")
document.write("<ul>")
document.write("<li><a href="">Our Patented Process</a></li>")
document.write("<li><a href="">Embedments</a></li>")
document.write("</ul></li>")
document.write("<li><a href="#">Glass</a>")
document.write("<ul>")
document.write("<li><a href="#">Our Patented Process</a></li>")
document.write("<li><a href="#">Etched, Sandblasted, Filled</a></li>")
document.write("</ul></li>")
document.write("<li><a href="#">Metal Plate Awards</a>")
document.write("<ul>")
document.write("<li><a href="#">Our Patented Process with Photos Colour</a></li>")
document.write("<li><a href="#">Photo Etch/Silkscreen Perpetual</a></li>")
document.write("</ul></li>")
document.write("<li><a href="#">Achievement + Recognition Programs</a>")
document.write("<ul>")
document.write("<li><a href="#">Certificate Programs</a></li>")
document.write("<li><a href="#">Plaques and Frames</a></li>")
document.write("</ul></li>")
document.write("<li><a href="#">Lapel Pins, Jewelry, Gavel, Cups</a>")
document.write("</li></ul></li></ul>")

[jscheuer1]

There is no such page on the server at the moment:

http://ne-media.com/test/index_test.php

This will not work locally, and will only work on the server if the server is PHP enabled.