• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ipad Checkbox unterstüzung

A

agodesign

Mitglied
Hi an alle,

ich arbeite derzeit an einer app für das Ipad und dazu sind gestylte Checkboxen notwendig, an sich ist es auch schon fertig.

http://jsforest.bplaced.net/Lightmachine/CustomizeHTMLControls.htm

Das Problem ist allerdings, dass das Ipad sowie das Iphone diese nicht unterstüzt, bzw es funktioniert einfach nicht.

Die Checkboxen an sich würden ohne style funktionieren und damit auch das Filtersystem, welches dahintersteckt.
Der Sinn der App wird sein, Produktbilder nach verschiedenen Kirterien filtern zu können.

Grüße, Daniel
 
Dein Ansatz ist schon ok, aber du weisst leider nie wie der Browser arbeitet. Ich konnte es jetzt leider nicht testen, aber kann es sein dass im Safari kein click Event getriggert wird, wenn man ein Label anklickt und dessen "Ziel" (das input) nicht sichtbar ist?
Teste das mal aus.

Falls dem so ist müsstest du auf das Label ein Click-Event setzen. Über dieses kriegst du ja auch das Ziel (for) heraus und kannst den Werte dann manuell setzen.
Ich würde die inputs aber an deiner Stelle nicht verstecken, sondern in einen nicht sichtbaren Bereich schieben. Denn deine Checkbox funktioniert wahrscheinlich nicht mit Tastatur. (Focus, Blur und Change sollten deine bevorzugten Events sein) :)
 
also ich hab jetzt mal das "click" durch ein "change" event ersetzt, kam aber nicht weiter.

Im Safari auf dem Pc funktioniert es einwandfrei, bloß das Iphone und das Ipad machen weiterhin Probleme, diese reagieren nicht einmal auf das anklicken ("antippen")
 
Mach mal bitte eine onclick funktion auf die Labels und teste mal ob sich das Attribut selected überhaupt ändert, wenn du auf das label klickst.
Code: 
$(".CheckBoxLabelClass").click(function() {
  // Das passende input holen
var inputId =  $(this).attr("for");
alert($("#"+inputId).is(":checked");

});

Einmal mit nem browser wie dem Firefox testen und dann mal mit iPad. Wenn sich beim iPad nichts tut, stimmt meine Vermutung, dass der Status nicht gewechselt wird, wenn der input nicht sichtbar ist.
Dann müsstest du die Geschichte komplett über das Label machen.
 
also so:

Code: 
$(".CheckBoxLabelClass").click(function() {   // Das passende input holen var inputId =  $("input.serie_check").attr("for"); alert($("#"+serie_check).is(":checked");  });

hab auch nochmal was probiert, habe den Teil der CSS-Datei gelöscht der für den style der checkboxen da ist. Dann funktioniert es, also ohne style.

**EDIT**

hier mal noch ein Beispiel:

1. mit css styles:
http://jsforest.bplaced.net/styles/1/

2. ohne css styles (dies funktioniert auf dem iPad)
http://jsforest.bplaced.net/styles/1/http://jsforest.bplaced.net/styles/2/
 
Zuletzt bearbeitet:
es liegt anscheinend am "display:none".... wenn ich dieses rasnehme funktioniert es, jedoch werden die checkboxen dann angezeigt, was nicht der Fall sein soll

*Edit*
oh sorry für den doppelpost :S
*Edit*
 
Also genau meine Vermutung :)
Mein Tipp für dich was die Checkboxen angeht. Lass sie sichtbar und schiebe sie in einen nicht sichtbare Bereich zum Beispiel so:
HTML: 
<input type="checkbox" style="position: absolute; left: -500px;" />

Dann sollte dein Vorhaben funktionieren :)
 
agodesign schrieb:
Sehr gute Idee!! hat aber leider nicht funktioniert, was ich jetzt nicht ganz verstehe...
Zum Vergrößern anklicken....

Nur um das mal zusammenzufassen:
- Deine inputs sind sichtbar, sind aber außerhalb des sichtbaren Bereiches
- Du benutzt nun den change Event anstatt onclick auf die inputs
- Generell unterstützt das iPad den klick auf den Label um damit das input zu "switchen" (von aktiv zu inkativ und umgekehrt)
- Bei dir funktioniert es nur nicht wenn die inputs außerhalb des sichtbaren Bereichs sind

Falls alles davon stimmt, scheint es ein "Bug" vom Safari zu sein.
Dann musst du wohl doch ein click-Event auf die Label machen und dann die checkboxen von dort aus als selected setzen und dein Bild je nachdem ob das input selected ist oder nicht einen Status verpassen.
 
Nur um das mal zusammenzufassen:
- Deine inputs sind sichtbar, sind aber außerhalb des sichtbaren Bereiches
- Du benutzt nun den change Event anstatt onclick auf die inputs
- Generell unterstützt das iPad den klick auf den Label um damit das input zu "switchen" (von aktiv zu inkativ und umgekehrt)
- Bei dir funktioniert es nur nicht wenn die inputs außerhalb des sichtbaren Bereichs sind
Zum Vergrößern anklicken....

genau so ist es :/
 
Das hier funktioniert definitiv für iPad:

Code: 
$(document).ready(function(){
        $(".CheckBoxLabelClass").click(function() {
     var inp = $("#"+$(this).attr("for"));
     alert("Checked? : "+$(inp).is(':checked'));
            if($(this).is(':checked')) {
                $("#events li."+$(inp).attr('id')).removeClass('serie_hidden');
                $("#events li").not(".serie_hidden, .raum_hidden, .stil_hidden").slideDown();
            } else {
                $("#events li."+$(inp).attr('id')).addClass('serie_hidden');
                $("#events li."+$(inp).attr('id')).slideUp();
            }
        });

Hab mir mal deine ausgeliehen gehabt und habs zumindest auf nem iPhone zum laufen gebracht ;)
 
*lach* Meinst du mit Bestätigungsfelder die alerts? :D
Wenn ja. Einfach die alert Zeile löschen. Hab die nur zum debuggen drin gehabt. :)
 
oh ok optimal :D funktioniert jetzt auch super ;) aber das erneute aktivieren eines filters also das wieder einblenden von bildern geht ned :S
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben