Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 65
Seite [1] 2 3 4 >
autotrudi


Rock the board



Herkunft: Grünow
Beiträge: 93
 # Thema - 12.09.2011 um 10:26 Uhr
Hallo Leute.

Ich habe irgendwann beim suchen hier im Forum (lange her) mal eine Seite entdeckt mit einem TS3-Slider. Der war rechts zu sehen und kam bei Mausklick heruas gefahren. und ich bin seid 2 tagen am gucken, ob ich diesen Link finde, aber erfolglos

Kurz um: haben will

Sagen wir es mal so, mir ist der Platzbedarf etwas zu groß beim Teamspeak-Viewer und deswegen möchte ich den ebenfalls auslagern und nur bei Bedarf anzeigen lassen.

Ich habe auch schon versucht mit diversen Slid-effekten herum zu spielen, aber irgendwie bin ich zu blöde dafür!!

Kann mir evt jemand dabei helfen?

Ich habe sogar schon die passenden Grafiken dafür fertig. müssen ja 2 sein, soweit ich es beurteilen kann.

Thx
#_______________________________________________________________________________ __________________#

OK dann mache ich das hier rein!

Mein Slider ist hier zu sehen

Damit er funzt müssen wir uns 2 Bilder erstellen.
Eines als Button (50x300) und das andere als Hintergrund (350xbeliebig lang, aber nicht zu kurz ), wobei man da auch eine Farbe definieren kann!

Java-Script-Anpassung
Dann gibst legtst du dir eine .js-Datei (Java-Script) an und füllst diese mit folgendem Code:

mehr... +-

 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
1. / 2. / ... 
 function changeSlider(handle, minWidth, maxWidth) {
        var elem=(handle.parentElement?handle.parentElement:handle.offsetParent);
        var cont=undefined;
        var allDivs=elem.getElementsByTagName("div");
        for (var i=0; i<allDivs.length; i++) {
        if (allDivs[i].className=="slider_content") { cont=allDivs[i]; break; }
        }
        var contentHeight=(elem.offsetHeight
        -(cont.style.marginTop==""?0:cont.style.marginTop.replace('px',''))
        -(cont.style.marginBottom==""?0:cont.style.marginBottom.replace('px','')))
        +"px";
        cont.style.height=contentHeight;
        if (cont.style.display!='none') { elem.style.width=minWidth; cont.style.display='none'; }
        else { elem.style.width=maxWidth; cont.style.display='block'; }}

Um das Script an zu sprechen muss dieses im HEADER deiner HTML-Datei definiert werden.
/template/template-name/index.html


Optional kannst du den Code auch direkt in deine HTML-Seite einbinden!

 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
1. / 2. / ... 
 
<head>
<!-- hier würde dann der ganze andere Kopf stehen -->
<script type="text/javascript">
function changeSlider(handle, minWidth, maxWidth) {
        var elem=(handle.parentElement?handle.parentElement:handle.offsetParent);
        var cont=undefined;
        var allDivs=elem.getElementsByTagName("div");
        for (var i=0; i<allDivs.length; i++) {
        if (allDivs[i].className=="slider_content") { cont=allDivs[i]; break; }
        }
        var contentHeight=(elem.offsetHeight
        -(cont.style.marginTop==""?0:cont.style.marginTop.replace('px',''))
        -(cont.style.marginBottom==""?0:cont.style.marginBottom.replace('px','')))
        +"px";
        cont.style.height=contentHeight;
        if (cont.style.display!='none') { elem.style.width=minWidth; cont.style.display='none'; }
        else { elem.style.width=maxWidth; cont.style.display='block'; }
</script>
</head>



CSS-Anpassung

In der CSS-Datei deines templates muss der folgende text hinzugefügt werden

mehr... +-
Dieses habe ich am Ende der Datei eingefügt!
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
1. / 2. / ... 
 
.slider { position: fixed; z-index: 999; }
.slider_handle { 
    background: url(Bilder/ts.png) no-repeat; /** Hier wird das Button-Bild definiert*/
    position: absolute; 
    cursor: pointer; 
/*Wenn das Ganze einen Rand mit runde Ecken haben soll, dann kann das in etwa so aussehen: */

border: 0px solid #4b372e;
    -moz-border-radius:5px; /* Firefox */
    -webkit-border-radius:5px; /* Safari, Chrome */
    -khtml-border-radius:5px; /* Konqueror */
     border-radius:5px; /* CSS3 */
     behavior:url(border-radius.htc);  /* IE*/
}
.slider_content { overflow: auto; }


TS-Viewer einbinden

mehr... +-

Das Ganze habe ich am Ende meiner HTML-Datei, genauer: nach dem Footer-DIV, rein geschrieben!
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
1. / 2. / ... 
 
<!-- Teamspeak-Slider-->
    <div id="ts3_slider" class="slider" style="right: 0px; top: 10px; width: 50px; height: 1000px; background: url('Bilder/"Hintergund, des ganzen Sliders".png');">  /* Hier legst du den Hintergrund des Buttons fest */

    <div class="slider_handle" style="width: 43px; height: 300px; left: 0px; margin-top: 37px;" onmousedown="changeSlider(this, '50px', '300px');"></div>
    <div class="slider_content" style="margin: 15px 5px 15px 53px; text-align: left; overflow: auto; display: none; height: 570px;">
        
    <div id="ts3viewer_*****ID****"></div>

<script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>

<script type="text/javascript">
/*TS_Viewer-Code*/
 </script>

    </div>
</div>                   
    <!-- TS-slider  ende -->


So ich hoffe ich habe nun alles dabei und keine Fehler gemacht

Gewähr gebe ich natürlich nicht, bin ja auch keine Coder !


------------------
http://geyerstation.de

Zuletzt editiert von autotrudi am 25.09.2011 um 08:58 Uhr (2x Editiert)
Inaktiv
Jagger


Try to beat me




Herkunft: Limbach
Beiträge: 166
 # Antwort: 1 - 12.09.2011 um 10:34 Uhr
Hallo

Würde ich auch gerne haben wollen

MfG


Inaktiv
|
JackCimberly


Wannabe poster




Beiträge: 36
 # Antwort: 2 - 12.09.2011 um 11:39 Uhr
So was? http://www.rlp-clan.de/news/

Google: TS3-Slider

Vielleicht findest du was, wie du das einbinden kannst.


Zuletzt editiert von JackCimberly am 12.09.2011 um 11:39 Uhr (1x Editiert)
Inaktiv
|
autotrudi
Thread-Ersteller


Rock the board



Herkunft: Grünow
Beiträge: 93
 # Antwort: 3 - 12.09.2011 um 11:48 Uhr
Bingo!

Aber Google kann ich selber bemühen! Ich brauche Hilfe dabei, deswegen habe ich hier einen Post gesetzt.

/* EDIT /*

Ich hab es denn hin bekommen.
wen es interessiert "wie?" der möge sich bei mir melden.



------------------
http://geyerstation.de

Zuletzt editiert von autotrudi am 12.09.2011 um 13:33 Uhr (1x Editiert)
Inaktiv
|
gent0s


Try to beat me




Beiträge: 138
 # Antwort: 4 - 12.09.2011 um 15:32 Uhr
vielleicht kannste damit was anfangen
http://dynamicdrive.com/dynamicindex1/slideinlink.htm
http://dynamicdrive.com/dynamicindex1/omnislide/index.htm

musst dann nur noch die css anpassen


------------------
Inaktiv
|
autotrudi
Thread-Ersteller


Rock the board



Herkunft: Grünow
Beiträge: 93
 # Antwort: 5 - 12.09.2011 um 15:52 Uhr
cool, danke das schaue ich mir auch noch an!

lerning by doing

Aber ich habs ja schon fertsch!


------------------
http://geyerstation.de

Inaktiv
|
gent0s


Try to beat me




Beiträge: 138
 # Antwort: 6 - 12.09.2011 um 15:59 Uhr
achso^^ aber gibt bestimmt ja noch andere die es auch haben wollen


------------------
Inaktiv
|
Swifter


Specialist





Beiträge: 1841
 # Antwort: 7 - 12.09.2011 um 16:59 Uhr
12.09.2011 um 11:48 Uhr - autotrudi:
Bingo!

Aber Google kann ich selber bemühen! Ich brauche Hilfe dabei, deswegen habe ich hier einen Post gesetzt.

/* EDIT /*

Ich hab es denn hin bekommen.
wen es interessiert "wie?" der möge sich bei mir melden.



Na dann schreibs doch hier rein?


------------------
Greetz Swifter


Wenn du dich klein, nutzlos, beleidigt und depressiv fühlst, denke immer daran: Du warst einmal das schnellste und erfolgreichste Spermium deiner Gruppe!
Inaktiv
|
JackCimberly


Wannabe poster




Beiträge: 36
 # Antwort: 8 - 12.09.2011 um 17:02 Uhr
@autotrudi

Siehst, hast ja doch hin bekommen.


Inaktiv
|
ev0lution


Geekboy





Beiträge: 1103
 # Antwort: 9 - 12.09.2011 um 19:03 Uhr
Mich würde das script auch interessieren trudi. wäre nett wenn du nen mod/codepaste/tutorial hier reinsetzt


------------------
Inaktiv
|
autotrudi
Thread-Ersteller


Rock the board



Herkunft: Grünow
Beiträge: 93
 # Antwort: 10 - 12.09.2011 um 20:19 Uhr
OK dann mache ich das hier rein!

Mein Slider ist hier zu sehen

Damit er funzt müssen wir uns 2 Bilder erstellen.
Eines als Button (50x300) und das andere als Hintergrund (350xbeliebig lang, aber nicht zu kurz ), wobei man da auch eine Farbe definieren kann!

Java-Script-Anpassung
Dann gibst legtst du dir eine .js-Datei (Java-Script) an und füllst diese mit folgendem Code:

mehr... +-

 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
1. / 2. / ... 
 function changeSlider(handle, minWidth, maxWidth) {
        var elem=(handle.parentElement?handle.parentElement:handle.offsetParent);
        var cont=undefined;
        var allDivs=elem.getElementsByTagName("div");
        for (var i=0; i<allDivs.length; i++) {
        if (allDivs[i].className=="slider_content") { cont=allDivs[i]; break; }
        }
        var contentHeight=(elem.offsetHeight
        -(cont.style.marginTop==""?0:cont.style.marginTop.replace('px',''))
        -(cont.style.marginBottom==""?0:cont.style.marginBottom.replace('px','')))
        +"px";
        cont.style.height=contentHeight;
        if (cont.style.display!='none') { elem.style.width=minWidth; cont.style.display='none'; }
        else { elem.style.width=maxWidth; cont.style.display='block'; }}

Um das Script an zu sprechen muss dieses im HEADER deiner HTML-Datei definiert werden.
/template/template-name/index.html


Optional kannst du den Code auch direkt in deine HTML-Seite einbinden!

 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
1. / 2. / ... 
 
<head>
<!-- hier würde dann der ganze andere Kopf stehen -->
<script type="text/javascript">
function changeSlider(handle, minWidth, maxWidth) {
        var elem=(handle.parentElement?handle.parentElement:handle.offsetParent);
        var cont=undefined;
        var allDivs=elem.getElementsByTagName("div");
        for (var i=0; i<allDivs.length; i++) {
        if (allDivs[i].className=="slider_content") { cont=allDivs[i]; break; }
        }
        var contentHeight=(elem.offsetHeight
        -(cont.style.marginTop==""?0:cont.style.marginTop.replace('px',''))
        -(cont.style.marginBottom==""?0:cont.style.marginBottom.replace('px','')))
        +"px";
        cont.style.height=contentHeight;
        if (cont.style.display!='none') { elem.style.width=minWidth; cont.style.display='none'; }
        else { elem.style.width=maxWidth; cont.style.display='block'; }
</script>
</head>



CSS-Anpassung

In der CSS-Datei deines templates muss der folgende text hinzugefügt werden

mehr... +-
Dieses habe ich am Ende der Datei eingefügt!
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
1. / 2. / ... 
 
.slider { position: fixed; z-index: 999; }
.slider_handle { 
    background: url(Bilder/ts.png) no-repeat; /** Hier wird das Button-Bild definiert*/
    position: absolute; 
    cursor: pointer; 
/*Wenn das Ganze einen Rand mit runde Ecken haben soll, dann kann das in etwa so aussehen: */

border: 0px solid #4b372e;
    -moz-border-radius:5px; /* Firefox */
    -webkit-border-radius:5px; /* Safari, Chrome */
    -khtml-border-radius:5px; /* Konqueror */
     border-radius:5px; /* CSS3 */
     behavior:url(border-radius.htc);  /* IE*/
}
.slider_content { overflow: auto; }


