Expand/Collapse Anything - The Dream Portal Way!

Author Topic: Expand/Collapse Anything - The Dream Portal Way! (Read 2232 times)

0 Members and 2 Guests are viewing this topic.

#15

Re: Expand/Collapse Anything - The Dream Portal Way! - January 12, 2012, 12:29:12 PM

Another issue. I removed the "block_header" within the class for the div because it was messing up the layout. However, after I collapse and then expand again, the "block_header" returns in the source. I reckon you added it via javascript?

I don't think this is the best way. If I change the CSS in my stylesheet, it effects all the whole curve theme, which isn't what is needed. Sense you added !important to the the styling of "block_header", I cannot override it either.

As a temporary fix, I used "line-height: 28px;" in the div. This automactically centers text vertically(if there is no top/bottom padding in the container). Then I added "padding-top: 7px" to the images to line them up in the center vertically.

So in the end, this is what I'm using this as the fix(as an example):

Code: [Select]

<div id="dp_examplemodule_1" class="windowbg3 catlink', (!$dp_box['is_collapsed'] ? '"' : '"'), ' style="line-height: 28px;">Navigation
		<span class="floatright" onclick="toggleModuleAnim(\'example\', \'1\', \'3\');">
			<img id="examplecollapse_1" class="dp_curveblock hand" src="' . $settings['images_url'] . '/' . ($dp_box['is_collapsed'] ? 'expand' : 'collapse') . '.gif" style="padding-top: 7px;" alt="">
		</span>

In DP 1.2, we might want to revisit this to see if we can find a better way. Everytime someone tries to use this script without the "catbg", they will have these problems.

Last Edit: January 12, 2012, 12:50:09 PM by Xarcell

Logged

#16

Re: Expand/Collapse Anything - The Dream Portal Way! - January 12, 2012, 04:22:00 PM

This line here is pointless...

Code: [Select]

', (!$dp_box['is_collapsed'] ? '"' : '"'), '

Just close it with the " instead and remove that line.

Logged

#17

Re: Expand/Collapse Anything - The Dream Portal Way! - January 12, 2012, 04:25:53 PM

Quote from: Xarcell on January 12, 2012, 11:35:26 AM

Thanks SoLo. It works, except that the cookie isn't working? If I collapse, then refresh, it is expanded again.

Works fine for me.

Logged

#18

Re: Expand/Collapse Anything - The Dream Portal Way! - January 12, 2012, 04:36:10 PM

Also, you know you can use anything to expand or collapse, doesn't have to be the expand.gif and collapse.gif images in settings....

Just so you know.

Logged

#19

Re: Expand/Collapse Anything - The Dream Portal Way! - January 15, 2012, 03:16:42 PM

I keep trying and trying, the thing won't stay collapsed after refresh. Will you take a brief look please?

Code: [Select]

<?php
if (!defined('DP'))
    die('Hacking Attempt...');
/*
	Name: Vertinav Module
	Version: 1.0 
	Credits: A Dream Portal module by Xarcell.
*/

