Ergebnis 1 bis 11 von 11

Thema: MooTools SmoothScroll : wieso #undefined in Adresszeile?

  1. #1
    Contao-Nutzer Avatar von Transparenz
    Registriert seit
    27.06.2010.
    Ort
    Allgäu
    Beiträge
    29

    Fehler MooTools SmoothScroll : wieso #undefined in Adresszeile?

    Hallo,

    ich benutze MooTools SmoothScroll, um von den Links einer Artikelliste "weich" zu den Ankern zu gelangen. Klappt auch wunderbar, nur ist mir etwas in der Adresszeile vom Browser aufgefallen:

    Beim Laden der Seite wird der Browser-Adresse ein #undefined hinzugefügt, z.B. domain.de/seite#undefined. Erst bei Aufruf eines Ankers wird #undefined durch den Ankername z.B. #top ersetzt.

    Wie bekomme ich #undefined entfernt, solange noch kein Anker gewählt wurde?

    Hier meine externe JavaScript-Datei. Ich freu mich über jedes Feedback Danke

    Code:
    /* Logo-Animation */	
    	logo = function() {
    		var images = [];
    		var path = "/files/dimensionen/version2/logo_animation/";
    		var img_paths = [path+'1.png', path+'2.png', path+'3.png', path+'4.png', path+'leer.png'];
    		var loader = new Asset.images(img_paths, {
    			onComplete: function() {
    				img_paths.each(function(im) {
    					images[im] = new Element('img', {
    						'src': im,
    						'alt': 'Dimensionen',
    						'styles': {
    							'opacity': '0',
    							'position': 'absolute',
    						}
    					});
    					images[im].inject($('logo_container'));
    					$$('#logo_container img').each(function(frame, index) {
    						frame.set('tween', {
    							duration: 750
    						}).tween.delay(index * 250, frame, ["opacity", [0, 1]]);
    					});
    				});
    			}
    		}); 
    	};
    
    /* Top-Link platzieren */
    	setspace = function() {
    		distance1 = $('right').offsetLeft;
    		distance2 = $$('.mod_toplink')[0].offsetLeft;
    		space = distance2 - distance1;
    		$$('.mod_toplink')[0].setStyle('bottom',space);
    	};
    
    /* Top-Link ein- und ausblenden */
    	toplink = function() {
    		document.writeln("<div>");
    		document.writeln("<img src='files/dimensionen/version2/up.png' alt='' />Nach oben");
    		$$('.mod_toplink').setStyle('opacity','0');
    		setspace();
    		document.writeln("</div>");
    		window.onscroll = function() {
    			if (window.pageYOffset > 100) {
    				$$('.mod_toplink').fade('in');
    			} else {
    				$$('.mod_toplink').fade('out');
    			};
    		};
    	};
    
    /* Body-Klasse ergänzen */
    	js = function()	{
    		document.getElementsByTagName('body')[0].className += ' js'
    	};
    
    /* Smooth Scroll zu allen Ankern */
    	smoothscroll = function()	{
    		var scrolling = new Fx.SmoothScroll({
    			duration: 500
    			},window);
    		scrolling.start(0,0);
    	};
    
    /* Übernahme Wert aus Suchergebnis, Rückgabe in Suchfeld, dann Markierung */
    	search = function() {
    		if (document.getElementById('ctrl_keywords_7')) {
    			document.getElementById('ctrl_1').value = document.getElementById('ctrl_keywords_7').value;
    			document.getElementById('ctrl_1').select();
    			}
    		};
    
    /* Frame-Killer */
    	if (top.location != self.location) {
    		top.location.replace(self.location); 
    	}
    	
    /* Aufruf der Funktionen */
    	else {
    		window.addEvent('domready',logo);
    		window.addEvent('domready',js);
    		window.addEvent('domready',smoothscroll);
    		window.addEvent('domready',search);
    		window.addEvent('resize',setspace);
    	};
    Geändert von Transparenz (15.10.2012 um 12:05 Uhr)

  2. #2
    Contao-Urgestein
    Registriert seit
    10.07.2010.
    Beiträge
    4.403
    User beschenken
    Wunschliste

    Standard

    Hast Du schon mal im Firebug nachgeschaut ob es Dir von js eine Meldung ausgibt welche eine Hinweis liefern könnte?

    Undefined heisst ja so viel wie "undefiniert". Vielleicht Sucht Dein Script nach einem vor-definierten Anker den es nicht gibt?
    Ich habe mir das Skript durchgeschaut. Da ich aber nicht wirklich ein js Hirsch bin konnte ich nix finden ;-)

    Aber bezüglich automatisch einen Anker erstellen habe ich mich an einen Eintrag hier im Forum erinnert, den ich neulich auch verwendet habe. Vielleicht kannst das ja auch verwenden um das mit der Anker Navigation zu vereinfachen. Speziell #6 hebt das automatische generieren von Ankern hervor.

    ciaobello

  3. #3
    Contao-Nutzer Avatar von Transparenz
    Registriert seit
    27.06.2010.
    Ort
    Allgäu
    Beiträge
    29

    Standard

    Also Firebug zeigt in der Konsole keine Fehler. Wenn ich ScrollSmooth zum normalen Scroll mache, verschwindet auch der Effekt mit diesem #undefined – es liegt also wirklich an diesem MooTools-Effekt.

    Also die Anker werden ja von Contao erstellt, ohne Anpassungen oder Erweiterungen. Das möchte ich auch gerne beibehalten.

    Ich erklär mir das auch so, dass beim Seitenaufruf noch kein Anker angesteuert wird und deshalb #undefined kommt. Interessant, dass beim Aufruf von domain.de/seite#top sich die Adresse trotzdem zu domain.de/seite#undefined ändert. Auch jeder andere direkte Seitenaufruf mit Ankerziel mündet so...

    Ein MooTools-Bug? Vielleicht wird das mit dem nächsten Update behoben

    Gibt es eine andere MooTools-Lösung zum geschmeidigen Anscrollen von Ankerzielen auf einer Seite?

  4. #4
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.225
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard

    Hi.

    Ich nutze meist Mootools Scrollspy oder einfach ein kleinen Codeschnippel a'la:
    Code:
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    new Fx.SmoothScroll({
      duration: 1500
    }, window);
    //--><!]]>
    </script>
    Hatte noch nie Probleme damit.

    Gruß
    Thomas
    blucomp | Webdesign & Onlinelösungen

  5. #5
    Contao-Urgestein
    Registriert seit
    10.07.2010.
    Beiträge
    4.403
    User beschenken
    Wunschliste

    Standard

    Schau mal in der Contao Google Suche nach Onepage um, dann findest Du neben dem von Thomas geposteten code noch andere Workarounds zu diesem Thema.

    Zitat Zitat von Transparenz
    Also die Anker werden ja von Contao erstellt, ohne Anpassungen oder Erweiterungen. Das möchte ich auch gerne beibehalten.
    Das interessiert mich jetzt ... hast da die Contao Version und vielleicht ein kleiner Hinweis wie Du da vorgehst.
    Mit contao3 und internen Weiterleitungen habe ich das auch schon hin gekriegt. Aber mit 2.11 konnte ich dass dann nicht mehr abbilden. Deshalb auch die von mir vorgeschlagene ce_navigation ;-)

  6. #6
    Contao-Fan Avatar von qba
    Registriert seit
    23.07.2010.
    Ort
    Berlin Mariendorf
    Beiträge
    574

    Standard

    Zitat Zitat von tblumrich Beitrag anzeigen
    Hi.

    Ich nutze meist Mootools Scrollspy oder einfach ein kleinen Codeschnippel a'la:
    Code:
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    new Fx.SmoothScroll({
      duration: 1500
    }, window);
    //--><!]]>
    </script>
    Hatte noch nie Probleme damit.

    Gruß
    Thomas
    ja das ist ja klasse. *gleich mal irgendwo abspeicher*
    Gruß qba|uwe

  7. #7
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.557
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Um etwaige Probleme im Zusammenhang mit der Markup-Komprimierung usw. zu vermeiden, würde ich allerdings die CDATA-Abschnitte im JavaScript-Code wie folgt auskommentieren: http://de.contaowiki.org/Richtiges_Auskommentieren
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  8. #8
    Contao-Fan Avatar von qba
    Registriert seit
    23.07.2010.
    Ort
    Berlin Mariendorf
    Beiträge
    574

    Standard

    Hi,

    na danke für den Hinweis. Richtig muss es also dann so heißen?

    Code:
    <script type="text/javascript">
    /* <![CDATA[ */
    new Fx.SmoothScroll({
      duration: 1500
    }, window);
    /* ]]> */
    </script>
    Gruß qba|uwe

  9. #9
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.557
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Jepp. Wobei "richtig" vielleicht das falsche Wort ist. Das vorher verwendete Kommentarkonstrukt ist ja nicht grundsätzlich falsch, funktioniert aber im Zusammenhang mit der HTML Markup-Komprimierung nicht (mehr) richtig. Daher wurden die Templates aktueller Contao-Versionen auch allesamt entsprechend angepasst.
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  10. #10
    Contao-Nutzer Avatar von Transparenz
    Registriert seit
    27.06.2010.
    Ort
    Allgäu
    Beiträge
    29

    HTML Funktioniert!

    Ich hab jetzt Aufruf und Funktion zusammengelegt, und siehe da: es funktioniert wie gewünscht!
    Kein #undefined mehr in der Adresszeile beim Klicken auf einen Anker-Link.

    Vielen Dank an alle

    Nochmal die Situation: in #main ist eine Seite mit verschiedenen Artikeln. In #right ist die Artikelliste als Modul eingebunden. Die damit generierten Anker lassen sich von der Artikelliste "weich" anscrollen. Läuft unter Contao 2.11.6 mit normalen Bordmitteln.

    Hier nun der Inhalt meiner externen JS-Datei, inkl. aller Extras

    Code:
    /* <![CDATA[ */
    
    /* Top-Link platzieren */
    	setspace = function() {
    		distance1 = $('right').offsetLeft;
    		distance2 = $$('.mod_toplink')[0].offsetLeft;
    		space = distance2 - distance1;
    		$$('.mod_toplink')[0].setStyle('bottom',space);
    	};
    
    /* Top-Link ein- und ausblenden */
    	toplink = function() {
    		document.writeln("<div>");
    		document.writeln("<img src='files/dimensionen/version2/up.png' alt='' />Nach oben");
    		$$('.mod_toplink').setStyle('opacity','0');
    		setspace();
    		document.writeln("</div>");
    		window.onscroll = function() {
    			if (window.pageYOffset > 100) {
    				$$('.mod_toplink').fade('in');
    			} else {
    				$$('.mod_toplink').fade('out');
    			};
    		};
    	};
    
    /* Frame-Killer */
    	if (top.location != self.location) {
    		top.location.replace(self.location); 
    	} else {
    			/* Body-Klasse js ergänzen */
    			window.addEvent('domready', function() {
    				document.getElementsByTagName('body')[0].className += ' js'
    			});
    			/* Logo-Animation */	
    			window.addEvent('domready', function() {
    				var images = [];
    				var path = "/files/dimensionen/version2/logo_animation/";
    				var img_paths = [path+'1.png', path+'2.png', path+'3.png', path+'4.png', path+'leer.png'];
    				var loader = new Asset.images(img_paths, {
    					onComplete: function() {
    						img_paths.each(function(im) {
    							images[im] = new Element('img', {
    								'src': im,
    								'alt': 'Dimensionen',
    								'styles': {
    									'opacity': '0',
    									'position': 'absolute',
    								}
    							});
    							images[im].inject($('logo_container'));
    							$$('#logo_container img').each(function(frame, index) {
    								frame.set('tween', {
    									duration: 750
    								}).tween.delay(index * 250, frame, ["opacity", [0, 1]]);
    							});
    						});
    					}
    				}); 
    			});
    			/* Smooth Scroll zu allen Ankern */
    			window.addEvent('domready', function() {
    				new Fx.SmoothScroll( {duration: 1000}, window);
    			});
    			/* Suche Standardwert Teil 2/2 */
    			window.addEvent('domready', function() {
    				$('ctrl_1').clearFocusResetBlur('value'); 
    			});
    			/* Suchergebnis übernehmen, in Suchfeld übernehmen und markieren */
    			window.addEvent('domready', function() {
    				if ($('ctrl_keywords_7')) {
    					$('ctrl_1').value = $('ctrl_keywords_7').value;
    					$('ctrl_1').select();
    				}
    			});
    			/* Top-Link platzieren */
    			window.addEvent('resize', setspace);
    	};
    	
    /* Suche Standardwert Teil 1/2 */
    	Element.implement( {
    		clearFocusResetBlur: function(attr) {
    			var valueString = this.get(attr);
    			this.addEvents( {
    				'focus': function() {
    					if ( this.get('value') == valueString ) this.set('value','');
    				},
    				'blur': function() {
    					if ( this.get('value') == "" ) this.set('value',valueString);
    				}
    			});
    		}
    	});
    	
    /* ]]> */

  11. #11
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.225
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von xchs Beitrag anzeigen
    Jepp. Wobei "richtig" vielleicht das falsche Wort ist. Das vorher verwendete Kommentarkonstrukt ist ja nicht grundsätzlich falsch, funktioniert aber im Zusammenhang mit der HTML Markup-Komprimierung nicht (mehr) richtig. Daher wurden die Templates aktueller Contao-Versionen auch allesamt entsprechend angepasst.
    Ja, sorry, ich hatte das aus einer etwas älteren Installation, die XHTML Strict läuft, rauskopiert.

    Gruß
    Thomas
    blucomp | Webdesign & Onlinelösungen

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •