Sujet Précédent Sujet Suivant

Javascript - Apparition div " coullisant "

Fermé
Profil bloqué - 11 janv. 2012 à 18:48
 Profil bloqué - 18 janv. 2012 à 07:24
Bonjour,

Je cherche depuis un moment comment faire une fonction javascript qui fait " coulisser " un div comme sur ce site (le texte qui arrive de bas en haut).
http://sandbox.scriptiny.com/404.html

Merci d'avance pour vos réponses.
A voir également:

8 réponses

Réponse 1 / 8
pitxu Messages postés 689 Date d'inscription vendredi 7 septembre 2007 Statut Membre Dernière intervention 25 mars 2015 94
11 janv. 2012 à 22:09
Bonjour,

regarde du côté de la librairie mootools -> http://mootools.net/demos/
0
Réponse 2 / 8
Profil bloqué
Modifié par Alex131 le 11/01/2012 à 22:33
Merci pitxu pour ta réponse mais je ne cherche pas une librairie mais une fonction très simple sous la forme d'une boucle qui ajoute 1px de hauteur toute les 1/4 de seconde jusqu'à un certain nombre et ensuite que sa fasse l'inverse jusqu'à faire disparaître le div. Si quelqu'un a une idée ...
0
Réponse 3 / 8
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 12/01/2012 à 12:16
Salut,

Je t'ai développer un p'tit truc: 

<html>  
<head>  
 <title></title>  
 <style type="text/css">  
  body{  
   padding:0;  
   margin:0;  
   background-color:#343434;  
   text-align:center;  
  }  
  #global{  
   margin:0 auto;  
   overflow:hidden;  
   border:#fff solid 5px;  
   width:500px;  
   position:relative;  
  }  
  #description{  
   position:absolute;  
   left:0;  
   background-color:#333;  
   opacity:.8;  
   color:white;  
   padding:5px;  
  }  
 </style>  
</head>  
<body>  
 <div id="global">  
  <img src="http://lorempixel.com/500/500"/>  
  <div id="description" style="bottom:0px">  
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
   tempor incididunt ut labore et dolore magna aliqua. Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
   tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
  </div>  
 </div>  
 <script type="text/javascript">  
  var Slideshow = [];   
  Slideshow.description = {  
   //Ne pas toucher à ces variables  
   _element:null,  
   _parentElement:null,  
   _top:0,  
   _height:0,  
   _timer: null,  
   //Régler la vitesse ici  
   _interval: 20, // interval en ms  
   _speed: 10, //Déplacement en pixel  
   _initialize: function(){  
    this._element = document.getElementById('description');  
    this._parentElement = document.getElementById('global');  
    this._height = this._element.offsetHeight;  
    this.setBottom(this._element.style.bottom = -this.getHeight());  
    this.setEventsListener();  
   },  
   getHeight: function(){  
    return this._height;  
   },  
   getBottom: function(){  
    return parseInt(this._element.style.bottom);  
   },  
   setBottom: function(value){  
    value = (value <= 0) ? value: 0;  
    value = (value > -this.getHeight()) ? value: -this.getHeight();  
    this._element.style.bottom = value;  
    if(-(this.getHeight()) >= this.getBottom() ||this.getBottom() == 0){  
     return false;  
    }else{  
     return true;  
    }  
   },  
   setBottomTo: function(value){  
    var obj = Slideshow.description;  
    if(value == 0){  
     if(!obj.setBottom(obj.getBottom() - obj._speed)){  
      obj.clearTimer();  
     }  
    }else{  
     if(!obj.setBottom(obj.getBottom() + obj._speed)){  
      obj.clearTimer();  
     }  
    }  
   },  
   setEventsListener: function(){  
    var obj = this;  
    this._parentElement.addEventListener("mouseover", function(e){obj.setTimer(e)}, false);    
    this._parentElement.addEventListener("mouseout", function(e){obj.setTimer(e)}, false);   
   },  
   setTimer: function(event){  
    this.clearTimer();  
    var bottom = 0;  
    if(event.type === "mouseover"){  
     bottom = this.getHeight();  
    }  
    var obj = this;  
    obj._timer = window.setInterval(obj.setBottomTo, obj._interval, bottom);  
   },  
   clearTimer: function(){  
    clearInterval(this._timer);  
   }  
  }  
  Slideshow.description._initialize();  
 </script>  
</body>  
</html>


