Wysuwana tabela serwerów !

**dudeka** · 15 Marca 2012

Witam ! Otóż postanowiłem dodać poradnik jak zrobić tabelę serwerów na forum, ale nie zwykłą lecz wysuwaną. Więc do rzeczy.

Chcesz posiadać tabelę serwerów jak na załączonych obrazkach ? Czytaj dalej

ACP Wygląd Skiny i szablony (wybierz skin) Zarządzaj szablonami i CSS-em Szablony Główne Szablony globalTemplate

Znajdź:

</head>

Dodaj przed :

<style type="text/css">
#wysuwane
{
background: url("http://twojastrona.pl/bg_serwery.png") no-repeat scroll 0 0 transparent;
backgriund: #2b2b2b;
padding: 10px;
width: 980px;
height: 400px;
position: fixed;
margin-top: -100px; /*połowa wysokości panelu w górę */ left: 0px;
top: 40%;
}
.zamknij
{
background-position: 0px 0px -241px 0px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#wysuwane").css("left","-938px");
$("#wysuwane").hover(
function () {
$("#wysuwane").animate({left: "0px"}, 400 );
$(this).addClass("zamknij");
}, function () {
$("#wysuwane").animate({left: "-938px"}, 400 );
$(this).removeClass("zamknij"); }
);
});
</script>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

Znajdź:

</body>

Dodaj przed (przykładowy kod/tabela):

<div id="wysuwane">
<div id="wewnatrz" style="float: left; width: 925px; margin-left: 0px;">

<table border="0" width="925" cellspacing="0">
<tr align="center" style="font-weight: bold; font-size: 12px; color: #fff;">
<td>Nazwa Serwera</td>
<td>IP</td>
<td>Status</td>
<td>Sloty</td>
<td>Bany</td>
<td>Staty</td>
<td>Dema</td>
</tr>
<tr align="center" style="font-weight: bold; font-size: 11px; color: #fff;">
<td>cs-SopliCa [TeamPlay]</td>
<td>195.2.255.188:27026</td>
<td><a href="http://www.gametracker.com/server_info/195.2.255.188:27026/" target="_blank"><img src="http://cache.www.gametracker.com/server_info/195.2.255.188:27026/b_350_20_FFFFFF_FFFFFF_000000_000000.png" border="0" width="350" height="20" alt=""/></a></td>
<td>18</td>
<td><img src='http://img18.imageshack.us/img18/3370/banyf.png' border='0'/></td>
<td><img src='http://img21.imageshack.us/img21/1298/21627328.png' border='0'/></td>
<td><img src='http://img205.imageshack.us/img205/1739/hltvw.png' border='0'/></td>
</tr>
<tr align="center" style="font-weight: bold; font-size: 11px; color: #fff;">
<td>cs-SopliCa [Free For All]</td>
<td>195.2.255.122:27025</td>
<td><a href="http://www.gametracker.com/server_info/195.2.255.122:27025/" target="_blank"><img src="http://cache.www.gametracker.com/server_info/195.2.255.122:27025/b_350_20_FFFFFF_FFFFFF_000000_000000.png" border="0" width="350" height="20" alt=""/></a></td>
<td>25</td>
<td><img src='http://img18.imageshack.us/img18/3370/banyf.png' border='0'/></td>
<td><img src='http://img21.imageshack.us/img21/1298/21627328.png' border='0'/></td>
<td><img src='http://img205.imageshack.us/img205/1739/hltvw.png' border='0'/></td>
</tr>
<tr align="center" style="font-weight: bold; font-size: 11px; color: #fff;">
<td>cs-SopliCa [PaintBall]</td>
<td>195.114.0.95:27033</td>
<td><a href="http://www.gametracker.com/server_info/195.114.0.95:27033/" target="_blank"><img src="http://cache.www.gametracker.com/server_info/195.114.0.95:27033/b_350_20_FFFFFF_FFFFFF_000000_000000.png" border="0" width="350" height="20" alt=""/></a></td>
<td>30</td>
<td><img src='http://img18.imageshack.us/img18/3370/banyf.png' border='0'/></td>
<td><img src='http://img21.imageshack.us/img21/1298/21627328.png' border='0'/></td>
<td><img src='http://img205.imageshack.us/img205/1739/hltvw.png' border='0'/></td>
</tr>
</table>

</div>
</div>

W załączniku daję tło pod tabelę oraz .psd tła

http://speedy.sh/9PJPW/Wysuwana-Tabela.rar

*

Autorem tutoriala jest dudeka. Zabraniam kopiowania/powielania tutoriala na inne fora bez mojej zgody !

Tutorial wykonany dla www.forum.invisionize.pl

**hosiek** · 15 Marca 2012

Na pewno sprzyda sie cs'owcą. + Dla ciebie.

**Bartoszk** · 29 Marca 2012

Polecam !

**Tasior** · 27 Maja 2012

dzieki temu nie moge nic napisac w sb:D

moze jakas mala pomoc?

**groverr** · 16 Czerwca 2012

testował to ktoś , ja na localu testowalem i d*pa nie działa ...

**Prizmo** · 16 Czerwca 2012

Mi działa ale wtedy na sb pisać nie mogę i olałem sprawę

Niby konflikty java, ale nie mam czasu dogłębnie przyjrzeć sie tematowi

Ale tak ogólnie to elegancko działa nie powiem.

**groverr** · 18 Czerwca 2012

Tu zadziała

jQuery.noConflict();

dodajesz po

i wszystkie $ zamieniasz na jQuery

**Skubaniec** · 19 Czerwca 2012

Dodałem to i teraz strasznie zmulone to ;/

Tzn. SB i reszta działa ale jak najade na SERWERY wyjedzie to okienko ale pozniej nie chce się shować ;/

Można to jakoś zrobić tak że wyjedzie dopiero po kliknięciu myszką ? A schowa się automatycznie ?

Mają tak zrobione tutaj z FB:

www.sourcemania.pl

**Skubaniec** · 19 Czerwca 2012

Tu zadziała

jQuery.noConflict();

dodajesz po

<script type="text/javascript">

i wszystkie $ zamieniasz na jQuery

Tzn to dopisałem.

**maxyblack** · 30 Czerwca 2012

Mam problem. Po dodaniu tej tabeli mam problemy z oknem pisania postów. Zniknął całkowicie pasek formatowania. Jak temu zaradzić?

**Prizmo** · 1 Lipca 2012

Tu zadziała

jQuery.noConflict();

dodajesz po

<script type="text/javascript">

i wszystkie $ zamieniasz na jQuery

dzieki wielkie działa elegancko

+

**Lajtowyyy** · 2 Lipca 2012

A mógłby ktoś podpowiedzieć jak zrobić, aby tabela wysuwała się dopiero po kliknięciu na nią ?

**Lajtowyyy** · 6 Lipca 2012

Refresh.

**barthav** · 6 Lipca 2012

W kodzie jquery spróbuj zamienić hover na click.

**Prizmo** · 7 Lipca 2012

W kodzie jquery spróbuj zamienić hover na click.

Wtedy tabelka wogóle się nie wysuwa

Jakiś inny pomysł ?

DawPi · 7 Lipca 2012

Konsola błędów JS wywala wtedy jakiś błąd?

**Lajtowyyy** · 9 Lipca 2012

Poradziłem sobie już. Takim kodem tabelka wysuwa się i chowa po kliknięciu.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript">
 jQuery.noConflict();
jQuery(function(){
jQuery("#wysuwane").css("left","-938px");
jQuery("#wysuwane").toggle(
function () {
jQuery("#wysuwane").animate({left: "0px"}, 400 );
jQuery(this).addClass("zamknij");
}, function () {
jQuery("#wysuwane").animate({left: "-938px"}, 400 );
jQuery(this).removeClass("zamknij"); }
);
});
 </script>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

I poprawcie w 1 poście dudeki kod, bo w CODE linki są źle podane, tzn. nie ma ich całych i dlatego też tabelka źle będzie działać

Edytowane 9 Lipca 2012 przez Lajtowyyy

**Skubaniec** · 20 Lipca 2012

A powiedzcie jak to okienko przenieść na prawą stronę?

**Skubaniec** · 25 Lipca 2012

Pomoże Ktoś? Chciałbym to przenieść na prawą stronę ;/

Zrobiłem sobie tło pod to ale nie wiem jak do prawej dać . . .

**hurin** · 24 Listopada 2012

Można o reupload prosić?

23 Marca 2014

Link jest wygaszony, mógłby ktoś re-up zrobić?

**Prizmo** · 23 Marca 2014

Ponad 2 lata wiec watpie że ktos ja ma.

Poszukam jutro na starym lapku (jak odpali) to wrzuce.

Zaloguj się

Wysuwana tabela serwerów !

Rekomendowane odpowiedzi

dudeka

hosiek

Bartoszk

Tasior

groverr

Prizmo

groverr

Skubaniec

Skubaniec

maxyblack

Prizmo

Lajtowyyy

Lajtowyyy

barthav

Prizmo

DawPi

Lajtowyyy

Skubaniec

Skubaniec

hurin

Gość lolmol100

Prizmo

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Zarejestruj nowe konto

Zaloguj się

Ostatnio przeglądający 0 użytkowników

Pliki

Cała aktywność

Przeglądaj

Powiadomienie o plikach cookie