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

  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 212
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 212
    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 212
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 212
    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>-->

  7. #7
    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,

    J'ai modifié l'erreur monumentale mais rien ne se passe d'avantage.
    Merci.

  8. #8
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 212
    Par défaut
    J'ai été regarder rapidement la documentation de fullpage.js et j'ai l’impression que tu n'as pas respecté toutes les consignes de constructions du code HTML, notamment
    Citation Envoyé par fullPage.js
    Be careful! data-anchor tags can not have the same value as any ID element on the site (or NAME element for IE).
    Peut être aurais tu meilleur compte à repartir sur une trame fonctionnant et intégrer ton code à l'intérieur.

  9. #9
    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,

    Ok je vais essayer cela.
    Thanks.

  10. #10
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 212
    Par défaut
    Tiens nous au courant.

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