2010-05-13 11 views
0

Je cherche un plugin de diviseur jQuery div qui glisse horizontalement de la page, affichant plus de divs, plus la fenêtre du navigateur est ouverte. J'aime le curseur jQuery Coda ... J'ai juste besoin d'être en pleine page, ne pas cacher le débordement, et ne pas afficher la barre de défilement horizontal du navigateur.Le curseur de la page jQuery div hors de l'écran, sans barre de défilement horizontale du navigateur

Des suggestions?

MISE À JOUR: Voici un exemple de ce que j'essaie d'obtenir. Fondamentalement, c'est deux étapes. Le css et le js. La première étape, le css, je cherche à obtenir un défilement horizontal de la page div sans une hauteur fixe. La deuxième étape, le js, je cherche à faire glisser les divs comme le jQuery Coda Slider.

alt text http://i43.tinypic.com/a1ocxj.jpg

+0

Faire glisser la page, ne pas masquer le débordement, * et * ne pas afficher la barre de défilement horizontale? Je ne peux pas imaginer comment cela fonctionnerait. Pourquoi ne pas cacher le débordement? – user113716

+0

Imaginez une mise en page de gauche de 700 pixels de large et le navigateur de l'utilisateur de 1000 pixels de large. Le div suivant dans le curseur apparaîtra partiellement dans le navigateur, mais il sera opaque et sélectionnable permettant au diaporama de progresser de cette façon. Si l'utilisateur réajuste la fenêtre de son navigateur ... plus ou moins de la prochaine diapositive montrera. (La diapositive précédente ne s'affiche pas.) C'est assez spécifique, je sais, mais je me demande s'il y a quelque chose de similaire sur lequel je peux commencer. (Je vais accepter la meilleure réponse, je promets.) – Jeffrey

Répondre

1

Je ne sais toujours pas si je comprends tout à fait. Du code serait bien.

De toute façon, il semble que vous voulez que le bord de l'écran du navigateur coupe la partie de la diapositive suivante qui est hors de la page. Si cela vous convient, définissez overflow-x sur hidden sur votre balise body, ou quel que soit le tag de conteneur que vous utilisez, de la même largeur que la fenêtre.

(sauf pour une raison quelconque, vous ne voulez pas caché.)

  // If your content is in a container that is sized to the width 
body {  // of the body, then use that instead. 
    clip: auto; 
    overflow-x: hidden; 
} 

MISE À JOUR: (avec des informations de re-post)

de style

:

body { 
      clip: auto; 
      overflow-x: hidden; 
     } 

    /* Positioning * 
     #container { width: 2500px; } 
     .block { float: left; } 

     /* Styling */ 
     .block img { padding: 5px; }​ 

html:

<body> 
<div id="container"> 
    <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div> 
    <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div> 
    <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div> 
</div> 
</body> 
+0

Cela n'a pas fonctionné, s'il vous plaît voir mon post mis à jour ci-dessus avec graphique. – Jeffrey

+0

Connaissez-vous la largeur des éléments 'div'? Et sont-ils flottants à gauche? Vous devez vous assurer que la largeur du conteneur gris est supérieure à la largeur combinée de vos éléments 'div'. – user113716

+0

J'ai renvoyé la question avec un exemple html et une explication plus claire du problème, s'il vous plaît vérifier si vous avez le temps. Merci. http://stackoverflow.com/questions/2851126/css-horizontal-scrolling-overflow-with-jquery-slider – Jeffrey