IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

ScrollBar automatique site onepage


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Développeur du Dimanche
    Inscrit en
    Juillet 2014
    Messages
    147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur du Dimanche
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Juillet 2014
    Messages : 147
    Par défaut ScrollBar automatique site onepage
    Bonjour à tous,

    Je suis en train d'intégrer sur un site fait en une seule page, un srollBar automatique utilisé à l'aide de la molette de la souris.
    Lorsque l'on descend le scroll s'ajuste automatiquement selon l'ancre (first section -> second section) comme sur cette exemple.

    code source exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
     
    	<script type="text/javascript" src="../jquery.fullPage.js"></script>
    	<script type="text/javascript" src="examples.js"></script>
    	<script type="text/javascript">
    		$(document).ready(function() {
    			$('#fullpage').fullpage({
    				sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
    				anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
    				menu: '#menu',
    				scrollingSpeed: 1000
    			});
     
    		});
    	</script>
     
    </head>
    <body>
     
     
    <ul id="menu">
    	<li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
    	<li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
    	<li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
    	<li data-menuanchor="4thpage"><a href="#4thpage">Fourth slide</a></li>
    </ul>
     
     
    <div id="fullpage">
    	<div class="section " id="section0">
    		<h1>fullPage.js</h1>
    		<p>Create Beautiful Fullscreen Scrolling Websites</p>
    		<img src="imgs/fullPage.png" alt="fullPage" />
    	</div>
    	<div class="section" id="section1">
    	    <div class="slide">
    			<div class="intro">
    				<h1>Create Sliders</h1>
    				<p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
    				<img src="imgs/slider.png" alt="slider" />
    			</div>
     
    		</div>
    	    <div class="slide">
    			<div class="intro">
    				<img src="imgs/1.png" alt="simple" />
    				<h1>Simple</h1>
    				<p>Easy to use. Configurable and customizable.</p>
    			</div>
    		</div>
    	    <div class="slide">
    			<div class="intro">
    				<img src="imgs/2.png" alt="Cool" />
    				<h1>Cool</h1>
    				<p>It just looks cool. Impress everybody with a simple and modern web design!</p>
    			</div>
    		</div>
    	    <div class="slide">
    			<div class="intro">
    				<img src="imgs/3.png" alt="Compatible" />
    				<h1>Compatible</h1>
    				<p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
    			</div>
    		</div>
    	</div>
    	<div class="section" id="section2">
    		<div class="intro">
    			<h1>Example</h1>
    			<p>HTML markup example to define 4 sections.</p>
    			<img src="imgs/example2.png" alt="example" />
    		</div>
    	</div>
    	<div class="section" id="section3">
    		<div class="intro">
    			<h1>Working On Tablets</h1>
    			<p>
    				Designed to fit to different screen sizes as well as tablet and mobile devices.
    				<br /><br /><br /><br /><br /><br />
    			</p>
    		</div>
    		<img src="imgs/tablets.png" alt="tablets" />
    	</div>
    </div>
     
    </body>

    menu de ma page :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    	<!-- Left Nav -->
    				<ul class="span4" id="nav-left">
    					<li data-slide="2"><a href="#about">Accueil</a></li>
    					<li data-slide="3"><a href="#directions">Contact</a></li>
    					<li data-slide="4"><a href="#menu">Liens</a></li>
    				</ul>
     
    				<!-- Logo -->
    				<div class="span4" id="logo">
    					<div data-slide="1">
    						<a href="#front">Site<!--<em>&rsquo;</em>--> <span>OnePage</span></a>
    					</div>
    				</div>
     
    				<!-- Right Nav -->
    				<ul class="span4 right" id="nav-right">
    					<li data-slide="5"><a href="#wine">Services</a></li>
    					<li data-slide="6"><a href="#gallery">Photos</a></li>
    					<li data-slide="7"><a href="#contact">Livre d'Or</a></li>
    				</ul>
    J'ai essayé ceci dans le head sans succès :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <script type="text/javascript" src="../jquery.fullPage.js"></script>
     
    <script type="text/javascript">
    		$(document).ready(function() {
    			$('#fullpage').fullpage({
    				anchors: ['about', 'directions', 'menu'],
    				menu: '#nav-left',
    				 scrollingSpeed: 1000
                                  <!--scrollBar: true-->
    			});
     
    		});
    	</script>
    Merci d'avance pour votre attention.

  2. #2
    Membre averti
    Homme Profil pro
    Inscrit en
    Mai 2013
    Messages
    32
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mai 2013
    Messages : 32
    Par défaut
    Salut,
    pourrais-tu mettre en ligne ta version et nous envoyer le lien ? (ou dans un codePen)
    Ce serait plus simple de se rentre compte de ta page et donc de ton souci.

  3. #3
    Membre confirmé
    Homme Profil pro
    Développeur du Dimanche
    Inscrit en
    Juillet 2014
    Messages
    147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur du Dimanche
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Juillet 2014
    Messages : 147
    Par défaut
    Salut,

    Merci de te pencher sur le souci.

    J'ai mis en ligne le site one-page avec les modifications (voir ci-dessous) pour un effet automatique du scroll comme fullPage.js
    malheureusement il ne se passe pas l'effet que je souhaite.

    index.html (rajout)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
     
    <head>
     
    <!--SCROLL-->
       <link rel="stylesheet" type="text/css" href="assets/stylesheets/jquery.fullPage.css" />
     
    <script type="text/javascript">
    		$(document).ready(function() {
    			$('#fullpage').fullpage({
    				anchors: ['about', 'directions', 'menu'],
    				menu: '#nav-left',
    				scrollingSpeed: 1000
    			});
     
    		});
    	</script>
    </head>
     
     
    <body>
    <div id="fullpage"><!--Tous le code--></div>
     
    <!--SCROLL auto (avant la fermeture du body)>-->
                <script type="text/javascript" src="assets/javascripts/jquery.fullPage.js"></script>
     
    </body>
    Merci.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    Bonjour,
    tu as besoin de charger la librairie jQuery avant de t'en servir, ton code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    $(document).ready(function() {
        $('#fullpage').fullpage({
            anchors: ['about', 'directions', 'menu'],
            menu: '#nav-left',
            scrollingSpeed: 1000
        });
     
    });
    vient avant
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <script src="assets/javascripts/jquery-1.9.1.min.js"></script>
    Comment installer la bibliothèque jQuery ?, lire le reste n'est pas inutile.

  5. #5
    Membre confirmé
    Homme Profil pro
    Développeur du Dimanche
    Inscrit en
    Juillet 2014
    Messages
    147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur du Dimanche
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Juillet 2014
    Messages : 147
    Par défaut
    Bonjour,

    Merci NoSmoking pour ton coup de main; j'ai effectué la modification l'effet n'est pas en place.
    Bonne soirée.

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    Dans la console, F12 c'est le F1 du developpeur, on peut voir
    TypeError: $(...).fullpage is not a function
    et dans ton code on ne voit pas où tu charges la librairie, en fait le code est en commentaire
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <!--<script type="text/javascript" src="assets/javascripts/jquery.fullPage.js"></script>-->

Discussions similaires

  1. Problème scrollbar automatique
    Par Fates dans le forum MFC
    Réponses: 1
    Dernier message: 11/08/2008, 10h50
  2. application Access: pas de scrollbar automatique?
    Par cortex024 dans le forum IHM
    Réponses: 4
    Dernier message: 01/06/2007, 15h51
  3. Actualisation automatique site web
    Par Sparco dans le forum Général Conception Web
    Réponses: 1
    Dernier message: 28/01/2007, 20h08
  4. [VB.NET] ScrollBar automatique pour Listbox
    Par Aspic dans le forum VB.NET
    Réponses: 6
    Dernier message: 19/12/2005, 13h58

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo