By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,003 Members | 1,143 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,003 IT Pros & Developers. It's quick & easy.

Text change

P: n/a
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

Jul 20 '05 #1
Share this Question
Share on Google+
15 Replies


P: n/a
>"Henning Vestergaard Poulsen" <hv*@livgarden.dk> wrote in message news:BB5F44BD.1089B%hv*@livgarden.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
Jul 20 '05 #2

P: n/a
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.formname.the_label.innerHTML = "..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.1089B%hv*@livgarden.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

Jul 20 '05 #3

P: n/a
"Andy Fish" <aj****@blueyonder.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.formname.the_label.innerHTML = "..text to go in here...";
I doubt this will work in many browsers. The notation
"document.formName.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.forms['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.getElementById("the_label")
(possibly backed up by "document.all['the_label']" for IE4) to access
the element you want to change the content of. You can then use
".innerHTML=newContent" to change the content or you can use DOM
methods ( ".firstChild.nodeValue=newContent").
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.'
Jul 20 '05 #4

P: n/a

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:br**********@hotpop.com...
"Andy Fish" <aj****@blueyonder.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.formname.the_label.innerHTML = "..text to go in here...";


I doubt this will work in many browsers. The notation
"document.formName.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.forms['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.getElementById("the_label")
(possibly backed up by "document.all['the_label']" for IE4) to access
the element you want to change the content of. You can then use
".innerHTML=newContent" to change the content or you can use DOM
methods ( ".firstChild.nodeValue=newContent").
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 !)

Jul 20 '05 #5

P: n/a
Lasse Reichstein Nielsen <lr*@hotpop.com> wrote in message news:<br**********@hotpop.com>...
I recommend using
document.getElementById("the_label")
(possibly backed up by "document.all['the_label']" for IE4) to access
the element you want to change the content of. You can then use
".innerHTML=newContent" to change the content or you can use DOM
methods ( ".firstChild.nodeValue=newContent").


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

How about:

var label = document.getElementById ("the_label");
var myText = document.createTextNode ("my new text");
if (label.hasChildNodex)
{
label.replaceChild (myText, label.firstChild);
}
else
{
label.appendChild (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
Jul 20 '05 #6

P: n/a
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.demon.co.uk/js-index.htm> JS maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/JS/&c., FAQ topics, links.
Jul 20 '05 #7

P: n/a
> 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.

Jul 20 '05 #8

P: n/a
JRS: In article <br**********@hotpop.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.getElementById("the_label")
(possibly backed up by "document.all['the_label']" for IE4) to access
the element you want to change the content of. You can then use
".innerHTML=newContent" to change the content or you can use DOM
methods ( ".firstChild.nodeValue=newContent").


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.demon.co.uk/js-index.htm> JS maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/JS/&c., FAQ topics, links.
Jul 20 '05 #9

P: n/a
Dr John Stockton <sp**@merlyn.demon.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","return 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.getElementById) {
getRef = function(id){return document.getElementById(id);}
} else if (document.all) {
getRef = function(id){return document.all[id];}
} else if (document.layers) {
getRef = function(id){
function searchLayers(doc) {
if (doc.layers[id]) {return doc.layers[id];}
for(var i=0;i<doc.layers.length;i++) {
var res = searchLayers(doc.layers[i].document);
if (res) {return res;}
}
}
return searchLayers(document); // search layers recursively
}
}

var setText;
if (document.createTextNode) {
setText = function(node,text) {
while(node.hasChildNodes()) { // clear children
node.removeChild(elem.lastChild);
}
node.appendChild(document.createTextNode(text));
}
} else if (document.body && document.body.innerHTML) {
setText = function(node,text) {
node.innerHTML = text;
}
} else if (document.layers) {
setText = function(node,text) { // assume node is an NS4 layer
node.document.open();
node.document.write(text);
node.document.close();
}
}

function dynWrite(id,text) {
if (!getRef || !setText) {return;}
var elem = getRef(id);
if (!elem) {return;}
setText(elem,text);
}
---
(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.'
Jul 20 '05 #10

P: n/a
This has been working for a year. This is without the text, and I've trying
to implement the text, but I can't figure out how it works.

The reason for all the document.write is a little complicated, but it will
work for me that way.

Can someone tell me what the code should be, if I want to change the text in
a <span id="textinfo">Text to be changed</span> just below the picture that
is called image. Line 4 changes the picture, and there you see where it is
at. The text should be changed in a similar way, preferably on the next
line...
1 <SCRIPT>
2 function goto(){
3 document.writeln("<HTML><HEAD><SCRIPT>")
4 document.writeln("function showImage(x){")
5 document.writeln("parent.imageframe.image.src =
'images0/images/'+[x]+'.jpg';")
6 document.writeln("}")
7 document.writeln("</scr"+"ipt>")
8 document.writeln("</HEAD><BODY ALIGN=center
BACKGROUND='../grafic/background.gif'>")
9 document.writeln("<NOBR>")
10 for(var T=121; T>-1; T--){
11 document.writeln("<A HREF=javascript:showImage("+T+")><IMG
SRC='images0/thumbnails/"+T+".jpg' HSPACE=2 HEIGHT=64 BORDER=0></A>")
12 }
13 document.write("</NOBR></BODY></HTML>")
14 }
15 </SCRIPT>


On the image frame, I have the following:

<IMG SRC="picture.png" NAME="image"><br>
<span id="textinfo">Text to be changed.</span>

Jul 20 '05 #11

P: n/a
JRS: In article <BB****************@livgarden.dk>, seen in
news:comp.lang.javascript, Henning Vestergaard Poulsen
<hv*@livgarden.dk> posted at Wed, 13 Aug 2003 23:56:09 :-
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?


<G> Directly after section 4.14 </G>.

The better newsgroups, of which this is one, generally have a FAQ
regularly posted to them; in this case, the two parts are posted on
Mon/Fri & Wed, each week; section 4.15 is in Mon/Fri. Your Internet
Service / News Provider should have advised you to read recent articles
in a group before posting to it.

The Web version should be easy enough to find by a Google search, though
I have not needed to try that.

Another place where FAQ links may be found is in some of the signatures
found at the ends of articles in newsgroups.

--
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.demon.co.uk/js-index.htm> JS maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/JS/&c., FAQ topics, links.
Jul 20 '05 #12

P: n/a
JRS: In article <8y**********@hotpop.com>, seen in
news:comp.lang.javascript, Lasse Reichstein Nielsen <lr*@hotpop.com>
posted at Thu, 14 Aug 2003 03:10:11 :-
Dr John Stockton <sp**@merlyn.demon.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.


Probably. But if something which is basically a single concept is in-
line, especially if it is itself non-trivial, it still breaks the flow
of thought of a reader. There are, no doubt, cases where most of us
would use in-line, ones where most would use a function, and ones where
most would argue indefinitely among themselves.

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.


Indeed; and not doing so is a very common fault in newbie scripts.

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.


My view is that I don't *really* understand it (nor yours); but with it
being modularised away from the point of need, then I only need to
understand how to use it, and to know that it has been tested and
reviewed. And, if in an include file, slightly better protected from
accidental damage.

Here is my suggestion. ... (tested in Opera 7, IE6, MozFB, and Netscape 4.80)
And in MSIE 4, OK.

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.

If !getRef or !elem , It Seems To Me (ISTM) that there is a too-
nearly-imperceptible failure; granted, these cases should be found by
the coder using whatever means of test/review.
In that case, one can drop the document.layers part of the above.


And add something to tell the innocent NS4 user that he's not seeing all
that was intended - unless that part of the script provides mere
decoration. That seems to need to be fired by !setText, if the layers
bit is removed or a browser incompatible with those considered is
discovered.

BTW, I found a further problem with NS4 (in the days when I had access
to NS4); I could not understand how to compose the destination HTML for
Jim's DynWrite to write into. NS4 readers of my DynWriting pages now, I
hope, get a warning on the first call of a page.
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.


Agreed. It must have entered at the intermediate stage of using

DocAll = !!document.all

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/&c., FAQqy topics & links;
<URL:http://www.merlyn.demon.co.uk/clpb-faq.txt> RAH Prins : c.l.p.b mFAQ;
<URL:ftp://garbo.uwasa.fi/pc/link/tsfaqp.zip> Timo Salmi's Turbo Pascal FAQ.
Jul 20 '05 #13

P: n/a
Dr John Stockton <sp**@merlyn.demon.co.uk> writes:
If !getRef or !elem , It Seems To Me (ISTM) that there is a too-
nearly-imperceptible failure; granted, these cases should be found by
the coder using whatever means of test/review.
Yes, it fails silently.
In practice, one should add a single test for !getRef before using it
the first time. The !elem should not happen in a properly written page,
so you should change the response depending on which stage of debugging
you are in. Personally, I would use "throw 'Element not found'", but
then one needs to tell how to catch the exception too.

BTW, I found a further problem with NS4 (in the days when I had access
to NS4); I could not understand how to compose the destination HTML for
Jim's DynWrite to write into. NS4 readers of my DynWriting pages now, I
hope, get a warning on the first call of a page.


The problem with the NS4 model, is that in order to promote an element
to a layer, it must be absolutely positioned. That makes it hard to put
elements that you want to change in the middle of the normal flow.

A sample code for NS4:

<div name="foo" style="position:absolute;"></div>
<script>
var doc = document.layers['foo'].document;
doc.open();
doc.write("Hello World");
doc.close();
</script>

The introduction of innerHTML and iframe removes the need for embedding
entire documents in layers.

/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.'
Jul 20 '05 #14

P: n/a
Lasse Reichstein Nielsen <lr*@hotpop.com> wrote in message news:<8y**********@hotpop.com>...
---
var getRef;
if (document.getElementById) {
getRef = function(id){return document.getElementById(id);}
} else if (document.all) {
getRef = function(id){return document.all[id];}
} else if (document.layers) {
getRef = function(id){
function searchLayers(doc) {
if (doc.layers[id]) {return doc.layers[id];}
for(var i=0;i<doc.layers.length;i++) {
var res = searchLayers(doc.layers[i].document);
if (res) {return res;}
}
}
return searchLayers(document); // search layers recursively
}
}

var setText;
if (document.createTextNode) {
setText = function(node,text) {
while(node.hasChildNodes()) { // clear children
node.removeChild(elem.lastChild);
Shouldn't you use this instead?
node.removeChild(node.lastChild);
}
node.appendChild(document.createTextNode(text));
}
} else if (document.body && document.body.innerHTML) {
setText = function(node,text) {
node.innerHTML = text;
}
} else if (document.layers) {
setText = function(node,text) { // assume node is an NS4 layer
node.document.open();
node.document.write(text);
node.document.close();
}
}

function dynWrite(id,text) {
if (!getRef || !setText) {return;}
var elem = getRef(id);
if (!elem) {return;}
setText(elem,text);
}
---

Jul 20 '05 #15

P: n/a
jo****@zircon.seattle.wa.us (Joe Kelsey) writes:
Shouldn't you use this instead?
node.removeChild(node.lastChild);


Doh, well spotted. Yes, that is a typo which I thought I fixed
before pasting. But did I fix it before copying?

/L 'double Doh!'
--
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.'
Jul 20 '05 #16

This discussion thread is closed

Replies have been disabled for this discussion.