Problème scroll ascensor.js

flo.r68
Javascript

Bonjour j'ai découvert le script "ascensor.js" qui offre une navigation sympa.
Je souhaitais le tester cependant j'ai un petit problème. Les pages s’incrémentent correctement, on peut voir que le titre des sections changent dans la barre de navigation, cependant le scrolling pointant sur la section adéquate ne fonctionne pas, je reste bloqué sur la première section...

Quelqu'un a-t-il déjà eu ce problème ou sait comment y remédier ?

Ascensor.js

Merci d'avance :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test ascensor.js</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.ascensor.js"></script>

<script>
$(document).ready(function(){       
    $('#ascensorBuilding').ascensor({
            AscensorName:'ascensor',
            ChildType:'section',
            AscensorFloorName:'Etage1 | Etage2 | Etage3',
            Time:1000,
            Easing:'easeInOutCubic',
            WindowsOn:1,
            Direction:'chocolate',
            AscensorMap:'1|1 & 1|2 & 2|2',
            KeyNavigation: true,
            Queued:false,
            QueuedDirection:"x"
    });
});
</script>
</head>
<body style="overflow: hidden">
<div style="position: absolute; top: 10px; right: 10px; width: 200px; background-color: yellow; z-index: 20;    ">
    <ul>
        <li><a class="ascensorLink ascensorLink1 ascensorLinkActive">Etage1</a></li>
        <li><a class="ascensorLink ascensorLink2">Etage2</a></li>
        <li><a class="ascensorLink ascensorLink3">Etage3</a></li>
    </ul>
</div>
<div id="ascensorBuilding">
    <section id="ascensorFloor1" class="ascensorFloor" style="background-color: blue;" >
    Etage 1
    </section>
    <section id="ascensorFloor2" class="ascensorFloor"style="background-color: red;" class="ascensorFloor" >
    Etage 2
    </section>
    <section id="ascensorFloor3" class="ascensorFloor" style="background-color: green;" class="ascensorFloor" >
    Etage 3
    </section>
</div>
</body>
</html>

1 réponse

coloo

Parfois les librairies jquery sont en conflit, c'est peut être ça ton problème... Après sans voir la page de ton problème c'est assez compliqué de t'aider plus ;)

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

Bonne continuation.