Make changes to entire site with one change?

Hey guys, Im pretty much new to all this website building so please excuse me if I sound DUMB!

My problem is this, I have a navbar on my site, I have over 100 pages on my site, I want to make changes to my navbar. Is there someway of making a change to a single page/or bit of code and this then will make the changes to to the rest of my site?

The thoughts of changing every page individually is scary!!

Any help would be great, thanks

 

depends on how your site was constructed. Sounds like you have static html pages though. take a look here and see if this is the solution you're after.
http://www.yourhtmlsource.com/sitemanagement/includes.html

 

Yeah that sounds like exactly what I was after, thanks, problem is my server doesn't execpt SSI. :cry So close....

Is there some way of doing it with Javascript or css? there has to be a way around it

 

JavaScript, and maybe CSS, could mask the area, but you would still need to edit each file or load them all via a frameset that makes the change after it loads.

There are programs that can make such changes, but they often require setup. I would probably make a script that loads each page in IE, makes the change, and saves the new page in a separate folder, so I could test before uploading.

 

I made the following simple replacement scripts, in case they might help. I have them set to edit html files, but they could work for others if you change the extension finding code. I think the rest of the comments are self-explanatory, but feel free to ask if you are unsure. The first is for block replacement, if you have lines that are used identically in each file to start and stop the block of text you want to replace.

Code:

/* Multiple File Block Replace Script

ALL of the following variables are required.


For any file or folder paths:

use forward slashes: "c:/folder/file.ext"
or use 2 slashes for each backslash: "c:\\folder\\file.ext"

Using only one backslash will likely cause errors.

You can use "." to mean the current folder.

*/


//Local Home Directory holding the htm or html files
inputFolder="";

//1 or true to change files in subdirectories, 0 or false to not check subdirectories
subdirs=1;

//path to new folder (will be created if it doesn't exist, but can't be the same as inputFolder)
//outputFolder may not be in inputFolder
outputFolder="";

//log file to see which files get changed, and any warnings
logfile="";


/*

The following variables define the border of a block of text to be replaced with the contents of replaceWith

Make sure the lines quoted here are unique. That is, if they appear in other places in the file, you may end up with a different replacement than you want.

*/

//top border of replace block
startLine="";

//1 or true to delete that line, 0 or false to keep this line and start replacing after it
deleteStartLine=0;

//bottom border of replace block
stopLine="";

//1 or true to delete that line, but add any lines after it, 0 or false to keep this line
deleteStopLine=0;

//code to replace that block with, leave this blank to just delete the block (use \n on Linux or \r on Mac or \r\n on Windows to separate lines)
replaceWith="";

// ************ No need to edit below this line *************
FSO=WScript.CreateObject("Scripting.FileSystemObject");
log=FSO.openTextFile(logfile,8,true);log.writeLine();log.writeLine("*** Starting Log: "+logfile);log.writeLine(new Date());
log.writeLine("Multiple File Block Replace Script");
log.writeLine('Block Definition:')
log.writeLine((deleteStartLine?'From (including)':'After (not including)')+' First line: (startLine)');
log.writeLine(startLine);
log.writeLine();
log.writeLine((deleteStartLine?'To (including)':'Before (Not Including)')+' Last line: (stopLine)');
log.writeLine(stopLine);
log.writeLine();
log.writeLine('Replace this block with: (replaceWith)');
log.writeLine(replaceWith);
log.writeLine('<***END OF REPLACEMENT***>');
log.writeLine();
log.write('Replacing from inputFolder="'+inputFolder+'" <');
inputFolder=FSO.getFolder(inputFolder).path;//get absolute path
log.write(inputFolder+'> '+(subdirs?'and':'without')+' subdirectories to outputFolder="'+outputFolder+'" <');
if(!FSO.folderExists(outputFolder))FSO.createFolder(outputFolder);
outputFolder=FSO.getFolder(outputFolder).path;
log.writeLine(outputFolder+'>');
if(outputFolder.substring(0,inputFolder.length)==inputFolder){
t="Script Error: outputFolder may not be in inputFolder";
log.write(t);WScript.echo(t);
}else rep(inputFolder);
log.writeLine(new Date());log.writeLine(' *** END OF LOG ***');log.writeLine();log.close();
WScript.quit((new ActiveXObject("WScript.Shell")).run("notepad "+logfile));
function rep(f){var t,x=FSO.getFolder(f);
if(x.path.substring(0,inputFolder.length)!=inputFolder){t='Script Assert Error: inputFolder "'+inputFolder+'" does not indlude subfolder "'+f+'"\n(Incorrect assumption in script code)';log.write(t);WScript.echo(t);return;}
var i,m,mm,h,h2,f2=outputFolder+x.path.substring(inputFolder.length);
if(!FSO.folderExists(f2))FSO.createFolder(f2);
for(i=new Enumerator(x.files);!i.atEnd();i.moveNext())if(FSO.GetExtensionName(i.item()).toString().substring(0,3).toUpperCase()=="HTM"){
log.write('"'+i.item().path+'" to "');
h=FSO.openTextFile(i.item().path,1,false);
log.write(t=f2+"/"+i.item().name);
h2=FSO.createTextFile(t,true);
m=0;mm=0;
while(!h.atEndOfStream){
t=h.readLine();
if(m){if(t==stopLine){
m=0;if(!deleteStopLine)h2.writeLine(t);
}}else if(t==startLine){if(!deleteStartLine)h2.writeLine(t);h2.writeLine(replaceWith);m=1;mm++;}
else h2.writeLine(t);
}h.close();h2.close();log.writeLine('" had '+mm+' replacements'+(m?' but never ended its last replacement, which may be an error! WARNING!':''));
}if(subdirs)for(i=new Enumerator(x.subfolders);!i.atEnd();i.moveNext())rep(i.item());}

