PDA

View Full Version : Simple question (ul in an external js file)



nate51
05-02-2008, 06:39 PM
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
05-02-2008, 08:00 PM
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
05-02-2008, 08:06 PM
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
05-05-2008, 02:27 PM
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
05-05-2008, 07:27 PM
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
05-06-2008, 12:42 PM
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
05-06-2008, 03:45 PM
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
05-07-2008, 05:23 PM
ok,

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

nate51
05-07-2008, 06:15 PM
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
05-07-2008, 06:17 PM
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.

nate51
05-08-2008, 02:53 PM
Try this link.

http://ne-media.com/customart/index_tester.html

jscheuer1
05-08-2008, 04:26 PM
So, have you given up on PHP? Doesn't your server support it? In any case, your menu.js file is messed up. This should work:


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

The main issue is that you cannot mix unescaped quotes of the same type without confusing the script parser:


document.write("<ul id="navmenu-v">")

When the parser gets to the second highlighted quote, it thinks the string is over, and the rest of the line looks like invalid code to it.

This is one of the reasons why I mentioned that doing it with javascript is inferior to having it on the page. It's more complicated than just editing the page would be.

molendijk
05-08-2008, 06:02 PM
If you want to include your menu with javascript, take a look at this (http://molendijk.110mb.com/include_via_iframe_or_object/include_menu/inner1.html). It belongs to a thread started here (http://www.dynamicdrive.com/forums/showthread.php?t=30079).
Or you might want to try this (http://www.dynamicdrive.com/forums/showthread.php?t=28620).
---
Arie Molendijk.

jscheuer1
05-08-2008, 06:37 PM
If you want to include your menu with javascript, take a look at this (http://molendijk.110mb.com/include_via_iframe_or_object/include_menu/inner1.html). It belongs to a thread started here (http://www.dynamicdrive.com/forums/showthread.php?t=30079).
Or you might want to try this (http://www.dynamicdrive.com/forums/showthread.php?t=28620).
---
Arie Molendijk.

I don't think we should encourage javascript in this case unless both asp and PHP have definitely been found to be unavailable on the server. Nothing I've seen so far has demonstrated that conclusively to me.

molendijk
05-08-2008, 11:02 PM
I don't think we should encourage javascript in this case unless both asp and PHP have definitely been found to be unavailable on the server. Nothing I've seen so far has demonstrated that conclusively to me.Agree. I was just thinking of those poor users who cannot use PHP / ASP.
One thing thought: js is cached, PHP/ASP is not, or hardly. So js is faster, which might be a reason for people to consider using it if they want fast page transitions without flicker.
---
Arie.

nate51
05-12-2008, 01:31 PM
I agree with both of you guys, I would love to go php because of the setting issues and caching.

Problem though is once this site is done I pass it onto a company that still lives in the stone age. They recently had a new company site developed with a majaority javascript and they seem to think it's as good as gold, like it's the "new" technology. So I have to pass along something they can work with.

But I just wanted to thank you guys, the external file works cause of your help.