PCMasters Hardware Forum > Software > GFX, Webdesign und Programmierung > Seite 1 > Teamspeakviewer Slider nachbauen!

Navigation
Im PC Forum registrieren


Produktsuche
IDEALO-PRODUKT-SUCHE
idealo preisvergleich
PCM News & Reviews
Anzeige




Antwort
 
 
Alt 22.01.2012, 19:47
Threadersteller
riddig
 
Standard

Teamspeakviewer Slider nachbauen!


Hey, ich mus unbedingt auf einer Homepage das hier nachbauen, was auf folgender Seite links zu sehen ist ]

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: ]

Danke!!
Geändert von riddig (22.01.2012 um 20:03 Uhr).
Alt Heute
Hardware Bot
Computer Informationen 		 
Diese Werbung wird registrierten
Mitgliedern nicht angezeigt.
Werden Sie noch heute kostenlos Mitglied
auf PCMasters.de
Standard Weitere Informationen
 
Alt 22.01.2012, 20:09
Benutzerbild von xXxJulianxXx
xXxJulianxXx
 
Standard
HTML-Code:
<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...
Geändert von xXxJulianxXx (22.01.2012 um 20:14 Uhr).
 
Alt 22.01.2012, 20:15
Threadersteller
riddig
 
Standard
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.
Geändert von riddig (22.01.2012 um 20:18 Uhr).
 
Alt 22.01.2012, 20:22
Benutzerbild von xXxJulianxXx
xXxJulianxXx
 
Standard
Zitat:
Zitat von riddig Beitrag anzeigen
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.


HTML-Code:
<div style="background-image:url(blalal.png);......">Ich bin der Teamspeak-Viewer.</div>
 
Alt 22.01.2012, 21:13
Threadersteller
riddig
 
Standard
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
Geändert von riddig (22.01.2012 um 21:13 Uhr). Grund: Antwort auf eigenen Beitrag innerhalb von 24 Stunden!
 
Alt 23.01.2012, 20:26
Threadersteller
riddig
 
Standard
niemand?
 
Alt 23.01.2012, 21:28
pixelflat
 
Standard
Wie schon im anderen Thread geschrieben: ] bzw ]

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 ( ]). Außerdem kannst du dir die Funktion (changeSlider1) sparen und gleich alles in den event handler schreiben.
 
Alt 24.01.2012, 08:16
Threadersteller
riddig
 
Standard
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
 
Alt 24.01.2012, 08:38
pixelflat
 
Standard
Du musst eigentlich nur .click() durch .hover() ersetzen...
 
Alt 24.01.2012, 09:11
Threadersteller
riddig
 
Standard
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>
Geändert von riddig (24.01.2012 um 09:11 Uhr). Grund: Antwort auf eigenen Beitrag innerhalb von 24 Stunden!
 
Alt 24.01.2012, 09:34
pixelflat
 
Standard
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;});
 });
});
hardware forum Neue Frage stellen?
Kurze Zusammenfassung der Frage:
Bitte wählen Sie eine Kategorie:
Mailadresse:
Ihre Frage:
Ihre Frage wird als Gast gespeichert. Sollte eine Antwort im Forum erfolgen, bekommen Sie diese per Email zugeschickt.


Antispam, bitte die folgende Aufgabe lösen: 
 
Um auf dieses Thema zu ANTWORTEN
bitte sich zuerst » hier kostenlos registrieren!!

Antwort

Tags: , ,

Ähnliche Tags: , , , , ,


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
ASUS Eee Pad Slider SL101 endlich im Handel angelangt Diskussion Postmaster Consumer Electronics 0 17.09.2011 14:55
Motorola XT860 vorgestellt - dünnerste QWERTZ Slider mit Android Diskussion Postmaster Consumer Electronics 0 15.07.2011 08:59
Asus Eee Pad Slider ab August in Europa Diskussion Postmaster Notebooks, Barebones und HTPCs 0 10.06.2011 20:53
Gaming PC Zusammenstellung nachbauen für 1,000,- anbu Kaufberatung für Komplettsysteme 133 22.11.2010 22:05
Nova Slider X 600 Gaming Mouse @ Hardware-Mods.com Hardware-Mods Webweites 0 23.02.2009 15:12


Sie betrachten gerade: Teamspeakviewer Slider nachbauen!


Alle Zeitangaben in WEZ +1. Es ist jetzt 10:11 Uhr.



Im PC Forum registrieren