PDA

View Full Version : Animated Collapsible DIV v2.4 - Updating it



miradoro
11-14-2012, 07:54 PM
Hi
i am using
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

but i would like to combinate with this navigation
http://www.bfmarketing.com/LNA-3071-Landing-page/change.html

Can anyone help?

ddadmin
11-15-2012, 08:40 AM
Combining the two in what way?

miradoro
11-15-2012, 01:33 PM
when you click on button1 (energy and efficiency ...) the other images change and a panel appears ...you can see it @ http://www.bfmarketing.com/LNA-3071-Landing-page/

Please advice

ddadmin
11-15-2012, 08:36 PM
Hmm if you look at Example 4, 5, and 6 on the script page (http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm), you'll see it does support using images to toggle content, with the image itself changing based on the state of the corresponding content.

miradoro
11-16-2012, 01:41 PM
Hi, yes and it is excellent but i was looking for an option where the image changes other images as you can see on my navigation
will that be possible?

ddadmin
11-19-2012, 07:41 AM
Hmm on the example page you cited, I see four images that each change when their corresponding DIV is expanded, and changes back to their original image when contracted instead. There are no other changes to any other images on the page. If that's the case, then as mentioned, demos 4 to 6 already demonstrates this in action. Just make sure all your DIVs are initialized as part of the same group, for example:


animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')

Again, please see demos 4 to 6 and the code to copy and paste.

miradoro
11-19-2012, 05:54 PM
hi
i have 3 styles for each button image

btn-on (shows full image)
btn-light (ghosted image)
btn-off (shows image in color)

'data-closedimage' (btn-light) overrides the image in color (btn-off)....is there a way to have 'data-closedimage' activated only after a click?

miradoro
11-19-2012, 06:11 PM
i guess what i am trying to say is
can i load the page by showing the image indicated between the <img> tags?

miradoro
11-21-2012, 03:47 PM
can i load the page by showing the image indicated between the <img> tags instead of having 'data-closedimage' show first?

ddadmin
11-21-2012, 07:47 PM
So just to be clear, initially you want whatever image is defined in the "src" property of the toggler button to be shown regardless of its corresponding contennt's state (closed or opened), and then as soon as the user starts interacting with the button, to override that with either the closed or opened image depending on the content's state?

miradoro
11-21-2012, 07:55 PM
yes...is that possible?

ddadmin
11-22-2012, 05:51 AM
Ok, inside the .js file, try commenting out the line below:


// ac.divholders[this._divids].$togglerimage.attr('src', (ac.divholders[this._divids].$divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)

miradoro
11-26-2012, 01:51 PM
hi

i tried it but no luck :(

ddadmin
11-29-2012, 05:47 AM
I just tested the script out again with the changes mentioned above, and it does work. Just to reiterate, what the new code does is to show whatever image is defined in the "src" property of the toggler button initially regardless of its corresponding content's state (closed or opened), and then as soon as the user starts interacting with the button, to override that with either the closed or opened image depending on the content's state.