PDA

View Full Version : show/hide text on a page



Hitta
04-26-2006, 01:43 PM
How if at all can i show/hide text that is on a page, i have see a few show/hide text things on several webpages but i can not find any scripts and help about this anywere
Any help is welcomed
Thanks, Hitta

Twey
04-26-2006, 03:16 PM
There are two ways of doing this: with the visibility property, or the display property. The difference is that visibility will cause the rest of the page to treat the elemet as if it's still there, while display will cause it to be removed from the page completely.

<p id="hidingtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tellus purus, dapibus non, accumsan a, viverra ac, nisl. Integer rutrum aliquet velit. Proin eu arcu et quam ultrices pretium. Ut libero massa, gravida quis, placerat convallis, iaculis et, massa. Donec id pede quis est egestas hendrerit. Sed laoreet lorem. Curabitur in elit a felis vehicula aliquam. Sed auctor nunc ut nisl. Nam sit amet nunc sit amet nisl pretium ornare. Integer et felis eget arcu sagittis accumsan. Donec semper nisi in est. Sed consequat. Morbi nec justo nec mi placerat mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec viverra quam et nulla. Maecenas id ante a tellus consequat feugiat. Quisque at lorem. Phasellus at pede non sem volutpat posuere.</p>
<input type="button" value="Show/Hide Text" onclick="
var e = document.getElementById('hidingtext');
if(e.style.visibility == 'hidden') e.style.visibility = 'visible';
else e.style.visibility = 'hidden';
// Or, using the display property:
//if(e.style.display == 'none') e.style.display = 'block'; // use 'inline' not 'block' for inline elements
//else e.style.display = 'none';
">

Hitta
05-02-2006, 10:37 AM
I sorted it heres what i did

<DIV id=HittasDiv style="display: none">Hello world
<A HREF=# onClick="javascript: HittasDiv.style.display='none'; OtherDiv.style.display='inline'">Hide the text</A>
</DIV>
<DIV id=OtherDiv>
<A HREF=# onclick="javascript: HittasDiv.style.display='inline'; OtherDiv.style.display='none'; ">Show the text</A>
</DIV>

Twey
05-02-2006, 10:43 AM
There are a few problems with your code:
1) HTML attribute values must be enclosed in quotes ("). This doesn't have to apply for purely numerical values (such as 3, or 9, but not 5% or 20px).
2) javascript: pseudo-URIs have no business being inside event handlers. Event handlers are not HREFs.
3) Elements with IDs should be accessed with the W3C-standard document.getElementById() method.
4) Using "#" as an HREF and not returning false from the event handler will cause the page to scroll to the top every time the user clicks the links.

Hitta
05-02-2006, 12:52 PM
Nope, all works fine on all OS and browsers

Hitta
05-02-2006, 12:53 PM
yer i did find the href thing anoyingthough,how you get it to stay still on the page?

Twey
05-02-2006, 01:43 PM
Nope, all works fine on all OS and browsersOh really? Am I to understand that you have obtained a copy of every single OS and browser to exist, have ever existed, or possibly exist in the future, and tested your page in each and every one of them? Wow, I'm impressed.
yer i did find the href thing anoyingthough,how you get it to stay still on the page?Append the statement "return false;" to your onclick event.

Hitta
05-04-2006, 09:13 AM
Oh really? Am I to understand that you have obtained a copy of every single OS and browser to exist, have ever existed, or possibly exist in the future, and tested your page in each and every one of them? Wow, I'm impressed.Append the statement "return false;" to your onclick event.
thanks and by ll OS and browsers i meant the most popular ones, SUSE linux fedora windows 2k xp, firefox netscape explorer :P

mwinter
05-04-2006, 10:19 AM
Do things properly, and it will work in a great deal more. It will also prevent error messages appearing, which is almost always a sign of incompetence; not a nice image to send to visitors.

Mike

Hitta
05-04-2006, 11:21 AM
What do you mean?

mwinter
05-04-2006, 11:52 AM
The code you posted is based upon the assumption that elements with id attributes can be referenced via global variables created using those attribute values. That assumption is flawed.

When that code fails to work, and it will, the visitor may be presented with an error message, rather than a working site. Not a particularly appealing prospect, is it? To make matters worse, because you hide the element using CSS directly, rather than using scripting to both hide it initially, and control it later, the user will not be able to see that hidden content, potentially rendering the document useless (that depends on what you're hiding).

Finally, you're setting block-level elements (the two div elements) to display using the inline formatting context. That's probably not wise; if it's what you really want, use span elements instead.


In general, the following approach should be taken:



function initialise() {
var element = document.getElementById('element-id');

if (element && element.style)
element.style.display = 'none';
}

function toggleDisplay(element) {
var style;

if (typeof element == 'string')
element = document.getElementById(element);
if (element && (style = element.style))
style.display = (style.display == 'none') ? '' : 'none';
}

if (!document.getElementById)
document.getElementById = function() {return null;};



<body onload="initialise();">
<!-- ... -->
<div id="element-id">Content to be hidden.</div>
<input type="button" value="Toggle content" onclick="toggleDisplay('element-id');">
<!-- ... -->
</body>
The button can be styled to look like a link, if you prefer. If you have a lot of images, the call to the initialise function could be moved to a script element at the end of the document (the call will occur once parsing of the document has all but completed, rather than when all of the content has finished loading).

Mike

Twey
05-04-2006, 02:35 PM
thanks and by ll OS and browsers i meant the most popular ones, SUSE linux fedora windows 2k xp, firefox netscape explorer :PWell, you missed Opera for a start. Also, it is not necessary to test in multiple Linux distros, since, unlike Windows, the toolkits and fonts (which would be the only components of the OS that would affect how the page was displayed) can be interchanged freely.

By following standards and making sure your page validates, you are pretty much guaranteed (bugs and IE [which is essentially one large bug] aside) that your site will look decent in most past, present and future browsers. This is the idea of standards.
http://validator.w3.org/

Hitta
05-04-2006, 06:30 PM
Yer well i don't know many or any exams officers that will use that, the code is fine and works as i want it to, i used the bit of code you said to keep it still on a page and not top to the top, that was usefull other than that i can't see why you are both posting code that is not the same and aparently works when mine does not

Twey
05-04-2006, 06:46 PM
and aparently works when mine does notOh, we're sure your code works in the environments you tested it in. However, it is not guaranteed to work in every environment, as it is not valid. That is what validation is for.
Yer well i don't know many or any exams officers that will use thatAnd just how many exam officers do you know, exactly?
Well-formed code is one of the most important things to look for in a good site; if your exam officers don't check that, they're useless and ought to be replaced. :)

toffer1962
06-18-2007, 06:07 PM
Hi Mike,

I'm using the script you kindly provided here http://www.geocities.com/identity1040/

Click the plus signs to show/hide. Can you tell me how to have the page load with the text already hidden (because the sub-choices are long and unsightly)?

The code now looks like this:

<script language="JavaScript">
function initialise() {
var element = document.getElementById('element-id');

if (element && element.style)
element.style.display = 'none';
}

function toggleDisplay(element) {
var style;

if (typeof element == 'string')
element = document.getElementById(element);
if (element && (style = element.style))
style.display = (style.display == 'none') ? '' : 'none';
}

if (!document.getElementById)
document.getElementById = function() {return null;};

</script>

<body onload="initialise();" name="nav" bgcolor="#99CC66" text="#111111" link="#0000ee" alink="#99ccff" vlink="#6666cc" leftmargin="0" topmargin="0">

<!-- SHOW/HIDE STARTS HERE -->

<div align="left">
&nbsp;<img height="1" width="9" src="images/shim.gif" border="0">&nbsp;<a href="index.html" target="_parent" class="link">HOME</a><br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>


&nbsp;<input type="image" value="" src="images/plus_sign.gif" height="10" width="9" align="bottom" onclick="toggleDisplay('element-1');">
<a href="goals/independent.html" target="_parent" class="link">GOALS</a><br>

<img height="5" width="1" src="images/shim.gif" border="0"><br>

<div id="element-1">
&nbsp;<a href="goals/independent_closed.html" target="_parent" class="link">MILLIONAIRE&nbsp;<br>&nbsp;AND FINANCIALLY<br>
&nbsp;INDEPENDENT</a><br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/payme.html" target="_parent" class="link">PAY MYSELF FIRST</a>&nbsp;<br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/save2million.html" target="_parent" class="link">SAVE $2,000,000</a><br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/100milpa.html" target="_parent" class="link">EARN $100M/PA</a><br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/million.html" target="_parent" class="link">MILLIONAIRE</a>&nbsp;<br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/multipleincome.html" target="_parent" class="link">MULTIPLE INCOMES</a>&nbsp;<br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/filmprod.html" target="_parent" class="link">FILM PRODUCER</a>&nbsp;<br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/financial.html" target="_parent" class="link">FINANCIAL GROUP</a>&nbsp;<br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/musicbiz.html" target="_parent" class="link">MUSIC GROUP</a>&nbsp;<br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/fincasanta.html" target="_parent" class="link">SANTA MONICA<br>&nbsp;FINCA</a><br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/householly.html" target="_parent" class="link">HOLLYWOOD HOUSE</a>&nbsp;<br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/healthins.html" target="_parent" class="link">HEALTH INSURANCE</a>&nbsp;<br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/epilepsy.html" target="_parent" class="link">CURE MY EPILEPSY</a>&nbsp;<br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/devasectomy.html" target="_parent" class="link">DE-VASECTOMY</a>&nbsp;<br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/lasereye.html" target="_parent" class="link">LASER EYE CURE</a>&nbsp;<br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/flattum.html" target="_parent" class="link">FLAT STOMACH</a>&nbsp;<br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/espanol.html" target="_parent" class="link">LEARN ESPAŅOL</a>&nbsp;<br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/rio.html" target="_parent" class="link">RIO CARNIVAL</a>&nbsp;<br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/cruise.html" target="_parent" class="link">CARIBBEAN CRUISE</a>&nbsp;<br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/egypt.html" target="_parent" class="link">VISIT EGYPT</a><br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/children.html" target="_parent" class="link">MY CHILDREN</a><br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/foundation.html" target="_parent" class="link">FOUNDATION</a></br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/farmland.html" target="_parent" class="link">FARM LAND</a><br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/watches.html" target="_parent" class="link">WATCH COLLECTION</a><br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/drums.html" target="_parent" class="link">ELECTRONIC DRUMS</a><br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/rangerover.html" target="_parent" class="link">RANGE ROVER</a><br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/audis8.html" target="_parent" class="link">AUDI S8</a><br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="goals/motoryacht.html" target="_parent" class="link">MOTOR&nbsp;YACHT</a>
</div>
<img height="5" width="1" src="images/shim.gif" border="0"><br>


&nbsp;<input type="image" value="" src="images/plus_sign.gif" height="10" width="9" align="bottom" onclick="toggleDisplay('element-2');">
<a href="books/index_books.html" target="_parent" class="link">BOOKS</a><br>
<div id="element-2">
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="books/getrich/contents.html" target="_parent" class="link">THE SCIENCE OF<br>&nbsp;GETTING RICH</a><br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="books/chakras/contents.html" target="_parent" class="link">CHAKRAS AND<br>&nbsp;ENERGY BODIES</a><br>
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="books/lifesaver/purpose.html" target="_parent" class="link">EVERYDAY 12-POINT<br>&nbsp;LIFESAVER</a>
</div>

<img height="10" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<input type="image" value="" src="images/plus_sign.gif" height="10" width="9" align="bottom" onclick="toggleDisplay('element-3');">
<a href="articles/index_articles.html" target="_parent" class="link">ARTICLES</a>&nbsp;<br>
<div id="element-3">
<img height="5" width="1" src="images/shim.gif" border="0"><br>
&nbsp;<a href="http://www.scienceofgettingrich.net/update.html" target="_blank" class="link">THE CERTAIN WAY<br>&nbsp;E-ZINE FROM<br>&nbsp;REBECCA FINE</a>
</div>
<br><br>
</div>
<!-- SHOW/HIDE ENDS HERE -->



I'd appreciate any help so feel free to email me at identiy1040@yahoo.com.

Thanks and regards,
Chris

alexjewell
06-19-2007, 01:50 AM
What they're saying, Hitta, is that when you are lazy in your coding and don't go by standards, things very possibly could go wrong. How much longer does it take to add some quotes...just to one, make your code look better and two, follow the "rules"? Even if it does work doesn't mean it's right, nor that it will tomorrow. Web design is changing right now, and it's going towards standards. Follow these standards now and it'll be better for you in the end.