Glissant Une Page Web Entière

Est-il un moyen d'imiter le natif de transition et de la fonctionnalité de "glissement des pages entières" comme vous le voyez sur l'iPhone, mais à l'intérieur d'un navigateur web à la place?

Je veux une page HTML afin de le glisser sur et une nouvelle page HTML pour prendre sa place après la presse d'un bouton.

Le bouton ne peut pas être constante. Donc, comme si vous étiez à avoir un en-tête avec des boutons que l'edtr contenu à l'intérieur d'une boîte, puis ce serait incorrect. J'ai besoin de faire glisser l'ensemble de la page web.

Serait diapositives fait en HTML5 être ce dont j'ai besoin? Je vous remercie d'avance pour toute aide!

Edit: j'ai aussi pensé à éventuellement mise en place de deux le plein de la taille des DIV à l', à côté de l'autre caché hors de la page avec "overflow:hidden", puis en utilisant les transitions CSS pour appuyer sur un bouton et de passer ensuite un DIV hors de l'écran et l'autre en vue, mais je n'ai aucune idée de comment faire cela.

Les autres vraiment dur de partie, c'est que mon DIV conteneurs doivent être dynamiques et 100% de la largeur et de la hauteur. Je ne peux pas utilisé de taille fixe.

EDIT:

À l'aide de la scrollTo et localscroll fonctions développées par Ariel Flesler j'ai été en mesure de terminer 99% de ce que je suis à la recherche d'. Cependant, à la fin du développement, j'ai frappé un énorme bloc de route. Voici une image que j'ai de l'espoir aide à expliquer ce que je suis en train de faire:

Glissant Une Page Web Entière

Mon problème est que la zone de contenu principal est une position fixe avec un overflow-y auto de sorte que je peux garder la barre de défilement pour la DIV entre l'en-tête et le pied de page. Mais le problème est que lorsque je lance le glissement de l'animation de mes DIV en appuyant sur mon bouton, le fixe de la zone de contenu ne bouge pas et seul l'en-tête et pieds de se déplacer. Si je change le positionnement de la zone de contenu principal de "relative" tout va comme je le veux, mais je perds le positionnement de la faire défiler.

Si quelqu'un pouvait comprendre cela je serai grandement reconnaissant à vous!

