Ipad linje på skärmen när du bläddrar

iPad och Single Finger Rulla i flexmls

Nick på April 13, 2011

Dagens inlägg är från Nick Larson, en av FBS s webbutveckling praktikanter som fick i uppdrag att göra iPad kompatibla med flexmls. Han diskuterar de tekniska detaljerna nedan hur Han genomförde rulla på iPad inom flexmls.

-Greg Kilwein

iPad: Single Finger IFrame Rulla

När vi först började testa iPad för kompatibilitet med flexmls, var en viktig fråga som rullning inte fungerade i många kärn platser inom flexmls. Som standard på iPad, inte bara rulla en div kräver två fingrar i stället för ett enda finger, men iframes kan inte rulla alls. Målet var att ge enda finger rullning när så är möjligt.

Tack och lov, ger iPad oss ​​med några stora inbyggda beröringshändelser som vi kan använda för att komma igång att lösa problemet. Med hjälp av ett par av händelserna, särskilt touchstart och touchmove. har vi möjlighet att skapa en enkel funktion som kan ta hand om initiering enda finger rulla på någon div eller annan rullning elementet bortsett från iframes (vi pratar om iframes senare). Den stora nyheten är att det är ganska olika webbläsare kompatibel, även bland berörings kapabel webbläsare. Jag testade det på ett par mobila webbläsare, och det verkar även att arbeta med Internet Explorer på Windows Phone 7! Så tack vare att komma över några användbara resurser, jag kom upp med detta:

Vad jag trodde från början skulle bli ett stort projekt, slutade en enkel fix tack vare den inbyggda beröringshändelser och lite forskning.

Nu till det svåra, de iframes. flexmls förlitar sig på iframe för att visa mycket av innehållet sett hela systemet. Problemet med iPad är att det inte spelar trevligt med ramar alls.

Av någon anledning iPad inte respekterar deras höjd värde. Istället för att hålla önskad höjd och tillåter rullning, iPad bara sträcker ut iframe vertikalt för att rymma allt innehåll. Det känns som om detta skulle kunna vara en bugg med iPad, eller något de inte förutse. Hursomhelst, vi behövde en fix.

Genast tänkte jag på bara linda en div runt den och använda den div för att bläddra. Men fungerar det inte. Problemet med det är när initMobileScroll funktionen appliceras på iframe och försöka rulla, iframe fångar bara de beröringshändelser i stället för div. Nåväl, efter vissa trodde jag kunde med två metoder.

Den första metoden, "version 1", innebär att placera en absolut positionerat div över iframe så beröringshändelser stanna inom ramen för samma fönster och inte fastna av iframe. Det enda problemet med denna metod är att den gör allt i iframe unclickable (som länkar). Detta alternativ skulle se ut så här:

Jo det är ett drägligt alternativ, men vad händer om användarna behöver för att kunna klicka på saker i iframe? Den andra metoden, "version 2", tar upp denna fråga. Även om det kräver inramade innehåll som ska finnas på samma domän som det överordnade dokumentet, definitivt fungerar.

Vad vi kan göra är att bara hålla iframe dolda och använder "innerhtml" egendom för att dra innehållet från iframe efter den är laddad. Vi kan då placera innehållet i en div, och tillämpa vår mobila bläddra till div istället för iframe.

Denna metod skulle se ut ungefär så här:

Det är ganska mycket det. Bara ta innehållet från den dolda iframe och kasta den till en div, som beter sig mycket bättre på en iPad. Nu varje gång iframe källa ändras, kommer div automatiskt ladda med det nya innehållet! En sak att notera är att innerhtml fungerar endast när innehållet i iframe är värd på samma domän. Om det inte kommer webbläsaren blockerar försök.

Ipad linje på skärmen när du bläddrar

Jag hoppas att detta ger en inblick om hur man åstadkomma rullning på iPad.

Expansionen av iframes är avsiktligt. Jag tror rullning = "nej" kommer att stänga av den, men jag är inte säker på om du då kommer att kunna rulla innehållet från JS.

Men detta är en bra bra start för mig. Tack

Nick 20 juni 2011 vid 07:46

Tack! Du kan alltid försöka lägga till en multiplikator till touchMovedY och touchMovedX. Jag är inte säker på om det skulle kännas naturligt eller inte när du bläddrar, men det skulle vara värt ett försök.

Jag tror jag missat något här.

Jag behövde en iFrame värd min huvudinnehåll på en iPad (och någon annan "stor skärm") på grund av "glidande innehåll sidan ändrar gemensamma för iPhone - slide in från höger med samtidig glida ut till vänster till exempel. I det här fallet, inte en "div" taggen för att dölja skjut innehåll genom att visa fullt både inkommande och utgående sidor, sida vid sida, eftersom de glider på plats. Inte ett bra utseende.