function module_vertinav($params)
{
	global $context, $settings, $txt;

	// Set $unique_id for this circleslider module instance and reset the $context variable.
	$unique_id = $context['dp_mod_vertinav']['unique_id'][0];
	unset($context['dp_mod_vertinav']['unique_id'][0]);
	$context['dp_mod_vertinav']['unique_id'] = array_values($context['dp_mod_vertinav']['unique_id']);

       // Add DP expand/collapse function to link categories.
       $dp_box['is_collapsed'] = $context['user']['is_guest'] ? !empty($_COOKIE['examplemodule_1']) : !empty($options['examplemodule_1']);

echo '
<style type="text/css">
ul#vertinav { font-size: .75em; margin: 0; padding: 0; }
ul#vertinav li { display: block; padding: 5px 18px; margin: 0 0 1px 0; list-style: none; }
ul#vertinav li.round-link { border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
ul#vertinav li h3 { font-weight: bold; }
ul#vertinav li a { text-decoration: none; }
.catlink { display: block; padding: 0 10px; margin: 0 0 1px 0; }
</style>';

if (!empty($params['cat-1'])){
echo '
<div id="dp_examplemodule_1" class="windowbg3 catlink" style="line-height: 28px; margin-bottom: 1px !important;">'.$params['cat-1'].'
		<span class="floatright" onclick="toggleModuleAnim(\'example\', \'1\', \'3\');">
			<img id="examplecollapse_1" class="dp_curveblock hand" src="' . $settings['images_url'] . '/' . ($dp_box['is_collapsed'] ? 'expand' : 'collapse') . '.gif" style="padding-top: 7px;" alt="">
		</span>
</div>
<div id="examplemodule_1"', ($dp_box['is_collapsed'] ? ' style="display: none;"' : ''), '>
<ul id="vertinav">';
if (!empty($params['cat-1_row-1_link'])){
echo '
<li class="windowbg" onmouseover="this.className=\'windowbg2\'" onmouseout="this.className=\'windowbg\'"><a href="'.$params['cat-1_row-1_link'].'">'.$params['cat-1_row-1_name'].'</a></li>';
}
if (!empty($params['cat-1_row-2_link'])){
echo '
<li class="windowbg" onmouseover="this.className=\'windowbg2\'" onmouseout="this.className=\'windowbg\'"><a href="'.$params['cat-1_row-2_link'].'">'.$params['cat-1_row-2_name'].'</a></li>';
}
if (!empty($params['cat-1_row-3_link'])){
echo '
<li class="windowbg" onmouseover="this.className=\'windowbg2\'" onmouseout="this.className=\'windowbg\'"><a href="'.$params['cat-1_row-3_link'].'">'.$params['cat-1_row-3_name'].'</a></li>';
}
if (!empty($params['cat-1_row-4_link'])){
echo '
<li class="windowbg" onmouseover="this.className=\'windowbg2\'" onmouseout="this.className=\'windowbg\'"><a href="'.$params['cat-1_row-4_link'].'">'.$params['cat-1_row-4_name'].'</a></li>';
}
if (!empty($params['cat-1_row-5_link'])){
echo '
<li class="windowbg" onmouseover="this.className=\'windowbg2\'" onmouseout="this.className=\'windowbg\'"><a href="'.$params['cat-1_row-5_link'].'">'.$params['cat-1_row-5_name'].'</a></li>';
}
if (!empty($params['cat-1_row-6_link'])){
echo '
<li class="windowbg" onmouseover="this.className=\'windowbg2\'" onmouseout="this.className=\'windowbg\'"><a href="'.$params['cat-1_row-6_link'].'">'.$params['cat-1_row-6_name'].'</a></li>';
}
if (!empty($params['cat-1_row-7_link'])){
echo '
<li class="windowbg" onmouseover="this.className=\'windowbg2\'" onmouseout="this.className=\'windowbg\'"><a href="'.$params['cat-1_row-7_link'].'">'.$params['cat-1_row-7_name'].'</a></li>';
}
if (!empty($params['cat-1_row-8_link'])){
echo '
<li class="windowbg" onmouseover="this.className=\'windowbg2\'" onmouseout="this.className=\'windowbg\'"><a href="'.$params['cat-1_row-8_link'].'">'.$params['cat-1_row-8_name'].'</a></li>';
}
if (!empty($params['cat-1_row-9_link'])){
echo '
<li class="windowbg" onmouseover="this.className=\'windowbg2\'" onmouseout="this.className=\'windowbg\'"><a href="'.$params['cat-1_row-9_link'].'">'.$params['cat-1_row-9_name'].'</a></li>';
}
if (!empty($params['cat-1_row-10_link'])){
echo '
<li class="windowbg" onmouseover="this.className=\'windowbg2\'" onmouseout="this.className=\'windowbg\'"><a href="'.$params['cat-1_row-10_link'].'">'.$params['cat-1_row-10_name'].'</a></li>';
}

}
echo '
</ul>
</div>';


}

