473,696 Members | 1,831 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

need script to expose more text

Hi,

Does anyone know where I can get a script that show a little plus sign after
a line of text, that when you click the plus sign, more text is revealed on
that same page, like a continuing paragraph. This will be on a web page.

Thanks!

--Randy Starkey
Jul 23 '05 #1
28 2595
Very rough, but you can modify it as you see fit...

<script type="text/javascript">
function expand(elem) {
elem.innerHTML = '-'
document.getEle mentById('more' ).style.display = 'block'
}
</script>

Start of text <a href="#" onclick="expand (this)">+</a>
<div id="more" style="display: none">More text</div>

"Randy Starkey" <ra************ *****@NOSPAMvic torychurch.com> wrote in
message news:11******** *****@corp.supe rnews.com...
Hi,

Does anyone know where I can get a script that show a little plus sign
after a line of text, that when you click the plus sign, more text is
revealed on that same page, like a continuing paragraph. This will be on a
web page.

Thanks!

--Randy Starkey

Jul 23 '05 #2
Thanks! I'll play with it.

--Randy
"andrew" <no****@noname. com> wrote in message
news:cKgBe.1077 30$HI.46216@edt nps84...
Very rough, but you can modify it as you see fit...

<script type="text/javascript">
function expand(elem) {
elem.innerHTML = '-'
document.getEle mentById('more' ).style.display = 'block'
}
</script>

Start of text <a href="#" onclick="expand (this)">+</a>
<div id="more" style="display: none">More text</div>

"Randy Starkey" <ra************ *****@NOSPAMvic torychurch.com> wrote in
message news:11******** *****@corp.supe rnews.com...
Hi,

Does anyone know where I can get a script that show a little plus sign
after a line of text, that when you click the plus sign, more text is
revealed on that same page, like a continuing paragraph. This will be on
a web page.

Thanks!

--Randy Starkey


Jul 23 '05 #3
ASM
Randy Starkey wrote:

Does anyone know where I can get a script that show a little plus sign after
a line of text, that when you click the plus sign, more text is revealed on
that same page, like a continuing paragraph. This will be on a web page.


<p onmouseover="t= this.childNodes[1].style; t.visibility='v isible';"
onmouseout="t.v isibility='hidd en';">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<span style="visibili ty:hidden">Morb i a wisi. Mauris vulputate rutrum
arcu.</span>

--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #4
ASM
Randy Starkey wrote:
Thanks! I'll play with it.


it was so beurk :-(

use of innerHTML
use of DIVs

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

<p>Start of text
<a href="#" onclick="expand (this); return false;">[+]</a><br>
<span style="visibili ty:hidden">More text</span>
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<a href="#" onclick="expand (this); return false;">[+]</a>
<span style="visibili ty:hidden">Morb i a wisi. Mauris vulputate rutrum
arcu.</span>
</p>

--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #5
I'm lost on the french - I don't know JS at all - are they comments?

--Randy
"ASM" <st************ *********@wanad oo.fr> wrote in message
news:42******** **************@ news.wanadoo.fr ...
Randy Starkey wrote:

Does anyone know where I can get a script that show a little plus sign
after a line of text, that when you click the plus sign, more text is
revealed on that same page, like a continuing paragraph. This will be on
a web page.


<p onmouseover="t= this.childNodes[1].style; t.visibility='v isible';"
onmouseout="t.v isibility='hidd en';">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<span style="visibili ty:hidden">Morb i a wisi. Mauris vulputate rutrum
arcu.</span>

--
Stephane Moriaux et son [moins] vieux Mac

Jul 23 '05 #6
ASM <st************ *********@wanad oo.fr> writes:
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.styl e.visibility=v= ='[+]'?'visible':'hi dden';
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
"</p>".
}
</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="visibili ty: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.getEle mentById ?
document.getEle mentById(id) :
document.all ?
document.all[id] :
null; // no need to fall back on Netscape here
}

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

