inserting line breaks in text quoted in javascript

[alice]

I'm doing some text swapping with javascript, got it working fine, but
I would like the line to have line breaks and being a beginner, I
don't even know if this is possible.
So I have a line like this
swaptext('Shaun, Greg, Violet, Joel, 1999')";
and I would like 1999 to be on a new line. Is there a simple way to do
this? I'd swear I've seen a way, but now I can't seem to find it.

 

[alice]

A new line where? In source code? In web page?
And what does the function "swaptext()" do?
So many qustions...
Mick

Sorry, I should have explained more. It's all part of an onclick
function
onClick="if (document.images) document.images['blank'].src = 'images/
new.gif'; swaptext('Shaun, Greg, Violet, Joel, 1999')";>
The functions for both the image swap and the text swap are in the
head of the html, and it's all working perfectly. I just want to know
if there is a way to insert a line break before '1999'. How do I do
that when it is already a quote within a javascript line? I can't just
add a <br> before it.

 

[scripts.contact]

I'm doing some text swapping with javascript, got it working fine, but
I would like the line to have line breaks and being a beginner, I
don't even know if this is possible.
So I have a line like this
swaptext('Shaun, Greg, Violet, Joel, 1999')";
and I would like 1999 to be on a new line. Is there a simple way to do
this? I'd swear I've seen a way, but now I can't seem to find it.

swaptext('Shaun, Greg, Violet, Joel, \n1999')";

will work for text, for HTML -use:

swaptext('Shaun, Greg, Violet, Joel,<br> 1999')";

 

[alice]

swaptext('Shaun, Greg, Violet, Joel, \n1999')";

will work for text, for HTML -use:

swaptext('Shaun, Greg, Violet, Joel,<br> 1999')";

Neither of those is working.
the \n creates a space but no line break, and the <br> shows up in the
text itself.

The header function is as follows
function swaptext(what)
{document.getElementById("text").firstChild.nodeValue=what;}

Then I have a div with the id="text".

 

[TheBagbournes]

Neither of those is working.
the \n creates a space but no line break, and the <br> shows up in the
text itself.

The header function is as follows
function swaptext(what)
{document.getElementById("text").firstChild.nodeValue=what;}

Then I have a div with the id="text".

Use innerHTML instead of nodeValue, and use the <br> version.

 

[alice]

Use innerHTML instead of nodeValue, and use the <br> version.- Hide quoted text -

- Show quoted text -

When I do that, the text does not swap out at all.

 

[alice]

When I do that, the text does not swap out at all.- Hide quoted text -

- Show quoted text -

I'm getting the feeling it may have to do with the text that is being
replaced. What I have is
<div id="text">phototext
</div>
And the word phototext is swapped out with the names. Do I need to do
something else with this to allow it to be able to "use" the line
break? I've tried adding a <br> and another line of text after
'phototext', but I'm wondering, do I need something else, like for it
to be in a table, a span, a blockquote, a paragraph, something else?
The \n (and I've treid \r as well) are trying to do something, it's as
if they just can't really make a new line becuase there isn't a place
for it, maybe?

 

[TheBagbournes]

I'm getting the feeling it may have to do with the text that is being
replaced. What I have is
<div id="text">phototext
</div>
And the word phototext is swapped out with the names. Do I need to do
something else with this to allow it to be able to "use" the line
break? I've tried adding a <br> and another line of text after
'phototext', but I'm wondering, do I need something else, like for it
to be in a table, a span, a blockquote, a paragraph, something else?
The \n (and I've treid \r as well) are trying to do something, it's as
if they just can't really make a new line becuase there isn't a place
for it, maybe?

OK, you're using firstChild of the div which is a text node. So innerHTML won't work.

You need to learn a bit about the document structure and nodes. Use the Firefox browser. Download the Firebug debugger and have a look what's there.

You need to redefine what you actually are trying to achieve. You can insert a new text node at the beginning of the div text:

var t = document.getElementById("text");
var newText = document.createTextNode("new text");
t.insertBefore(newText, t.firstChild);
var br = document.createElement("br");
t.insertBefore(br, newText.nextSibling);
t.removeChid(br.nextSibling);

Take a look at the documentation:

http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html

Inside a browser, the document is a hierarchical tree structure of Nodes.

HTML tags become Nodes of a special type "Element" which are accessible to javascript. Textual content becomes text Nodes of type "CharacterData".

You can look up nodes, and perform methods on them, see the "Object Node" section.

In the "Object Element" section, are elements which are created from HTML tags. These have all the attributes of Nodes, plus the capabilities listed there.

Study that document - it's the bible for dynamic page manipulation.

Cheers,

Animal

 

[alice]

OK, you're using firstChild of the div which is a text node. So innerHTML won't work.

You need to learn a bit about the document structure and nodes. Use the Firefox browser. Download the Firebug debugger and have a look what's there.

You need to redefine what you actually are trying to achieve. You can insert a new text node at the beginning of the div text:

var t = document.getElementById("text");
var newText = document.createTextNode("new text");
t.insertBefore(newText, t.firstChild);
var br = document.createElement("br");
t.insertBefore(br, newText.nextSibling);
t.removeChid(br.nextSibling);

Take a look at the documentation:

http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html

Inside a browser, the document is a hierarchical tree structure of Nodes.

HTML tags become Nodes of a special type "Element" which are accessible to javascript. Textual content becomes text Nodes of type "CharacterData".

You can look up nodes, and perform methods on them, see the "Object Node" section.

In the "Object Element" section, are elements which are created from HTML tags. These have all the attributes of Nodes, plus the capabilities listed there.

Study that document - it's the bible for dynamic page manipulation.

Cheers,

Animal- Hide quoted text -

- Show quoted text -

Thanks, but since I can't decipher anything on that page at all, I
guess I'll have to use a different method. I've decided I can just
repeat what I'm doing and have 3-4 pairs of functions and divs and
swap each line.

 

[alice]

OK, you're using firstChild of the div which is a text node. So innerHTML won't work.

You need to learn a bit about the document structure and nodes. Use the Firefox browser. Download the Firebug debugger and have a look what's there.

You need to redefine what you actually are trying to achieve. You can insert a new text node at the beginning of the div text:

var t = document.getElementById("text");
var newText = document.createTextNode("new text");
t.insertBefore(newText, t.firstChild);
var br = document.createElement("br");
t.insertBefore(br, newText.nextSibling);
t.removeChid(br.nextSibling);

Where would I insert this, and what exactly would it do?

 

[Bart Van der Donck]

It's all part of an onclick function
onClick="if (document.images) document.images['blank'].src
= 'images/new.gif'; swaptext('Shaun, Greg, Violet, Joel,
1999')";>
The functions for both the image swap and the text swap are
in the head of the html, and it's all working perfectly. I
just want to know if there is a way to insert a line break
before '1999'. How do I do that when it is already a quote
within a javascript line? I can't just add a <br> before it.

This code adds <BR> before the last 4 digits of the string:

<div id="myID">content</div>
<hr>
<a href="#" onClick="swaptext('Paris, 1999'); return false">swap1</a>
<a href="#" onClick="swaptext('1, 2, 3, 2000'); return false">swap2</
a>
<a href="#" onClick="swaptext('a,b,c, 2002'); return false">swap3</a>
<script type="text/javascript">
function swaptext(co)
{
document.getElementById('myID').innerHTML =
co.replace( /\d{4}$/, function (y) { return '<br>'+y } )
}
</script>

The string must end on 4 digits for this to work (which should be
okay, I suppose).

Hope this helps,

 

[Evertjan.]

Bart Van der Donck wrote on 19 mrt 2007 in comp.lang.javascript:

function swaptext(co){
document.getElementById('myID').innerHTML =
co.replace( /\d{4}$/, function (y) { return '<br>'+y } )
}

co.replace( /(\d{4})$/, '<br>$1')

 

[alice]

Bart Van der Donck wrote on 19 mrt 2007 in comp.lang.javascript:


co.replace( /(\d{4})$/, '<br>$1')

When using this, nothing gets swapped and it says there is an error on
the page.

 

[alice]

It's all part of an onclick function
onClick="if (document.images) document.images['blank'].src
= 'images/new.gif'; swaptext('Shaun, Greg, Violet, Joel,
1999')";>
The functions for both the image swap and the text swap are
in the head of the html, and it's all working perfectly. I
just want to know if there is a way to insert a line break
before '1999'. How do I do that when it is already a quote
within a javascript line? I can't just add a <br> before it.

This code adds <BR> before the last 4 digits of the string:

<div id="myID">content</div>
<hr>
<a href="#" onClick="swaptext('Paris, 1999'); return false">swap1</a>
<a href="#" onClick="swaptext('1, 2, 3, 2000'); return false">swap2</
a>
<a href="#" onClick="swaptext('a,b,c, 2002'); return false">swap3</a>
<script type="text/javascript">
function swaptext(co)
{
document.getElementById('myID').innerHTML =
co.replace( /\d{4}$/, function (y) { return '<br>'+y } )}

</script>

The string must end on 4 digits for this to work (which should be
okay, I suppose).

Hope this helps,

Well, OK, I got this code to work, sort of, but I don't think it will
ultimately be able to do what I need. I want each thumbnail photo I'm
dealing with to make a few lines of text to appear, Names, then a year
on another line, then photo credits, and maybe a location. I thought
there would just be an easy way to insert a line break into the string
that would show up properly in the div area. I don't know enought
about javascript to know if this is even possible, but so far it would
seem like it is not.

 

[Evertjan.]

alice wrote on 20 mrt 2007 in comp.lang.javascript:

When using this, nothing gets swapped and it says there is an error on
the page.

Please show the offending code.

 

[Bart Van der Donck]

[ snip code ]

Well, OK, I got this code to work, sort of, but I don't
think it will ultimately be able to do what I need. I want
each thumbnail photo I'm dealing with to make a few lines
of text to appear, Names, then a year on another line, then
photo credits, and maybe a location. I thought there would
just be an easy way to insert a line break into the string
that would show up properly in the div area. I don't know
enought about javascript to know if this is even possible,
but so far it would seem like it is not.

You should start thinking in more structural patterns. In programming
code you can only instruct commands that are logical and coherent;
otherwise you'll have problems. 1+1 is not "sort of 2" like you say.
It is 2 or not.

Why don't you just adapt the values themselves ? E.g.

swaptext('Shaun, Greg<br>1999<br>Photo by John')

No need for any exotic stuff then and you can add as much/few line
ends as you like per photo. Here is the full code:

<div id="myID">content</div>
<hr>
<a href="#" onClick="swaptext('Paris<br>1999<br>Photo by Alice');
return false">swap1</a>
<a href="#" onClick="swaptext('<big>Party!</big><br>1999');
return false">swap2</a>
<a href="#" onClick="swaptext('John<br>2002<br>New York');
return false">swap3</a>
<script type="text/javascript">
function swaptext(co) {
document.getElementById('myID').innerHTML = co
}
</script>

Hope this helps,

 

[alice]

On Mar 19, 4:07 am, "Bart Van der Donck" <[email protected]>
wrote:

[ snip code ]

Well, OK, I got this code to work, sort of, but I don't
think it will ultimately be able to do what I need. I want
each thumbnail photo I'm dealing with to make a few lines
of text to appear, Names, then a year on another line, then
photo credits, and maybe a location. I thought there would
just be an easy way to insert a line break into the string
that would show up properly in the div area. I don't know
enought about javascript to know if this is even possible,
but so far it would seem like it is not.

You should start thinking in more structural patterns. In programming
code you can only instruct commands that are logical and coherent;
otherwise you'll have problems. 1+1 is not "sort of 2" like you say.
It is 2 or not.

Why don't you just adapt the values themselves ? E.g.

swaptext('Shaun, Greg<br>1999<br>Photo by John')

That's exactly what I'm trying to do. I just don't know how. Simply

No need for any exotic stuff then and you can add as much/few line
ends as you like per photo. Here is the full code:

<div id="myID">content</div>
<hr>
<a href="#" onClick="swaptext('Paris<br>1999<br>Photo by Alice');
return false">swap1</a>
<a href="#" onClick="swaptext('<big>Party!</big><br>1999');
return false">swap2</a>
<a href="#" onClick="swaptext('John<br>2002<br>New York');
return false">swap3</a>
<script type="text/javascript">
function swaptext(co) {
document.getElementById('myID').innerHTML = co
}
</script>

Hope this helps,

I can try this, but this code is different than what I'm using in the
first place. I'm not using anchors, these images are not links, just
thumbnails that make a larger picture appear somewhere else on the
screen when clicked. The only way I figured out to get the text to be
swapped is to have a div tag with a no-break-space as a place holder
next to the image. When I add a <br> in the middle of the text and use
innerHTML, nothing happens, no breaks. At least the \n made a space,
but not a line break.

 

[alice]

On Mar 19, 4:07 am, "Bart Van der Donck" <[email protected]>
wrote:
[ snip code ]
Well, OK, I got this code to work, sort of, but I don't
think it will ultimately be able to do what I need. I want
each thumbnail photo I'm dealing with to make a few lines
of text to appear, Names, then a year on another line, then
photo credits, and maybe a location. I thought there would
just be an easy way to insert a line break into the string
that would show up properly in the div area. I don't know
enought about javascript to know if this is even possible,
but so far it would seem like it is not.

You should start thinking in more structural patterns. In programming
code you can only instruct commands that are logical and coherent;
otherwise you'll have problems. 1+1 is not "sort of 2" like you say.
It is 2 or not.

Why don't you just adapt the values themselves ? E.g.

swaptext('Shaun, Greg<br>1999<br>Photo by John')

That's exactly what I'm trying to do. I just don't know how. Simply
adding the <br> does not do it.

No need for any exotic stuff then and you can add as much/few line
ends as you like per photo. Here is the full code:

<div id="myID">content</div>
<hr>
<a href="#" onClick="swaptext('Paris<br>1999<br>Photo by Alice');
return false">swap1</a>
<a href="#" onClick="swaptext('<big>Party!</big><br>1999');
return false">swap2</a>
<a href="#" onClick="swaptext('John<br>2002<br>New York');
return false">swap3</a>
<script type="text/javascript">
function swaptext(co) {
document.getElementById('myID').innerHTML = co
}
</script>

Hope this helps,

I can try this, but this code is different than what I'm using in the
first place. I'm not using anchors, these images are not links, just
thumbnails that make a larger picture appear somewhere else on the
screen when clicked. The only way I figured out to get the text to be
swapped is to have a div tag with a no-break-space as a place holder
next to the image. When I add a <br> in the middle of the text and use
innerHTML, nothing happens, no breaks. At least the \n made a space,
but not a line break.- Hide quoted text -

- Show quoted text -- Hide quoted text -

- Show quoted text -

Hey wait...I think this might work. I'm not at the right computer with
my code now, but on running this program, I can see it now. Just what
does the 'return false' do?

 

[Bart Van der Donck]

alice wrote:

[snip code]

Hey wait...I think this might work. I'm not at the right
computer with my code now, but on running this program,
I can see it now. Just what does the 'return false' do?

It prevents that the <a href> command is executed. <a href="#">click</
a> would get you to the top of the page in some browsers, which is not
the intention here.

 

[alice]

alice wrote:

[snip code]

Hey wait...I think this might work. I'm not at the right
computer with my code now, but on running this program,
I can see it now. Just what does the 'return false' do?

It prevents that the <a href> command is executed. <a href="#">click</
a> would get you to the top of the page in some browsers, which is not
the intention here.

Thanks...this is going to accomplish exactly what I wanted