Last Edit: January 15, 2012, 03:19:45 PM by Xarcell

Logged

#20

Re: Expand/Collapse Anything - The Dream Portal Way! - January 15, 2012, 08:13:06 PM

Well, first I see that you haven't defined the $options variable as a global, therefore you can't use it.

So, change the following line:

Code: [Select]

global $context, $settings, $txt;

To this instead:

Code: [Select]

global $context, $settings, $txt, $options;

That should do it now.

Logged

#21

Re: Expand/Collapse Anything - The Dream Portal Way! - January 16, 2012, 12:04:01 AM

Rookie mistake. I don't know why I didn't think to look there. Anyways, it works now.

Now I'm trying to add multiples(10 to be exact). So reading your tutorial I seen this:

Code: [Select]

// Just an example of how you could implement a for loop structure for more than 1 animated box.
for($i=0;$i<count($variables) - 1; ++$i)
{
if ($context['dp_installed'])
	$dp_box['is_collapsed'][$i] = $context['user']['is_guest'] ? !empty($_COOKIE['examplemodule_' . $i]) : !empty($options['examplemodule_' . $i]);

     // The rest of the code for displaying the box can be placed in here, and it should display all boxes.
}

So I used that with with this:

Code: [Select]

<div id="dp_examplemodule_\' . $i" class="windowbg3 catlink" style="line-height: 28px; margin-bottom: 1px !important;">'.$params['cat-1'].'
		<span class="floatright" onclick="toggleModuleAnim(\'example\', \'1\', \'3\');">
			<img id="examplecollapse_\' . $i" class="dp_curveblock hand" src="' . $settings['images_url'] . '/' . ($dp_box['is_collapsed'] ? 'expand' : 'collapse') . '.gif" style="padding-top: 7px;" alt="">
		</span>
</div>
<div id="examplemodule_\' . $i"', ($dp_box['is_collapsed'] ? ' style="display: none;"' : ''), '>

Nothing shows at all. Can you elaborate more on this?

Thanks Solo, for all you do.

Logged

#22

Re: Expand/Collapse Anything - The Dream Portal Way! - January 16, 2012, 04:02:51 AM

First, why are you doing this:

Code: [Select]

"dp_examplemodule_\' . $i"

Do this instead:

Code: [Select]

"dp_examplemodule_' . $i . '"

Same thing you are doing for examplemodule, and examplecollapse which can be changed also.

Now, more importantly, you haven't set the following within the loop:

Code: [Select]

$dp_box['is_collapsed'][$i] = $context['user']['is_guest'] ? !empty($_COOKIE['examplemodule_' . $i]) : !empty($options['examplemodule_' . $i]);

And you need to change all calls to $dp_box['is_collapsed'] to use $dp_box['is_collapsed'][$i] instead.

That's about all I see right now.

Last Edit: January 16, 2012, 04:11:04 AM by SoLoGHoST

Logged

#23

Re: Expand/Collapse Anything - The Dream Portal Way! - January 16, 2012, 04:58:00 AM

Quote from: SoLoGHoST on January 16, 2012, 04:02:51 AM

First, why are you doing this:

Code: [Select]
"dp_examplemodule_\' . $i"

I thought that looked funny, but that's what your tutorial says. You may need to correct it. I will work on this more later. Haven't been to bed yet, lol.

Cheers.

Logged

#24

Re: Expand/Collapse Anything - The Dream Portal Way! - January 16, 2012, 04:59:48 AM

huh? Really? I don't see that at all in my tutorial. Argg, will take a look later on tomorrow, I need to sleep also... argg! Just released DP 1.1 - Revision Release #12 for the team

Logged

Author Topic: Expand/Collapse Anything - The Dream Portal Way! (Read 2232 times)

Shoutbox

Forum Staff