(Je voudrais poster un lien vers ce que j'ai, mais je ne peux pas. Il confidentielles de travailler pour une entreprise)

Vous en remercie d'avance!!!!

MODIFIER
Je suis en train de revoir toutes ces informations. Je vais répondre dans quelques jours. Merci à vous tous pour vous commentaires!

Pourriez-vous ajouter la règle overflow-y:scroll de la zone de contenu principal de garder la barre de défilement de façon permanente?
Nan, désolé, je n'en veux pas. Il doit être plus dynamique. Les barres de défilement lorsque vous en avez besoin et pas de barres de défilement lorsque vous n'en avez pas besoin.
Je pense que vous vous attendez à un prêt à l'iPhonish plugin ou quelque chose, je suis sûr que si vous arrêter et de réfléchir une minute, vous pouvez travailler sur, vous avez donné beaucoup de bons outils pour travailler avec.
Ne pas vous punir vous-même, essayez de Silverlight
Ne pouvez pas utiliser un 3ème partie plugins. Flash et Silverlight ne sont pas des options. L'utilisateur doit être en mesure d'utiliser ce site avec rien de plus qu'un navigateur web et javascript activé

OriginalL'auteur Alex | 2010-12-09

  1. 6

    Je suis actuellement en train de développer quelque chose qui peut être utile pour vous. Il utilise le côté par côté divs vous envisagé, mais j'ai trouvé des difficultés dans l'utilisation de 100% de la largeur en raison de problèmes avec les barres de défilement et des différences dans les navigateurs. J'ai surmonté ce problème en définissant la largeur en javascript (jQuery) qui offre une solution de navigateur (testé IE7, IE8, FF, Chrome, Safari, Opera).

    N'hésitez pas à prendre autant de code source que vous le souhaitez par l'inspection de la source et si vous avez besoin de moi pour parler de vous par le biais de quelque chose, faites le moi savoir.

    http://madesignuk.com/uploader/

    PS je ne suis pas sûr à 100% sur les règles relatives à poster le lien de mon site, donc si c'est une question pour les modérateurs, s'il vous plaît laissez-moi savoir.

    PPS Le site est en développement, donc s'il vous plaît essayer de ne pas se moquer de moi :p

    Merci pour l'aide, mais ce n'est pas tout à fait ce dont j'ai besoin. J'ai deux écrans et je suis en mesure d'étirer ce site assez loin. Et si je fais glisser la fenêtre du navigateur, je peux voir toutes les DIV à l'alignés dans une ligne à travers l'écran. J'ai besoin de chacun "slide" pour remplir l'écran à 100% de largeur et je ne veux pas voir autre chose jusqu'à ce que vous cliquez sur le bouton suivant. Je devine que votre code est de trouver mon navigateur largeur onLoad mais ce n'est pas mettre à jour dynamiquement lorsque vous redimensionnez le navigateur.
    Tout ce que vous avez à faire est de demander 🙂 Vérifier de nouveau. J'ai modifié le code de sorte que lorsque le navigateur est redimensionnée, le curseur se redimensionne avec elle. Cela a créé un problème avec la position des éléments à l'intérieur de la réglette, donc j'ai dû réinitialiser à la position de départ pour l'instant. Si quelqu'un peut penser à un moyen de conserver la position actuelle alors s'il vous plaît n'hésitez pas à soumettre la solution ici. J'ai le sentiment que je pouvais venir avec un math solution basée sur le temps.
    J'aime les modifications apportées à cette page. Il est beaucoup plus proche de ce que je suis à la recherche d'. Cependant, pensez-vous que vous pourriez modifier cette page de sorte que la barre de défilement sur la droite apparaît entre l'en-tête et pied de page (également mettre un pied de page statique sur le fond). Et enfin, comme un test, faire de la zone de contenu principal plein de beaucoup de données, de sorte qu'il défile verticalement dans la zone de contenu (mais ne pas faire défiler la page). Si votre méthode peut le faire, vous obtenez 50 points de rep. Je voudrais le faire moi-même mais je n'ai pas le temps de tester une autre méthode.
    Comment est-il maintenant? Léger problème dans IE7 qui je suis en train de résoudre.
    Homme gentil! C'est juste ce dont j'avais besoin! Malheureusement, je n'ai pas eu de retour à ce site dans le temps pour vous donner la prime (je ne savais pas que j'avais seulement une certaine quantité de temps, pour le prix) mais c'est la meilleure solution et je vais vous en donner la case verte de toute façon 🙂

    OriginalL'auteur Matt Asbury

  2. 3

    Vous pouvez le faire en plaçant des éléments côte à côte à l'intérieur d'un conteneur avec overflow:hidden, et il suffit de déplacer les éléments intérieurs.

    Ici est une preuve de concept. Il ne gère pas le redimensionnement de la page après qu'il a chargé, mais il montre au moins le principe. J'ai mis trois diapositives dans le conteneur, mais le code est dynamique, de sorte que vous pouvez placer n'importe quel nombre vous le souhaitez.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Slide</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var w = $(window).width();
