Checkbox per jquery über SVG triggern und dem path eine Klasse geben
Eingetragen von stixer2 (113)am 11.08.2015 - 17:18 Uhr in
Hi.
Ich habe in einer View eine Liste mit verschiedenen nodes, die Bundesländern zugeordnet sind. Dazu habe ich eine Deutschlandkarte per SVG-code, die als views-attachment angehängt ist. Filtern kann ich die nodes nach Bundesland per "global filter"-Modul (welches mir die Filter-values als body-class ausgibt) über Checkboxen. Somit kann ich die Bundesländer je nach Filter per CSS "highlighten". Allerdings kann ich auf diese Weise nicht in die Karte klicken… daher meine (blöde?) Frage:
Gibt es einen Weg, wie ich über die Karte auch die Checkboxen anprechen kann? Vermutlich gibt es auch ein bessere Lösung, für einen Tipp dafür wäre ich ebenfalls dankbar.
Besten Dank und Grüße!
Alex
- Anmelden oder Registrieren um Kommentare zu schreiben
Hi, Du kannst für das SVG
am 12.08.2015 - 10:24 Uhr
Hi,
Du kannst für das SVG Image Maps machen und diesen Maps Links zuordnen.
http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG
Es gibt Tools mit welchen Du solche Image Maps sehr einfach erstellen kannst.
http://www.maschek.hu/imagemap/imgmap
MfG
Robert
Hi… Die image-maps sind
am 12.08.2015 - 11:32 Uhr
Hi…
Die image-maps sind nicht das Problem, deshalb habe ich ja die Karte per SVG gemacht.
Mein Problem ist, dass der eigentliche Filter (für die Bundesländer) ja eine Checkbox-Liste ist (und mit der Karte derzeit nichts zu tun hat), die ich nicht einfach mit Links ansprechen kann. Wenn ich nur die Bundesländer hätte wäre es kein Problem, nur habe ich noch andere Filter in Kombination…
Im Prinzip möchte ich eigentlich das Checkbox-Formular als Karte ausgeben, mit den einzelnen Bundesländern als jeweils eine checkbox.
Hallo, es muss ja kein Link
am 12.08.2015 - 12:37 Uhr
Hallo,
es muss ja kein Link im Image Map sein, Du kannst im Link Anchor ja auch Javascript ausführen.
Per Klick auf die Karte, statt einem Link einfach per JQuery oder Javascript die nötigen Checkboxen setzten.
Das gillt auch für die anderen Filter und deren Elemente SELECT,RADIO, etc...
MfG
Robert
Per Klick auf die Karte,
am 12.08.2015 - 15:02 Uhr
Per Klick auf die Karte, statt einem Link einfach per JQuery oder Javascript die nötigen Checkboxen setzten.
Genau so was suche ich… habe aber von js keine Ahnung.
Ich habe das aber gefunden:
jQuery('#bayern').attr('checked','checked');Ist das ein Ansatz? Ich weiß nur nicht, wie ich das genau einbinde, müsste doch in einen Link als wrapper, oder? Und vollständig ist das sicher auch nicht…
Der SVG-code sieht so aus (Auszug):
<g id="bayern"><a xlink:href=" … " >
<path class="st0" d="M723.16,716.53c1-2.17,2.23-4.32,2.75-6.77c-0.7-0.32-1.3-0.45-1.67-0.81c-0.35-0.33-0.75-1.02-0.63-1.37
c0.82-2.34-0.75-3.85-2.[…]
Hi,ja sowas in der Art
am 12.08.2015 - 18:04 Uhr
Hi,
ja sowas in der Art meinte ich.
Es gibt verschiedene Methoden wie Du JS im Theme einbinden kannst.
Du kannst das JS z.B: im Template html.tpl.php Deines Themes einbinden.
Oder z.B: im svg code
<a xlink:href="jQuery('#bayern').attr('checked','checked');">Oder
<a xlink:href="#" onclick="jQuery('#bayern').attr('checked','checked');">MfG
Robert
So weit ich das verstanden
am 13.08.2015 - 08:38 Uhr
So weit ich das verstanden habe, brauche ich folgendes:
Eine Funktion (function() ), die im body (und nicht im head?) steht, so was in der Art:
(function( $ ) {
$.fn.checked = function(value) {
if(value === true || value === false) {
// Set the value of the checkbox
$(this).each(function(){ this.checked = value; });
}
else if(value === undefined || value === 'toggle') {
// Toggle the checkbox
$(this).each(function(){ this.checked = !this.checked; });
}
return this;
};
})( jQuery )
Und dann muss ich innerhalb des SVG für jedes Bundesland die function aufrufen. Also so in etwa:
<a xlink:href="#" onclick="jQuery('#bayern').attr('checked','checked');"> ?Mir fehlen wohl einfach die basics um das alles richtig zu verstehen, aber selbst wenn ich es hinbekomme, dass bei klick (z.B. auf Bayern) auch in der Checkbox Bayern angewählt wird, muss ja bei erneutem klick Bayern auch wieder abgewählt werden. Dann müsste das script doch sicher etwas mehr beinhalten, oder?
Was mich nur wundert, dass es dafür kein Modul gibt oder eine andere out-of-the-box-Lösung… Eine imagemap als views-Filter sollte eigentlich doch eine oft benötigte Funktion sein, oder? Es ist zum Verzweifeln…
Besten Dank so weit!
Hallo, Deine obige Funktion
am 13.08.2015 - 09:33 Uhr
Hallo,
Deine obige Funktion toggelt ja die Checkboxen bereits.
D.H. Wenn eine checkbox gecheckt ist wird Sie ungecheckt.
Schreib das in eine Javascript somescript.js Datei in Deinem Theme Ordner
und trag in der *.info Datei
scripts[] = somescript.js
ein.
Bei Änderungen am Theme musst Du den Cache leeren.
Da eine ImageMap mit einem externen Editor erstellt werden muss
und jede Imagemap anders ist, kann man hier auch keine Out of the Box Lösung erwarten.
Gruss
Robert
Zitat: Schreib das in eine
am 13.08.2015 - 14:31 Uhr
Schreib das in eine Javascript somescript.js Datei in Deinem Theme Ordner
Mein Problem ist leider, dass ich von js/jquery keine Ahnung habe und weit entfernt bin, scripte zu schreiben… Ich dachte, es gibt da bereits was fertiges bzw. einem template ähnlich, dass ich verändern kann. Eigentlich habe ich ja nicht mal einen Ansatz.
jede Imagemap anders ist, kann man hier auch keine Out of the Box Lösung erwarten.
Ich hatte gehofft, dass die imagemap keine Rolle spielt, dass so ein script quasi als Fernsteuerung für die checkbox-Liste funktioniert, egal wo das dann steht. Aber mir fehlen aber einfach schon die Grundkenntnisse. Da muss ich wohl erst mal ran, um überhaupt zu verstehen, was in den Tutorials steht…
Besten Dank und Grüße!
Ich habe es hinbekommen, wie
am 06.09.2015 - 17:44 Uhr
Ich habe es hinbekommen, wie ich die Checkbox ansteuern kann:
<script>
jQuery(document).ready(function($){
$.fn.checked = function(value) {
if(value === true || value === false) {
// Set the value of the checkbox
$(this).each(function(){ this.checked = value; });
}
else if(value === undefined || value === 'toggle') {
// Toggle the checkbox
$(this).each(function(){ this.checked = !this.checked; });
}
return this;
};
});
</script>
Im SVG habe ich folgenden Link, der die Checkbox triggert (#edit-field-bundesland-value-2 ist der input der Checkbox):
<g id="bayern"><a xlink:href="#" onclick="jQuery('#edit-field-bundesland-value-2').trigger('click', function (i, value) { return !value;});">
<path class="st0" d="M723.16…
Das funktioniert so weit. Zwei Fragen habe ich dazu:
1. Ist der Code so weit in Ordnung oder kann man den vereinfachen/säubern?
2. Kann mir jemand sagen, wie ich dem path, der angeklickt wurde eine CSS Klasse geben kann? Diese müsste so lange bestehen, wie das Checkbox-item aktiv ist.
Danke und Grüße