Text change

[Henning Vestergaard Poulsen]

Hi, I have a problem that I hope someone can help me with.

I'm building a web page with pictures I've taken with my digital camera. I
have succeded making a javacript that, when clicking on a thumbnail, it
changes the main image.

Now, I would like to put an explanation (and date and some EXIF-info) to
each photo so some text is shown next to the main photo when loaded.
I don't know how to change the text without reloading the whole page, and I
don't want that.

Was this understandable?

Thanks,
Henning

[George Ziniewicz]

>"Henning Vestergaard Poulsen" <hv*@livgarden. dk> wrote in message news:BB5F44BD.1 089B%hv*@livgar den.dk...

Hi, I have a problem that I hope someone can help me with. I'm building a web page with pictures I've taken with my digital camera. I
have succeded making a javacript that, when clicking on a thumbnail, it
changes the main image. Now, I would like to put an explanation (and date and some EXIF-info) to
each photo so some text is shown next to the main photo when loaded.
I don't know how to change the text without reloading the whole page, and I
don't want that.

I have been doing alot with slideshows lately, I've used a form/input/text widget to display in a single line the file name and other info (cross-browser), and I've used some divs and innerHTML to change multiline onscreen descriptive info to match the pic (not sure how cross-browser that is). You could also set a form/input/textarea for multiline info.
If I had a real lot of info I might put it in a scrolling div.
You can also stuff the image's alt tag so the info pops up via the mouse (I set it to either the filename or info about "click to hold/continue"), not sure if that is an IE only thing.

IE: http://zintel.com/picsel.html

cross-browser?: http://zintel.com/cb_start.html

zin

[Andy Fish]

in the HTML where you want the text to go, just put this:

<span id="the_label"> no picture selected</span>

then in javascript you can say

document.formna me.the_label.in nerHTML = "..text to go in here...";

I'm not sure whether it's better to use <span> or <div> but I think both
will work the same in this case.

Andy

"Henning Vestergaard Poulsen" <hv*@livgarden. dk> wrote in message
news:BB5F44BD.1 089B%hv*@livgar den.dk...

Hi, I have a problem that I hope someone can help me with.

I'm building a web page with pictures I've taken with my digital camera. I
have succeded making a javacript that, when clicking on a thumbnail, it
changes the main image.

Now, I would like to put an explanation (and date and some EXIF-info) to
each photo so some text is shown next to the main photo when loaded.
I don't know how to change the text without reloading the whole page, and I don't want that.

Was this understandable?

Thanks,
Henning

[Lasse Reichstein Nielsen]

"Andy Fish" <aj****@blueyon der.co.uk> writes:

in the HTML where you want the text to go, just put this:

<span id="the_label"> no picture selected</span>

then in javascript you can say

document.formna me.the_label.in nerHTML = "..text to go in here...";
I doubt this will work in many browsers. The notation
"document.formN ame.x" itself requries the browser to make the form
elements properties of the document element, and not all browsers do
so. It is safer to use "document.f orms['formName'].elements['x']".
Still, this only works if "x" is the name of an input element (or
select, button or textares), and it will not work for a span.

I recommend using
document.getEle mentById("the_l abel")
(possibly backed up by "document.a ll['the_label']" for IE4) to access
the element you want to change the content of. You can then use
".innerHTML=new Content" to change the content or you can use DOM
methods ( ".firstChild.no deValue=newCont ent").
I'm not sure whether it's better to use <span> or <div> but I think both
will work the same in this case.

That depends on whether you need a block element or an inline element.

/L 'please don't top post'
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'

[Andy Fish]

"Lasse Reichstein Nielsen" <lr*@hotpop.com > wrote in message
news:br******** **@hotpop.com.. .

"Andy Fish" <aj****@blueyon der.co.uk> writes:

in the HTML where you want the text to go, just put this:

<span id="the_label"> no picture selected</span>

then in javascript you can say

document.formna me.the_label.in nerHTML = "..text to go in here...";

I doubt this will work in many browsers. The notation
"document.formN ame.x" itself requries the browser to make the form
elements properties of the document element, and not all browsers do
so. It is safer to use "document.f orms['formName'].elements['x']".
Still, this only works if "x" is the name of an input element (or
select, button or textares), and it will not work for a span.

I recommend using
document.getEle mentById("the_l abel")
(possibly backed up by "document.a ll['the_label']" for IE4) to access
the element you want to change the content of. You can then use
".innerHTML=new Content" to change the content or you can use DOM
methods ( ".firstChild.no deValue=newCont ent").

I'm not sure whether it's better to use <span> or <div> but I think both
will work the same in this case.

That depends on whether you need a block element or an inline element.

You're right, of course.

I had a working example but copied the wrong section into the post (not my
day today !)

[Joe Kelsey]

Lasse Reichstein Nielsen <lr*@hotpop.com > wrote in message news:<br******* ***@hotpop.com> ...

I recommend using
document.getEle mentById("the_l abel")
(possibly backed up by "document.a ll['the_label']" for IE4) to access
the element you want to change the content of. You can then use
".innerHTML=new Content" to change the content or you can use DOM
methods ( ".firstChild.no deValue=newCont ent").

Assigning to nodeValue only works for TextNode's and then only inserts
text with no complex structure.

How about:

var label = document.getEle mentById ("the_label" );
var myText = document.create TextNode ("my new text");
if (label.hasChild Nodex)
{
label.replaceCh ild (myText, label.firstChil d);
}
else
{
label.appendChi ld (myText);
}

You can then make arbitrarily comblex document structures instead of
just TextNode's as labels (bolding, tables, span, div, etc.).

BTW, the slide show does not work in Mozilla. I tried to step through
the code in the debugger, but I could not find a specific bad spot.

/Joe

[Dr John Stockton]

JRS: In article <BB************ ****@livgarden. dk>, seen in
news:comp.lang. javascript, Henning Vestergaard Poulsen
<hv*@livgarden. dk> posted at Wed, 13 Aug 2003 01:28:29 :-

Hi, I have a problem that I hope someone can help me with.

I'm building a web page with pictures I've taken with my digital camera. I
have succeded making a javacript that, when clicking on a thumbnail, it
changes the main image.

Now, I would like to put an explanation (and date and some EXIF-info) to
each photo so some text is shown next to the main photo when loaded.
I don't know how to change the text without reloading the whole page, and I
don't want that.

Was this understandable?

Yes. But I do not understand why you are not using the method in the
FAQ, section 4.15.

Thoughts : if the page holds the text for all main photos, then the user
must download it all; would it not be better to show it by the
thumbnails? Alternatively, if the texts are larger, is it possible to
import them on demand, as the picture is imported (that could certainly
be done by importing a picture of the text)?

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
<URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> JS maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/JS/&c., FAQ topics, links.

[Henning Vestergaard Poulsen]

> Yes. But I do not understand why you are not using the method in the

FAQ, section 4.15.
Where do I find that FAQ, section 4.15?
Thoughts : if the page holds the text for all main photos, then the user
must download it all; would it not be better to show it by the
thumbnails? Alternatively, if the texts are larger, is it possible to
import them on demand, as the picture is imported (that could certainly
be done by importing a picture of the text)?

I've designed the page such that all the thumbnails are in a bottom frame,
and when you click one, the main image on the main frame shows the
respective photo. It would be nice if there could be some text explaining
what's happening on the photo, the time and some photographic nerd-stuff
(some EXIF data.) The user (I have not many visitors - I think only myself,
it's just fun to have a home page though) may then click on the interesting
photos, and he/she doesn't have to read info on the photos that are not
loaded. However, it may be interesting, though, to show the text on
MouseOver.

I guess I was looking for a HTML text property that could be changed using
JS. I didn't know how to use SPAN or DIV, but I'll look into that.

[Dr John Stockton]

JRS: In article <br**********@h otpop.com>, seen in
news:comp.lang. javascript, Lasse Reichstein Nielsen <lr*@hotpop.com >
posted at Wed, 13 Aug 2003 13:39:27 :-

I recommend using
document.getEle mentById("the_l abel")
(possibly backed up by "document.a ll['the_label']" for IE4) to access
the element you want to change the content of. You can then use
".innerHTML=ne wContent" to change the content or you can use DOM
methods ( ".firstChild.no deValue=newCont ent").

H'mmm. Yes and no.

To write a freshly-computed string S into an existing page at location L
requires
X(L, S)

for some well-chosen function name X - DynWrite seems suitable.

Even if it is called from only one place in the source, the operation
should for modularity and legibility be done by a subroutine.

If it is called from more than one place in the source, the operation
should also be done by a subroutine for compactness.

Multi-page sites can tuck the function away in a communal include file.

Even if the reader does not understand how the body of X works, the
separation of the complications prevents adding confusion in
understanding the part of the code surrounding the call.

The function in FAQ 4.15 seems OK to me; is improvement possible?
ISTM that it uses the technique you advocate.

N.B. Whether or not one wants to code positively for IE4-type &
NS4-type browsers, ISTM that for a Web page IE4 & NS4 ought at least to
fail benignly, but perceptibly.
A Web user of DynWrite should program (IMHO) at least the first call of
DynWrite as

if (!DynWrite(L, S)) alert('Problem! ')

or some refinement thereof, where S is a test string.
I believe the present FAQ version could be compacted by
if (!!document.all ) DocStr="return document.all[id]" // etc.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
<URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> JS maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/JS/&c., FAQ topics, links.

[Lasse Reichstein Nielsen]

Dr John Stockton <sp**@merlyn.de mon.co.uk> writes:

H'mmm. Yes and no.

To write a freshly-computed string S into an existing page at location L
requires
X(L, S)

for some well-chosen function name X - DynWrite seems suitable.

Even if it is called from only one place in the source, the operation
should for modularity and legibility be done by a subroutine.
Modularity is good, but in projects of such miniscule size as a single
web page, it doesn't increase legibility more than a well chosen
comment. It probably even increases the size of the file.
If it is called from more than one place in the source, the operation
should also be done by a subroutine for compactness.
It is always a good idea to factor out common code. If for nothing
else, it avoids needing to syncronize the different versions. A bug
that is only fixed in some of the cases is even harder to find when
you believe you already fixed it.
The function in FAQ 4.15 seems OK to me; is improvement possible?
I positively hate it, but that is because I dislike the Function
constructor as much as eval, or even more (its scope rules irritate
me too).
Having two levels of programming language present at the same time
significantly complicates reasoning about the program.

In, e.g.,
x + Function("y","r eturn y+x")(4)
when the "x + Function( )(4)" is executed, it is already parsed
(or even compiled in the case of JScript.NET), while "return y+x"
is living as a language level string.
Syntax highlighting fails for code-as-values, syntax errors are
caught late instead of early, ... I can't find anything good to
say about it. Function and eval should be used for dynamic code
only, not for when the programmer knows that its one of three
prewritten options.
ISTM that it uses the technique you advocate.
It does, although using other features that I don't advocate.
(what does ISTM mean, btw? I probably should know, but it escapes
me at the moment)

Here is my suggestion. It is longer, but (IMNSHO) prettier, and it
works in hypothetical browsers that support DOM but not innerHTML.

---
var getRef;
if (document.getEl ementById) {
getRef = function(id){re turn document.getEle mentById(id);}
} else if (document.all) {
getRef = function(id){re turn document.all[id];}
} else if (document.layer s) {
getRef = function(id){
function searchLayers(do c) {
if (doc.layers[id]) {return doc.layers[id];}
for(var i=0;i<doc.layer s.length;i++) {
var res = searchLayers(do c.layers[i].document);
if (res) {return res;}
}
}
return searchLayers(do cument); // search layers recursively
}
}

var setText;
if (document.creat eTextNode) {
setText = function(node,t ext) {
while(node.hasC hildNodes()) { // clear children
node.removeChil d(elem.lastChil d);
}
node.appendChil d(document.crea teTextNode(text ));
}
} else if (document.body && document.body.i nnerHTML) {
setText = function(node,t ext) {
node.innerHTML = text;
}
} else if (document.layer s) {
setText = function(node,t ext) { // assume node is an NS4 layer
node.document.o pen();
node.document.w rite(text);
node.document.c lose();
}
}

function dynWrite(id,tex t) {
if (!getRef || !setText) {return;}
var elem = getRef(id);
if (!elem) {return;}
setText(elem,te xt);
}
---
(tested in Opera 7, IE6, MozFB, and Netscape 4.80)
N.B. Whether or not one wants to code positively for IE4-type &
NS4-type browsers, ISTM that for a Web page IE4 & NS4 ought at least to
fail benignly, but perceptibly.
In that case, one can drop the document.layers part of the above.
A Web user of DynWrite should program (IMHO) at least the first call of
DynWrite as

if (!DynWrite(L, S)) alert('Problem! ')

or some refinement thereof, where S is a test string.
An exception handler might be better, but then it won't work in
Netscape 4. Sadly the "try/catch" construction isn't backwards
compatible (and ironically, you can't catch the error :).
I believe the present FAQ version could be compacted by
if (!!document.all ) DocStr="return document.all[id]" // etc.

The "!!" is not necessary in an if condition, it is converted to a
boolean anyway.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'