var h = $(window).height();
var slides = $('.Slides > div');
$('.SlideContainer').css({ height: (h-60) + 'px' });
$('.Slides').css({ width: slides.length + '00%' });
slides.css({ width: w + 'px' });
var pos = 0;
$('.Left').click(function(){
pos--;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
$('.Right').click(function(){
pos++;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
});
</script>
<style type="text/css">
body { margin: 0; padding: 0; }
.Header { position: absolute; left: 0; top: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.Footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.SlideContainer { position: absolute; left: 0; top: 30px; width: 100%; overflow: hidden; }
.Slides { position: absolute; left: 0; top: 0; height: 100%; }
.Slides > div { float: left; height: 100%; overflow: scroll; }
.Slides .Content { margin-top: 100px; text-align: center; }
.Slides .Content a { font-size: 30px; }
</style>
</head>
<body>
<div class="Header">
absolutely positioned header
</div>
<div class="SlideContainer">
<div class="Slides">
<div class="Slide">
<div class="Content">
<h1>Slide 1</h1>
<a href="#" class="Left">&laquo;</a>
</div>
</div>
<div class="Slide">
<div class="Content">
<h1>Slide 2</h1>
<a href="#" class="Left">&laquo;</a>
<a href="#" class="Right">&raquo;</a>
</div>
</div>
<div class="Slide">
<div class="Content">
<h1>Slide 3</h1>
<a href="#" class="Right">&raquo;</a>
</div>
</div>
</div>
</div>
<div class="Footer">
absolutely positioned footer
</div>
</body>
</html>

    Modifier

    Maintenant jsfiddle de nouveau, de sorte que vous pouvez l'essayer ici: jsfiddle.net/9VttC

    OriginalL'auteur Guffa

  3. 1

    Avez-vous regardé LocalScroll? Il fera tous les hash des liens de défilement à l'intérieur du conteneur que vous définissez. Vous devez définir la largeur des lames si, comme vous aurez besoin de les faire flotter.

    Je l'ai juste regardé, mais je ne vois pas en quoi cela va aider si je veux la largeur de mon conteneur dynamique et 100% de la largeur et de la hauteur....
    De rétracter ce que j'ai dit. Cela a été la meilleure suggestion jusqu'à présent. Mais le problème qui reste à résoudre, des idées??

    OriginalL'auteur Tyom

  4. 1

    Utiliser le scrollTop attribut CSS : vous voulez faire défiler vers le bas 100px dans votre zone de contenu principal ?
    Juste faire :

    var newScrollTop = document.getElementById("main_content_area").scrollTop + 100;
$("#main_content_area").animate({scrollTop: newScrollTop}, 500);

    La deuxième ligne est composée avec jQuery, mais rappelez-vous le principe : les nouveaux scrollTop de la valeur à votre main_content_area div CSS.

    Comment est scrolltop va m'aider à animer horizontalement coulissantes DIV?
    Vous voulez faire glisser de droite à gauche ? J'ai compris que tu voulais le faire glisser de haut en bas.

    OriginalL'auteur Pioul

  5. 0

    Essayer JQuery Cycle plugin.

    http://jquery.malsup.com/cycle/

    Ils ont fourni beaucoup d'exemples de code et des tutoriels, de sorte qu'il est facile pour vous de construire votre propre chemin.

    J'ai pris un coup d'oeil à cet outil et sa ne va pas au travail. Une fois que le contenu est chargé dans l'animation, c'est statique de la taille. Si vous redimensionnez la fenêtre, dos à redimensionner le contenu jusqu'à ce que vous actualisez le navigateur. Merci, mais je ne pense pas que cela va m'aider.

    OriginalL'auteur Shaakunthala

  6. 0

    Si je comprends bien, la scrollTo méthode fonctionne, mais seulement si vous changez la position:position:relative, ce qui a pour conséquence de rendre la barre de défilement s'étirer au-delà de la div défilement?

    Ne serait-il pas plus facile de mettre un div wrapper autour de votre zone de contenu principale avec une marge supérieure pour tenir compte de l'en-tête et une marge inférieure de compte pour le pied, et ont overflow:scroll, et d'utiliser la fonction scrollTo?

    OriginalL'auteur appi2012

  7. 0

    L'Équipe Google Chrome fait 20 Choses que j'ai Apprises au Sujet des Navigateurs et sur le Web qui a cet effet.

    f-i.com fait 🙂

    OriginalL'auteur joksnet

  8. 0

    Comme un exemple théorique, mais je voudrais créer des pages HTML statiques et utiliser jQuery pour charger le contenu de leur part (pour la compatibilité). Le principal problème serait la vitesse de défilement.

    J'utilise jQuery pour calculer la largeur du navigateur, jeu de à la largeur de la <body>, puis définissez overflow: hidden. Ensuite, il suffit de créer un positionnement absolu contenu de la boîte, et faites glisser les deux à la fois.

    Je vais poster un peu de code plus tard, mais c'est ce que je voudrais commencer (je, être un pathétiquement incompétents JS fiddler).

    OriginalL'auteur Blender

  9. -1

    Vous pouvez utiliser quelque chose comme Coda Slider, et avoir le contenu de la diapositive être de l'ensemble de la page.

    Je suis familier avec cet outil et je le voyais, mais il utilise constante des boutons qui existent en dehors de la zone de contenu. Il doit être comme sur un iPhone, où la navigation est dynamique et change basé sur quelle page vous vous trouvez. Par exemple, je ne veux pas un bouton de la maison à apparaître jusqu'à ce que vous avez accédé à la page suivante. Puis sur la page suivante, vous avez un bouton Home et le bouton "Suivant".

    OriginalL'auteur JC Leyba

  10. -1

    jQuery pageSlide est une autre alternative.

    Aussi familier avec cet outil, mais vous ne savez pas comment je pourrais l'utiliser pour la navigation? Je ne sais comment faire pour rendre le remplissage de la page et puis permettez-moi de revenir là d'où je viens...

    OriginalL'auteur István Ujj-Mészáros