Javascript - Apparition div " coullisant "

Profil bloqué -
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.

Afficher la suite

8 réponses

Réponse 1 / 8
pitxu Messages postés 708 Statut Membre 95

Bonjour,

regarde du côté de la librairie mootools -> http://mootools.net/demos/
0
Réponse 2 / 8
Profil bloqué

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

prosthetiks Messages postés 1309 Statut Membre 431

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

Réponse 4 / 8
Profil bloqué

@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 1309 Statut Membre 431

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é

Ok, merci :)
0
1. prosthetiks Messages postés 1309 Statut Membre 431
  
  Ca répond à ton besoin ?
  
  0
2. Profil bloqué
  
  Je ne peux pas tester le script en ce moment mais je te préviens dès que je l'aurai testé.
  
  0

Profil bloqué

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;

prosthetiks Messages postés 1309 Statut Membre 431

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>

Profil bloqué

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 1309 Statut Membre 431

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é

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é

strict *
0

Profil bloqué

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>

prosthetiks Messages postés 1309 Statut Membre 431

a quel moment est-ce que tu appelle refresh_div_notification()?
0
Profil bloqué

Avec un body onLoad
0
Profil bloqué

Aucune solution ? :(
0
prosthetiks Messages postés 1309 Statut Membre 431

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é

D'accord, merci de votre aide.
0

Javascript - Apparition div " coullisant "

8 réponses

Discussions similaires

Newsletters