Slider mit Navigation - Problem mit innerHTML

Peter MacFu · 18.11.2011, 11:26

Hey Ihr,
ich programmiere gerade mit jquery einen "Slider" aber eher mit Fade anstatt einem Slide-Effekt. Alles funktioniert soweit, auch Buttons wie "vor" und "zurück" aber nun möchte ich eine Navigation (Slide 1, Slide 2, Slide 3 usw) generieren, bei Klick auf "Slide 1" soll der erste Slide usw. Das Ganze dynamisch, da die Anzahl der Slides ja auch unterschiedlich ist (je nachdem wieviele Slides ich anlege). Deshalb auch in JS per for-Schleife. Nun muss ich das ja per innerHTML in der Seite ausgeben aber daraus lässt sich ja keine Funktion starten wie zB "showslide1()". Gibt es da eine andere Möglichkeit?

JS-Code der Navi:

Code:

	for (var i = 1; i <= anzahl; i++){
		if(i > 1){navi = navi + '&nbsp;';}
		navi = navi + '<a href="#">Slide' + i + '</a>';
	}	
	
	document.getElementById('navi').innerHTML = navi;

und HTML-Ausgabe:

Code:

<span id="navi"></span>

rudygotya · 18.11.2011, 12:58

Bitte nochmal von vorn. Bitte bedenke, wir kennen deine Seite und dein Projekt nicht, ein verlinktes Beispiel oder auch kein Fantasiecode wären sehr hilfreich.

Zitat:

document.getElementById('navi').innerHTML = navi;

jQuery:

PHP-Code:

  $( '#navi' ).html( navi );

Besser: per json nachladen, ein template verwenden, rendern lassen.
Um deine events zuordnen können, arbeite entweder direkt mit dem gerenderten Template oder einfach mit .delegate() (oder auch .on() in jQ 1.7).

Hier mal ein Beispiel mit jquery tmpl:

PHP-Code:

  foo = function () {};
foo.prototype = {
    /**
     * @throws {TypeError}
     */
    load : function () {
       
        $.when(
            $.getJSON( this.url )
        )
        .then( function( response ) {
           
            if( ! response || response.success === undefined || ! response.success ) {
                this.fail();
                return;
            }
           
            if( ! $.isArray( response.data ) ) {
                throw new TypeError( 'data has to be an array' )
            }
           
            this.data = response.data;
            this.render();
           
        }.bind( this ) )
        .fail( this.fail.bind( this ) )
    },
    render : function ( data ) {
        this.elements = this.template
            .tmpl( this.data )
            .appendTo( this.room )
            .click( function () {
                $( this ).toggleClass( 'ui-selected' );
            } );
           
        this.xyzElement.trigger( 'load', [ this.elements ] );
    },
    fail : function () {
        deineNotifyFn( "fehler", ".." )
    },
    // etc
}

Grüße

Basti

Peter MacFu · 18.11.2011, 13:29

Hey, es zeigt die Navigation zwar mit deinem Code

Code:

$( '#navi' ).html( navi );

auch an aber dennoch ist das Problem gleich. Also muss ich nachladen? Wie geht das? Bzw. wozu? Sorry so weitreichende Erfahrungen habe ich noch nicht.

PS: Der Code von mir reicht doch aus für das Problem. Alles weitere wäre unnötig und verwirrend. Die Funktion die per Navigation aufgerufen werden soll ich ja egal, es geht nur darum, dass allgemein keine Funktionen mit dieser Methode über die Links der Navigation möglich sind.

ChrisB · 18.11.2011, 13:32

Zitat:

Zitat von Peter MacFu

PS: Der Code von mir reicht doch aus für das Problem.

Na dann löse es doch

Zitat:

Alles weitere wäre unnötig und verwirrend.

Ein Online-Beispiel (valider Code, auf’s wesentliche reduziert) würde dein Problem für jeden Mitleser schnell nachvollziehbar machen.
Dass sich jeder allein auf Basis eines hingeworfenen Scriptschnippsel gleich vorstellen kann, was du willst, versucht hast und vor allem falsch gemacht hast, kannst du nicht unbedingt erwarten.

Peter MacFu · 18.11.2011, 13:45

Also zum Vorstellen: ich will eine Navigation ausgeben (dynamisch per JS-for-Schleife), wo jeder Link ein Alert ausgibt, zum Beispiel "Test".

rudygotya · 18.11.2011, 14:01

Zitat:

Ein Online-Beispiel (valider Code, auf’s wesentliche reduziert) würde dein Problem für jeden Mitleser schnell nachvollziehbar machen.

Wenn das oben bisher alles ist, was du hast, hast du dich meiner Meinung nach noch nicht genug mit den erforderlichen Grundlagen beschäftigt.

Peter MacFu · 18.11.2011, 14:13

Also soll ich irgendwelchen balanglosen Code dazu posten, damit ich deiner Meinung nach mehr Verständnis vorweise? Ergibt keinen Sinn, ganz ehrlich. Der von mir gezeigte Code ist auf’s wesentliche reduziert und ein Onlinebeispiel kann ich im Moment nicht liefern.

ChrisB · 18.11.2011, 14:21

Zitat:

Zitat von Peter MacFu

Nun muss ich das ja per innerHTML in der Seite ausgeben aber daraus lässt sich ja keine Funktion starten wie zB "showslide1()". Gibt es da eine andere Möglichkeit?

Mit jQuery lassen sich doch problemlos Eventhandler an bestehende HTML-Elemente binden, also wo ist das Problem?

