Teamspeakviewer Slider nachbauen!

R

riddig

New member
Hey, ich mus unbedingt auf einer Homepage das hier nachbauen, was auf folgender Seite links zu sehen ist
Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren


Die Seite gehört mir nicht und ich möchte auxh keine Werbung machen, aber das links mit dem TS Viewer muss ich nachbauen. Meinetwegen zahle ich auch Geld aber ich brauch den unbedingt.

Kann mir jemand helfen, wie ich das realisieren kann?

ich glaube das hier ist der code (schon angepasst für meine website, funktioniert aber nicht also das ding klappt nicht auf):

Code: 
<html>
<head>

hallo

</head>

<script type="text/javascript">

$(document).ready(function() {

    //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content
    
    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });

});
</script>

<div>
<div id="ts_slider1" class="ts3hover" style="left: -245px; width: 300px; background: url(http://ges-players.de/include/images/ts3slider.png)  repeat scroll 100% 0% transparent; height: 685px; position: fixed; top: 10px; z-index: 999;" >

<div style="position:absolute;top:10pt;right:60pt;width:248px;height:665px;overflow:auto">

<ul class="tabs">
    <li><a href="#tab1"><font face="Helvetica" style="font-size:16px">Teamspeak</font></a></li>
    <li><a href="#tab2"><font face="Helvetica" style="font-size:16px">Gameserver</font></a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content"><!--Content-->

<div id="ts3viewer_980370" style="width:203px; background-color:;">
</div>

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

<script type="text/javascript">
<!--
var ts3v_url_1 =
"http://www.tsviewer.com/ts3viewer.php?ID=980370&text=ffffff&text_size=12&text_family=1&js=1&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=525284&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=525284&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=525284&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=525284&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none";
ts3v_display.init(ts3v_url_1, 980370, 100);
-->
</script>

  </div>
    <div id="tab2" class="tab_content">
       <!--Content-->
          <a href="http://www.gametracker.com/server_info/195.122.135.98:3234/" target="_blank">
        <img src="http://cache.www.gametracker.com/server_info/195.122.135.98:3234/b_160_400_1_ffffff_c5c5c5_006600_000000_1_0_0.png" alt="Server4" width="185" border="0" height="300"/>

<br><br>
        <a href="http://www.gametracker.com/server_info/195.122.135.109:3334/" target="_blank">
        <img src="http://cache.www.gametracker.com/server_info/195.122.135.109:3334/b_160_400_1_ffffff_c5c5c5_006600_000000_1_0_0.png" alt="Server4" width="185" border="0" height="300"/>
<br><br>
        <a href="http://www.gametracker.com/server_info/195.122.134.22:1050/" target="_blank">
        <img src="http://cache.www.gametracker.com/server_info/195.122.134.22:1050/b_160_400_1_ffffff_c5c5c5_00ff00_000000_1_0_0.png" border="0" width="185" height="300" alt="" /></a>
<br><br>
        <a href="http://www.gametracker.com/server_info/195.122.134.22:1070/" target="_blank">
        <img src="http://cache.www.gametracker.com/server_info/195.122.134.22:1070/b_160_400_1_ffffff_c5c5c5_00ff00_000000_1_0_0.png" border="0" width="185" height="300" alt="" /></a>
<br><br>
        <a href="http://www.gametracker.com/server_info/46.228.200.62:25200/" target="_blank">

        <img src="http://cache.www.gametracker.com/server_info/46.228.200.62:25200/b_160_400_1_ffffff_c5c5c5_003399_000000_1_0_0.png" border="0" width="185" height="300" alt="" /></a>
 </div>
</div>





</div>
      </div>
      
  <script type="text/javascript">
  
var state = 0;
var wait = false;

function changeSlider1()
{
if(state==1){
$('#ts_slider1').animate({width: 307 }, "slow", function(){state = 0;}
);
}
else
$('#ts_slider1').animate({width: 573 }, "slow", function(){state = 1;}
);
}

$('#ts_slider1').click(function(){
changeSlider1();
});
      </script> </div>

</html>
WIe krieg ich das Ding auf dieser Seite zum laufen:
Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren


Danke!!
 
Zuletzt bearbeitet:
HTML: 
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function() {
    
    $('#tsv').click(function(){
        
        if($(this).css("left") == "-280px"){
            $(this).animate({left:0});
        }
        else{
            $(this).animate({left:-280});
            }
    });
});

</script>

<div style="height:400px;width:300px;background-color:#CCC;border:1px solid black;position:fixed;left:-280px;top:100px;" id="tsv">Ich bin der Teamspeak-Viewer.</div>
Design musst du aber selbst machen...
 
Zuletzt bearbeitet:
ja ich mach dazu morgen nen eigenes bild das is nur zum testen mom ich vrsuch dein code mal



- weiss jemand warum es in meinem code nicht auf geht? Wie kann ich denn jetzt deinen Code umwandeln, dass es so aussieht wie sonst? quasi die Grafik, also klar wo der text ist geb ich den code für dne viewer ein aber wie mach ich das andere bild.
 
Zuletzt bearbeitet:
riddig schrieb:
ja ich mach dazu morgen nen eigenes bild das is nur zum testen mom ich vrsuch dein code mal



- weiss jemand warum es in meinem code nicht auf geht? Wie kann ich denn jetzt deinen Code umwandeln, dass es so aussieht wie sonst? quasi die Grafik, also klar wo der text ist geb ich den code für dne viewer ein aber wie mach ich das andere bild.
Zum Vergrößern anklicken....



