Skocz do zawartości

Jak dodać ramki boczne.

Polecane posty

Autor tematu Napisano (edytowany)

************************************************************************

REKLAMA

REKLAMA

REKLAMA

 

REKLAMA

REKLAMA

 

REKLAMA

REKLAMA

REKLAMA

******************************************************************************

 

 

 

 

 

Witam.

Ten poradnik został stworzony dla osób, które nie potrafią poradzić sobie z problemem wgrania ramek bocznych, a chciałyby je dodać na swój serwer.

 

Postaram się objaśnić wszystko krok po kroku.

 

1Pobierz folder stats.

Folder ten zawiera wszystkie te informacje, które wyświetlane będą w naszych ramkach.

LINK: https://www.mediafire.com/download/k13b532afccuaac/stats.rar

SKAN: Dodam niedługo.

 

2Wgraj go na swój serwer.

Pobrany folder wrzuć bezpośrednio do paczki. Jeśli paczka znajduje się w np. w localhost / nazwaserwera.vior.pl itp wszystko jest ok.
Jeśli natomiast wszystko jest np. w localhost/s1 itp. podmień odnośniki (o nich potem) w index'ie.

 

3Wklej do index.php następujące kody.

setInterval("LoadData('stats_1','../stats/p1.php')", 15000);
setInterval("LoadData('stats_2','../stats/p2.php')", 15000);
setInterval("LoadData('stats_3','../stats/p3.php')", 15000);
setInterval("LoadData('stats_4','../stats/p4.php')", 15000);
setInterval("LoadData('stats_5','../stats/p5.php')", 15000);
setInterval("LoadData('stats_6','../stats/p6.php')", 15000);

<input style="font-size: 12px; color: #000000; font-family: Comic Sans MS, Arial, sans-serif; position: absolute; right: 300px; top: 1%; z-index: 1002; overflow: auto; margin: auto;" value="Pokaż ramki/Ukryj ramki" type="button" onclick="show('show');">
<div id="show"> 
<div id="stats_1">
</div>
 
<div id="stats_2">
   </div>
   
<div id="stats_3">
</div>
 
<div id="stats_4">
</div>
 
<div id="stats_5">
</div>
 
<div id="stats_6">
</div>

4Obrazy ramek.

 

Obrazy ramek, a właściwie ich wygląd jest wymagany, aby były wyświetlane (jeśli nie będzie ich, to informacje i tak się wyświetlą, ale bez ramek).

Można je pobrać stąd: https://i.imgur.com/isFBVcz.png

Należy je wrzucić do images/pages.

 

5Plik CSS.

 

Do pliku game.css wklejamy:

#stats_1 {
background-image: url("../images/pages/stats_box.png");
font-size: 12px;
color: #FFFFFF;
font-family: Comic Sans MS, Arial, sans-serif;
    position: absolute;
    left: 1px;
width: 145px;
height: 198px;
top: 1%; 
right: 94%;
z-index: 1002;
overflow: auto;
margin: auto;
}
 
#stats_2 {
background-image: url("../images/pages/stats_box.png");
font-size: 12px;
color: #FFFFFF;
font-family: Comic Sans MS, Arial, sans-serif;
    position: absolute;
    left: 1px;
width: 145px;
height: 198px;
top: 32%; 
right: 94%;
z-index: 1002;
overflow: auto;
margin: auto;
}
 
#stats_3 {
background-image: url("../images/pages/stats_box.png");
font-size: 12px;
color: #FFFFFF;
font-family: Comic Sans MS, Arial, sans-serif;
    position: absolute;
    left: 1px;
width: 145px;
height: 198px;
top: 63%; 
right: 94%;
z-index: 1002;
overflow: auto;
margin: auto;
}
 
#stats_4 {
background-image: url("../images/pages/stats_box.png");
font-size: 12px;
color: #FFFFFF;
font-family: Comic Sans MS, Arial, sans-serif;
    position: absolute;
    right: 1px;
width: 145px;
height: 198px;
top: 1%; 
z-index: 1002;
overflow: auto;
margin: auto;
}
 
#stats_5 {
background-image: url("../images/pages/stats_box.png");
font-size: 12px;
color: #FFFFFF;
font-family: Comic Sans MS, Arial, sans-serif;
    position: absolute;
    right: 1px;
width: 145px;
height: 198px;
top: 32%; 
z-index: 1002;
overflow: auto;
margin: auto;
}
 
#stats_6 {
background-image: url("../images/pages/stats_box.png");
font-size: 12px;
color: #FFFFFF;
font-family: Comic Sans MS, Arial, sans-serif;
    position: absolute;
    right: 1px;
width: 145px;
height: 198px;
top: 63%; 
z-index: 1002;
overflow: auto;
margin: auto;
}

 

 

To tyle. Mam nadzieję, że poradnik się komuś przyda.

 

UWAGA: Nigdzie nie sugeruję, że kod ramek jaki one same zostały stworzone przeze mnie.

 

#DODATKOWO

 

5Jak dodać ładowanie przed wyświetleniem się zawartości ramek.

Jak wiadomo (lub nie), przed wyświetleniem się zawartości ramek, musimy poczekać do paru / parunastu sekund. W tym czasie ramki są puste, z czarnym tłem. Nie wygląda to za dobrze. Co zatem zrobić? Można dodać ładowanie. Wygląda to dużo lepiej, bo wiadomo, że ramki nie zepsuły się, a jedynie się ładują.

 

a) Dopisujemy pod

 <div id="stats_1">

takie coś:

<center><br><br><br><br><img src="miejsce na link do obrazka, najlepiej gifa" alt="Loading"></center> </div>

Edytowano przez M3ffisto

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Pani Kasia

Autor tematu Napisano (edytowany)

@Gumskull

Teraz powinno działać.

 

Temat zaaktualizowany.

Edytowano przez M3ffisto

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Pani Kasia

Dodaj jeszcze kod .css do tego bo na plikach ZeuS'a nie działa. W plikach GILA ten kod znajdziesz w css/game.css, w linijce ,która zaczyna się od #stats_1, jest to tylko do pierwszej ramki, aby wszystkie ramki działały musisz dodać też #stats_2, #stats_3 itd. aż do #stats_6.

Edytowano przez Nerfinekk

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Pani Kasia

Wklej w obojętnie jaki plik css ten kod z game.css , ważne żeby w index byl czytany ten css

 

Wysłane z mojego LG-H635 przy użyciu Tapatalka

 

 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

@1361622928-U485574.pngM3ffisto napisz jak dodac w plikach zeusa :)


                                                  baner.png

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Pani Kasia

Autor tematu Napisano (edytowany)

@Blox35

 

Tak samo jak w poradniku, tyle, że kod z css nie dajesz do game.css, tylko do innego pliku z tym rozszerzeniem.

 

Ewentualnie, gdyby coś nie działało pisz Priv/GG.

Edytowano przez M3ffisto

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

zrób tutorial jak to zrobić na plikach zeusXp bo nie działa według tego poradnika.

Na Plikach Zeusa łatwo to dodać. Mogę ci pomóc.


                                                  baner.png

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

 

zrób tutorial jak to zrobić na plikach zeusXp bo nie działa według tego poradnika.

Na Plikach Zeusa łatwo to dodać. Mogę ci pomóc.

 

Tak ja chce pomoc jak zrobic? :D

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

 

zrób tutorial jak to zrobić na plikach zeusXp bo nie działa według tego poradnika.

Na Plikach Zeusa łatwo to dodać. Mogę ci pomóc.

 

To poproszę o pomoc, możesz na prv

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

RamkiMPCramkiboczne.PNG

Wystarczy chwilę posiedzieć i można zrobić takie rzeczy, fajny poradnik dziena :)

Wystarczy mieć pliki nie od zeusxp, tak to z palcem w dupie

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

mam pliki zeusxp jak mam dodac ta ramkę? :D


https://i63.tinypic.com/s4mjqf.png

SZALONY

CO TAM ODRAZU E-SPORTU?

JEZEL WIDZISZ TEN POST I CI POMÓGŁ ZOSTAW SERDUSZKO DLA MNIE !

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

