PDA

View Full Version : Animated Collapsible DIV - click anywhere else and collapse all



newyorker2
06-17-2008, 01:57 PM
1) Script Title: Animated Collapsible DIV v2.01

2) Script URL (on DD):http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem:


I successfully set it up, everything works fine.
however when i click on anywhere else in the browser i want to close
all the toggles. In other words, if a user clicks anywhere else in the
browser all menus will collapse.

any help is appreciated.

newyorker2
06-17-2008, 06:50 PM
can anybody help?

i think i need something like: document.onclick = hideall;

ddadmin
06-17-2008, 07:54 PM
It's a little more involved than that. :) At the end of your document, try adding a script like the following:


<script type="text/javascript">

$(document).click(function(e){
var $target=$(e.target)
if (!/javascript:animatedcollapse/i.test($target.attr('href')) && $target.parents('a[@href^="javascript:animatedcollapse"]').length==0){
animatedcollapse.hide(['jason', 'kelly', 'michael'])
}
})

</script>

And change "jason", "kelly" etc to the IDs of the content DIVs you wish to collapse when the user clicks anywhere on the page other than the controls themselves.

newyorker2
06-17-2008, 08:26 PM
I am sorry I spoke too soon.

The solution you just wrote works good but with 1 problem.
if i click on the content of the div it also collapses the div.

i only want to collapse it when i click anywhere outside the DIVs.

I have a form field in the DIV so it needs to stay open when user clicks on it.

I hope you can help.

thank you

ddadmin
06-18-2008, 12:04 AM
Sure. Inside the .js file, add to the line below the part in red:


this.$divref=$('#'+this.id)
this.$divref.click(function(e){e.stopPropagation()})

Basically this causes any clicks within the collapsible DIVs to not be affected by the code you added earlier to collapse them when a click occurs anywhere on the document.

newyorker2
06-18-2008, 02:11 PM
thank you
thank you

amberdesignz
08-01-2008, 04:10 AM
I added the code to the bottom of my document and it doesn't work for me. All the windows stay open.

<script type="text/javascript">

$(document).click(function(e){
var $target=$(e.target)
if (!/javascript:animatedcollapse/i.test($target.attr('href')) && $target.parents('a[@href^="javascript:animatedcollapse"]').length==0){
animatedcollapse.hide(['ktmracingbox', 'shoeibox', 'scottusabox', 'truthbox', 'sierrabox', 'rmsbox', 'realtybox', 'redbullbox','renthalbox', 'dhl','motorexbox', 'ngkbox', 'ktmpartsbox', 'vpbox', 'asteriskbox', 'brembobox', 'cmbox', 'conceptbox', 'fmfbox', 'regniabox', 'wpbox', 'twinairbox', 'hatchbox', 'ziptybox', 'gprbox', 'imsbox', 'michelinbox', 'astarbox', 'mpbox'])
}
})

</script>

ddadmin
08-01-2008, 05:08 AM
Amber:
Please post a link to the page on your site that contains the problematic script so we can check it out.