CSS Codes
CSS Layouts
Results 1 to 9 of 9

Thread: Animated Collapsible DIV, how to reduce the code if you have a lot of divs

  1. 07-18-2009, 09:14 AM #1
    wuops
    wuops is offline Junior Coders
    Join Date
    Jul 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Animated Collapsible DIV, how to reduce the code if you have a lot of divs

    1) Script Title: Animated Collapsible DIV v2.01

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

    3) Describe problem:


    I'm using the "Collapsible Div" in my blog: www.cineout.es and I will have a lot of divs to add in the "Collapsible Div" code. I have got this long code:

    Code:
    animatedcollapse.addDiv('peli1', 'fade=0,height=210px')
animatedcollapse.addDiv('peli2', 'fade=0,height=210px')
animatedcollapse.addDiv('peli3', 'fade=0,height=210px')
animatedcollapse.addDiv('peli4', 'fade=0,height=210px')
animatedcollapse.addDiv('peli5', 'fade=0,height=210px')
animatedcollapse.addDiv('peli6', 'fade=0,height=210px')
animatedcollapse.addDiv('peli7', 'fade=0,height=210px')
animatedcollapse.addDiv('peli8', 'fade=0,height=210px')
animatedcollapse.addDiv('peli9', 'fade=0,height=210px')
animatedcollapse.addDiv('peli10', 'fade=0,height=210px')


animatedcollapse.addDiv('trailer1', 'fade=0,height=298px')
animatedcollapse.addDiv('trailer2', 'fade=0,height=302px')
animatedcollapse.addDiv('trailer3', 'fade=0,height=375px')
animatedcollapse.addDiv('trailer4', 'fade=0,height=290px')
animatedcollapse.addDiv('trailer5', 'fade=0,height=330px')
animatedcollapse.addDiv('trailer6', 'fade=0,height=320px')
animatedcollapse.addDiv('trailer7', 'fade=0,height=320px')
animatedcollapse.addDiv('trailer8', 'fade=0,height=302px')
animatedcollapse.addDiv('trailer9', 'fade=0,height=310px')
animatedcollapse.addDiv('trailer10', 'fade=0,height=310px')


animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
	if (
divobj.id=="trailer1" || 
divobj.id=="trailer2" || 
divobj.id=="trailer3" || 
divobj.id=="trailer4" || 
divobj.id=="trailer5" || 
divobj.id=="trailer6" || 
divobj.id=="trailer7" || 
divobj.id=="trailer8" || 
divobj.id=="trailer9" || 
divobj.id=="trailer10"
) //only react to these two collapsible DIVs
 document.getElementById(divobj.id+"-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_trailer.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_trailer.jpg"
	if (
divobj.id=="peli1" || 
divobj.id=="peli2" ||
divobj.id=="peli3" || 
divobj.id=="peli4" || 
divobj.id=="peli5" || 
divobj.id=="peli6" || 
divobj.id=="peli7" || 
divobj.id=="peli8" || 
divobj.id=="peli9" || 
divobj.id=="peli10"
) //only react to these two collapsible DIVs
 document.getElementById(divobj.id+"-toggle" || divobj.id+"_info-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand.jpg" 
 	if (
divobj.id=="peli1" || 
divobj.id=="peli2" ||
divobj.id=="peli3" || 
divobj.id=="peli4" || 
divobj.id=="peli5" || 
divobj.id=="peli6" || 
divobj.id=="peli7" || 
divobj.id=="peli8" || 
divobj.id=="peli9" || 
divobj.id=="peli10"
)
 document.getElementById(divobj.id+"_info-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_info.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_info.jpg"
}

animatedcollapse.init()
    and this code in the buttons that collapse or expand all the divs:

    Code:
    <div id="Plegar_fichas" style="float:left; padding-left:5px;"><a href="javascript:animatedcollapse.hide(['peli1', 'trailer1', 'peli2', 'trailer2', 'peli3', 'trailer3', 'peli4', 'trailer4', 'peli5', 'trailer5', 'peli6', 'trailer6', 'peli7', 'trailer7', 'peli8', 'trailer8', 'peli9', 'trailer9', 'peli10', 'trailer10' ])"><img border="0" id="peli10_info-toggle" src="http://cineout.es/wp-content/extra/imgs/Plegar_fichas_no_active.png"/> </a> </div>
<div id="Extender_fichas" style="float:right; padding-right:5px;"><a href="javascript:animatedcollapse.show(['peli1', 'peli2', 'peli3', 'peli4', 'peli5', 'peli6', 'peli7', 'peli8', 'peli9', 'peli10' ])"> <img border="0" id="peli10_info-toggle" src="http://cineout.es/wp-content/extra/imgs/Extender_fichas_no_active.png"/></a></div>
    I will have more divs with the same structure name: samename+id_number (peli1 and trailer1, peli2 and trailer2, peli3 and trailer3...... )

    I'm sorry but I don't have a lot of programming skills, but I'd like to make this script more automatic and unlimited (from div peli1 to div peli1000000, for example). Maybe adding a "for" structure will be it possible. I don't know.

    How can I modify the javascript code to obtain what I'm looking for?

    Thanks to read this and sorry for my English (I'm Spanish).
    Last edited by ddadmin; 07-20-2009 at 04:38 PM.
    Reply With Quote Reply With Quote
  2. 07-19-2009, 05:56 AM #2
    ddadmin's Avatar
    ddadmin
    ddadmin is offline Administrator
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    The addDiv() portion can definitely be done inside a loop. However, the options by default would all be the same (ie: "fade=0,height=210px"). For example, if there are 15 "pelis" and "trailers", you can initialize them all using the following:

    Code:
    for (var x=1; x<=15; x++){
	animatedcollapse.addDiv('peli'+x, 'fade=0,height=210px')
	animatedcollapse.addDiv('trailer'+x, 'fade=0,height=298px')
}
    And for your ontoggle events:
    Code:
    animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
	if (divobj.id.test(/pali/))
 		document.getElementById(divobj.id+"-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_trailer.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_trailer.jpg"
	else if (divobj.id.test(/trailer/))
		document.getElementById(divobj.id+"_info-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_info.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_info.jpg"
    Last edited by ddadmin; 07-20-2009 at 05:07 PM.
    DD Admin
    Reply With Quote Reply With Quote
  3. 07-19-2009, 07:19 AM #3
    wuops
    wuops is offline Junior Coders
    Join Date
    Jul 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks to answer ddadmin, but I tried your code and it still doesn't work, then I tried to correct your code with this:

    Code:
    var i=1;
for (i=1; i<=15; i++){
	animatedcollapse.addDiv('peli'+i, 'fade=0,height=210px')
	animatedcollapse.addDiv('trailer'+i, 'fade=0,height=298px')
}

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
	if (divobj.id.test(/trailer/))
 		document.getElementById(divobj.id+"-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_trailer.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_trailer.jpg"
	else if (divobj.id.test(/peli/))
		document.getElementById(divobj.id+"_info-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_info.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_info.jpg"
		
animatedcollapse.init()
    but it still not working.

    so, anyone have any ideas?
    Reply With Quote Reply With Quote
  4. 07-20-2009, 05:10 PM #4
    ddadmin's Avatar
    ddadmin
    ddadmin is offline Administrator
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    It should work. The following is a stripped down example that initializes 3 animated DIVs via a loop:

    Code:
    <script type="text/javascript">

for (var x=1; x<=3; x++){
	animatedcollapse.addDiv('peli'+x, 'fade=0,height=210px')
}

animatedcollapse.init()

</script>
    And HTML:

    Code:
    <b><a href="javascript:animatedcollapse.show(['peli1', 'peli2', 'peli3'])">Show Examples 1, 2, 3</a> | <a href="javascript:animatedcollapse.hide(['peli1', 'peli2', 'peli3'])">Hide Examples 1, 2, 3</a></b>

<p><b>Example 1 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('peli1')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('peli1')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('peli1')">Slide Up</a>

<div id="peli1" style="width: 300px; background: #FFFFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>


<p><b>Example 2 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('peli2')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('peli2')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('peli2')">Slide Up</a>

<div id="peli2" style="width: 300px; background: #D2FBFF; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>



<p><b>Example 3 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('peli3')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('peli3')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('peli3')">Slide Up</a>

<div id="peli3" style="width: 300px; background: #E7FFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>
    If you have a lot of DIVs to animate, a potentially easier to set up script would be Accordion Content script, since the contents are simply identified by a common CSS class, not unique IDs.
    DD Admin
    Reply With Quote Reply With Quote
  5. 07-21-2009, 07:16 PM #5
    wuops
    wuops is offline Junior Coders
    Join Date
    Jul 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It works! Thank you.

    But, for the code of "Show all" and "Hide all" buttons:

    Code:
    <b>
<a href="javascript:animatedcollapse.show(['peli1', 'peli2', 'peli3'])">Show Examples 1, 2, 3</a> | 
<a href="javascript:animatedcollapse.hide(['peli1', 'peli2', 'peli3'])">Hide Examples 1, 2, 3</a>
</b>
    I have to write all the names of the divs, and I will have lots of divs... so, Is any way to optimize this code?

    if not, I will try the Accordion Content script, as you said, because it works with class, not unique IDs.

    Good advise, by the way
    Reply With Quote Reply With Quote
  6. 07-22-2009, 02:54 AM #6
    ddadmin's Avatar
    ddadmin
    ddadmin is offline Administrator
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Inside your for loop you can also store the ids of all the auto generated ids, then pass them into functions show() and hide(). For example:

    Code:
    var divids=[]
for (var x=1; x<=3; x++){
	animatedcollapse.addDiv('peli'+x, 'fade=0,height=210px')
	divids.push('peli'+x)
}
    Then:

    Code:
    <a href="javascript:animatedcollapse.show(divids)">Show all</a>
    DD Admin
    Reply With Quote Reply With Quote
  7. 07-22-2009, 11:56 PM #7
    wuops
    wuops is offline Junior Coders
    Join Date
    Jul 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes!! that's what I was looking for, thanks again.

    I created a html test page: http://cineout.es/div_test/divs_test.html

    It works well, but I'd like to optimize one more thing. To changes the image of the buttons when the divs are collapsed or expanded. I'm using the "animatedcollapse.ontoggle" function. To use this I have to write the name of each id div again (something like"divobj.id=="peli1" || divobj.id=="peli2" || divobj.id=="peli3""). If I have more than 100 divs it will be hard to write every time I add a new div.

    Code:
    animatedcollapse.ontoggle=function($, divobj, state){
	if (divobj.id=="trailer1" || divobj.id=="trailer2" || divobj.id=="trailer3")
 document.getElementById(divobj.id+"-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_trailer.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_trailer.jpg"
	if (divobj.id=="peli1" || divobj.id=="peli2" || divobj.id=="peli3")
 document.getElementById(divobj.id+"-toggle" || divobj.id+"_info-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand.jpg" 
 	if (divobj.id=="peli1" || divobj.id=="peli2" || divobj.id=="peli3")
 document.getElementById(divobj.id+"_info-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_info.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_info.jpg"
}
    How Can I optimize this code? Is it possible?
    Reply With Quote Reply With Quote
  8. 07-23-2009, 05:42 AM #8
    ddadmin's Avatar
    ddadmin
    ddadmin is offline Administrator
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    What you can do is do a general test for the keywords "trailer' or "peli", and update the image accordingly. For example:

    Code:
    animatedcollapse.ontoggle=function($, divobj, state){
	if (/trailer/.test(divobj.id))
		document.getElementById(divobj.id+"-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_trailer.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_trailer.jpg"
	if (/peli/.test(divobj.id))
		document.getElementById(divobj.id+"-toggle" || divobj.id+"_info-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand.jpg"
}
    DD Admin
    Reply With Quote Reply With Quote
  9. 07-23-2009, 06:45 PM #9
    wuops
    wuops is offline Junior Coders
    Join Date
    Jul 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I modified a little bit your code and now it works in all the toggle images, but something is wrong in the trailer div. When you click on the button image a javascript error popup appears:

    An error exists inside your "ontoggle" function:
    TypeError: document.getElementById(divobj.id + "_info-toggle") is null
    Aborting execution of function.

    You can see it in:

    http://cineout.es/div_test/divs_test2.html

    Any idea?
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules