Javascript zusammenlegen

[typo3_hp]

Hallo!

Ich habe einen Contentslider. Da ich das Thema habe, wenn ich nicht allen Sliderelementen eigene Namen zuweise sich immer alle Objekte bewegen habe ich das ganze nun einmal separiert. So funktioniert es für beide Objekte:

JS:

<script type="text/JavaScript">
$(document).ready(function (){
	$('#button a').click(function(){
		var integer = $(this).attr('rel');
		$('#myslide .cover').animate({left:-160*(parseInt(integer)-1)})  /*----- Width of div mystuff (here 160) ------ */
		$('#button a').each(function(){
		$(this).removeClass('active');
			if($(this).hasClass('button'+integer)){
				$(this).addClass('active')}
		});
	});	
});
</script> 

<script type="text/JavaScript">
$(document).ready(function (){
	$('#button1 a').click(function(){
		var integer = $(this).attr('rel');
		$('#myslide1 .cover1').animate({left:-160*(parseInt(integer)-1)})  /*----- Width of div mystuff (here 160) ------ */
		$('#button1 a').each(function(){
		$(this).removeClass('active');
			if($(this).hasClass('button1'+integer)){
				$(this).addClass('active')}
		});
	});	
});
</script>

HTML:

                <div id="button">
		 <a class="button1 active" rel="1" href="#"></a>
		 <a class="button2" rel="2" href="#"></a>
		 <a class="button3" rel="3" href="#"></a>
	</div>

	<div id="myslide">
		<div class="cover">

			<div class="mystuff">
				Lorem ipsum 
			</div>
			<div class="mystuff">
				Aenean scelerisque 
			</div>
			<div class="mystuff">
				Suspendisse
			</div>
		
		</div> <!-- end of div cover -->
	</div>  <!-- end of div myslide -->
	

		<div id="button1">
		 <a class="button1 active" rel="1" href="#"></a>
		 <a class="button2" rel="2" href="#"></a>
	</div>

<div class="clear"></div>
	<div id="myslide1">
		<div class="cover1">

			<div class="mystuff1">
				LXorem ipsum 
			</div>
			<div class="mystuff1">
				AXenean scelerisque
			</div>
		
		</div> <!-- end of div cover1 -->
	</div>  <!-- end of div myslide1 -->

Wie kann ich daraus ein JS-machen? Da es einige Sliderobjekte auf der Seite sein sollen...

Danke und Grüße

[Christian Marquardt]

http://api.jquery.com/event.data/

Das wird bei einem Event mitgegeben. Es ist auszuwerten

[typo3_hp]

Danke!

Sorry, ich weiß nicht wie ich da anfangen soll.
Bei dem Link den Du mir geschickt hast wird ja der Inhalt der Buttons genommen. Ich brauche aber ja den übergeordneten DIV.

Die buttons sind ja wie folgt:

<div id="button1">
<a class="button1 active" rel="1" href="#"></a>
<a class="button2" rel="2" href="#"></a>
</div>


<div id="button2">
<a class="button1 active" rel="1" href="#"></a>
<a class="button2" rel="2" href="#"></a>
</div>

Sry mit JS bin ich leider nicht so fit. Ich muss nur wissen wie ich die Variable damit befülle.

Ich würde jetzt vermuten ich benötige eine extra Funktion, die prüft von wo der Klick kam und das in eine Variable schreibt. Diese Variable muss ich dann in der Hauptfunktion verwenden. Oder?

Danke

[Christian Marquardt]

Ich würde jetzt vermuten ich benötige eine extra Funktion, die prüft von wo der Klick kam

Und woher sollte diese Funktion die Information herholen?
Du bindest doch das Click an einen Button. Also ist dieser wohl der Sender des Ereignisses. Dann musst du eine Tabelle vorhalten in der drin steht, dass Button1 den DIV1 bedient, Button2 den DIV2 usw.

[typo3_hp]

Stimmt!
Wie würde das JS aussehen, wenn ich es über den von Dir vorgeschlagenen Weg mache?
LG

[Christian Marquardt]

Wie würde das JS aussehen, wenn ich es über den von Dir vorgeschlagenen Weg mache?

Wahrscheinlich würde es aus mehr oder weniger sinnvollen Zeilen Code bestehen....
Ich würde den Buttons Namen geben "0", "1" usw. Dann ein Array ablegen, in dem der Index dem Button entspricht und der Inahlt das dazugehörige DIV enthält. Alternative wäre, dass das DIV so heisst wie der Button, bloß mit dem Zusatz "div". Dann brauchst du das Array nicht. Also der Button heisst "1" dann heisst das DIV "1div". Du bekommst im Event die Info das es Button "1" war. Hängst ein "div" ran und fertig

[typo3_hp]

So habe nun bisschen etwas herumprobiert. Scheint noch nicht ganz zu laufen:

Das erste Objekt sieht nun so aus:

Button und Slide werden nun dynamisch per PHP wie folgt generiert:

<div id="myslide2_1" class="myslide">
<div id="button" name="2_1">
<a class="button1 active" name="2_1" href="/content/xx#2_1" rel="1"></a>
<a class="button2" name="2_1" href="/content/xx#2_1" rel="2"></a>
<a class="button3" name="2_1" href="/content/xx#2_1" rel="3"></a>
</div>

Das JS habe ich um $(this).index() erweitert.

<script type="text/javascript">  
$(document).ready(function (){
    $('#button'+ $(this).index() + 'a').click(function(){
        var integer = $(this).attr('rel');
        $('#myslide'+ $(this).index() + ' .cover').animate({left:-352*(parseInt(integer)-1)})
        $('#button'+ $(this).index() + ' a').each(function(){
        $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
    });    
});
</script>

Lt. Firebug ist das JS in Ordnung. Jedoch passiert noch nichts. Was mache ich noch falsch?

Was vll auch noch zum Verständnis wichtig ist: Diese 3 Buttons gehören noch zu dem ersten Slideelement!

Danke und Grüße

[Christian Marquardt]

$('#button'+ $(this).index() + 'a')

glaube nicht, dass das so gehen kann.

Warum bindest du nicht jeden Button an eine einzige Funktion? ($(selector).click(myclick(eventdata)))

[typo3_hp]

Guten Morgen!

Dankeschön:
Wie würde das ganze dann aussehen?
lg

[Christian Marquardt]

Die habe keine Lust mir dazu eine Teststellung aufzubauen. Also nochmal:

- du bindest alle Buttons an ein Event, welches auf eine Funktion verweist
- die Funktion bekommt die Eventdata übergeben
- in der Funktion, prüfst du, welcher Button das Event ausgelöst hat
- in Abhängigkeit davon animierst du nun "etwas"
- das "etwas" ergibt sich aus dem Button

[typo3_hp]

Geht viel einfacher ;-)



HTML-Code:

<div id="myslide2_1" class="myslide">
<div id="button" name="2_1">
<a class="button1 active" ide="2_1" href="/content/xx#2_1" rel="1"></a>
<a class="button2" ide="2_1" href="/content/xx#2_1" rel="2"></a>
<a class="button3" ide="2_1" href="/content/xx#2_1" rel="3"></a>
</div>
<div class="clear"></div>
<div class="cover" style="left: 0px;">

Code:

<script type="text/JavaScript">
$(document).ready(function (){
    $('#button a').click(function(){
        var integer = $(this).attr('rel');
        //alert (integer);
        var ide = $(this).attr('ide');
        //alert (ide);
        $('#myslide' + ide + ' .cover').animate({left:-352*(parseInt(integer)-1)}) 
        $('#button a').each(function(){
        $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
    });    
});
</script>

So funktionier es! Danke für Deine Unterstützung!

[typo3_hp]

Jetzt habe ich doch noch eine Kleinigkeit:

Aktuell wird zwar der Slide selber nur im richtigen Contentelement druchgeführt, die Navigationsbuttons aber werden auf allen Slideobjekten auf der Seite bewegt (Klasse active).

Wie kann ich es machen, dass nur da der active gesetzt/geändert wird, wo auch der Slide durchgeführt wird?

Aktuell sieht es so aus:


Code:

<script type="text/JavaScript">
$(document).ready(function (){
    $('#button a').click(function(){
        var integer = $(this).attr('rel');
        alert (integer);
        var val = $(this).attr('value');
        alert (val);
        var ide = $(this).attr('id');
        alert (ide);
        $('#myslide' + val + ' .cover').animate({left:-352*(parseInt(integer)-1)})  
        $('#button a').each(function(){
          $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
    });    
});
</script>

HTML-Code:

<div id="myslide2_1" class="myslide">
<div id="button" name="2_1">
<a id="1_2_1" class="button1" value="2_1" href="/content/xx#2_1" rel="1"></a>
<a id="2_2_1" class="button2 active" value="2_1" href="/content/xx#2_1" rel="2"></a>
<a id="3_2_1" class="button3" value="2_1" href="/content/xx#2_1" rel="3"></a>
</div>

Habe es einmal testweise per manuellem Code mit

Code:

 $('#button a 1_2_1').removeClass('active');

versucht, bringt mir aber nicht viel.

Wie bekome ich es noch hin, dass nur das richtige Objekt mit dem Marker für den aktiven Button bewegt wird.
Danke

[Christian Marquardt]

Ich habe das schon mehrmals geschrieben....Wenn du möchtest, dass in Abhängigkeit von etwas, bestimmter Code ausgeführt wird, musst du diese Abhängigkeit prüfen...