11522 sujets

JavaScript, DOM et API Web HTML5

Fondu div fade in et fade out

Bonjour,
Connaissant peu (voir même très très peu) le java script, je me trouve confronté a un problème de fondu sur une div. Je m'explique: je voudrais que lorsque je passe ma souris sur un bouton, mon header apparaisse en fondu avant de disparaître au bout de 10 secondes en fondu.
Pour le moment mon code me permet de faire apparaitre puis disparaitre mon header au bout de 10 secondes mais pas d'effectuer mes transitions en fondue.
Après avoir cherché sur le web je me suis aperçus que je pouvait utiliser la fonction fade in/out avec jquery mais je n'arrive pas a intégrer cette fonction a mon code.
Merci d'avance
js:
function afficher_cacher(id)
{
        if(document.getElementById(id).style.visibility=="hidden")
        {
                     
        }
        else
        {
                document.getElementById(id).style.visibility="hidden";
                
        }
        return true;
}

 function afficher(id)
 {
 if(document.getElementById(id).style.visibility=="hidden")
       {
	
        document.getElementById(id).style.visibility="visible";
	
       }
 
 }
 
 function cacher(id)
 {
setTimeout(function() {
 document.getElementById(id).style.visibility="hidden";
 }, 10000);
 }


html:

<!DOCTYPE html>
<html 
   <head>
<link rel="stylesheet" media="screen" type="text/css" title="Site" href="design.css" />
        <script type="text/javascript" src="afficher_cacher_div.js"></script>
</head>
   <body>
  <span class="bouton" id="bouton_texte" onmouseover="javascript:afficher('Headerfixe')" onmouseout="javascript:cacher('Headerfixe')" ><img src="Start.png"/></span>
  
   <div id="Headerfixe"> 
   
    <div class="element_Headerfixe"> 
</div>
<script type="text/javascript">
        //<!--
                afficher_cacher('Headerfixe');
        //-->
        </script>
 </body>
</html>

Modifié par Fox-177 (11 Jul 2011 - 17:17)
Bonjour à toutes et à tous,

voici un bout de code, JQUERY, faisant sur une <div id="header"> un fadeOut si tu cliques sur le texte flip et un fadeIn si tu cliques sur le text flop.
<!doctype html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="file:///E:/5.Jquery/Library/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function ()
{
	$("#flip").click(function (event)
	{
		$("#header").fadeOut(2000);
	});

	$("#flop").click(function (event)
	{
		$("#header").fadeIn(2000);
	});
});
</script>
</head>

<body>
<div id="header">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
<p id="flip">flip</p>
<p id="flop">flop</p>
</body>
</html>
@+
Fox-177 : Tu peux effectivement utiliser jquery. Mais jquery est une bibliothèque qui facilite l'écriture de JavaScript, pour l'utiliser tu dois d'abord l'inclure à ta page et ensuite tu dois écrire ton code en respectant son fonctionnement.

http://pckult.developpez.com/tutoriels/javascript/frameworks/jquery/introduction/

Artemus24 : si tu lisais les énoncés des questions et que tu essayais d'y répondre ça serait mieux que de toujours poster des bouts de codes qui sont à coté de la plaque.
Modifié par jb_gfx (11 Jul 2011 - 19:38)
Bonsoir à toutes et à tous,

d'abord, j'ai bien lu l'énoncé de cette discussion.

Le problème est que toi jb_gfx tu ne tentes même pas d'y répondre, puisque tu bottes en touche en donnant un lien vers un sujet dont ce monsieur ne connait pas du tout.

Au cas où tu ne l'aurais pas compris, il ne connais pas du tout le JavaScript. On se demande qui a bien lu l'énoncé du sujet ?

Il demande de faire un fadeIn et un fadeOut en JavaScript puisqu'il ne sait pas comment s'y prendre !

Donc je te conseil de relire les conseils de ce forum, dont voici un extrait :
a écrit :
5 Un peu de politesse