no więc jak to zrobić na plikach zeusxp? próbowałem różnych sposobów ale bez skutku. Jedyne co widać to przycisk pokaż/ukryj ramki, który nie działa. Widocznie index.php załatwiony ale z tym .css jest problem, co robić?

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Mistrzou "wystarczy mieć pliki nie od zeusxp, tak to z palcem w dupie"
Mam pliki Zeusa ale cóż wiesz lepiej ;) powodzenia z Twoim problemem

Wysłane z mojego A0001 przy użyciu Tapatalka
 

Zrób sobie <style>
 

<style>
body {
 color: #ACB1BC;
 background-color: black;
 font-family: verdana,tahoma,helvetica;
 scrollbar-face-color:#444D57;
scrollbar-highlight-color:#535D68;
scrollbar-3dlight-color:#49535D;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#49535D;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#48515B;
 
}
 
html,body{margin:0;padding:0;width:100%;height:100%}
 
input {
    color: #FFFAFA;
    padding: 2px;
    border-right: 1px solid #24A334;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    background: none repeat scroll 0% 0% #3A3A3A;
}
 
</style>

Potem na końcu między </body> a </html> daj to:

<body>
<input style="font-size: 12px; color: #FFFAFA; font-family: Comic Sans MS, Arial, sans-serif; position: absolute; right: 300px; top: 1%; z-index: 1002; overflow: auto; margin: auto;" value="Pokaż/Ukryj Ramki" type="button" onclick="show('show');">
<div id="show"> 
<div style="cursor:pointer" id="stats_1">
<center><br><br><br><br><img src="https://sf.zgnp.pl/s1/images/pages/loading.gif" alt="Loading"></center> </div>
 
<div style="cursor:pointer" id="stats_2">
<center><br><br><br><br><img src="https://sf.zgnp.pl/s1/images/pages/loading.gif" alt="Loading"></center> </div>
   
<div style="cursor:pointer" id="stats_3">
<center><br><br><br><br><img src="https://sf.zgnp.pl/s1/images/pages/loading.gif" alt="Loading"></center> </div>
 
<div style="cursor:pointer" id="stats_4">
<center><br><br><br><br><img src="https://sf.zgnp.pl/s1/images/pages/loading.gif" alt="Loading"></center> </div>
 
<div style="cursor:pointer" id="stats_5">
<center><br><br><br><br><img src="https://sf.zgnp.pl/s1/images/pages/loading.gif" alt="Loading"></center> </div>
 
<div style="cursor:pointer" id="stats_6">
<center><br><br><br><br><img src="https://sf.zgnp.pl/s1/images/pages/loading.gif" alt="Loading"></center> </div>
<script type="text/javascript">
setInterval("LoadData('stats_1','../s1/stats/p1.php')", 3600);
setInterval("LoadData('stats_2','../s1/stats/p2.php')", 3600);
setInterval("LoadData('stats_3','../s1/stats/p3.php')", 3600);
setInterval("LoadData('stats_4','../s1/stats/p4.php')", 3600);
setInterval("LoadData('stats_5','../s1/stats/p5.php')", 3600);
setInterval("LoadData('stats_6','../s1/stats/p6.php')", 3600);
function show(id) { 
var obiekt = document.getElementById(id); 
if(obiekt.style.display == 'none') { 
obiekt.style.display = 'block'; 
} else { 
obiekt.style.display = 'none'; 
} 
} 
</script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script language="JavaScript" type="text/javascript">
$(function(){
var dragableSpans = $('#show').children();
function getCoords(){
var coordsList = '';
dragableSpans.each(function() {
coordsList += $(this).css('left') + ',';
coordsList += $(this).css('top') + ',';
});
return coordsList.slice(0, -1);
}
dragableSpans.draggable({
stop: function() {
var newCoords = getCoords();
}
}); 
});
</script>
</body>

Gratuluję od teraz Twoje ramki działają i możesz je przesuwać. Nie ma za co  B)  :lenny:

Ps ten style w sumie może działać będzie jak dasz go w nowym body nie wiem nie sprawdzałem  -.-

Edytowano przez Adrian327d

371007.gif

 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się

  • Kto przegląda   0 użytkowników

    Brak zalogowanych użytkowników przeglądających tę stronę.

×
Okienko zamknie się za 5 sekund...