And the next one uses regular expressions, instead, which are more technical, but if you know them, they are also often better than that block replace method.

Code:

/*

ALL of the following variables are required.


For any file or folder paths:

use forward slashes: "c:/folder/file.ext"
or use 2 slashes for each backslash: "c:\\folder\\file.ext"

Using only one backslash will likely cause errors.

You can use "." to mean the current folder.

*/


//Local Home Directory holding the htm or html files
inputFolder="";

//1 or true to change files in subdirectories, 0 or false to not check subdirectories
subdirs=1;

//path to new folder (will be created if it doesn't exist, but can't be the same as inputFolder)
//outputFolder may not be in inputFolder
outputFolder="";

//log file to see which files get changed, and any warnings
logfile="";


//Regular Expression or string to replace with replaceWith, after the final / you can use i to ignore case or g to replace all matches
match=/type the regexp here/ig;

//string to replace match, leave this blank to just delete the block (use \n on Linux or \r on Mac or \r\n on Windows to separate lines)
replaceWith="";

// ************ No need to edit below this line *************
FSO=WScript.CreateObject("Scripting.FileSystemObject");
log=FSO.openTextFile(logfile,8,true);log.writeLine();log.writeLine("*** Starting Log: "+logfile);log.writeLine(new Date());
log.writeLine("Multiple File Block Replace Script");
log.writeLine('Replace: (match)');
log.writeLine(match);
log.writeLine(' with: (replaceWith)');
log.writeLine(replaceWith);
log.writeLine('<***END OF REPLACEMENT***>');
log.writeLine();
log.write('Replacing from inputFolder="'+inputFolder+'" <');
inputFolder=FSO.getFolder(inputFolder).path;//get absolute path
log.write(inputFolder+'> '+(subdirs?'and':'without')+' subdirectories to outputFolder="'+outputFolder+'" <');
if(!FSO.folderExists(outputFolder))FSO.createFolder(outputFolder);
outputFolder=FSO.getFolder(outputFolder).path;
log.writeLine(outputFolder+'>');
if(outputFolder.substring(0,inputFolder.length)==inputFolder){
t="Script Error: outputFolder may not be in inputFolder";
log.write(t);WScript.echo(t);
}else rep(inputFolder);
log.writeLine(new Date());log.writeLine(' *** END OF LOG ***');log.writeLine();log.close();
WScript.quit((new ActiveXObject("WScript.Shell")).run("notepad "+logfile));
function rep(f){var t,x=FSO.getFolder(f);
if(x.path.substring(0,inputFolder.length)!=inputFolder){t='Script Assert Error: inputFolder "'+inputFolder+'" does not indlude subfolder "'+f+'"\n(Incorrect assumption in script code)';log.write(t);WScript.echo(t);return;}
var i,h,h2,f2=outputFolder+x.path.substring(inputFolder.length);
if(!FSO.folderExists(f2))FSO.createFolder(f2);
for(i=new Enumerator(x.files);!i.atEnd();i.moveNext())if(FSO.GetExtensionName(i.item()).toString().substring(0,3).toUpperCase()=="HTM"){
log.write('"'+i.item().path+'"');
h=FSO.openTextFile(i.item().path,1,false);
log.writeLine(' was converted to "'+(t=f2+"/"+i.item().name)+'"');
h2=FSO.createTextFile(t,true);
t=h.readAll();
h2.write(t=t.replace(match,replaceWith));
h2.write(t);
h.close();h2.close();log.writeLine();
}if(subdirs)for(i=new Enumerator(x.subfolders);!i.atEnd();i.moveNext())rep(i.item());}