La politesse élémentaire est d'usage sur ce Forum (Bonjour, Merci d'avoir répondu à ma question, ...) et sera appréciée par les modérateurs (et autres membres). Nous ne sommes pas dans un fast-food ici, où l'on commande, on consomme et on s'éclipse. Les nouveaux inscrits qui le souhaitent peuvent se présenter dans un sujet du Bar du forum.
De même, il est courtois d'être poli et patient avec les nouveaux membres peu expérimentés.


Donc la patience est de rigueur, et si mes propos te dérange, je préfères à l'avenir que tu n'y répondes plus en une critique répétée à mon égard !

Merci de ton attention jb_gfx !

@+
Modifié par Artemus24 (11 Jul 2011 - 20:50)
Hello,
Je vous remercie pour vos réponses. Comme l'a dit Artemus24 je ne suis pas encore très doué en java script. Y aurait t'il la possibilité d' inclure le code pour faire le fade in/out dans mon fichier source "afficher_cacher_div.js"?
Merci d'avance
Bonsoir Fox-177,

oui, c'est possible, mais j'aimerai savoir comment tu vas déclencher le fadeIn et le fadeOut ? Je n'ai pas compris l'utilité de ta fonction afficher_cacher ?

voici les explications de mon exemple ci-dessus :

1) il est nécessaire de charger sur ton site la dernière version de la library JQUERY. Tu trouveras cela à l'adresse suivantes : www.jquery.com.

2) dans mon exemple, la première balise <script> fait référence à cette library.

3) la deuxième balise <script> donne le code jquery pour déclencher un fadeOut lorsque tu cliques sur le texte flip. De même le fadeOut se déclenche lorsque tu cliques sur le text flop.

4) commence par récupérer ce code et teste le chez toi. En tant que durée du fondu, j'ai mis 2000 millisecondes !

Ne serait-il pas judicieux de placer ces nouvelles fonctions sur "onmouseover" et "onmouseout" ?

@+
Modifié par Artemus24 (11 Jul 2011 - 22:52)
Bonsoir Fox-177,

voila le code HTML avec deux boutons :

--> le bouton 1 effectue le fadeOut et le fadeIn respectivement sur le onmouseover et le onmouseout.
--> le bouton 2 effectue sur un clic le mode d'affichage ou le mode cacher de la balise <div id="header">.

J'espère avoir répondu à ta question. Si tu as d'autres questions, n'hésite pas !
<!doctype html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="file:///E:/5.Jquery/Library/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
/*--------------------*/
/*     JAVASCRIPT     */
/*--------------------*/

function afficher(id)
{
	document.getElementById(id).style.visibility = "visible";
}

function cacher(id)
{
	document.getElementById(id).style.visibility = "hidden";
}

function afficher_cacher(id)
{
	if (document.getElementById(id).style.visibility == "hidden")
			afficher(id);
	else	cacher(id);
}

/*----------------*/
/*     JQUERY     */
/*----------------*/

$(document).ready( function ()
{
	$("#bouton1").mouseover(function ()
	{
		$("#header").fadeOut("slow");
	});

	$("#bouton1").mouseout(function ()
	{
		$("#header").fadeIn("slow");
	});
});
</script>

<style type="text/css">
#header {
		background-color	: lightblue;
}

#bouton1,
#bouton2 {
		background-color	: lightyellow;
		width				: 100px;
		height				: 50px;

		display				: inline-block;
		border				: 1px solid yellow;
		margin				: 5px;
		text-align			: center;
}

</style>
</head>

<body>
<div id="bouton1">bouton 1</div>
<div id="bouton2" onclick="afficher_cacher('header');">bouton 2</div>

<div id="header">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
</body>
</html>
Ah oui, j'ai oublié de te le dire : cela a été testé sous Mozilla Firefox 5.0, MSIE 8.0, Google Chrome 12.0, Apple Safari 5.0.5 et Opera 11.50.

N'oublie pas de mettre cette discussion à [résolu] si c'est le cas !

