homepage Welcome to WebmasterWorld Guest from 54.205.14.21
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Javascript for Site Navigation
using external javascript file
Marcia




msg:1487020
 6:11 pm on Dec 9, 2000 (gmt 0)

Can I use a linked javascript file to insert the HTML code for site navigation at the bottom of pages to avoid re-coding on all the pages when something changes?

If yes, how does this affect what spiders see?

 

tedster




msg:1487021
 10:55 pm on Dec 9, 2000 (gmt 0)

Yes, this is a technique used to avoid lots of re-coding on larger sites. I think rcjordan is an afficianado -- maybe he'll chime in here -- but as far as I know, the spiders will not see/crawl such links. They almost never call the external .js file.

I use Homesite's "extended find and replace" for those kind of site-wide changes, so that I can keep the links right in the HTML.

Edited by: tedster

rcjordan




msg:1487022
 1:48 am on Dec 10, 2000 (gmt 0)

Works great! I love it, but I'm doing sites that are thousands of pages. If I were doing a site under 200 pages, I'd use find & replace.

Marcia




msg:1487023
 2:02 am on Dec 10, 2000 (gmt 0)

Thank you much. I won't use it on my small sites, but I will on some graphics pages that get pretty repetitious.

gmiller




msg:1487024
 8:28 am on Dec 10, 2000 (gmt 0)

There are numerous techniques for dealing with this. Almost any static or dynamic preprocessor can solve this sort of problem. Even the preprocessors that come with C/C++ compilers are adequate. SSI, ASP, PHP, etc. can do it dynamically, in addition to more complex jobs. As I recall, DoubleClick uses an IFRAME wrapped in an ILAYER to do this with the nearly all browsers.

Generally, I recommend staying away from IFRAME/ILAYER and JavaScript since the other techniques should work with any browser.

littleman




msg:1487025
 1:16 am on Dec 11, 2000 (gmt 0)

I often use a perl script that will scan a folder, or numerous folders and create links from the scanned pages. It works well for me, I never have to worry about adding the pages to the navigation bars.

BoneHeadicus




msg:1487026
 12:20 am on Dec 25, 2000 (gmt 0)

Littleman can you elaborate on this perl script you're talking about? Does it create indexed link pages from acrawl through a folder? Please do tell.

yanton




msg:1487027
 8:34 pm on Jan 21, 2001 (gmt 0)

Why not use server side includes?

We use this regularly with no problems. The links (or any html for that matter) are stored in a text file (formatted as normal html, no need for javascript write commands) and the pages call them up.

A change in the text file affects all changes site wide, whether this is 10 or 1,000 pages.

As it is server side, there's no problem with spiders. It works great.

rcjordan




msg:1487028
 9:13 pm on Jan 21, 2001 (gmt 0)

>Why not use server side includes?

In my case, I had hundreds upon hundreds of pages with .htm and .html extensions already listed and ranked well. Other than on index.html pages, changing to .shtml wasn't an option (I'd never get the traffic back). I had concerns about cpu load, though perhaps unfounded. I did not want to declare all .htm and .html files as ssi-capable using .htaccess.

I'm now interested in going ssi, mainly because I'm getting more and more elaborate in the amount of content I inject via the external files. I can foresee the day that I build templates using different mixes of ssi calls and then doing a significant amount of the entire page -not just the nav bars- in the external files. Got a tutorial handy, yanton?

Marcia




msg:1487029
 12:40 am on Jan 22, 2001 (gmt 0)

Oh, am I glad this came up again! I've been hunting around, reading up on SSI, and have it working on a test page- just a navigation paragraph. I had been under the impression it could be called from an html page - I was wrong. It has to be called from an shtml page - works like a charm. I intend to use it on some background graphic pages to save all the extra typing.

I will try to dig for bookmarks for the sites I found. I know the first one was the tutorial at bignosebird.com, which I copied and pasted (which he says to do) and changed the filenames. I love it.

My only concern, for use on regular pages, which I'd love to do - is there ever any problem at all with s/e listings with the shtml extension?

I'd love to have some more tutorials, too.

>build templates using different mixes of ssi calls

How would that work - what type of template pages could it be used for?

Brett_Tabke




msg:1487030
 1:00 am on Jan 22, 2001 (gmt 0)

Depends on how your server is setup Marcia. You may be able to turn on .html extensions for ssi via a simple .htaccess file. Try putting the following two lines in a file named ".htaccess" and upload it to the root directory of your domain:

AddType text/html .html
AddHandler server-parsed .html

