Re: [Proto-Scripty] simple show / hide

[Walter Lee Davis]

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:

Click Me!
I see you

$('control').observe('click',function(evt){
$('peekaboo').toggle();
});


And here's multiple:

Click Me!
I see you
Always Here
I see you
I see you

$('control').observe('click',function(evt){
$$('.peekaboo').invoke('toggle');
});


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 , add this script (after Prototype loads):


document.observe('dom:loaded',function(){
$$('.peekaboo').invoke('hide');
});


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.

RE: [Proto-Scripty] simple show / hide

[Russell Keith]

Give this a try and see if it shows what you need.  You should be able
to take this example and run with it.



http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">



Element.Observe Example

//wait until the DOM is loaded
document.observe('dom:loaded', function(){
//watch div with the ID of 'ta' and toggle all divs with a class of
'aXa' when clicked
$('ta').observe('click', function (){
   $$('.aXa').each(function (elem){
elem.toggle();
   }) 
});
//watch div with the ID of 'ha' and hide all divs with a class of
'aXa' when clicked
$('ha').observe('click', function (){
   $$('.aXa').each(function (elem){
elem.hide();
   }) 
});
//watch div with the ID of 'sa' and show all divs with a class of
'aXa' when clicked
$('sa').observe('click', function (){
   $$('.aXa').each(function (elem){
elem.show();
   }) 
});
//watch div wiht the ID of 'a1' and toggle div with the ID of 'a1a'
when clicked
$('a1').observe('click', function (){
$('a1a').toggle();
});
//watch div wiht the ID of 'a2' and toggle div with the ID of 'a2a'
when clicked
$('a2').observe('click', function (){
$('a2a').toggle();
});
//watch div wiht the ID of 'a3' and toggle div with the ID of 'a3a'
when clicked
$('a3').observe('click', function (){
$('a3a').toggle();
});
//watch div wiht the ID of 'a4' and toggle div with the ID of 'a4a'
when clicked
$('a4').observe('click', function (){
$('a4a').toggle();
});
})


.aXa{
border: solid 3px blue;
margin: 10px;
padding: 10px;
width: 200px;
}
.aX{
text-decoration: underline;
color: blue;
cursor: hand;
width: 100px;
}



Toggle All
Show All
Hide All
A1
A2
A3
A4


Click A1 show/hide
me.
Click A2 show/hide
me.
Click A3 show/hide
me.
Click A4 show/hide
me.




-- 
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.