HTML: 
<div style="background-image:url(blalal.png);......">Ich bin der Teamspeak-Viewer.</div>
 
warum soein anderer code? ich krieg es nich hin das so zu machen wie auf der seite. müsste doch auch mit dem code oben funzen. Deiner geht zwar perfekt aber wenn ich als background das bild von da nehme, welches ich ja auch nehmen will nur in anderen farben und andere schrift, dann sieht es einfach komplett anders aus.


- habs hinbekommen - danke

Code: 
<html>
<head>

hallo

</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function() {
    
    $('#tsv').click(function(){
        
        if($(this).css("left") == "-280px"){
            $(this).animate({left:0});
        }
        else{
            $(this).animate({left:-280});
            }
    });
});

</script>

<div>
<div id="ts_slider1" class="ts3hover" style="left: -245px; width: 300px; background: url(http://ges-players.de/include/images/ts3slider.png)  repeat scroll 100% 0% transparent; height: 685px; position: fixed; top: 10px; z-index: 999;" >

<div style="position:absolute;top:10pt;right:60pt;width:248px;height:665px;overflow:auto">



<div class="tab_container">
    <div id="tab1" class="tab_content"><!--Content-->

<div id="ts3viewer_980370" style="width:203px; background-color:;">
</div>

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

<script type="text/javascript">
<!--
var ts3v_url_1 =
"http://www.tsviewer.com/ts3viewer.php?ID=980370&text=ffffff&text_size=12&text_family=1&js=1&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=525284&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=525284&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=525284&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=525284&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none";
ts3v_display.init(ts3v_url_1, 980370, 100);
-->
</script>

  </div>
    





</div>
      </div>
      
  <script type="text/javascript">
  
var state = 0;
var wait = false;

function changeSlider1()
{
if(state==1){
$('#ts_slider1').animate({width: 307 }, "slow", function(){state = 0;}
);
}
else
$('#ts_slider1').animate({width: 573 }, "slow", function(){state = 1;}
);
}

$('#ts_slider1').click(function(){
changeSlider1();
});
      </script> </div>

</html>


EDIT (autom. Beitragszusammenführung):


Kann man das ganze auch nicht per Klick sondern per mouseover machen, bzw mouseout
 
Zuletzt bearbeitet:
Wie schon im anderen Thread geschrieben:
Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren
bzw
Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren


Dein Script oben kannst du löschen, weils kein Element mit der ID "tsv" gibt. Dein Script unten solltest du erst ausführen wenn die Seite wirklich komplett geladen ist (
Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren
). Außerdem kannst du dir die Funktion (changeSlider1) sparen und gleich alles in den event handler schreiben.
 
ja das ding funktioniert ja, da ich nich soviel ahnung davon habe bin ich darüber schon sehr froh 🙂

muss nurnoch versuchen onmouseover einzubauen.

hab mich nochnie so richtig mit der sprache beschäftigt kann nur bisschen html standard und pascal bzw delphi visual basic. aber das ist eig sehr ähnlich. ich hoffe ich krieg das hin
 
dankeläuft, ist mouseout somit auch registriert?


EDIT (autom. Beitragszusammenführung):


Code: 
 <html>




<script src="http://code.jquery.com/jquery-latest.js"></script>

<div>
<div id="ts_slider1" class="ts3hover" style="left: -245px; width:
300px; background:
url(http://ges-players.de/include/images/ts3slider.png) repeat scroll
100% 0% transparent; height: 685px; position: fixed; top: 10px;
z-index: 999;" >

<div
style="position:absolute;top:10pt;right:60pt;width:248px;height:665px;overflow:auto">



<div class="tab_container">
<div id="tab1" class="tab_content"><!--Content-->

<div id="ts3viewer_980370" style="width:203px; background-color:;">
</div>

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

<script type="text/javascript">
<!--
var ts3v_url_1 =
"http://www.tsviewer.com/ts3viewer.php?ID=980370&text=ffffff&text_size=12&text_family=1&js=1&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=525284&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=525284&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=525284&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=525284&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none";
ts3v_display.init(ts3v_url_1, 980370, 100);
-->
</script>

</div>






</div>
</div>

<script type="text/javascript">

var state = 0;
var wait = false;

function changeSlider1()
{
if(state==1){
$('#ts_slider1').animate({width: 307 }, "slow", function(){state =
0;}
);
}
else
$('#ts_slider1').animate({width: 573 }, "slow", function(){state =
1;}
);
}

$('#ts_slider1').hover(function(){
changeSlider1();
});
</script> </div>

</html>
 
Zuletzt bearbeitet:
Ja, siehe jQuery Docu. Wenn du nur einen Handler als Parameter angibst wird der sowohl bei mouseenter als auch bei mouseleave getriggert.

Jetzt solltest du deinen Code nur noch in ready() kapseln:

Code: 
$(document).ready(function() {
 var state = 0;
 var wait = false;

 $('#ts_slider1').hover(function(){
  if(state==1){
   $('#ts_slider1').animate({width: 307 }, "slow", function(){state = 0;});
  }
  else
   $('#ts_slider1').animate({width: 573 }, "slow", function(){state = 1;});
 });
});
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Online-Statistiken

Zurzeit aktive Mitglieder
2
Zurzeit aktive Gäste
60
Besucher gesamt
62
Die Summen können auch versteckte Besucher enthalten.

Neueste Themen

Beliebte Forum-Themen

Zurück
Oben Unten