Reputation: 1

Get the value of a variable to fire an event

I'm trying to do a very simple thing, I just want the .text div to appear when the number value gets to 1000.

Here's the full code I'm using

                $(window).scroll(function(){ 
                var number = Math.round($(document).scrollTop() / ($(document).height() - $(window).height()) * 1000);
                $(".head").text(number + ' lieues');
                    if  (number == 1000){
                    $('.text').addClass('show')};
                });

body{
  width: 100%;
  height: 2000px;
  margin: 0;
}

#container {
}
.head{
  position: fixed;
  padding: 10px;
  height: 10%;
  font-family: 'insitu_light'; 
  font-size: 30px;
}
.show{display: block !imporant;}
.text{
  display: none;
  position: fixed;
  height: auto;
  bottom: 0;
  width: 100%;
  padding: 10px;
  font-family: 'insitu_light'; 
  font-size: 30px;
}
.footer{
  height: 10%;
  padding: 10px;
  font-family: 'insitu_light'; 
  font-size: 30px;  
}

a{
  text-decoration: none;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<html>
	<head>
	<meta charset="UTF-8">
	<meta name="description" content="Mille Lieues">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="reset.css">

	<title>Mille Lieues</title>
	</head>
		<body>
        <div id="container">
            <div class="head">0 lieues</div>   
            <div class="text">
            Quoi de plus fédérateur qu’une piscine pour incarner le brassage, la rencontre, les jeux et la fête? Pensé comme un outil au service du vivre-ensemble, de la cohésion et de l’innovation sociale, le projet d’un lieu de vie hybride, ouvert au plus grand nombre, est aussi la promesse d’une stimulation nouvelle dans un territoire aux mille visages. Ville ouverte, ville-monde, ville de rencontres et de surprises, le territoire dionysien est, tel un kaléidoscope, riche de ses identités plurielles. Rouvrir ce site iconique au public, c’est d’abord proposer aux Dionysiens et à leurs visiteurs de se le réapproprier et de participer à l’expérience de l’investir pour en faire émerger de nouveaux usages. Le projet Grand Bassin consiste à fédérer des acteurs venus d’horizons divers pour que les barrières économiques et symboliques tombent, et que réapparaisse un vivre-ensemble. Abolir ces frontières, c’est donner un cadre à la diversité et à la transdisciplinarité: ateliers, expositions, concerts, spectacles et performances rythmeront la vie de ce nouvel espace. La résidence du Grand Bassin, entre hôtel, gîte et auberge de jeunesse, offrira même la possibilité d’y dormir. Accueillir et relayer les initiatives entrepreneuriales, culturelles, artistiques, sportives et citoyennes en ce lieu singulier, c’est le défi que se sont lancé Cultplace et La Bellevilloise, avec le savoir-faire des architectes de Jung Architectures et d’Encore Heureux.»
            </div>
        </div>    
    </body>
</html>

For some reason this doesn't work, Do you have any clue ? Thanks !

Upvotes: 0

Answers (2)

Jan Hintelmann

Reputation: 11

You should go for >= than == in your Code. Also check if the number reaches 1000.

$(window).scroll(function(){ 
  var number = Math.round($(document).scrollTop() / ($(document).height() - $(window).height()) * 1000);
  console.log()
  $(".head").text(number + ' lieues');
  if  (number >= 1000){
    $('.text').addClass('show')
  }
});

Upvotes: 0

Arun jai

Reputation: 170

You can use jquery hide and show function i have edited your code.

                $(window).scroll(function(){ 
                var number = Math.round($(document).scrollTop() / ($(document).height() - $(window).height()) * 1000);
                $(".head").text(number + ' lieues');
       
                    if  (number == "1000"){
                    $('.text').show()
                    }else{
                    $('.text').hide()
                    };
                });

body{
  width: 100%;
  height: 2000px;
  margin: 0;
}

#container {
}
.head{
  position: fixed;
  padding: 10px;
  height: 10%;
  font-family: 'insitu_light'; 
  font-size: 30px;
}
.show{display: block !imporant;}
.text{
  display: none;
  position: fixed;
  height: auto;
  bottom: 0;
  width: 100%;
  padding: 10px;
  font-family: 'insitu_light'; 
  font-size: 30px;
}
.footer{
  height: 10%;
  padding: 10px;
  font-family: 'insitu_light'; 
  font-size: 30px;  
}

a{
  text-decoration: none;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<html>
	<head>
	<meta charset="UTF-8">
	<meta name="description" content="Mille Lieues">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="reset.css">

	<title>Mille Lieues</title>
	</head>
		<body>
        <div id="container">
            <div class="head">0 lieues</div>   
            <div class="text">
            Quoi de plus fédérateur qu’une piscine pour incarner le brassage, la rencontre, les jeux et la fête? Pensé comme un outil au service du vivre-ensemble, de la cohésion et de l’innovation sociale, le projet d’un lieu de vie hybride, ouvert au plus grand nombre, est aussi la promesse d’une stimulation nouvelle dans un territoire aux mille visages. Ville ouverte, ville-monde, ville de rencontres et de surprises, le territoire dionysien est, tel un kaléidoscope, riche de ses identités plurielles. Rouvrir ce site iconique au public, c’est d’abord proposer aux Dionysiens et à leurs visiteurs de se le réapproprier et de participer à l’expérience de l’investir pour en faire émerger de nouveaux usages. Le projet Grand Bassin consiste à fédérer des acteurs venus d’horizons divers pour que les barrières économiques et symboliques tombent, et que réapparaisse un vivre-ensemble. Abolir ces frontières, c’est donner un cadre à la diversité et à la transdisciplinarité: ateliers, expositions, concerts, spectacles et performances rythmeront la vie de ce nouvel espace. La résidence du Grand Bassin, entre hôtel, gîte et auberge de jeunesse, offrira même la possibilité d’y dormir. Accueillir et relayer les initiatives entrepreneuriales, culturelles, artistiques, sportives et citoyennes en ce lieu singulier, c’est le défi que se sont lancé Cultplace et La Bellevilloise, avec le savoir-faire des architectes de Jung Architectures et d’Encore Heureux.»
            </div>
        </div>    
    </body>
</html>

Upvotes: 1

Get the value of a variable to fire an event

Answers (2)

Related Questions