need script to expose more text

[Randy Starkey]

ASM <[email protected]> writes:

Actually, you should put the call to "writeMoreButton" where you want
the button, but the call to "toggleContent" *after* the content that
must be hidden.

OK - I'm just learning this. Thanks!

 

[Randy Starkey]

you did write it twice
ist with javascript
2d with html

delete the 2nd

Hmmm... OK. I'm just learning this. Thanks! Also for the other message and
script.
--Randy

 

[Randy Starkey]

it was so beurk :-(
"beurk"?

use of innerHTML

Actually, innerHTML is supported in more browsers than DOM methods.
It's not the way to go for purity, and maybe not for future
compatability (although I doubt we'll ever see another HTML browser
that supports DOM and not innerHTML), but currently, it works.

It's overkill for this case, though, since there is no markup in the
"HTML" that is assigned.

use of DIVs

What's wrong with div's?

<script type="text/javascript">
function expand(elem) {
var v = elem.firstChild.nodeValue;
elem.firstChild.nodeValue = v=='[+]'? '[-]':'[+]';
elem.parentNode.lastChild.style.visibility=v=='[+]'?'visible':'hidden';

Have you tested this in, e.g., Mozilla? You are expecting the last
child node of the "p" element to be the "span" element. More likely,
it will be a text node containing the newline between "</span>" and

}
</script>

<p>Start of text
<a href="#" onclick="expand(this); return false;">[+]</a><br>

Why use a link, especially one with a non-sensical href like "#"
(something to be avioded generally). The link will make no sense
if javascript is disabled. For affordability to clicking, I would
prefer a button, not a link, since it doesn't link to anything.
(A good hint that one is misusing links is that they have no
meaningful; href

Using a link with an onclick also fails quite visibly if the script
errors, as the href is followed then (because you never reach the
"return false"). That is why it's better to use an object with no
inherent behavior, instead of trying to override it.

Using a link *does* make sense, if it links to a page with the
entire text visible. Then it would be a fall-back for javascript
disabled browsers.

<span style="visibility:hidden">More text</span>

You use "visibility" to hide the content. While it works in more
browsers than using "display" (e.g., Netscape 4 and Opera 6 and
other static DOM browsers), it also means that the hidden content
still takes up space in the flow of the page, which makes hiding
it pretty irrelevant.

So, my suggestion would be something like:
---
<script type="text/javascript">
function getElement(id) {
return document.getElementById ?
document.getElementById(id) :
document.all ?
document.all[id] :
null; // no need to fall back on Netscape here
}

function writeMoreButton(id) {
document.write("<input class='moreButton' type='button' value='+'",
" onclick='toggleMore(this,\"", id, "\");'>");
}

function toggleContent(id, visible) {
var elem = getElement(id);
(elem.style||elem).display = visible?"":"none";
}

function toggleMore(button,id) {
var expand = (button.value=="+");
toggleContent(id, expand);
button.value = expand ? "-" : "+";
}
</script>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
<span id="loremMore">Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</span>
<script type="text/javascript">
writeMoreButton("loremMore");
toggleContent("loremMore", false);
</script>
</p>

I don't understand what you mean by this.
Also - is there a way of shortening the height of the button slightly? It's
throwing my line spacing off some. Thanks! --Randy

 

[Randy Starkey]

could you give me a CSS code line that would make the button not quite so
tall? Just a bit shorter.
Thanks! --Randy

 

[Lasse Reichstein Nielsen]

message news:[email protected]...

could you give me a CSS code line that would make the button not quite so
tall? Just a bit shorter.

Try:

 

[Randy Starkey]

Try:

OK. Thanks!
--Randy

 

[Randy Starkey]

Try:

Here's the full script with style inserted - seems to kill the script
working. I'm doing something wrong.
--Randy

<HTML>
<script type="text/javascript">
function getElement(id) {
return document.getElementById ?
document.getElementById(id) :
document.all ?
document.all[id] :
null; // no need to fall back on Netscape here
}

function writeMoreButton(id) {
document.write("<input class='moreButton' type='button' value='+'",
" onclick='toggleMore(this,\"", id, "\");'>");
}

<style type="text/css">
.moreButton { height: 1em; width: 1em; }
</style>

function toggleContent(id, visible) {
var elem = getElement(id);
(elem.style||elem).display = visible?"":"none";
}

function toggleMore(button,id) {
var expand = (button.value=="+");
toggleContent(id, expand);
button.value = expand ? "-" : "+";
}
</script>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
<span id="loremMore">Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</span>
<script type="text/javascript">
writeMoreButton("loremMore");
toggleContent("loremMore", false);
</script>
</p>

 

[Lasse Reichstein Nielsen]

Here's the full script with style inserted - seems to kill the script
working. I'm doing something wrong.

You are putting the style element inside the script element.
Put them next to each other in the head element of the page.

Before trying to do advanced stuff like expanding text, maybe
you should learn basic HTML and CSS. That would make you able
to fix small things like this yourself.

/L

 

[Randy Starkey]

"Randy Starkey" <[email protected]> writes:

You are putting the style element inside the script element.
Put them next to each other in the head element of the page.

Before trying to do advanced stuff like expanding text, maybe
you should learn basic HTML and CSS. That would make you able
to fix small things like this yourself.

Right. Thanks. I actually figured it out a little bit ago.
It's here... www.victorychurch.com/?page=53
I probably need to just job it out. Although I'm an engineer, I don't have
time to learn a new skill right now. I thought it might be a small script,
and you can see from my page I'm going to use it about 20 times on the same
page. As usual, it turns out there is a bit more to it when one goes to fit
it in exactly right. I'm not using the style, as the character gets off
center on the button when I resize it. It's close enough now though. Thanks
for the code. I appreciate it, and it's basically solved now I
hink. --Randy