Visibility W/ Ajax

phpnut · November 2006

I want to display some information on a page, but only until a user chooses not to. For example, I'd like to have some text in a table row, then a user clicks "close" and then the text disappears, but the rest of the page moves up on the page to fill the space. If the user then clicks something, I'd like the text to show back up. I know I can do this with simply filling a div or span with nothing, but I was wondering if there's a better way with CSS or something. Please nothing with frameworks!!

Thanks!
If it helps, I'd like this for my user article app, www.naturesmagazine.com/membership/userarticles/index.php , so the user can hide and show their search results while viewing articles.

Nuvo · November 2006

If you use scriptaculous effects, it's possible to make a page where the user can show and \ or hide parts of the page with AJAX.
This is what I'm using, and it works fairly well:
[html]

<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/effects.js" type="text/javascript"></script>


<a href="#" onclick="Effect.toggle('info','blind',{});; return false;" title="Toggle this sections visibility">Toggle this</a>


<div id="info" class="someclass">
Your content here!
</div>
[/html]

To get that working, download the scriptaculous javascript library and extract it to somewhere like sitepath/javascripts/.
Prototype is included with Scriptaculous, so there's no need to download it on it's own.
If you want the element to be hidden by default, give it CSS properties of display: none;, but make sure they are applied using the style="display: none" method rather than a stylesheet entry and a class as this works off of the CSS attributes of an element.

The effect can be either blind, which appears to pull the element down (content doesn't move with it), appear (fades in and out) or slide (like blind, but the content moves with the element).

phpnut · November 2006

Thanks, Nuvo! I was a little weary about ajax frameworks because I could never figure out how to use them, but since you showed me how to use it, I tried it out and it worked very nicely!

phpnut · November 2006

I have one more question which is probably really obvious, but how can I have the div start out being hidden and then have the user click the link or button and have the content flow down?

Nuvo · November 2006

If you don't want the box shown by default, you simply change it from:
[html]<div id="toggleme">Something</div>[/html]
To:
[html]<div id="toggleme" style="display: none;">Something</div>[/html]
Using display: none; will make the element invisible, meaning that when the toggle link is clicked, it will be shown rather than being visible and then hidden.
If you want the content to appear as though it's moving when the element is shown, simply change "blind" to "slide".

Howdy, Stranger!

Categories

In this Discussion

Visibility W/ Ajax

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Visibility W/ Ajax

Comments