@+
Modifié par Artemus24 (11 Jul 2011 - 23:30)
Attention à ton code Artemus, tu appelles un fichier en local : "file://"

Pour que l'exemple marche, il faut appeler jQuery depuis un lien correct :


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>

Modifié par ZeB_panam (12 Jul 2011 - 07:40)
Salut Fox-177 »

Je ne te suggère pas mouseover pas plus que les 10 secondes d'attente avant de voir se fermer le DIV.

La raison en est simple, c'est que 10 secondes suffiront pour qu'un visiteur trouve un lien intéressant, ailleurs sur la page. Il voudra donc cliquer sur le lien mais en même temps le header se ferme parce que les 10 secondes sont passé (c'est un exemple ici). La page remonte donc d'un cran et le visiteur rate le lien, et clique là où il ne veut pas.

Dans ton projet du header qui ferme ou ouvre, je choisirais de faire « cliquer ». Ainsi tu donne à l'utilisateur le plein contrôle du header. Sois qu'il le laisse ouvert, soit qu'il le laisse fermer. Par le fait même tu élimine toute confusion.

Dans le script de Artemus24, le premier script, il n'est pas obliger d'avoir un « flip » et un « flop ». Un seul élément « p » suffit à ouvrir ou fermer le DIV. Voici un exemple en JQuery, il fait suite au script de Artemus24.


 <script type="text/javascript" src="js/jquery/jquery-1.6.2.min.js"></script> 
 <script type="text/javascript"> 
  $(document).ready( function ()
  {     
     $("#flipFlop").click(function () 
     {         
        if ($ ("#header").is (":hidden")) 
        {
           $ ("#header").fadeIn ();
        }
        else 
        {
           $ ("#header").fadeOut ();
        }    
     }); 
  }); 
 </script>


Et le HTML »


 <div id="header">
  <p>Eh bien c'est pas compliquer » <span>si je suis ouvert je dois fermer,</span> mais si je suis fermer je dois ouvrir</p>
 </div>
 <p id="flipFlop"><b>« Ouvrir et/ou Fermer »</b></p>


Je te laisse ici avec un code complet qui utilise un bouton et un seul, avec la faculté d'ouvrir et/ou fermer » Désolé mais le !DOCTYPE est en xHTML, mais pour un test c'est ok. Tu n'as qu'à vérifier l'adresse du fichier jquery-1.6.2.min.js afin de cibler correctement, ou prendre la méthode de ZeB_panam, qui a la particularité de ne pas cassé.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fade in ~ fade out [JQuery]</title>
<script type="text/javascript" src="js/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
 $ (document).ready (function () {
  $ ("#bouton").click (function () {
   if ($ ("#entete").is (":hidden")) {
    $ ("#entete").fadeIn ();
   }
   else {
    $ ("#entete").fadeOut ();
   }
  });
 });
</script>
<!-- Styles CSS -->
<style type="text/css">
 body {
 margin:0; 
 padding:0;
 width:100%;
 overflow:auto;
 font-family:sans-serif;
 font-size:100%; 
 }
 h1 {
 font-size:1em;
 color:#fff;
 margin-left:12px;
 }
 .texteConteneur {
  color:#ff0000;
 }
 input {  
 background:#d4d0c8;
 border:1px solid #333; 
 color:#333;  
 font-size:13px;
 width:100%;
 cursor:hand; 
 }
 .btn {  
 background:#f5f5f5;   
 }
 .entete { 
 height:100px; 
 background:#ff0000;
 padding:5px 0 5px 0;
 }
 span {
  color:#333;
 }
 #conteneur {
 background:#f2f2f2;
 height:120px;
 padding:5px 0 5px 0;
 border-bottom:3px solid #ff0000;
 }
</style>
</head>

<body>
<div id="entete" class="entete">
 <h1>Faire <span>disparaître/apparaître</span> l'entête du document.</h1>
</div>
<div class="btn">
 <input type="button" id="bouton" value="Ouvrir et/ou fermer" />
</div>
<div id="conteneur">
 <h1><span>Je serai toujours en position, que l'entête soit visible ou non</span></h1>
</div>
</body>
</html>


C'est sur un clique que l'utilisateur agit. On lui laisse le plein contrôle du header.

..
Hello,
Je vous remercie pour vos réponses.
Pour en revenir a ton conseil, zardoz de ne pas utiliser le mouse over et les 10 secondes: mon header étant en position fixe, une fois ouvert il cache du contenu c'est pourquoi j'ai eu l 'idée de le masquer au bout de 10 secondes, ce qui laisse le temps au visiteur de choisir un lien sur l'header ou de continuer sa lecture. L'header étant en position fixe, quand il disparait, cela ne fait pas remonter la page mais permet au visiteur d'avoir une plus grosse zone de lecture.
Pour vos codes, le code de Arthemus24 me correspond le mieux (même si vos de codes étaient très similaires, je vous remercie) mais je voudrait savoir si il y a possibilité de faire que l’entête soit caché a l'ouverture de la page.
Merci d'avance
ps: Arthemus24, y aurait t'il la possibilité d'intégrer dans ton code un décompte de 10 secondes avant le fade out? Smiley cligne
Fox-177 a écrit :
Hello,
mais je voudrait savoir si il y a possibilité de faire que l’entête soit caché a l'ouverture de la page.
Merci d'avance


Oui » tu pourras inverser les rôles dans ta logique conditionnelle « if ».

Bonne chance dans tes projets.
..
Bonjour à toutes et à tous,

au cas où vous le sauriez pas, en web, je suis encore débutant (enfin plus trop maintenant avec tous les exercices que je fais sur ce forum). Alors soyez tolérant sur mes erreurs ou mes confusions involontaires !

Je remercie "ZeB_panam" pour son astuce de la référence à la bibliothèque JQUERY ! Donc je l'adopte !

Une question : n'y a-t-il pas une autre solution pour toujours faire référence à la dernière version de la bibliothèque JQUERY ?

Merci aussi à Zardoz dont j’apprécie ses interventions sur maintes sujets. Au fait, ma "lightBox" est presque terminée. J'ai toujours le même problème avec la dimension de la fenêtre pour MSIE 8.0. Je n'ai pas encore trouvé de solution.

Merci d'avoir amélioré mon code car je suis débutant en Jquery. Et en cherchant beaucoup, on trouve un peu ! J'ai encore beaucoup de chemin à faire en ce domaine.

Volontairement, j'ai dissocié en deux bouts de code le fadeIn et le fadeOut ! Je croix que Fox-177 voulais que cela soit ainsi !

A nous deux Fox-177 ! Merci de me faire confiance !

Je reprends mon code en Jquery, et j'ai ajouté un temporisateur que se nomme "delay" avant le fadeOut, comme tu me l'as demandé.

Tu peux aussi allonger ou racourcir la durée du fadeOut et du fadeIn. Il suffit de mettre, en millisecondes, par exemple : fadeOut(2000) pour une durée de deux secondes.

$(document).ready( function () 
{ 
    $("#bouton1").mouseover(function () 
    { 
        $("#header").delay(10000).fadeOut("slow"); 
    }); 
 
    $("#bouton1").mouseout(function () 
    { 
        $("#header").fadeIn("slow"); 
    }); 
});
J'espère maintenant que ton problème est résolu !

@+
Modifié par Artemus24 (12 Jul 2011 - 20:09)
Hello tout le monde,
Désolé pour ces quelques jours d'absence.
Arthémus24, ton code ne fonctionne pas, en effet, mon Header s'affiche puis disparait sans jamais s’arrêter; J'en est donc conclu que tu avait inverser le mouseout et le mouseover.
Je te remercie par contre pour " delay" qui fonctionne parfaitement.
Par contre, je n'arrive toujours pas a ce que mon Header soit cacher a l ouverture de la page.
J'ai essayer un

$("Headerfixe").hide();

mais cela ne fonctionne pas.
Je vous remercie pour vos réponses.
Sujet clos
Aller à