TS-Viewer einbinden

mehr... +-

Das Ganze habe ich am Ende meiner HTML-Datei, genauer: nach dem Footer-DIV, rein geschrieben!
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
1. / 2. / ... 
 
<!-- Teamspeak-Slider-->
    <div id="ts3_slider" class="slider" style="right: 0px; top: 10px; width: 50px; height: 1000px; background: url('Bilder/"Hintergund, des ganzen Sliders".png');">  /* Hier legst du den Hintergrund des Buttons fest */

    <div class="slider_handle" style="width: 43px; height: 300px; left: 0px; margin-top: 37px;" onmousedown="changeSlider(this, '50px', '300px');"></div>
    <div class="slider_content" style="margin: 15px 5px 15px 53px; text-align: left; overflow: auto; display: none; height: 570px;">
        
    <div id="ts3viewer_*****ID****"></div>

<script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>

<script type="text/javascript">
/*TS_Viewer-Code*/
 </script>

    </div>
</div>                   
    <!-- TS-slider  ende -->


So ich hoffe ich habe nun alles dabei und keine Fehler gemacht

Gewähr gebe ich natürlich nicht, bin ja auch keine Coder !


------------------
http://geyerstation.de

Zuletzt editiert von autotrudi am 13.09.2011 um 12:35 Uhr (1x Editiert)
Inaktiv
|
ev0lution


