Zwijanie kategorii jak w I.P.B

Założony przez  GiboneKPL.

wersja skryptu MyBB: 1.6.9
adres forum: Testowe !
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): Witam. Szukam kodu na zwijanie kategorii jak w I.P.B . Szukałem, ale znaleźć nie mogłem. Może ktoś tutaj wie ?
hmm, widzę że collapsy masz w dobrze, ale opisz dokładniej o co ci chodzi?
podejrzewam że o animację tak?
Tak dokładnie, chodzi mi o animację zwijania oraz o "półprzeźroczyste" theady po zwinięciu kategorii.
Ja znalazłem plugin do tego, ale gryzie się on z MyShoutbox przez co wyświetla się cały czas "Ładowanie..." Link do plugina
ja mam DVZ zaraz dam znać czy działa i się nie gryzie.
//EDIT
niestety po wgraniu nie zwija się w ogóle;/
fdrest, ale ja chcę mieć MyShoutboxa a nie DVZ (nie trawię go..)
Rozwiązałem to bez pomoc żadnego pluginu.

Wystarczyło z edytować 1 szablon i do global.css dodać kod. A tak to wygląda:

forumbit_depth1_cat
<div class="thead_2 th_{$forum['fid']}">
<span class="forumtitle"><a href="{$forum_url}">{$forum['name']}</a></span><span class="forumdesc" id="{$forum['fid']}desc">{$forum['description']}</span>
<span class="expcolimage" id="expcol_{$forum['fid']}_close"><img src="{$theme['imgdir']}/collapse.gif" /></span>
<span class="expcolimage" id="expcol_{$forum['fid']}_open"><img src="{$theme['imgdir']}/collapse_collapsed.gif" /></span>
</div>

<div id="expcol_{$forum['fid']}_box">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
<tr>
<td style="padding:0" colspan="2"/>
<td style="padding:0" width="85"/>
<td style="padding:0" width="200"/>
</tr>
<tr>
</tr>
{$sub_forums}
</tbody>
</table>
</div>
<br />

<script>
jQuery('#expcol_{$forum['fid']}_open').hide()

jQuery('#expcol_{$forum['fid']}_close').click(function () {
      jQuery(this).hide();
      jQuery('#expcol_{$forum['fid']}_box').slideUp('500', 'swing');
      jQuery('#expcol_{$forum['fid']}_open').show();
jQuery('.th_{$forum['fid']}').animate({"border-radius":"5px","opacity":"0.4"});
      jQuery.cookie("animcol","closed", {expires: 365});
      return false;
    });
jQuery("#expcol_{$forum['fid']}_open").click(function () {
      jQuery(this).hide();
      jQuery('#expcol_{$forum['fid']}_box').slideDown('500', 'swing');
      jQuery('#expcol_{$forum['fid']}_close').show();
jQuery('.th_{$forum['fid']}').animate({"border-radius":"5px 5px 0 0","opacity":"1"});
      jQuery.cookie("animcol","open", {expires: 365});
      return false;
    });
if(jQuery.cookie("animcol") == "closed") {
        jQuery("#expcol_{$forum['fid']}_close").hide();
        jQuery("#expcol_{$forum['fid']}_open").show();
        jQuery('#expcol_{$forum['fid']}_box').hide();
jQuery('.th_{$forum['fid']}').animate({"border-radius":"5px","opacity":"0.4"});
};
</script>

global.css
.thead_2 {
    background: #CCC;
    color: #ffffff;
    padding: 0px 10px;  
    background: #3c6a27 url(images/ncx.png) center left repeat;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    height: 30px;

}
.thead_2 .expcolimage {
    -webkit-transition: 0.3s;
        transition:0.3s;
    -o-transition:0.3s;
    -ms-transition:0.3s;
    -moz-transition:0.3s;
}
.thead_2:hover .expcolimage {
    opacity:1;
    cursor:pointer;
}

.thead_2:hover .expcolimage img {
opacity: 1;
}

.thead_2 .expcolimage img {
opacity: 0;
transition: opacity 0.25s cubic-bezier(0.42, 0, 0.58, 1) 0;
}

.thead_2 a:link {
    color: #ffffff;
    text-decoration: none;
}

.thead_2 a:visited {
    color: #ffffff;
    text-decoration: none;
}

.thead_2 a:hover, .thead a:active {
    color: #ffffff;
    text-decoration: underline;
}
Oczywiście w klasie .thead_2 atrybut background
    background: #3c6a27 url(images/ncx.png) center left repeat;
Można zmienić na swój obrazek. Ale jak ktoś chce ten to załącznik ;)

@UWAGA może wam to nie działać ponieważ trzeba dodać do headerinclude (ACP -> Style i Szablony -> Szablony -> Twój_Szablon -> Niezagrupowane Szablony -> headerinclude) te dwa kody:
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Pozdrawiam ;)


Załączone pliki Miniatury
   
powklepaniu tych kodów rozsypała się cała ramka http://testoweelderbary.cba.pl/forum/index.php
... No to zamień:
thead_2
na:
thead
Cytat:It's all about the details.
---------------
PW tylko forum, nie mejl.


nadal to samo oraz nie mogę korzystać z nawigacji usera



Użytkownicy przeglądający ten wątek:

1 gości