« WordCamp Ed – The Very First Edition | WordPress – Plugin To Keep Track Of Visitors »
JavaScript – Hide/Unhide Entities With Scriptaculous
November 25th, 2008 @ 06:02:25 -0500 | HTML, JavaScript
Disclaimer
The instructions/steps/scripts/methods given below worked for me and it may very well work for you. Please note that if you decide to use these instructions on your machine, you are doing so entirely at your very own discretion and that neither this site, sgowtham.net, nor its author is responsible for any/all damage – intellectual or otherwise.
What is JavaScript?
JavaScript is a scripting language widely used for client-side web development. It was the originating dialect of the ECMAScript standard. It is a dynamic, weakly typed, prototype-based language with first-class functions. JavaScript was influenced by many languages and was designed to look like Java, but be easier for non-programmers to work with. Although best known for its use in websites (as client-side JavaScript), JavaScript is also used to enable scripting access to objects embedded in other applications. JavaScript, despite the name, is essentially unrelated to the Java programming language, although both have the common C syntax, and JavaScript copies many Java names and naming conventions. The language was originally named LiveScript but was renamed in a co-marketing deal between Netscape and Sun, in exchange for Netscape bundling Sun’s Java run-time with their then-dominant browser. The key design principles within JavaScript are inherited from the Self and Scheme programming languages. JavaScript is a trademark of Sun Microsystems. It was used under license for technology invented and implemented by Netscape Communications and current entities such as the Mozilla Foundation
What Is Scriptaculous?
The Scriptaculous provides one with easy-to-use, cross-browser user interface JavaScript libraries to make web sites and web applications fly. It’s an add-on to the Prototype framework. Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers.
Why I Need It?
As part of my photoblog software, the entire page would reload [from scratch] when a user/visitor chose to display Details &/or EXIF Information. This had been bothering me for a while and not knowing enough JavaScript myself, it took me a while to figure things out [by which I mean take someone else's code; learn just enough JavaScript to be dangerous; modify the code meet my requirements].
The Code
Download the scripts, prototype.js, builder.js, controls.js, dragdrop.js & scriptaculous.js and store them in a folder called scripts under the web root. If you cannot find them online for some reason, you can take mine:
prototype.js | builder.js | controls.js | dragdrop.js | scriptaculous.js
First step is to include these scripts within the HEAD section of the HTML/PHP file.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- HEAD Section BEGINS--> <head> [MORE STUFF] <!-- JavaScripts --> <script type="text/javascript" src="/scripts/prototype.js"></script> <script type="text/javascript" src="/scripts/scriptaculous.js"></script> [MORE STUFF] </head> <!-- HEAD Section ENDS--> |
Next step is to use Effects.toggle and one of the display options to get the desired effect while hiding / unhiding entities. The following will go in an appropriate location within the <body> element.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!-- BODY Section BEGINS --> <body> [MORE STUFF] <a href="#" onclick="Effect.toggle('toggle_stuff', 'blind'); return false;">Show My Stuff</a> <div id="toggle_stuff" style="display:none"> <div> STUFF THAT NEEDS HIDING / UNHIDING </div> </div> [MORE STUFF] </body> <!-- BODY Section ENDS --> |
Please note that
- toggle_stuff is the name of the DIV ID which will contain the text that needs hiding / unhiding.
- blind is one possible option; appear and slide are other options.
- blind and slide take { delay: N } as an optional parameter; N is the number of seconds and it can be fractional.
- The toggle_stuff DIV ID must be followed by another DIV; else, the effect may not work as intended.
- Using display:none as style will hide the stuff when the page loads at first. Clicking once on the link above will show it. Clicking again will hide it.
- If there are more stuff, in different parts of the same page, that need toggle effect, they need to be within unique DIV ID. Using CSS, one can decorate these DIV ID elements with some jazzy effects.
Demonstration
One can check out this page and click on Details, Histogram, EXIF and/or Comments to see it in action.
Has anyone got this to work? I’ve been struggling with no results for a while. Just can’t get it to do anything.
@Mike:
If you can elaborate a bit more on your struggles (or send me your code snippet), I can try to help you.
hey mike,
the above steps work as described. i had no problem. may be you are doing something wrong?
Hi, I slept for a night and got it working. Thanks anyway. And extra thanks to you Gowtham! Lovin this.
@Mike:
Glad to hear that it’s working and making you happy
Offtopic: I don’t know if it’s a mistake or not, but it says “© 2002-2018 Gowtham • All Rights Reserved” down there
Yes – I have the domain registered till 2018; not sure how the internet will look ten years from now, but figured would keep my e-property registered