Så jag gick tillbaka till min gamla iFrame modell, som ursprungligen utvecklades för blixt overlay HTML innehållet visas. IFrame "masker" den glid innehåll visar endast en enda sidvisning som avsett. Dessa innehållssidor är utformade med en fast sidhuvud och sidfot på insidan toppen och botten av iFrame display, och en "div" taggen med rullnings innehåll i mellan - min exakta önskade uppsåt.

Detta scroller är enda finger rull, innehållet är valbara och sidan är svep-stånd samt.

Så jag tycker att ovanstående inlägg lite förbryllande. För mig, den "div" taggen är / var inte en hållbar lösning. Men iFrame är perfekt och verkar fungera bra i min begränsade tester. (OBS: Jag har en hel del mer javascript än som anges ovan.)

Nick September 7, 2011 vid 10:45

Det är intressant. Senaste jag såg, folk har haft massor av problem med iframes och rulla på iPad. Såvida inte någon av de nya versionerna av ios har sedan fast en del av problemen. I så fall, awesome! Bara gör en Google-sökning på "ipad iframes" kommer att fylla dig in på några av de problem som jag har att göra med.

Michael September 7, 2011 vid 00:10

"En sak att notera är att innerhtml fungerar endast när innehållet i iframe är värd på samma domän. Om det inte kommer webbläsaren blockerar försök. "

inte säker på vad det betyder - innehåll som visas i iFrame måste finnas på samma server som webbplatsen som iframe visas? Om så är fallet, skulle det omintetgöra viktigt mål för bland annat iFrames på en webbplats: inklusive innehåll inte värd det.

Tack för att klargöra

Nick September 7, 2011 vid 10:29

Det är korrekt, innehållet måste vara på samma server på grund av samma politik ursprung (en.wikipedia / wiki / Same_origin_policy).

I vårt fall har vi använt huvudsakligen iframes i det förflutna för att visa olika funktioner / element / etc. på en sida snarare än innehåll från en annan domän. Den Wikipedia sida på iframe elementet har en ganska bra förklaring till varför vi valde från början att använda dem: en.wikipedia / wiki / HTML_element # Ramar

Men nu när det är mycket bättre stöd för XMLHTTP förfrågningar (i form av ajax), de flesta (om inte alla) av dessa situationer Vi har kört in på kan undvikas.

Hej alla. Jag glömde det här inlägget, tyvärr.

Också jag använder Cubiq s iScroll fyra närvarande för innehålls rullning. Detta gör att en fast sidhuvud och sidfot medan du bläddrar innehållet; i princip allt jag behövde. Hur som helst, här är en länk till en strippad version av scroller i ett klippt behållare (ej iFrame). Den är utformad (ett pågående process just nu) på något - webbläsare, iPad, iPhone, etc. iPhone är för liten så behållaren försvinner.

Detta använder jQuery som en cross-browser för kod och även använt JavaScriptMVC regulatorn som en "widget" manager. På exemplet gör knapparna och alla inte fungerar; det är bara scroller demo. Bläddraren fungerar som en dröm.

(Guld Texten överst är en aktiv felsökningslogg.)

Kommer användningen av innerhtml fungerar, om vissa delar av innehållet skapas dynamiskt av javascripts och att händelsehanterare genomströmmades också dynamiskt fästa till elementen?

Relaterade inlägg

  • Den normala Applecare plan inte täcka skador som följer de allmänna garantivillkor som täcker normal användning i allmänhet bär endast omfattas om det är både hindrar en normal ...

  • Förutsatt att vi pratar om en funktionsduglig iPad (inte föråldrad) det är relativt beroende på om du har Applecare Plus täckning. Applecare Plus erbjuder upp till två skador ...

  • Knäckt min nya iPad! Vad gör jag? Tracilynnribble sa: Hej! Jag är ny till den elektroniska världen och har en iPad 3. Jag knäckt min iPad dess inte krossade men jag lämnade en stor spricka. Jag behöver...

  • Så kan, vill du inte att lägga ner den. Så tunn och lätt kommer du inte. Inte bara en tunnare skärm. En vacker display. Massiv kraft. I en minimal form. Upp till 10 timmars batteritid Inte ...

  • iPhone eller iPad laddar inte? Här är hur man rättar till det! Det går inte att ladda din iPhone eller iPad? Här är några korrigeringar du kan prova! Om du inte kan ladda din iPhone, iPad eller iPod touch, oavsett om det är ...


Warning: include_once(/home/admin/web/swedish.mobilesbuzz.com/public_html/ins/aftercontent.txt): failed to open stream: No such file or directory in /home/admin/web/swedish.mobilesbuzz.com/public_html/nr/ipad-linje-p-skrmen-nr-du-blddrar.php on line 144

Warning: include_once(): Failed opening '/home/admin/web/swedish.mobilesbuzz.com/public_html/ins/aftercontent.txt' for inclusion (include_path='.:/usr/share/pear:/usr/share/php') in /home/admin/web/swedish.mobilesbuzz.com/public_html/nr/ipad-linje-p-skrmen-nr-du-blddrar.php on line 144