A adapter selon tes besoins
0
Réponse 4 / 8
Profil bloqué
12 janv. 2012 à 13:47
@prosthetiks Merci, je test ce script dès que je peux.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 janv. 2012 à 13:48
De rien, si tu as besoin d'aide pour le modifier demande, je l'ai pas commenté des masses...
0
Réponse 6 / 8
Profil bloqué
12 janv. 2012 à 14:39
Ok, merci :)
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 janv. 2012 à 20:24
Ca répond à ton besoin ?
0
Profil bloqué
12 janv. 2012 à 20:44
Je ne peux pas tester le script en ce moment mais je te préviens dès que je l'aurai testé.
0
Réponse 7 / 8
Profil bloqué
Modifié par Alex131 le 15/01/2012 à 11:15
Bonjour, je n'arrive pas à adapter le code, en fait j'ai document.getElementById('notification') qui au départ est à height:0px; et j'aimerai qu'il passe progressivement à height:30px; puis au bout de 10 secondes qu'il fasse l'inverse qu'il passe de height:30px à height:0px;
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 15/01/2012 à 12:22
Salut,

Donc tu ne souhaite pas que l'utilisateur puisse avoir le controle sur l'animation de ton div ?

Le but est qu'il s'ouvre une fois et qu'il se ferme, comme les pop-up msn de l'époque ?

Edit: modifs effectuées: Ouverture 1 seconde après le chargement de la page, fermeture 5 seconde après la fin de l'animation d'ouverture. 

<html>  
<head>  
 <title></title>  
 <style type="text/css">  
  body{  
   padding:0;  
   margin:0;  
   background-color:#343434;  
   text-align:center;  
  }  
  #global{  
   margin:0 auto;  
   overflow:hidden;  
   border:#fff solid 5px;  
   width:500px;  
   position:relative;  
  }  
  #description{  
   position:absolute;  
   left:0;  
   background-color:#333;  
   opacity:.8;  
   color:white;  
   padding:5px;  
  }  
 </style>  
</head>  
<body>  
 <div id="global">  
  <img src="http://lorempixel.com/500/500"/>  
  <div id="description" style="bottom:0px">  
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
   tempor incididunt ut labore et dolore magna aliqua. Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
   tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
  </div>  
 </div>  
 <script type="text/javascript">  
  var Slideshow = [];   
  Slideshow.description = {  
   //Ne pas toucher à ces variables  
   _element:null,  
   _parentElement:null,  
   _top:0,  
   _height:0,  
   _timer: null,  
   //Régler la vitesse ici  
   _interval: 20, // interval en ms  
   _speed: 5, //Déplacement en pixel  
   _initialize: function(){  
    this._element = document.getElementById('description');  
    this._parentElement = document.getElementById('global');  
    this._height = this._element.offsetHeight;  
    this.setBottom(this._element.style.bottom = -this.getHeight());
    var self = this;
    setTimeout(function(){self.setTimer(200)}, 1000);
   },  
   getHeight: function(){  
    return this._height;  
   },  
   getBottom: function(){  
    return parseInt(this._element.style.bottom);  
   },  
   setBottom: function(value){  
    value = (value <= 0) ? value: 0;  
    value = (value > -this.getHeight()) ? value: -this.getHeight();  
    this._element.style.bottom = value;  
    if(-(this.getHeight()) >= this.getBottom() ||this.getBottom() == 0){  
     return false;  
    }else{  
     return true;  
    }  
   },  
   setBottomTo: function(value){  
    var obj = Slideshow.description;  
    if(value == 0){  
     if(!obj.setBottom(obj.getBottom() - obj._speed)){  
      obj.clearTimer();
     }  
    }else{  
     if(!obj.setBottom(obj.getBottom() + obj._speed)){  
      obj.clearTimer();  
      setTimeout(function(){obj.setTimer(0)}, 5000);
     }  
    }  
   },  
   setTimer: function(bottom){  
    this.clearTimer();  
    var obj = this;  
    obj._timer = window.setInterval(obj.setBottomTo, obj._interval, bottom);  
   },  
   clearTimer: function(){  
    clearInterval(this._timer);  
   }  
  }  
  Slideshow.description._initialize();  
 </script>  
