Announcement

Collapse
No announcement yet.

Tab wechsel nach x Sec

Collapse
X
Collapse
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Tab wechsel nach x Sec

    Hallo zusammen,

    ich habe die unten angegebene seite. Was ich davon gerne machen würde, ist das es die Tabs nach x sec durchläuft. Also nach 20 sec von tab1 zu tab2 und dann wieder nach 20 sec von tab2 zu tab3 und das selbe von tab3 zu tab1.

    Ich hab schon ein paar sachen gefunden, aber beim Testen hat dies nie funktioniert.
    Könnt ihr mir helfen?

    Lg Tsubaru

    Code:
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
		</script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
		</script>
	  
		<style type="text/css">
		#demo-frame > div.demo { padding: 10px !important; }
		</style>
		
		<script>
			$(function() {
				$( "#tabs" ).tabs({
					select: function( event, ui ) {
						$( "#slider" ).slider( "value", ui.index );
					}
				});
			});
		</script>
	</head>
	
	<body style="font-size:62.5%;">
		<div class="demo">
			<div id="slider" style="width:100px">
			</div>

			<div id="tabs">
				<ul>
					<li><a href="#tabs-1">Tabelle 1</a></li>
					<li><a href="#tabs-2">Tabelle 2</a></li>
					<li><a href="#tabs-3">Tabelle 3</a></li>
				</ul>
				<div id="tabs-1">
					<p>Text Tabelle 1.</p>
				</div>
				<div id="tabs-2">
					<p>Text Tabelle 2.</p>
				</div>
				<div id="tabs-3">
					<p>Text Tabelle 3.</p>
				</div>
			</div>
		</div>
	</body>
</html>
    Zuletzt editiert von Tsubaru87; 28.01.2011, 10:33.
    Tags: javascript, jquery
  • #2
    Mit window.SetTimeout könnte ich mir vorstellen das sowas funktioniert. Dieser Funktion kannst Du einen Timeout (in deinem Fall 20000ms) mitgeben und eine Funktion die ausgeführt wird, wenn die 20 Sekunden ageloffen sind (Tabwechsel).

    Comment

    • #3
      Originally posted by fanderlf View Post
      Mit window.SetTimeout könnte ich mir vorstellen das sowas funktioniert. Dieser Funktion kannst Du einen Timeout (in deinem Fall 20000ms) mitgeben und eine Funktion die ausgeführt wird, wenn die 20 Sekunden ageloffen sind (Tabwechsel).
      Damit habe ich es versucht, geht nicht.
      Hab aber dadurch noch dies hier gefunden:
      Code:
      <html>
	<head>
		<title>Test</title>
	</head>
	<body>
		<script type="text/javascript">
			var aktiv = window.setInterval("Farbe()", 20000);
			var i = 0, farbe = 1;
			
			function Farbe () {
			  if (farbe == 1) {
				document.bgColor = "yellow";
				farbe = 2;
			  } else {
				if (farbe == 2){
					document.bgColor = "red";
					farbe = 3;
				} else {
					document.bgColor = "aqua";
					farbe = 1;
				}
			  i = i + 1;
			  }

			}
		</script>
	</body>
</html>
      Wenn jmd mir sagen würde wie ich hier das "document.bgColor = "aqua";" so abändern könnte das ich eine andere page laden kann, wäre ich demjenigen sehr dankbar.

      Comment

      • #4
        Das musst du in der Tabs API nachschauen. Dort sollte doch drin stehen wie man zwischen einzelnen Tabs wechselt.

        Logisch in etwa so:

        if(Tab.Index == 0)
        Tab.Index = 1;
        else if(Tab.Index == 1)
        Tab.Index = 2;
        else if(Tab.Index == 2)
        Tab.Index = 0;

        Comment

        • #5
          Originally posted by fanderlf View Post
          Das musst du in der Tabs API nachschauen. Dort sollte doch drin stehen wie man zwischen einzelnen Tabs wechselt.

          Logisch in etwa so:

          if(Tab.Index == 0)
          Tab.Index = 1;
          else if(Tab.Index == 1)
          Tab.Index = 2;
          else if(Tab.Index == 2)
          Tab.Index = 0;
          Auf der Tab API steht schon wie man in wechselt, soweit hab ich es ja, aber dort steht nichtwie man es mit einem Zeitintervall machen kann.

          Das habe ich ja im zweiten Code Beispiel so.
          Aber wie baue ich es konkret ein. Hab schon ein wenig rumprobiert und kombiniert, ohne erfolg.

          Oder haben sie eine Idee wie ich statt der Farben eine Seite laden kann?
          Zuletzt editiert von Tsubaru87; 28.01.2011, 13:32.

          Comment

          • #6
            Hab noch ein wenig weiter gesucht und hab dann doch was gefunden.
            #
            rotate

            Signature:
            .tabs( "rotate" , ms , [continuing] )

            Set up an automatic rotation through tabs of a tab pane. The second argument is an amount of time in milliseconds until the next tab in the cycle gets activated. Use 0 or null to stop the rotation. The third controls whether or not to continue the rotation after a tab has been selected by a user. Default: false.
            Nun versuche ich es genau so einzubinden und es funtioniert wieder auch nicht. Es muss doch so aussehen oder?
            Code:
            $(function() {
 $( "#tabs" ).tabs(
    "rotate" , 1000 , [continuing] 
   );
 });

            Comment

            • #7
              Da sollst Du auch nicht [continuing] hinschreiben, sondern true

              Comment

              • #8
                Originally posted by fanderlf View Post
                Da sollst Du auch nicht [continuing] hinschreiben, sondern true
                Ok, mein fehler
                Aber ändert an sich nicht wirklich was.

                NOrmal werden die Tabs angezeigt, wenn ich das nun hinzufüge, ändert das alles so ab, dass die tab überschrift als Schrift untereinander angezeigt wird und der Inhalt der einzelnen tabs wird auch untereinander gemacht.

                Comment

                • #9
                  Hab den fehler gefunden bzw die lücke (ist passender).

                  Der Code müsste folgender massen sein:
                  Code:
                  $(function() {
  $( "#tabs" ).tabs({ fx: { opacity: 'toggle', duration: 300 } })
                  .tabs("rotate" ,   20000);
});
                  Trotzdem vielen Dank fanderlf.
                  Hat mir sehr geholfen.

                  Comment

                  Previous template Next
                  Working...
                  X