Make sure the file is in Unix format.
Try a simple test .html file with ssi in it:

<!--#ECHO var="DATE_LOCAL" -->

rcjordan




msg:1487031
 1:53 am on Jan 22, 2001 (gmt 0)

> It has to be called from an shtml page

As mentioned above, for existing pages where you're stuck w/ an extention other than .shtml, you can inject an section of shtml via an iframe or an ilayer. It works, but it carries an overhead of js and browser sniffing and has significant design limitations. On a new site, I'd just start out w/ .shtml files.

> is there ever any problem at all with s/e listings with the shtml extension?
>
I've recently re-asked the question about an SEO penalty for .shtml pages. No definitive answer yet. I do believe I've read here that there might have been a penalty, but my current experience suggests that it isn't much of one, if any at all. Personally, for index pages, I never submit or write links using the full path, i.e., mydomain.com/mysub/index.shtml but rather mydomain.com/mysub/ -perhaps that might reduce some of the SE negatives??

rcjordan




msg:1487032
 2:27 am on Jan 22, 2001 (gmt 0)

added:

>>build templates using different mixes of ssi calls

>How would that work - what type of template pages could it be used for?

The best example I could give would be for a series of "city guides" on a site, all built along a similar design. Besides the nav column or bar, there might be an ssi call embedded for the region, another for the state, and yet another for the country. There might be still another for sponsors of that region or whatever. I'm doing this now w/ external js. Each page from a town lists a unique attraction in the town, has a thumbnail map of the region, and has a button for other resources for the state. With ssi, this would likely be seen by the SE's as very themes oriented, too. You lose that benefit w/ external js.

Fusioneer




msg:1487033
 2:32 am on Jan 22, 2001 (gmt 0)

Just my 2c here - you can turn on application mapping for the .html extension so you can still use SSI but you will take a performance hit as ALL .html pages will be passed through the SSI interpreter. My experience is with IIS but you do take a significant hit especially on a large site.

If there are any other Cold Fusion aficionado's out there CF is great for this kind of thing - you simply use a CFINCLUDE which works in a very similar way to SSI, you store your navigation in a separate file for the whole site so it can be updated easily, eg.:

<CFINCLUDE template="nav.cfm">

This makes it easy to do a site redesign and switch the nav from LH to RH side for example, or even have it set in user prefs and have conditional formatting.

Quick and dirty example:

<CFIF IsDefined("Cookie.Prefs">
<CFIF Cookie.Prefs EQ "Right">
<table>
<tr>
<td align="right">>
<CFINCLUDE template="nav.cfm>
</td>
</tr>
<table>
<CFELSEIF Cookie.Prefs EQ "Left">
<table>
<tr>
<td align="right">>
<CFINCLUDE template="nav.cfm>
</td>
</tr>
<table>
</CFIF>
</CFIF>

This method is invisible to spiders and all UA's and search engine friendly - they can and will spider the links.

This will also wok across ALL browsers even with javascript disabled. I have found javascript navigation buggy on some browsers, expecially Macintosh. All processing is done server-side.

- Fusioneer

Marcia




msg:1487034
 2:46 am on Jan 22, 2001 (gmt 0)

Woohooo!!

When the htaccess works you get this on an .html page:
Sunday, 21-Jan-2001 20:39:53 EST

Before the ssi only worked with .shtml now it also works with .html on the navigation test page.

I might try the .shtml on another site, on pages where listing is inconsequential, just to see what happens, to know for when it's not available.

Thank you, Brett!

Added:
>>Cold Fusion aficionado's out there
Fusioneer, I know there is regular member here who is quite interested in getting into CF, but I can't off-hand remember who. I believe I've seen some reference to the use of CF as you've mentioned it.

I stay with plain vanilla html and use lots of simple table layouts, but between the logic of the code you showed and the template explanation, this might be very interesting to give a try with a test template for an existing simple page and simple ssi for a navigation column.

It's out of my realm, but I read recently that there's an Allaire/Macromedia merger, which seems like quite an interesting combination.

Fusioneer




msg:1487035
 4:21 am on Jan 22, 2001 (gmt 0)

Allaire and Macromedia have officially merged in a stock-and-cash swap.

To be honest it is more a case of Macromedia acquiring Allaire if you have any experience with M&A.

Press Release [allaire.com]

Macromedia's Link [macromedia.com]

Macromedia will now be very strong in the web application arena after also acquiring Drumbeat last year, now having Allaire's Cold Fusion and JRun technologies.

Personally I think this is a powerhouse combo and only better software will result. Allaire could use Macromedia's muscle to better compete with Microsoft's ASP - the main competitor (we prefer Cold Fusion).

knighty




msg:1487036
 11:46 am on Mar 21, 2001 (gmt 0)

What about using PHP to inset this stuff?

On a simailar note Dreamweaver has a cool 'Library' all you have to do is select the HTML like navigation etc make it into a libray item. Then you can make hundreds of pages that use this item and all you have to do is update the item and it will automatically update all your pages that reference it!

TaTonka




msg:1487037
 2:58 pm on Mar 21, 2001 (gmt 0)

I think PHP is the best thing to show up since sliced bread. It does just about anything I can possibly think of, and I'm sure it does a lot more than that.

A while ago I decided to write a WAP-enabled page for one of my old sites so I could see it through a mobile phone just for the fun of it. I was able to write it real fast, thanks to PHP's ability to give me the HTTP header info. It's awesome for anybody who's ever programmed in C, since most of the syntax is similar. To do the whole included page thing in PHP, the only code you would have to add is this:

<? include ("includedpage.html"); ?>

The good thing is, as knighty said, everything is server side, so the client only sees the result. The bad is that you need to test it live, since the server needs to be able to parse the php code. You can always make a temp directory for tests, though.

Brett_Tabke




msg:1487038
 12:29 pm on Mar 23, 2001 (gmt 0)

Install it on your local box TaTonka. (btw, I don't believe I've welcomed you to the board - welcome!).

Just install Apache, then download the PHP module for windows. The only tough part is getting apache configured to run on localhost - but if you can get php figured out, Apache is doable. Nothing has ever increased my page productivity like running a local server.

litmania com




msg:1487039
 2:20 pm on May 19, 2001 (gmt 0)

I have a question related to calling external JS files.

I have the following code in a .JS file:

document.writeln('<a href=\"http://www.education.com\" TARGET=\"_BLANK\" TITLE=\"For an online directory of distance graduate programs, click here!\"> Click here!</a>');

It works perfectly...

I would like to add a mouseover command to it, i.e.:
onMouseOver="window.status='Click here now to visit Education.com!';return true" OnMouseOut="window.status='';return true"

I've used the correct slashes in the right places.

However, it doesn't work; probably because I'm trying to place Javascript within Javascript.

How can I place the onMouseOver command in the code at the top of this page?

Thank you very much :)

Black Knight




msg:1487040
 8:33 pm on May 19, 2001 (gmt 0)

The reason it isn't working isn't because it is script within script, its because you are using both kinds of quotation marks (single and double) and closing your script before conclusion.

You can get around this by dividing it into multiple write() lines so that each uses only one kind of quotation mark to open and close the content, and uses only the other kind within it.

document.write('<p>I can only use "double-quotation marks" here because using a single quote is the way to tell the script I've finished</p>');
document.write("<p>This time I used double-quotes for the script opening and closing, so can only use single quotation marks in here.</p>");

The trick is to either escape the character so that the javascript doesnt evaluate it at the writeing stage, or to split up the line into multiple write() lines so that each one uses only one kind of quotation mark within itself and the other to open and close. Javascript doesn't add whitespace and you can use that to make multiple lines recombine on the page.

try the following EXACTLY as it is here:

document.writeln('<a href="http://www.education.com" TARGET="_BLANK" TITLE="For an online directory of distance graduate programs, click here!" onMouseOver="window.status=' + "'Click here now to visit Education.com!'" + ';return true" OnMouseOut="window.status=' + "''" + ';return true"> Click here!</a>');

Not sure, but I *think* it will work just fine. You didn't need to escape the double-quotation marks as you'd used single quotes to signify the start and end of the javascript stuff, but by not escaping the single-quotes fully which you used, you did end the javascript prematurely.

What I did was to use single quotes for the bits that have to include double-quotes, and then closed them and used double-quotes for the bits that had to include single-quotes. Try it out and let me know if it works.

[edited to add]
It works just perfectly in IE5 now - I just checked.

litmania com




msg:1487041
 9:01 pm on May 19, 2001 (gmt 0)

You are not a 'Black Knight', you are my white night in shining armour (or at least you would have been if I was a female).

I wasted a couple of hours trying to resolve this. THANK YOU VERY MUCH! It works great now :)

Black Knight




msg:1487042
 11:51 pm on May 19, 2001 (gmt 0)

No problem, glad to help a fellow Londoner. :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved