PDA

View Full Version : 100 HTML pages, want to fill specifics of each page once.



donelson
May 6th, 2012, 11:26 PM
I have about 100 pages of HTML, and I want to only have to put in the specific data once. My Javascript is rusty and I am on a short fuse, unfortunately, so some help would be appreciated.

All pages have one picture with URL path to the image, an initial width, and a title string.

I would like to define these once in a Javascript etc, and have a script plug those values into the page Title, the width of the pic <img> tag, the URL of the src of the pic, and a text title in the body (above the pic) of the page.

--

I think I need <body onload="mySetup('myTitle string', picWidth, '<picURL>')>

then in the script I would need:
window.title = myTitle;
bodyText.innerHTML = myTitle;
myPic.width = picWidth;
myPic.src = picURL;
myPic.alt = myTitle;

then
<img id="myPic" onclick="myClickHandler( )">

---------------

But messing about with this has not gotten me a working page.

Would some kind person help out?

Thanks!

Old Pedant
May 7th, 2012, 12:56 AM
Show us ONE of the HTML pages?

donelson
May 7th, 2012, 01:13 AM
Show us ONE of the HTML pages?

Thanks. Please don't laugh! :D

<html>
<head>
<title>Gets replaced</title>

<script language="JavaScript">
origWidth = 0;

function myOnLoad(myTitle, picWidth, picURL) {
window.title = myTitle;
bodyText.innerHTML = myTitle;
myPic.width = picWidth;
origWidth = picWidth;
myPic.src = picURL;
myPic.alt = myTitle;
}

function myToggleSize( ) {
if (myPic.width == origWidth) pic.width = 1920;
else pic.width = origWidth;
}
</script>
</head>

<body onload="myOnLoad('Test Page', 800, '../hs/pTest.jpg')">
<div align="center">
<p><font size="+2">
<span id="bodyText" style="font-family: Verdana;">gets replaced</span>
</font>
<br><br>

<img id="myPic" onClick="myToggleSize( )" >
</p>
</div>
</body>
</html>

Old Pedant
May 7th, 2012, 01:44 AM
<script type="text/javascript">
origWidth = 0;
var pic;

function myOnLoad(myTitle, picWidth, picURL) {
window.title = myTitle;
document.getElementById("bodyText").innerHTML = myTitle;
pic = document.getElementById("myPic");
pic.width = picWidth;
origWidth = picWidth;
pic.src = picURL;
pic.alt = myTitle;
}

function myToggleSize( ) {
if (pic.width == origWidth) pic.width = 1920;
else pic.width = origWidth;
}
</script>

You weren't using document.getElementById( ).

Your code would work in MSIE (except where you had pic.width) because MSIE allows the bare use of an ID to reference the element with that id (so myPic would indeed reference id="myPic"), but it wouldn't work in any other browser.

Oh...and language= is long obsolete. See above.

Old Pedant
May 7th, 2012, 01:51 AM
Of course, you could be even a bit more modern:


<html>
<head>
<title>Gets replaced</title>
<style type="text/css">
#bodyText {
font-family: Verdana;
font-size: large;
}
</style>
<script type="text/javascript">
origWidth = 0;
var pic;

function myOnLoad(myTitle, picWidth, picURL) {
window.title = myTitle;
document.getElementById("bodyText").innerHTML = myTitle;
pic = document.getElementById("myPic");
pic.width = picWidth;
origWidth = picWidth;
pic.src = picURL;
pic.alt = myTitle;
pic.onclick = myToggleSize;
}

function myToggleSize( ) {
if (pic.width == origWidth) pic.width = 1920;
else pic.width = origWidth;
}
</script>
</head>
<body onload="myOnLoad('Test Page', 800, '../hs/pTest.jpg')">
<div align="center">
<span id="bodyText">gets replaced</span>
<br><br>
<img id="myPic" />
</div>
</body>
</html>

And so on.

I'd suggest moving the onload from the <body>, but I suspect that you'd prefer to keep it there, given how you said you wanted to do your pages.

donelson
May 7th, 2012, 01:56 AM
I'd suggest moving the onload from the <.body>, but I suspect that you'd prefer to keep it there, given how you said you wanted to do your pages.

Ah, where would it be best for the onload? Should it not be a function but just straight code inline after the first <.script> tag?

Like this?

<html>
<head>
<title>Gets replaced</title>
<style type="text/css">
#bodyText {
font-family: Verdana;
font-size: large;
}
</style>

<script type="text/javascript">
myTitle = "Text Page";
picWidth = 800;
picURL = "../hs/Test.jpg";

origWidth = 0;
var pic;

window.title = myTitle;
document.getElementById("bodyText").innerHTML = myTitle;
pic = document.getElementById("myPic");
pic.width = picWidth;
origWidth = picWidth;
pic.src = picURL;
pic.alt = myTitle;
pic.onclick = myToggleSize;

function myToggleSize( ) {
if (pic.width == origWidth) pic.width = 1920;
else pic.width = origWidth;
}
</script>
</head>
<body>
<div align="center">
<span id="bodyText">gets replaced</span>
<br><br>
<img id="myPic" />
</div>
</body>
</html>

Old Pedant
May 7th, 2012, 02:58 AM
You can't put the getElementById *before* the element with the ID is defined.

One easy thing to do is just put the <script> tag *AFTER* all of your content.

For example, just before the </body> tag.

But another way is to use the code as I gave it above and then add in


window.onload = function() { myOnLoad('Test Page', 800, '../hs/pTest.jpg'); };

just before the </script> tag.

donelson
May 7th, 2012, 08:03 AM
<font size="+3"><b><span id="bodyText">gets replaced</span></b></font>

Thanks, but this bit seems to ignore any font size I select, though.

And the window.title needs to be: window.document.title;

Old Pedant
May 7th, 2012, 08:23 AM
If you have CSS for

<style>
#bodyText { ... }
</style>
then it will of course override your <font> tag.

But <font> is deprecated, anyway, so why use it?

If you don't want to use <style>, put the style="..." in the <span>.


And yes, you are right about title. I just copied what you had and didn't pay attention.

donelson
May 7th, 2012, 08:40 AM
If you have CSS for

<style>
#bodyText { ... }
</style>
then it will of course override your <font> tag.

But <font> is deprecated, anyway, so why use it?

If you don't want to use <style>, put the style="..." in the <span>.

And yes, you are right about title. I just copied what you had and didn't pay attention.

Ah yes, I should get away from <font tags> etc.

May I ask how you would set up this page "cleanly" ?
(and to work on Safari, Firefox, and Chrome, if that is possible)

Old Pedant
May 7th, 2012, 08:51 AM
I think it depends a lot on how you want to code the part that *IS* different on each page.

I assume the JavaScript will just be in an include file (that is, via <script type="text/javascript" src="whatever.js"></script> so the part that *can't* be in that file will determine the best and/or easiest way.

donelson
May 7th, 2012, 08:59 AM
I think it depends a lot on how you want to code the part that *IS* different on each page.

I assume the JavaScript will just be in an include file (that is, via <script type="text/javascript" src="whatever.js"></script> so the part that *can't* be in that file will determine the best and/or easiest way.

Yes, ideally each document will have the same "raw" contents. I will actually put all the bits of info specific to each page in a .js array to be included on each page, and then based on the file name, extract and fill out each particular page at runtime. That means I can change around the .js code and the params for each page in one place.

I was more interested in how you would use CSS to set up this page cleanly, as I have little experience with it (yes, it's been a while for me :rolleyes: )

donelson
May 7th, 2012, 03:41 PM
Further question... (Deleted by myself. Found answer)

Old Pedant
May 7th, 2012, 09:08 PM
Oh...the CSS only. Well, again, it's the usual answer to all programming questions: "It depends..."

Will the appearance be the same on all pages? Or will it vary, based on other page content.

If it's the same on all pages, then clearly putting the CSS into a ".css" file and including that file in all pages is best. But if it's not the same on all pages, then quite frankly I don't think there is a one-size-fits-all answer.

donelson
May 7th, 2012, 10:04 PM
Oh...the CSS only. Well, again, it's the usual answer to all programming questions: "It depends..."

Will the appearance be the same on all pages? Or will it vary, based on other page content.

If it's the same on all pages, then clearly putting the CSS into a ".css" file and including that file in all pages is best. But if it's not the same on all pages, then quite frankly I don't think there is a one-size-fits-all answer.

I am using only one page now, with the ID sent in via ?search on the URL. The pics and titles and actions are determined from an array. Works well. The CSS could probably be improved, but not sure about how.



<html>
<head>

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

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
}
-->
</style></head>

<body>
<br><br>
<div align="center" style="font-family: Verdana;" >
<img style="width: 101px; height: 121px;" src="../../graphics/Logo_256x306.png"
alt="My Systems Logo" align="middle">

<b><span style="font-size:x-large">My Systems Ltd</span></b><br>

<a href="javascript:closeHack( );" style="font-size:medium">Return to My Demo</a><br><br>

<span style="font-size:medium">Extended information, videos, pictures, text, databases, <br>
diagrams and annotation systems etc, may be inserted here.</span><br><br>

<b><span id="bodyText" style="font-size:large">.</span></b>
<br><br>

<span id="zoomText" style="font-size:small">Click or tap to zoom in / out</span><br>

<img id="myPic" onClick="myToggleSize( )"/>
</div>
</body>
</html>
</head>


<script> // hspagecode.js
normalWidth = 900; // standard width for each pic
origWidth = normalWidth;
zoomWidth = 0;
var pic;

function myOnLoad( ) {

myTitle = "";
hsnum = location.search.substring(1,50);
i = hsinfo.indexOf("hs" + hsnum);

if ( i < 0 ) {
i = 0; // show error page
myTitle = ": " + hsnum;
}

myTitle = hsinfo[i+1] + myTitle;
picURL = "pics/" + hsinfo[i+2];
zoomWidth = hsinfo[i+3];

window.document.title = "My Demo - " + myTitle;
document.getElementById("bodyText").innerHTML = "<font size='+2'>" + myTitle + "</font>";

if ( zoomWidth < normalWidth ) {
origWidth = zoomWidth; // no zoom
document.getElementById("zoomText").innerHTML = " ";
} else origWidth = normalWidth;

pic = document.getElementById("myPic");
pic.width = origWidth;
pic.src = picURL;
pic.alt = myTitle;
pic.onclick = myToggleSize;
}

function myToggleSize( ) {
if (pic.width == origWidth)
pic.width = zoomWidth;
else {
pic.width = origWidth; // zoom back
window.scroll(0,0); // scroll to top of page
}
}

// This is a hack to close the More Info
// windows some iPad web pages (via home screen icon)
function closeHack() {
var t=setTimeout("myCloseSubstitute()",500);
// sometimes self.close does not work on iPad,
// so use timer to go back to Demo page
self.close( );
}

function myCloseSubstitute() {
// window.history.go(-1);
self.open("/index.html", "_self", false);
}

window.onload = function() {
myOnLoad( );
};
</script>

<script> // hsinfo.js -- NOTE: this is about 120 x 4 elements in reality
var hsinfo = new Array(
"notFound", "ERROR: Hotspot not found", "error.jpg", 512,
"hsHelp", "Usage Information", "Help.jpg", 896,
"hs45", "item 1", "p123_big.jpg", 1920,
"hs46", "item 2", "e046_e047_big.jpg", 1436,
"hs47", "item 3", "e046_e047_big.jpg", 1436 );
</script>

Old Pedant
May 7th, 2012, 10:21 PM
Well, in that case, I wouldn't have *ANY* style="..." inline in your HTML tags.

I'd move it all to the <style> block.

*ONE* way of doing it:


<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
}
.content {
font-family: verdana;
font-size: medium;
text-align: center;
}
.content img {
width: 101px; height: 121px;
}
span.pageTitle {
font-size: x-large;
font-weight: bold;
}
span#bodyText {
font-size: large;
font-weight: bold;
}
span#zoomText {
font-size: small;
}
</style>
</head>
<body>
<br/><br/>
<div class="content">
<img src="../../graphics/Logo_256x306.png" alt="My Systems Logo" />

<span class="pageTitle">My Systems Ltd</span>
<br/>
<a href="javascript:closeHack( );">Return to My Demo</a>
<br/><br/>
<span>Extended information, videos, pictures, text, databases,
<br/>
diagrams and annotation systems etc, may be inserted here.</span>
<br/><br/>
<span id="bodyText">.</span>
<br/><br/>
<span id="zoomText">Click or tap to zoom in / out</span>
<br/>
<img id="myPic" onClick="myToggleSize( )" />
</div>
</body>

donelson
May 8th, 2012, 07:57 AM
Very interesting. Not sure I understand how some of your CSS works though...

1. How does this affect the second image? id=myPic? if not, why not?

.content img {
width: 101px; height: 121px;
}

2. why span.something versus span#something ?
. defines a class, and # to affect only particular named elements?

3. How does the javascript fit in?

4. Why would you want to move the sizes away from the elements they act on? Doesn’t that make it harder to read?

5. Do you have to use: small, medium, large, etc, or can you use point sizes?

6. Don't you find <br/> to be "noisy" compared to <br> ? Makes the HTML harder to read? Is there any *real* difference?

7. Are <spans> the preferred way to use CSS?


Since I am new to CSS, these are real puzzles to me. Old tags were clear and easy to understand. CSS is a layer of abstraction, especially for simple documents, imho. But again, I am just learning. There must be a reason to use CSS this way, I just don't see it.

Old Pedant
May 8th, 2012, 08:58 PM
Very interesting. Not sure I understand how some of your CSS works though...

1. How does this affect the second image? id=myPic? if not, why not?

.content img {
width: 101px; height: 121px;
}
Goof on my part. Sorry. Since your JS code overrides the width of id=myPic, that's not an issue. But the height still would be. So this should have been based on an id or class for the other <img>.



2. why span.something versus span#something ?
. defines a class, and # to affect only particular named elements?

# affects ID'ed elements. Names are not involved at all.

You use .something so you can affect more than one of the same thing, as IDs are supposed to be unique.



3. How does the javascript fit in?
??? Not relevant to CSS, really, except when it overrides existing styles, of course.


4. Why would you want to move the sizes away from the elements they act on? Doesn’t that make it harder to read?
LOL! That's a debate I've been having with my own design/layout guy!!!

Personally, I don't mind inline styles at all. He abhors them. He wants *EVERYTHING* in the style sheet so that he can alter everything without touching the HTML. I'm not going to make the call on this one. You have to work that out for yourself.



5. Do you have to use: small, medium, large, etc, or can you use point sizes?

If you use fixed sizes, then people with limited vision can't as easily change your page to make it more readable. Some browsers will let them override the fixed sizes, some won't. All browsers allow users to "soom" when you use the named sizes.



6. Don't you find <br/> to be "noisy" compared to <br> ? Makes the HTML harder to read? Is there any *real* difference?

Unclosed tags of ANY kind--<br>, <input>, etc.--are verboten in XHTML.

You decide: Want to use XHTML or HTML?



7. Are <spans> the preferred way to use CSS?

Preferred over <font>? Yes. But there are many other usable tags. <span>s have the advantage that they are "inline" elements, where as <div> is a "block" element. You can read up on the differences. Of course, you can override either: You can do <div style="display: inline;">, for example.



Since I am new to CSS, these are real puzzles to me. Old tags were clear and easy to understand. CSS is a layer of abstraction, especially for simple documents, imho. But again, I am just learning. There must be a reason to use CSS this way, I just don't see it.
I'm by no means an authority on CSS. Mostly what I showed you is the way my design/layout partner builds the pages that I then add the JS and server-side code to.

donelson
May 8th, 2012, 09:03 PM
Thanks very much for your time and support, OP.