18041 sujets

Questions générales et questions de débutants

Script repris tel quel qui ne fonctionne pas ?

Bonjour,

Pour un site en monopage j'aimerais que sur mon menu, toujours visible, le lien correspondant à la section actuellement consultée soit mis en évidence. Il existe pas mal de scripts JQuery disponibles mais impossible d'en faire fonctionner chez moi !

Par exemple, ici une démo disponible sur JSFiddle correspond à ce que je cherche :
http://jsfiddle.net/cse_tushar/Dxtyu/141/

Par contre si je reprends tout ce code dans une page en guise de test, le changement ne se fait pas. Ma page de test est comme ça :

<!DOCTYPE html>
<html>
<head>
<title>Test script</title>
<script>
$(document).ready(function () {
    $(document).on("scroll", onScroll);
    
    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}
</script>
<style type="text/css">
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
    width: 100%;
    height: 75px;
    background-color: rgba(0, 0, 0, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.light-menu {
    width: 100%;
    height: 75px;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#menu-center {
    width: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-center ul {
    margin: 15px 0 0 0;
}
#menu-center ul li {
    list-style: none;
    margin: 0 30px 0 0;
    display: inline;
}
.active {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: black;
    text-decoration: none;
    line-height: 50px;
}
#home {
    background-color: grey;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url(images/home-bg2.png);
}
#portfolio {
    background-image: url(images/portfolio-bg.png);
    height: 100%;
    width: 100%;
}
#about {
    background-color: blue;
    height: 100%;
    width: 100%;
}
#contact {
    background-color: red;
    height: 100%;
    width: 100%;
}
</style>
</head>

<body>

<div class="m1 menu">
    <div id="menu-center">
        <ul>
            <li><a class="active" href="#home">Home</a>

            </li>
            <li><a href="#portfolio">Portfolio</a>

            </li>
            <li><a href="#about">About</a>

            </li>
            <li><a href="#contact">Contact</a>

            </li>
        </ul>
    </div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>
</body>
</html>


Placé avant la fermeture du body, le script ne fonctionne toujours pas. Je ne comprends pas, je n'ai fait que tout rassembler dans une page, où me suis-je trompée ?

D'autres scripts sont disponibles en démo à voir en ligne ou télécharger. En ligne, aucun souci, une fois téléchargée (et toujours sans y toucher), plus rien !

C'est valable pour celui-ci par exemple : http://callmenick.com/2013/04/22/single-page-site-with-smooth-scrolling-highlighted-link-and-fixed-navigation/

Si quelqu'un peut me débloquer, je lui en serai éternellement reconnaissante Smiley biggrin
Merci d'avance !

PS: j'ai également une question, est-ce qu'utiliser ceci avec un framework comme Boostrap ou Foundation peut poser problème ?
Modifié par lumya (13 Nov 2014 - 17:34)
Modérateur
Bonsoir,

Dans le code donné tu oublie d'inclure JQuery... du coup du JQuery sans JQuery ça marche moins bien. C'est un oubli dans le copié collé ?
script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>


---
Pour les Admin : J'ai un bug, je n'arrive pas à poster le code avec la balise script en entier... quand je met le < au début je me fait poutrer avec "La connexion a été réinitialisée"... pourtant rien de méchant... mais c'est peut etre voulu...
Modifié par _laurent (13 Nov 2014 - 18:07)
Hello,

Petit complément qui peut expliquer l'oubli de lumya : dans JsFiddle, il faut pense à aller dans l'onglet Options sur le côté, puis dans "external ressources" pour voir les scripts externes intégrés au fiddle Smiley cligne
Oh...merci beaucoup, je me disais bien que c'était un truc très "bête" mais je n'arrivais pas à y voir clair et effectivement je ne connaissais pas l'astuce pour jsfiddle. J'ai utilisé du Jquery rarement et il y a longtemps, j'ai vraiment zappé ça. Merci vraiment Smiley confused
Sujet clos
Aller à