PDA

View Full Version : Animated Collapse use onclick instead of href



admijn
04-03-2009, 10:32 AM
1. http://www.dynamicdrive.com/dynamici...edcollapse.htm

2) Script URL (on DD): localhost...

3) Describe problem:

Hi,
I want to use an entire layer as a button. Now I use this code, and it perfectly works fine.

<h1 class="accordion_toggle" onclick="javascript:animatedcollapse.toggle('about')">ABOUT</h1>

<div id="about" class="accordion_content">
content goes here
</div>
But: when I parse the code through a php array like below I, the onclick function isn't working anymore.


$input = array('<div onclick=":animatedcollapse.toggle(\'about\')">ABOUT</div></h3>
<div class="accordion_content2" id=about>
<jdoc:include type="modules" name="work6" style="xhtml" />
</div>'
);
etc. etc. etc.
$rand_keys = array_rand($input, 7);
<h3 class="vertical_accordion_toggle bg_1"><?php echo $input[$rand_keys[0]] . "\n"; ?>
etc. etc. etc.

The code above gives the following output in Firefox.


<h3 class="vertical_accordion_toggle bg_7"><div onclick=":animatedcollapse.toggle('about');">ABOUT</div></h3>
<div class="accordion_content2" id=about>
<div class="moduletable">


While an animated collapse div layer that IS NOT parsed by the php gives this output:


<h1 class="accordion_toggle" onclick="javascript:animatedcollapse.toggle('work')">WORK</h1>

<div id="work">
<div class="accordion_content2">

<div class="moduletable">

What's going wrong here? Pretty looks the same right? The onclick function is working in the 'work' layer, but not in the 'about' layer.
Is this because of the array, or because of the animated collapse is within an animated collapse?
I'm lost atm. :(

Thx in advance!

admijn
04-03-2009, 12:10 PM
After 3 days, finaly found the solution.
Instead of:

<h3 class="vertical_accordion_toggle bg_1"><?php echo $input[$rand_keys[0]] . "\n"; ?>

It has to be:

<h3 class="vertical_accordion_toggle bg_1" <?php echo $input[$rand_keys[0]] . "\n"; ?>

adding a space and deleting the > does the trick for me.

Nile
04-03-2009, 12:15 PM
I think thats an invalid solution, in the above code (in the 1st post), can you provide whats in the etc. etc,

admijn
04-03-2009, 12:31 PM
It is a very valid solution :)
See the working code below. (in the etc. etc. was just more of the same, put into the array)

<?php
srand((float) microtime() * 10000000);
$input = array('onclick="javascript:animatedcollapse.toggle(\'werkeen\')">Getronics PinkRoccade</h3>
<div class="accordion_content2" onclick="javascript:animatedcollapse.toggle(\'werkeen\')">
<div id="werkeen">
<jdoc:include type="modules" name="work1" style="xhtml" />
</div>
</div>',

'onclick="javascript:animatedcollapse.toggle(\'werktwee\')">Capac-Randstad brochure</h3>
<div class="accordion_content2" onclick="javascript:animatedcollapse.toggle(\'werktwee\')">
<div id="werktwee">
<jdoc:include type="modules" name="work2" style="xhtml" />
</div>
</div>',

'onclick="javascript:animatedcollapse.toggle(\'werkdrie\')">NPEX-corporate</h3>
<div class="accordion_content2" onclick="javascript:animatedcollapse.toggle(\'werkdrie\')">
<div id="werkdrie">
<jdoc:include type="modules" name="work3" style="xhtml" />
</div>
</div>',

'onclick="javascript:animatedcollapse.toggle(\'werkvier\')">Tamara Muller Website</h3>
<div id="werkvier" class="accordion_content2">
<jdoc:include type="modules" name="work4" style="xhtml" />
</div>
',

'onclick="javascript:animatedcollapse.toggle(\'werkvijf\')">International system of disaster pictograms</h3>
<div class="accordion_content2" id=werkvijf>
<jdoc:include type="modules" name="work5" style="xhtml" />
</div>',

'onclick="javascript:animatedcollapse.toggle(\'werkzes\')">DAF</h3>
<div class="accordion_content2" id=werkzes>
<jdoc:include type="modules" name="work6" style="xhtml" />
</div>',

'onclick="javascript:animatedcollapse.toggle(\'werkzeven\')">Rassegna</h3>
<div class="accordion_content2" id=werkzeven style="background-color:#FFF">
<jdoc:include type="modules" name="work7" style="xhtml" />
</div>'




);
$rand_keys = array_rand($input, 7);
?>
<h3 class="vertical_accordion_toggle bg_1" <?php echo $input[$rand_keys[0]] . "\n"; ?>
<h3 class="vertical_accordion_toggle bg_2" <?php echo $input[$rand_keys[1]] . "\n"; ?>
<h3 class="vertical_accordion_toggle bg_3" <?php echo $input[$rand_keys[2]] . "\n"; ?>
<h3 class="vertical_accordion_toggle bg_4" <?php echo $input[$rand_keys[3]] . "\n"; ?>
<h3 class="vertical_accordion_toggle bg_5" <?php echo $input[$rand_keys[4]] . "\n"; ?>
<h3 class="vertical_accordion_toggle bg_6" <?php echo $input[$rand_keys[5]] . "\n"; ?>
<h3 class="vertical_accordion_toggle bg_7" <?php echo $input[$rand_keys[6]] . "\n"; ?>