Geekboy





Beiträge: 1103
 # Antwort: 11 - 12.09.2011 um 20:44 Uhr
supi danke dir dafür. werde mich gleich mal ransetzen und es versuchen ^^

Edit:
bei mir wird leider kein slider angezeigt :(


------------------


Zuletzt editiert von 12die4 am 12.09.2011 um 20:54 Uhr (1x Editiert)
Inaktiv
|
autotrudi
Thread-Ersteller


Rock the board



Herkunft: Grünow
Beiträge: 93
 # Antwort: 12 - 12.09.2011 um 20:46 Uhr
Wenn de Hilfe brauchst sag bescheid!

EDIT:

Bitte beachtet, dass Java-Script und PopUps erlaubt sind! Dieses kann bei den meisten browsern als Ausnahme hinzu gefügt werden!


------------------
http://geyerstation.de

Zuletzt editiert von autotrudi am 12.09.2011 um 20:50 Uhr (2x Editiert)
Inaktiv
|
Jagger


Try to beat me




Herkunft: Limbach
Beiträge: 166
 # Antwort: 13 - 12.09.2011 um 20:54 Uhr
bin icq on schreib mich bitte an komme mit meiner tapelle nicht klar omg
Inaktiv
|
autotrudi
Thread-Ersteller


Rock the board



Herkunft: Grünow
Beiträge: 93
 # Antwort: 14 - 12.09.2011 um 20:56 Uhr
ICQ? nee sowas hab ich nicht! wenn du nen TS hast dann joine ich mal drauf oder du kommst zu uns rauf


------------------
http://geyerstation.de

Inaktiv
|
ev0lution


Geekboy





Beiträge: 1103
 # Antwort: 15 - 12.09.2011 um 21:04 Uhr
ich sehe leider kein slider und kein button :(

das ist meine index.htm

HEAD

mehr... +-
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
1. / 2. / ... 
 <head>
  <title>{func:title}</title>
  {googlemaps:head|noajax}  
  <meta http-equiv="Content-Type" content="text/html; charset={func:charset}" />
  {clansphere:navmeta}
  <link href="template.css" rel="stylesheet" type="text/css" />
  <link href="content.css" rel="stylesheet" type="text/css" />
  <link rel="alternate" type="application/rss+xml" href="{func:path}uploads/rss/news.xml" id="rss_news" />
<script type="text/javascript">
function changeSlider(handle, minWidth, maxWidth) {
        var elem=(handle.parentElement?handle.parentElement:handle.offsetParent);
        var cont=undefined;
        var allDivs=elem.getElementsByTagName("div");
        for (var i=0; i<allDivs.length; i++) {
        if (allDivs[i].className=="slider_content") { cont=allDivs[i]; break; }
        }
        var contentHeight=(elem.offsetHeight
        -(cont.style.marginTop==""?0:cont.style.marginTop.replace('px',''))
        -(cont.style.marginBottom==""?0:cont.style.marginBottom.replace('px','')))
        +"px";
        cont.style.height=contentHeight;
        if (cont.style.display!='none') { elem.style.width=minWidth; cont.style.display='none'; }
        else { elem.style.width=maxWidth; cont.style.display='block'; }
</script>
</head>


Das habe ich am Ende von der index.htm

mehr... +-
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
1. / 2. / ... 
 </div> <!-- Bottom End -->

</div> <!--Container End -->

<!-- Teamspeak-Slider-->
      <div id="ts3_slider" class="slider" style="right: 0px; top: 10px; width: 50px; height: 900px; background: url('tssliderbg.png');">  /* Hier legst du den Hintergrund des Buttons fest */

    <div class="slider_handle" style="width: 43px; height: 300px; left: 0px; margin-top: 37px;" onmousedown="changeSlider(this, '50px', '300px');"></div>
    <div class="slider_content" style="margin: 15px 5px 15px 53px; text-align: left; overflow: auto; display: none; height: 570px;">
        
    <div id="ts3viewer_XXXXXXXX" style="width:; background-color:;"> </div>

<script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>

<script type="text/javascript">
viewer script
</script>
 </div>
</div>         
    <!-- TS-slider  ende -->

</body>
</html>


und das ist meine template.css

mehr... +-
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
1. / 2. / ... 
 .slider { position: fixed; z-index: 999; }
.slider_handle { 
    background: url(tssliderbutton.png) no-repeat; /** Hier wird das Button-Bild definiert*/
    position: absolute; 
    cursor: pointer; 
/*Wenn das Ganze einen Rand mit runde Ecken haben soll, dann kann das in etwa so aussehen: */

border: 0px solid #4b372e;
    -moz-border-radius:5px; /* Firefox */
    -webkit-border-radius:5px; /* Safari, Chrome */
    -khtml-border-radius:5px; /* Konqueror */
     border-radius:5px; /* CSS3 */
     behavior:url(border-radius.htc);  /* IE*/
}
.slider_content { overflow: auto; }


------------------


Zuletzt editiert von 12die4 am 12.09.2011 um 21:38 Uhr (2x Editiert)
Inaktiv
|
autotrudi
Thread-Ersteller


Rock the board



Herkunft: Grünow
Beiträge: 93
 # Antwort: 16 - 12.09.2011 um 21:11 Uhr
Popups erlauben!!!!!!!


------------------
http://geyerstation.de

Inaktiv
|
ev0lution


Geekboy





Beiträge: 1103
 # Antwort: 17 - 12.09.2011 um 21:13 Uhr
ok
nu seh ich zwar rechts nen balken aber irgendwat stimmt da nich ^^ er kommt nicht raus und den info text kann man lesen ^^


http://wkh-racing.de

schau ma pls

EDIT:
also der button ist nun zu sehen aber beim draufklicken slided nix raus? woran kann das liegen ? euer TS ist leider PW geschützt komm nicht rauf :(


So Script läuft und Trudi hat mir SUPEEEER TS Support gegeben !!!
Danke dir vielmals


------------------


Zuletzt editiert von 12die4 am 12.09.2011 um 23:21 Uhr (4x Editiert)
Inaktiv
|
RaPiD


Geekboy




Beiträge: 1192
 # Antwort: 18 - 12.09.2011 um 23:56 Uhr
kann man da auch irgend wie den "ts3 panel modul" von Clansphere da rein setzen oder nur diese von anderen ts hoster ?


Inaktiv
|
autotrudi
Thread-Ersteller


Rock the board



Herkunft: Grünow
Beiträge: 93
 # Antwort: 19 - 12.09.2011 um 23:59 Uhr
per Iframe sollte das funzen!
oder wenn es da Platzhalter für gibt, dann setze den ein, da wo normaler Weise das Script von TS-Viewer.com rein kommt.


------------------
http://geyerstation.de

Zuletzt editiert von autotrudi am 13.09.2011 um 00:02 Uhr (1x Editiert)
Inaktiv
|
DeltaEco


Rock the board




Herkunft: Bergheim
Beiträge: 68
 # Antwort: 20 - 13.09.2011 um 09:35 Uhr
und wie ist nun die Lösung damit er angezeigt wird? bei mir sehe ich das bild aber es passiert auch nichts.

http://www.ogs4you.de


------------------
Zwei Dinge sind unendlich, das Universum und die menschliche Dummheit, beim Universum bin ich mir nicht sicher (A. Einstein)

Inaktiv
|
Antworten: 65
Seite [1] 2 3 4 >


Sie müssen sich registrieren, um zu antworten.