JavaScript SinglePage am Handy funktioniert nicht

lingschmetter

Cadet 1st Year
Registriert
Aug. 2014
Beiträge
9
Hallo,

Ich versuch gerade eine Website als Singlepage mit horizontalem scrollen zu entwickeln.
Am PC funktionierts schon einwandfrei, aber am Handy leider nicht.

Wenn man da im Menü auf eine Kategorie (zb Impressum) klickt, ruckelt/zittert das Bild aber es wechselt nicht.

Dieser Code ist dafür zuständig (hab ich im Internet gefunden):
Code:
<script type="text/javascript" charset="utf-8">
                        $(document).ready(function() {
		       $("#navi a").bind("click",function(event){
		           event.preventDefault();
		           var target = $(this).attr("href");
		           $("html, body").stop().animate({
		               scrollLeft: $(target).offset().left,
					   scrollTop: $(target).offset().top
		           }, 1200);
		       });
			});
                        
                        
                        $(document).ready(function() {
		       $("#contact a").bind("click",function(event){
		           event.preventDefault();
		           var target = $(this).attr("href");
		           $("html, body").stop().animate({
		               scrollLeft: $(target).offset().left,
					   scrollTop: $(target).offset().top
		           }, 1200);
		       });
			});

    </script>
Ich hätte es jetzt so gelöst, dass ich in der mobilen Version ein extra Menü einblenden lasse (also auch wenn man am PC das Fenster zusammenschiebt, wechselt man zum mobilen Menü) dort gibt es keine SinglePage, sondern Unterseiten. Am mobilen Gerät klappt alles wunderbar! Allerdings ist dann das Problem, wenn man die Seite am PC wieder groß zieht, ist man dann auf der Seite mit den Unterseiten - und die Website wechselt nicht mehr horizontal wie bei der SinglePage.

Ich würde mich über hilfreiche Antworten sehr freuen

LG
Lisa
 
Zuletzt bearbeitet:
servus,

ich hab jetzt nicht ganz verstanden was du genau willst, möchtest du ein one-page auf mobil sowie auf desktop? oder möchtest du auf mobil unterseiten und auf desktop one-page?

zu deiner momentanen situation, es kann deswegen nicht klappen, weil wenn du dich auf einer unterseite befindest, fehlt der content der anderen seiten... also kann dein script nichts einblenden was nicht da ist.
 
Teisi schrieb:
servus,

ich hab jetzt nicht ganz verstanden was du genau willst, möchtest du ein one-page auf mobil sowie auf desktop? oder möchtest du auf mobil unterseiten und auf desktop one-page?

zu deiner momentanen situation, es kann deswegen nicht klappen, weil wenn du dich auf einer unterseite befindest, fehlt der content der anderen seiten... also kann dein script nichts einblenden was nicht da ist.

Wenn es funktionieren würde, möchte ich schon auch in der Mobilen Version eine "one-page" das hat aber nicht funktioniert, deswegen hab ichs dann so umgebaut, dass man in der mobilen Version Unterseiten hat - da ist dann nur das Problem, dass wenn man die Seite am PC zusammen schiebt und dann wieder groß zieht, dass es dann bei den Unterseiten bleibt..
 
Zuletzt bearbeitet:
naja bei dieser version, würde es so fast funktionieren, allerdings bevor du weitermachst, setzte mal diesen meta tag:

Code:
<meta name="viewport" content="width=device-width, initial-scale=1">

außerdem kann ich es nicht empfehlen "html, body" verschieben zu wollen (das mag nicht jedes gerät, oder ich hab in meinen seiten den gleichen fehler wie du, ohne es mir bewusst zu sein), setzt dir hierfür nen hilfscontainer... (html, body width 100% nicht vergessen)

ich schick dir mal ne pn
 
Als Webentwickler rate ich eigentlich von One-Page-Designs ab...

Falls du jedoch <div>s haben willst, die scrollen, schau dir den css style overflow:auto bzw scroll an.
 
@CapFuture
ja? warum? nur aus SEO gründen? das würde sich aber vereinbaren lassen
 
SEO ist gar nicht mal so das Problem...

Ich sage nur "iOS und Fullscreen": Nimm dir ein iPhone mit iOS7/8, öffne die Seite im Portrait und drehe sie dann in Landscape. Wenn dann nach etwas ungeschicktem Scrollen die NaviLeiste oben und unten drüber kommen, wirst du deinen Spaß haben...

* Leisten können nicht ausgeblendet werden
* Seite schrumpft aber auch nicht auf den sichtbaren Bereich zusammen
* Kein onResize oder eine Apple-spezifisches Event fliegt beim einblenden

Und eine mobile Seite, die den aktuellen iOS Safari Browser nicht vollständig und sauber unterstützt, kannst du eigentlich in die Tonne kloppen.
 
was meinst du mit "leisten"=?
kann dir grad nicht folgen :(

bastel selbst grad an nem onPager hab n android smartphone hier und ein iphone4 mit altem ios und n iphone mit aktuellem ios auf allem funktionierts ausreichend zufriedenstellend.
hab grad den wechsel auf landscape und zurück getestet: kann keine einschränkungen feststellen, bis auf die ios spezifischen navi balken die tatsächlich ohne ein wechsel auf portrait mode nicht mehr weggehen...

aber dazu kann ich nur sagen, selbst schuld wenn man son gerümpel kauft. mit diesem "fehler" der apple-schmiede im portrait-mode müssen die dann einfach leben.
das ding ist noch ned mal zum bieraufmachen gut.... aber lassen wir das, sonst gehen meine nerven drauf.... :freak:
 
Hab eine Lösung gefunden wie es einwandfrei am Mac und Handy funktioniert :)

aber natürlich gehts im IE nicht -.-
Wenn man auf einer "Unterseite" ist und beim IE runterscrollt springt man zurück auf die erste Seite, oder es passieren merkwürdige Sachen :freak:
 
Zuletzt bearbeitet:
Zurück
Oben