function toggleContent(i d, visible) {
var elem = getElement(id);
(elem.style||el em).display = visible?"":"non e";
}

function toggleMore(butt on,id) {
var expand = (button.value== "+");
toggleContent(i d, 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>
---
You have to hide the element after it occurs in the file, but the
button can be placed anywhere you want.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #7
Lasse,

So this creates a small button? Also, I don't understand the language at the
end.

--Randy

"Lasse Reichstein Nielsen" <lr*@hotpop.com > wrote in message
news:ll******** **@hotpop.com.. .
ASM <st************ *********@wanad oo.fr> writes:
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.styl e.visibility=v= ='[+]'?'visible':'hi dden';


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
"</p>".
}
</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="visibili ty: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.getEle mentById ?
document.getEle mentById(id) :
document.all ?
document.all[id] :
null; // no need to fall back on Netscape here
}

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

function toggleContent(i d, visible) {
var elem = getElement(id);
(elem.style||el em).display = visible?"":"non e";
}

function toggleMore(butt on,id) {
var expand = (button.value== "+");
toggleContent(i d, 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>
---
You have to hide the element after it occurs in the file, but the
button can be placed anywhere you want.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors:
<URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

Jul 23 '05 #8
"Randy Starkey" <ra************ *****@NOSPAMvic torychurch.com> writes:

Please don't top post.
So this creates a small button?
Yes, just a button with a "+" or "-" in it. If you want it styled,
just use CSS and style the class "moreButton ".
Also, I don't understand the language at the end.


Lorem ipsum? Just the generic garble text. Read about it here:
<URL:http://www.lipsum.com/>

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #9
ASM
Lasse Reichstein Nielsen wrote:
ASM <st************ *********@wanad oo.fr> writes:
it was so beurk :-(
"beurk"?


BeuArk, Pfffft, Pzll, Prout, Sprrllt,
as you like to say :-p or [not too good] or [not elegant]
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.


All as text-align in css
(this M$ malfunction pushing other navigators to support it)
What's wrong with div's?
I'd read you must try to use other tags most of time,
and, if really not possible to do other way,
well ... at least ... by the end ... ok a div.
<script type="text/javascript">
function expand(elem) {
var v = elem.firstChild .nodeValue;
elem.firstChild .nodeValue = v=='[+]'? '[-]':'[+]';
elem.parentNode .lastChild.styl e.visibility=v= ='[+]'?'visible':'hi dden';

Have you tested this in, e.g., Mozilla?


I did in FF, IE, Opera, Safari and Camino (on Mac 10.3.9)
When I give some code on a ng, usually I tested it.
If not, I say it. (not tested)
in JS a coma or quote is so easily forgotten ...
You are expecting
I expect nothing
You have to do :
put the hidden-to-visible part of text in a span in end of p
if you expect to use this function :-)
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
"</p>".
of course, if way of doing is not respected ... where do we go?
(tell me how you hide by css an element which is not one </span>foo</p>)
}
</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 "#"


I did adapt a proposed code without giving an other one too much far
from original.
original script had this link to receive the onclick
... didn't go further.

Overall I did give an other approach to reveal the hidden text.
(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 :)
I do not understand in what a button would work better if JS is disabled
And as I used to code for NC4.5, in this case the button has to be in a
form.

Anyway, there are so much ways to propose a click :
A, img, button ... and even P, td, div, and so on
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.
OK, you're right
<span style="visibili ty: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,


Where is my dictionary? Ha ! irrelevant : out of purpose, out of words
which makes hiding it pretty irrelevant.
Sure ! but I don't know what the guy wants exactly to do
(few words? complete page of 258 lines ? it's his problem).
I just give a soluce.
And, remenber, here was only an exercice to avoid innerHTML
(in an existing script)

Never I use display on/off (with a relative)
because that gives a very bad yoyo effect to the draw of page
So, my suggestion would be something like:
---
<script type="text/javascript">
function getElement(id) {
return document.getEle mentById ?
document.getEle mentById(id) :
document.all ?
document.all[id] :
null; // no need to fall back on Netscape here
}
Yeap, good introduction :-)
function writeMoreButton (id) {
document.write( "<input class='moreButt on' type='button' value='+'",
" onclick='toggle More(this,\"", id, "\");'>");
}
Ho! it's what you mean by JS disabled ?
so you can do it with no matter what (whom a A)
function toggleContent(i d, visible) {
var elem = getElement(id);
(elem.style||el em).display = visible?"":"non e";
}
function toggleMore(butt on,id) {
var expand = (button.value== "+");
toggleContent(i d, 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>
I love your french(*) ;-)
<script type="text/javascript">
writeMoreButton ("loremMore" );
toggleContent(" loremMore", false);
</script>
</p>
---
You have to hide the element after it occurs in the file, but the
button can be placed anywhere you want.


The A in code given in my post had the advantage to show [+] or [-]
depend last action launched by the click

If IE would be more clever a css rule would be enough ... :-(
(*) personal jock relative to a certain post back
not matter if not understood (it's not for you)
--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #10

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

Similar topics

8
6569
by: Radioactive Man | last post by:
I am fairly new to the latest verion of Python and using it on windows 95, 2000, and/or XP. What libraries, modules, functions, etc. would I need to set up a Python script to download a file, say "htttp://www.sound.com/files/bob.wav" to my own hard drive at "c:\sound\bob.wav"? I haven't found any good examples of such an operation in the documentation at the Python website. Any suggestions are appreciated. Thanks.
2
2315
by: tmb | last post by:
- Want to open a 2nd browser window when someone clinks a link with the link content inside it. - Want to control window size - Want all tool bars so only blue bar at top shows - Can I put my content in the blue bar? - Only options are Minimize, Maximize or Close (top right of blue bar) 1 - What is the difference in 'OpenWindow' and 'Spawn' ?? 2 - Can anyone point me to a simple script I can use... or just post one...
6
2102
by: lucy | last post by:
Hello comp.lang.js.I need a script to rotate a background image on each newpage load, given the id of the element and a list (array?)of 2 or more image paths ("img1.jpg", "img2.jpg", ...).Actually, depending on how I write the HTML, I guess I'dneed the script to set style.backgroundImage or src.I'd need to run it on a few elements, something like:setRandomBgImg('thingy1', ('img1a','img1b', ...) )setRandomBgImg('thingy2', ('img2a','img2b',...
2
1751
by: eric dexter | last post by:
I need to take text from one file and then save it to a different file. I also need to return any comment The def should have variables for the file that should be read in, the file it should be read out to and the instrument number to take. thanks in advance (re has been driving me nuts I can paste what I have if it helps.) The text I am trying to remove will look something like this instr 1 ;String pad there will be a bunch of...
5
4189
by: atcohaz | last post by:
I need script in php for web mail log in to add in my any web page www.hazratsultanbahu.com/webmail www.hazratsultanbahu.com/webmail Can you help me in php Yours truly, M Farooq Webmaster www.hazratsultanbahu.com
2
2945
by: S Moran | last post by:
many moons ago i had a small app that you could drag onto a textbox in an application or on a website that contained text that was hidden with asterisks and the underlying text would be revealed. im wondering how this was done and is it something i can easily duplicate?
1
1390
by: eis | last post by:
Please I need help. I need script , so people can add items on my website as shop.com or overstock.com , where I can look? or who can do it for me?
3
1561
by: =?Utf-8?B?UGF1bA==?= | last post by:
Hi I need to toggle the text on an html input button in a .net web application. the name of the button is btn_hide and I do have an onclick function for it. <script language="javascript" type="text/javascript"> // <!CDATA]> </script> -- thanks, Paul G Software engineer.
0
8661
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8595
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,...
1
8875
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,...
1
6512
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4353
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...
0
4608
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3030
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2313
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
1989
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.