rudygotya · 18.11.2011, 14:29

Vorgekaut:

PHP-Code:

  $navi = $( navi )
  .appendTo( '#navi' )
  .click( function () { 
    location.href= 'http://docs.jquery.com/Frequently_Asked_Questions' ;
  })

Peter MacFu · 18.11.2011, 14:36

Aber doch eben nur, wenn das Element auch im DOM ist. Ist es aber nicht da per

Code:

$( '#navi' ).html( navi );

eingefügt.

Vielleicht reden wir aneinander vorbei. Kannst du mir ein Beispiel an meinem Code zeigen?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
jQuery - zwei Slider in Abhängigkeit voneinander	Koala	JavaScript, Ajax und mehr	44	14.04.2011 11:26
Problem mit Drop Down Menu	Kein Genie	HTML, Usability und Barrierefreiheit	2	04.11.2008 21:55
Problem mit PHP Navigation	hagene	PHP Tipps 2008	4	09.10.2008 23:33
utf8 Problem (Daten aus DB auslesen)	go1denboy	PHP Tipps 2008	1	23.09.2008 12:19
Problem mit swfobjects	R4v3r	JavaScript, Ajax und mehr	8	21.09.2008 14:17
Timestamp problem	phrain	PHP Tipps 2008	2	04.04.2008 09:41
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
Problem mit Navigation		HTML, Usability und Barrierefreiheit	4	10.02.2006 18:32
Probs mit Layout für Navigation mit Grafiken/Hintergrund		HTML, Usability und Barrierefreiheit	3	08.02.2006 19:56
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
Navigation	snatch-ic	PHP Tipps 2007	4	08.01.2006 12:11
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
div layer navigation		HTML, Usability und Barrierefreiheit	1	18.11.2004 15:44
Problem mit Layout		PHP Tipps 2004	7	27.09.2004 15:24
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34

18.11.2011, 11:26
Peter MacFu Benutzer Registriert seit: 23.12.2009 Beiträge: 31 PHP-Kenntnisse: Fortgeschritten	Slider mit Navigation - Problem mit innerHTML Hey Ihr, ich programmiere gerade mit jquery einen "Slider" aber eher mit Fade anstatt einem Slide-Effekt. Alles funktioniert soweit, auch Buttons wie "vor" und "zurück" aber nun möchte ich eine Navigation (Slide 1, Slide 2, Slide 3 usw) generieren, bei Klick auf "Slide 1" soll der erste Slide usw. Das Ganze dynamisch, da die Anzahl der Slides ja auch unterschiedlich ist (je nachdem wieviele Slides ich anlege). Deshalb auch in JS per for-Schleife. Nun muss ich das ja per innerHTML in der Seite ausgeben aber daraus lässt sich ja keine Funktion starten wie zB "showslide1()". Gibt es da eine andere Möglichkeit? JS-Code der Navi: Code: for (var i = 1; i <= anzahl; i++){ if(i > 1){navi = navi + ' ';} navi = navi + '<a href="#">Slide' + i + '</a>'; } document.getElementById('navi').innerHTML = navi; und HTML-Ausgabe: Code: <span id="navi"></span>


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

18.11.2011, 13:29
Peter MacFu Benutzer Registriert seit: 23.12.2009 Beiträge: 31 PHP-Kenntnisse: Fortgeschritten	Hey, es zeigt die Navigation zwar mit deinem Code Code: $( '#navi' ).html( navi ); auch an aber dennoch ist das Problem gleich. Also muss ich nachladen? Wie geht das? Bzw. wozu? Sorry so weitreichende Erfahrungen habe ich noch nicht. PS: Der Code von mir reicht doch aus für das Problem. Alles weitere wäre unnötig und verwirrend. Die Funktion die per Navigation aufgerufen werden soll ich ja egal, es geht nur darum, dass allgemein keine Funktionen mit dieser Methode über die Links der Navigation möglich sind.

18.11.2011, 13:45
Peter MacFu Benutzer Registriert seit: 23.12.2009 Beiträge: 31 PHP-Kenntnisse: Fortgeschritten	Also zum Vorstellen: ich will eine Navigation ausgeben (dynamisch per JS-for-Schleife), wo jeder Link ein Alert ausgibt, zum Beispiel "Test".

18.11.2011, 14:13
Peter MacFu Benutzer Registriert seit: 23.12.2009 Beiträge: 31 PHP-Kenntnisse: Fortgeschritten	Also soll ich irgendwelchen balanglosen Code dazu posten, damit ich deiner Meinung nach mehr Verständnis vorweise? Ergibt keinen Sinn, ganz ehrlich. Der von mir gezeigte Code ist auf’s wesentliche reduziert und ein Onlinebeispiel kann ich im Moment nicht liefern.

18.11.2011, 14:29
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Vorgekaut: PHP-Code: `$navi = $( navi ) .appendTo( '#navi' ) .click( function () { location.href= 'http://docs.jquery.com/Frequently_Asked_Questions' ; })` __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

18.11.2011, 14:36
Peter MacFu Benutzer Registriert seit: 23.12.2009 Beiträge: 31 PHP-Kenntnisse: Fortgeschritten	Aber doch eben nur, wenn das Element auch im DOM ist. Ist es aber nicht da per Code: $( '#navi' ).html( navi ); eingefügt. Vielleicht reden wir aneinander vorbei. Kannst du mir ein Beispiel an meinem Code zeigen?