</body>  
</html>
0
Profil bloqué
15 janv. 2012 à 13:35
Voila, je testerai tout a l'heure met en fait c'est pour un système de notification, il s'ouvre lorsque l'on en reçoit une etse referme quelques secondes plus tard
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
15 janv. 2012 à 13:38
donc faut quand même que tu puisses le déclencher. Ca serait bien d'avoir toutes les informations lorsque tu poses ton problème la première fois et pas de les avoir au compte goutte. Tu t'amuseras à l'adapter, j'en ai marre =)
0
Profil bloqué
15 janv. 2012 à 13:52
Désolé :$ mais je ne l'ai pas mentionné car ce script est déjà actif en fait la seule chose qu'il me manque c'est l'animation sinon sa fait un peu trop script de passer d'un height:0px à un height:30px, mais je n'arriv pas du tout à comprendre ton script (je débute en javascript)
0
Profil bloqué
15 janv. 2012 à 14:05
strict *
0
Réponse 8 / 8
Profil bloqué
16 janv. 2012 à 18:55
J'ai finalement réussi à obtenir l'effet que je souhaiter mais il y a un problème, lorsque c'est aux fonctions DeplaceHeaderBAS_vers_HAUT() et DeplaceConteneurBAS_vers_HAUT() de jouer au début sa fonctionne bien mais après le div header se met à avoir " un top " négatif qui s'incrémente toute les 4 ou 5 secondes, je n'arrive pas à comprendre pourquoi. Pouvez-vous m'aider ? 


<script>
function DeplaceHeaderHAUT_vers_BAS()
{
var DivHeader;
DivHeader = document.getElementById('header');
DivHeader.style.top=DivHeader.offsetTop+1+'px';
if(DivHeader.offsetTop <= 36){setTimeout('DeplaceHeaderHAUT_vers_BAS()', 10);}
}
function DeplaceConteneurHAUT_vers_BAS()
{
var DivConteneur;
DivConteneur = document.getElementById('conteneur');
DivConteneur.style.top=DivConteneur.offsetTop+1+'px';
if(DivConteneur.offsetTop <= 70){setTimeout('DeplaceConteneurHAUT_vers_BAS()', 10);}
}


function DeplaceHeaderBAS_vers_HAUT()
{
var DivHeader;
DivHeader = document.getElementById('header');
DivHeader.style.top=DivHeader.offsetTop-1+'px';
if(DivHeader.offsetTop <= 36){if(DivHeader.offsetTop > 0){setTimeout('DeplaceHeaderBAS_vers_HAUT()', 10);}}
}
function DeplaceConteneurBAS_vers_HAUT()
{
var DivConteneur;
DivConteneur = document.getElementById('conteneur');
DivConteneur.style.top=DivConteneur.offsetTop-1+'px';
if(DivConteneur.offsetTop <= 70){if(DivConteneur.offsetTop > 34){setTimeout('DeplaceConteneurBAS_vers_HAUT()', 10);}}
}

function changement_notification_arrive()
{

document.getElementById('notification').style.display='block';
DeplaceHeaderHAUT_vers_BAS();
DeplaceConteneurHAUT_vers_BAS();

setTimeout("changement_notification_arrete()", 15700);

}


function changement_notification_arrete()
{

document.getElementById('notification').style.display='none';
DeplaceHeaderBAS_vers_HAUT();
DeplaceConteneurBAS_vers_HAUT();

setTimeout("changement_notification_arrete()", 15700);

}

var skText = '';
function refresh_div_notification()
{
var xhr_object = null;
if(window.XMLHttpRequest)
{ // Firefox
xhr_object = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{ // Internet Explorer
xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
}
var method = 'POST';
var filename = 'refresh-notification';
xhr_object.open(method, filename, true);
xhr_object.onreadystatechange = function()
{

if(xhr_object.readyState == 4)
{
var tmpNotif = '';
var tmpNotif = xhr_object.responseText;

if(xhr_object.responseText != skText)
	{
if(xhr_object.responseText != '<html><body></body></html>')
{
changement_notification_arrive();
        document.getElementById('notification').innerHTML = skText = xhr_object.responseText;
	document.getElementById('notification').innerHTML = tmpNotif;

fade( document.getElementById('notification'), 1 );
setTimeout("fade( document.getElementById('notification'), 0 )", 15000);
}
	}
}
}
xhr_object.send(null);
setTimeout('refresh_div_notification()', 5000);
}
</script>
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
16 janv. 2012 à 19:07
a quel moment est-ce que tu appelle refresh_div_notification()?
0
Profil bloqué
16 janv. 2012 à 20:23
Avec un body onLoad
0
Profil bloqué
17 janv. 2012 à 23:35
Aucune solution ? :(
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 18/01/2012 à 07:21
Y en a surement une, a vrai dire j'ai pas encore pris le temps de regarder. Je vais tenter de te poster une solution aujourd'hui.
0
Profil bloqué
18 janv. 2012 à 07:24
D'accord, merci de votre aide.
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
comment remplacer un #div/0! par une cellule vide
zara70 -
Vaucluse -

3 réponses
java activée mais ne fonctionne pas !
chating -
chating -

4 réponses