Shouldn't be a problem.

On Jan 14, 2010, at 10:14 AM, Iain wrote:

Hi,

I'm currently trying to implement a simple show/hide effect using
prototype. I had a nice effect using mootools but the site is using
magento so mootools is a no-go as magento requires protoype.

All I want is a click on an image to show a div, for several images /
divs on one page. All the divs are initially hidden by css.

You may have a problem here. If you are using external CSS to hide these elements initially, then you won't be able to make them appear. If you use inline style tags for just the display:none part, then you will.


As I'm not a developer, I'm really struggling to understand how to do
this even though I can see its probably about the most basic function
in prototype.

Here's one-to-one control and show/hide widget:

        <div id="control">Click Me!</div>
        <div id="peekaboo" style="display:none">I see you</div>
        <script type="text/javascript">
        $('control').observe('click',function(evt){
                $('peekaboo').toggle();
        });
        </script>

And here's multiple:

        <div id="control">Click Me!</div>
        <div class="peekaboo" style="display:none">I see you</div>
        <div class="alwaysVisible">Always Here</div>
        <div class="peekaboo" style="display:none">I see you</div>
        <div class="peekaboo" style="display:none">I see you</div>
        <script type="text/javascript">
        $('control').observe('click',function(evt){
                $$('.peekaboo').invoke('toggle');
        });
        </script>

One last thing I always recommend: if you're going to hide something and show it with JavaScript, you owe it to your unscripted visitors to hide it with JavaScript, so the absence of JS will simply cause it to appear.

At the bottom of your <head>, add this script (after Prototype loads):

        <script type="text/javascript" charset="utf-8">
        document.observe('dom:loaded',function(){
                $$('.peekaboo').invoke('hide');
        });
        </script>

This will hide all the things you're planning to show later (so you can remove all of the inline styles) -- but before the page displays in the browser so you won't see a flash of content.



I'd really appreciate any help, as I'm banging my head off a wall at
the moment.

I've met that wall...

Walter


cheers,
iain

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com . To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com . For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en .



-- 
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.


Reply via email to