473,714 Members | 2,621 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Text change

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
15 13372
>"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
Jul 20 '05 #2
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

Jul 20 '05 #3
"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.'
Jul 20 '05 #4

"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 !)

Jul 20 '05 #5
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
Jul 20 '05 #6
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.
Jul 20 '05 #7
> 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
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.
Jul 20 '05 #9
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.'
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
6165
by: Randell D. | last post by:
Folks, I'm still learning javascript - I've invested in a couple of books and reading online as much as possible. I'm pretty sure what I am suggesting is possible though I'm trying to weigh up the faults that might go with the suggestion... all opinions welcome. My question: I have a list of links that go to pages that have a similar layout. Could I have a text swap, similar to what I've seen with image swaps (or an image switch)...
5
27034
by: AFN | last post by:
I'm trying to set a submit button to change text and color when clicked. Like saying "please wait" instead of "submit" and then changing the background color and text color. All works, except for changing the text color. I can set style.background='red' to change the background color to red. But if I say style.color='green' to change the text color, it does not change. How do you change the text color on a button when it is clicked?
2
4744
by: Charles Mendell | last post by:
1. When I go to http://www.w3schools.com/js/default.asp and choose: 2. JS HTML DOM and then choose: 3. the Window object and then choose: 4. Write some text in the windows status bar ( a link) 5. Before I write the script, the IE shows current time in status bar 6. After I write the script, which writes a message on the status bar: <script text="text/javascript> function load() { window.status= "Show this text in the status bar"
8
3192
by: Margaret MacDonald | last post by:
I'm a js novice trying to teach myself. I'm using Flanagan's 'Javascript, the definitive guide' from O'Reilly as a text. But either I'm dopier than usual or its layout doesn't match my learning style very well, because I seem to be having a dreadful time getting to grips with even the simplest things. Currently, I'm trying to change the text that follows a <p> element in a little test program. My test program has a table with two <td>...
4
21013
by: devine | last post by:
Hi All, I am VERY new to Javascript. I have been provided with some code, which will enable me to hide/show a text area and change a submit button dependant on a check box. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
7
7857
by: support | last post by:
Hi, I am trying to change the text of a Command button using the Windows API Function SetWindowText, which I have declared as follows: <DllImport("User32")_ Public Function SetWindowText(ByVal hWnd As IntPtr, ByVal lpString As String) As Boolean End Function
5
6223
by: FAQ server | last post by:
----------------------------------------------------------------------- FAQ Topic - How do I change the text in the url/location bar? ----------------------------------------------------------------------- This text can only be altered by changing the URL of the page. The normal solution is to use frames, though this can introduce problems of its own.
7
3209
by: =?Utf-8?B?QnJpYW4gQ29vaw==?= | last post by:
I want to change the font color and weight at a specific position in the text. I am not sure where or what I need to do. It will be at position 155/156 from the left on each line. Here is the code I need to put it into. using System; using System.Drawing; using System.IO;
16
7240
by: Wayne | last post by:
I've read that one method of repairing a misbehaving database is to save all database objects as text and then rebuild them from the text files. I've used the following code posted by Lyle Fairfield to accomplish the first step: Private Sub SaveObjectsAsText() path = CurrentProject.path & "\ObjectsAsText\" SaveDataAccessPagesAsText SaveFormsAsText SaveReportsAsText
6
6418
by: K Viltersten | last post by:
I have the following button: <asp:LinkButton id="Btn" runat="server" text="Click"> </asp:LinkButton> I have added an action listener in the javascript where I change the text on it: this.dom.textContent = "Clicked"; The change is effective but after the site has reloaded the text is back to "Click".
0
8706
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9311
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9171
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9073
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
7947
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5946
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4463
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
2
2518
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2108
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.