Verlinkung defekt? JS (jQuery) Event auf A Tag verschwunden !?

[Carrear]

Hi Leute,

auf folgender Seite habe ich eine Liste von Fahrgeschäften:

http://volksfest-hannover.de/

Die Liste beginnt mit "Aqua Velis". Wenn man eins davon anklickt wird auf der Karte der Marker mit der entsprechenden ID (im Link als rel="" und am Marker als id="" angegeben) auf der Karte zentriert, bekommt die Klasse aktiv und das entsprechende Popup wird geöffnet.

Darüber die schwarze Liste sind Möglichkeiten die Liste darunter zu filtern. Und obwohl der a href Tag "Aqua Velis" auch nach dem Filtern (Aqua Velis findet man dann unter Laufgeschäfte) noch das gleiche Markup hat, funktioniert die Verlinkung danach nicht mehr. Auch das entfernen des Href Attributs bringt nichts. Es passiert nach dem Filtern einfach nichts mehr.

Als ob danach das entsprechende JS Event einfach nicht mehr auf dem Objekt läge. Ich kenne mich leider mit dem Debuggen nicht so aus. Vielleicht hat jemand eine Idee oder sieht den Fehler?

 

[Parantatatam]

Ich schau mir das mal bei Tageslicht genauer an, wenn dir dann noch niemand anderes geholfen hat. Ansonsten noch ein Vorschlag zum Layout: ich würde die Karte ins Zentrum rücken und so gestalten, dass sie den größten Teil der Webseite einnimmt. Dann wirkt die Webseite noch ansprechender.

 

[Carrear]

Weißt du mein Problem ist vielmehr, dass ich bei der großen Anzahl der Navigationselemente (Fahrgeschäfte) nicht weiß wo ich DAS hinmachen soll. Das stört, egal wo ich es hinpacke. Problem ist, dass es am besten auf den ersten Blick sichtbar sein soll, aber ebne nicht zu viel Platz weg nehmen darf, weil die Karte ja auch sofort sichtbar sein soll. Wenn ich die Navigation da oben weg bekommen würde, wäre es glaube ich schon wesentlich besser. Ich wollte die Liste erst als Dropdown machen, aber auch da sind es einfach zu viele Listenelemente um sie in ein Dropdown zu packen Wäre echt super wenn du mal einen Blick drauf wirst. Und vielleicht fällt dir auch noch was ein, wie ich die ganzen Fahrgeschäft Buttons am Anfang ausblenden kann. Am Anfang also beim laden werden ja aktuell erstmal ALLE angezeigt bis ich einen Filter klicke. Ich überdenke währenddessen nochmal das Layout morgen geht das Schützenfest los schade, wir dachten wir schaffen es ^^

 

[CPoly]

Dieses quicksand Ding entfernt die Elemente aus dem DOM, ergo verlieren Sie alle Events. Außerdem benutzt du clone(), was auch die Events entfernt (ich weiß nicht genau wozu du das machst). clone hätte dazu einen passenden Parameter siehe http://api.jquery.com/clone/.

Lösung (so in der Art):

//Vorher
$('.ourHolder a').on('click', function() {});

//Nachher
$('.ourHolder').on('click', 'a', function() {});

 

[Carrear]

Okay, erstmal schön zu sehen, dass jemand den Weitblick hat das zu verstehen ^^ Aber kannst du den Lösungsansatz noch etwas erläutern? Ich habe das Script nicht verstanden, aber wollte die Funktion, deshalb habe ich ein Tutorial im Prinzip 1:1 nachgeschrieben und nur die Inhalte der Listen Tags ausgetauscht. Kannst du mir bitte noch etwas genauer erklären wie ich jetzt vorgehen muss und was das bewirkt?

 

[CPoly]

Ich habe aktuell keine Zeit. Versuch mal folgendes:

var $data = $holder.clone(true);//Vorher war hier kein true als Parameter

Details dann später oder morgen. Dann kann ich auch genauer nachgucken.

 

[Carrear]

So funktioniert es leider nicht, aber trotzdem danke - wäre toll, wenn du es mal dazwischen schieben kannst irgendwann

 

[CPoly]

Also:

Der craftmap übergibst du {controls: {name: 'controls'}}. Intern holt sich die Karte dann alle Links innerhalb der Elemente mit der Klasse "controls", also ".controls a". Diese Liste bleibt auch so.

Das Quicksand plugin löscht unsichtbare Elemente aus dem Dokument, anstatt Sie nur zu verstecken oder am besten sie aus dem Dokument auszuhängen (http://api.jquery.com/detach/).

Wenn Quicksand also die Elemente durcheinander wirft, löscht es Element aus dem Dokument und fügst sie wieder ein -> die neu eingefügten Elemente sind nicht in der Liste der craftmap Links.


Wenn ich deine JavaScript Kenntnisse richtig einschätze empfehle ich dir das Quicksand Zeug zu entfernen und etwas simpleres zu benutzen. Deine Nutzer werden es dir danken. Du könntest z.B. einfach allen nicht-passenden Elementen eine Klasse "disabled" geben und etwas transparent darstellen.

main.js

$(document).ready(function() {
	var items = $('.ourHolder > li');

	$('#filterOptions').on('click', 'a', function(e) {
		e.preventDefault();

		items.removeClass('disabled').not('[data-type=' + this.className + ']').addClass('disabled');
	});

	$('.map').craftmap({
		cookies: false, // (bool) remember position
		fullscreen: false, // (bool) fullscreen
		container: {
			name: 'imgContent' // (string) class name for an image container
		},
		image: {
			width: 900, // (int) image width
			height: 612, // (int) image height
			name: 'imgMap' // (string) class name for an image
		},
		map: {
			position: 'center'  // (string) map position after loading - 'X Y', 'center', 'top_left', 'top_right', 'bottom_left', 'bottom_right'
		},
		marker: {
			name: 'marker', // (string) class name for a marker
			center: true, // (bool) set true to pan the map to the center
			popup: true, // (bool) set true to show a popup
			popup_name: 'popup', // (string) class name for popup
			onClick: function(marker, popup){},
			onClose: function(marker, popup){}
		},
		controls: {
			init: true, // (bool) set true to control a map from any place on the page
			name: 'ourHolder', // (string) class name for controls container
			onClick: function(marker){}
		},
		preloader: {
			init: true, // (bool) set true to preload an image
			name: 'preloader', // (string) class name for a preload container
			onLoad: function(img, dimensions){}
		}
	});
});

 

[Carrear]

Hey CPoly, das ist echt erstens echt super, dass ihr euch die Zeit nehmt da so einen detaillierten Blick reinzuwerfen und zweitens ein toller Vorschlag was die Navigation angeht. Im Prinzip habe ich aber ein Platzproblem. Die Sache ist, dass ich die Seite ja auch responsive umsetzen möchte. Wenn ich dann angehend 20 oder 25 Links habe (die Gastronomiebetriebe sind ja noch nicht dabei), dann das doch auf dem Handy ein bisschen doof aus oder? Also ich würde denke ich erstmal stutzen. Ich könnte natürlich auch einfach etwas Quicksand ähnliches selber schreiben. Also ein bisschen aus und einblenden auf nen click event bekomme ich auch noch hin ^^ ich bin nicht total unwissend was JS angeht, aber was ich schreibe ist wahrscheinlich toootal ineffizienter und nicht wirklich professioneller code, geschweige denn, dass ich auch nur annähern eine umfassende Kenntnis aller event handler usw habe. Es reicht eben gerade so um mal eben einen Slider oder ähnlich simple Dinge zu basteln. Wahrscheinlich ist es also am besten Quicksand wieder raus zu schmeißen. Da das Schützenfest ja jetzt im vollen Gange ist und ich mir somit auch Zeit bis zum Oktoberfest lassen kann, hat sie die brisanz ohnehin ergeben ^^ Also will ich mich einfach mal an eine andere Lösung machen Danke für die tatkräftige Unterstützung

 

[CPoly]

Auf dem Smartphone würde ich einfach die Liste durch ein <select> austauschen (resize-event). Damit lässt sich bei Smartphones am besten aus einer Menge von Items auswählen. Dort könntest du dann auch den dunklen Balken verschwinden lassen und das mittels <optgroup> machen.