If you decide to use one, copy the code, paste in Notepad. Edit the variables at the top of the script, and save as "multifile-replace.js" or any name of .js file. Then, just double-click to run it.

 

Hey PC-XT,
Thanks a million for taking the time to write that code for me, really appreciate it. I'm really not that good with all this stuff though so I'm a bit lost. Let me try and explain my situation a bit better:

So I have some html code for my nav bar on all my pages which I want to be able to change with one bit of code/file...

Heres a sample of the code using cnn as the link:

<ul style="width:150px;">
<li><span class="item-secondary-title" >The Basics</span></li>
<li><a href="http://edition.cnn.com/">CNN</a></li>
<li><a href="http://edition.cnn.com/">CNN</a></li>

<li><span class="item-secondary-title" >CNN</span></li>
<li><a href="http://edition.cnn.com/">CNN</a></li>
<li><a href="http://edition.cnn.com/">CNN</a></li>
<li><a href="http://edition.cnn.com/">CNN</a></li>
<li><a href="http://edition.cnn.com/">CNN</a></li>
<li><a href="http://edition.cnn.com/">CNN</a></li>
<li><a href="http://edition.cnn.com/">CNN</a></li>

So should I put this bit of code into that javascript file you just gave?

Where abouts do I place the javascript file, ill show you my file structure for my site:

(folder) Images
(folder) Support
(folder) Media files
Index.html
page1.html
page2.html etc...

I know I Probably sound like a 5 yr old talking to you but I really don't have a clue what I'm doing, thanks mate

 

My scripts are just tools to (hopefully) make it faster to edit a bunch of files. If there are few files, it's often faster to just manually edit them. Scripts make things faster, but are not always as accurate, which is why backups are good. If you want to try my scripts, I would recommend the following: (I'll try to keep it as simple as possible, but there are a few notes.)

Step 1: Define the area to replace
This is usually the hardest step for me, so don't worry if you have to ask a few more questions before you understand it, but I'll try to walk you through.

First, define the area of the old nav bar you want replaced, using code from one of the html files. It is best if the nav bar is in a div marked like <div id="navbar">navbar</div> where navbar is the navbar code, and there is no other code in that div. Not everything is that straightforward, though.

If I assume there is no other part of any page that starts with the line <ul style="width:150px;"> and also assume the end of the nav bar is the line </ul> I would have what I need to define the area using either script I gave above, but if there happened to be another <ul style="width:150px;"> line in any of the files, it would also be replaced. The log would let you see problems like this, so you can fix them manually.

Step 2: Editing my script
Once you think you have a way to define the area, put that in the script I gave above. (We'll try the first script of the two.) So for the assumptions I gave above, you could try: (use your own locations, as you probably don't have a user named "me" on your computer, and it may use different paths, anyway.)

Code:

inputFolder="C:/Documents and Settings/me/My Documents";
//remember to not use \ backslashes, as they need to be doubled to work right

subdirs=0;

outputFolder="C:/Documents and Settings/me/Desktop/test";//this needs editing

logfile="C:/Documents and Settings/me/Desktop/testlog.txt";//this needs editing

startLine='<ul style="width:150px;">';

deleteStartLine=1;

stopLine="</ul>";

deleteStopLine=1;

replaceWith='<script type="text/javascript" src="navbar.js"></script>';
//We'll try this for now, then make navbar.js fairly easily in step 4.

If you have html files in different folders inside inputFolder, such as in Support, you should either redo this for the other folder, changing the replaceWith src to navbar.js to be "../navbar.js", for instance, or change the following to attempt it in one step:

The rest of the script doesn't need changing. Save this on your desktop as test.js and close it to get it out of the way.

If your site relies on JavaScript already, that should be fine. Few people have JavaScript disabled, but there are some. For something as necessary as a navigation bar, I would probably have a link to the site map for people whose company disabled their JavaScript or those using devices that don't understand it completely. If your site already has other navigation links, or some other way to navigate, you won't need to worry about that. If you do want to include a link, simply add it to replaceWith. If you enclose it in <noscript>...</noscript> it will usually not be displayed if the navbar is, but some devices are in a gray area, where they won't display either, or will display both, though it's quite rare. So, an example of that would be:
replaceWith='<script type="text/javascript" src="navbar.js"></script><noscript><a href="sitemap.html">Site Map</a></noscript>';

I just mentioned it since now is the easiest time to add it, but, as I said, you probably don't need it.

If you want to change it later, it would be easier to use the second script. It would be the same, except you set replaceWith to the new code, and set match to the string you used in this replaceWith. This is simpler, because navbar.js isn't going to be repeated in the rest of the code.


Step 3: Performing the replacement
Run the script by double-clicking the test.js icon on your desktop. It will take a little while to run before opening the log in notepad, so we can check it. If you get an error message instead, open the log to see if it has anything. If there is no log, check the edits you made in step 2. Otherwise, the log may tell what the problem is.

As I said above, if there happened to be another <ul style="width:150px;"> line in a file, you would see that in the log, (as more than 1 replacement,) and can correct it by copying the file again, and making the replacement by hand. You could also do the replacement by hand if the code in a file happened to be different enough that nothing was replaced.

If there are many problems, you can try going back to step 1 to find another way to define the area, instead of manually editing. If you do, you can save any files that seem to be correctly changed by moving them to a different folder or changing the outputFolder variable in my script.

Step 4: Making navbar.js
Once you get this far, most of the hard part is done, and we can make the navbar.js file. There are lots of ways to do this, but I'll keep it simple.

Code:

window.document.write('<ul style="width:150px;"><li><span class="item-secondary-title" >The Basics</span></li><li><a href="http://edition.cnn.com/">CNN</a></li><li><a href="http://edition.cnn.com/">CNN</a></li><li><span class="item-secondary-title" >CNN</span></li><li><a href="http://edition.cnn.com/">CNN</a></li><li><a href="http://edition.cnn.com/">CNN</a></li><li><a href="http://edition.cnn.com/">CNN</a></li><li><a href="http://edition.cnn.com/">CNN</a></li><li><a href="http://edition.cnn.com/">CNN</a></li><li><a href="http://edition.cnn.com/">CNN</a></li></ul>');

Make sure the code doesn't contain a linebreak (by pressing enter) or ' apostrophe or \ backslash, which would break it. Save the code as "navbar.js" in the test directory. You can test it with the following html:

Code:

<html><head></head><body><script type="text/javascript" src="navbar.js"></script></body></html>

saved in a temporary html file in the test directory. Delete this test file after viewing. (You might want to also add css code, or a link to the css file, to see it with your styles applied.)

From now on, when you want to change the nav bar, you'll just need to change this one file, and not have to go through this whole process again.

If you don't like this script, there are others you can use, such as ones that load the nav bar from a separate file as XML so you don't need to worry about ' and \

You can try different things, since it's easy to change just this one file, and possibly add others, if needed.

Step 5: Getting it to finally work
You should have a backup of the original files. Make sure, because you are about to overwrite them. Make another one, to be safe.

Open the test folder made in Step 3. Press Ctrl+A to select all the files. Move them all into the folder with the original files. (The folders should look basically the same, with identically named html files, but the original one may have more than just html files.) A message should come up asking if you want to overwrite them. Click Yes to All. That should install the files, so you can fully test them.

Try as many different html files as you can, to make sure they work. I usually go through the full site. Once you are confident, you can upload them. If you later see an error, you have the originals backed up, and can look at the files to see how to edit it.


That's it!

Now you may know why I sometimes just edit the files by hand, even though I can make these tools. ;P

If you need help, feel free to post your questions.

 

If you decide to upgrade your site, you can use php instead and use include.

http://www.tizag.com/phpT/include.php

 

Yes, if your server supports PHP, this would likely be best. You would need to rename the files to have a php extension, and use an include statement like <?php include('navbar.php');?> instead of the javascript one. That would avoid those problems that JavaScript has with some browsers.

navbar.php could have just the raw html of the nav bar.