Animatedcollapse and SMF [document.getElementById]

[fals]

1) Script Title:
Animated collapse with SMF - testforum http://www.chihuahuaforum.dk/

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

3) Describe problem:
Hi
I trying to integrade this effect on a already built-in upshrink/downshrink menu header..... in SMF.
At the moment, when you press http://www.fg-forum.dk/smf/Themes/fg-forum/images/upshrink2.gif - the header upshrink/downshrinks.....

I want to use this nifty slide effect instead of the instant change


but i dont know how :confused: ?

Here's some of the code on the build in:

<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var current_header = ', empty($options['collapse_header']) ? 'false' : 'true', ';

function shrinkHeader(mode)
{';

// Guests don't have theme options!!
if ($context['user']['is_guest'])
echo '
document.cookie = "upshrink=" + (mode ? 1 : 0);';
else
echo '
smf_setThemeOption("collapse_header", mode ? 1 : 0, null, "', $context['session_id'], '");';

echo '
document.getElementById("upshrink").src = smf_images_url + (mode ? "/upshrink2.gif" : "/upshrink.gif");

document.getElementById("upshrinkHeader").style.display = mode ? "none" : "";
document.getElementById("upshrinkHeader2").style.display = mode ? "none" : "";

current_header = mode;
}
// ]]></script>';

Further down - the "trigger" link"

// this is the upshrink button for the user info section
echo ' <a href="#" onclick="shrinkHeader(!current_header); return false;"><img id="upshrink" src="', $settings['images_url'], '/', empty($options['collapse_header']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" align="bottom" style="margin: 0 1ex;" /></a>
</td>
</tr>
<tr id="upshrinkHeader"', empty($options['collapse_header']) ? '' : ' style="display: none;"', '>
<td valign="top" colspan="2">
<table width="100%" class="bordercolor" cellpadding="8" cellspacing="1" border="0" style="margin-top: 1px;">
<tr>';

Anyone have an idea where to put in the codes ?
I thinks it something like http://www.dynamicdrive.com/forums/showpost.php?p=107119&postcount=2

[ddadmin]

The thread you pointed to addresses animating a DIV that changes content dynamically (after the page has loaded). This doesn't apply in your case if I understand how the login system works on your forum.

In general, this script requires that the animated content be wrapped in a DIV, with the script animating that DIV itself. Based on your source, try this:

Change the following code on your page:


<a href="#" onclick="shrinkHeader(!current_header); return false;"><img id="upshrink" src="http://www.chihuahuaforum.dk/Themes/fg-forum/images/upshrink.gif" alt="*" title="Vis eller skjul menu" align="bottom" style="margin: 0 1ex;" /></a>

To this instead:


<a href="#" onclick="javascript:loginbox.slidedown(); return false;"><img id="upshrink" src="http://www.chihuahuaforum.dk/Themes/fg-forum/images/upshrink.gif" alt="*" title="Vis eller skjul menu" align="bottom" style="margin: 0 1ex;" /></a>

Then, inside the Table tag that follows:


<tr id="upshrinkHeader">
<td valign="top" colspan="2">
<table width="100%" class="bordercolor" cellpadding="8" cellspacing="1" border="0" style="margin-top: 1px;">

Wrap that entire table in a DIV tag:


<tr id="upshrinkHeader">
<td valign="top" colspan="2">
<div id="upshrinkHeader-alt">
<table width="100%" class="bordercolor" cellpadding="8" cellspacing="1" border="0" style="margin-top: 1px;">
"
"
</table>
</div>

You need to find out where the closing </table> tag for the table is, and add in a closing DIV tag as highlighted above.

Finally, following the above code, initalize the script:


<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var loginbox=new animatedcollapse("upshrinkHeader-alt", 1000, true)

</script>

Not tested, but on paper it looks like it should work.

[fals]

Thanks for the quick reply ! http://www.fg-forum.dk/smf/Smileys/fg/EmoPackv6_059.gif
Well, i got the collapse effect working, theres just 2 problems....

1.
On the build-in up/downshrink, it "remebers" if the header is open or closed.
So if the header is open, i will be kept open on all other pages/links i press...

I think this is done by cookie, as show on my first quote.


// We'll have to use the cookie to remember the header...
if ($context['user']['is_guest'])
$options['collapse_header'] = !empty($_COOKIE['upshrink']);

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'], '

<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var current_header = ', empty($options['collapse_header']) ? 'false' : 'true', ';

function shrinkHeader(mode)
{';

// Guests don't have theme options!!
if ($context['user']['is_guest'])
echo '
document.cookie = "upshrink=" + (mode ? 1 : 0);';
else
echo '
smf_setThemeOption("collapse_header", mode ? 1 : 0, null, "', $context['session_id'], '");';

echo '
document.getElementById("upshrink").src = smf_images_url + (mode ? "/upshrink2.gif" : "/upshrink.gif");

document.getElementById("upshrinkHeader").style.display = mode ? "none" : "";
document.getElementById("upshrinkHeader2").style.display = mode ? "none" : "";

current_header = mode;
}
// ]]></script>';

Now it collapse everytime i reload a page or press a link....

2.
Each time a page reload, the div is open for 1/100 of a second, making it apear flickering....
http://www.chihuahuaforum.dk/index.php

Strange ?

[ddadmin]

Persistence is actually turned on already (so the state of the collapsing DIV is remembered), as enabled by the 3rd parameter when you called the script:


var loginbox=new animatedcollapse("upshrinkHeader-alt", 1000, true)

Right now it only persists the same DIV that spans the same directory on your site, instead of site wide. To make it side wide, inside the .js file, add the changed in red to this line:


document.cookie = name+"="+value+"; path=/"

Regarding the "flicker", there has been quite a few threads on this already. Basically, it's part of the original design of the script, so content is shown until the script is run. This prevents people with JavaScript disabled from not being able to see the content. There are a few solutions around this (if you don't mind the accessibility part) in those past threads as well (do a search).

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice.