IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Div dynamique en JS


Sujet :

JavaScript

Vue hybride

Message pr�c�dent Message pr�c�dent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    18
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 18
    Par d�faut Div dynamique en JS
    Salut � tous,

    J'ai cod� avec un ami une sorte de slide dynamique qui fait defiler verticalement 4 images successivements toutes les 3 secondes. On aimerait que pendant les 3 secondes durant lesquelles l'image reste affich�e, une DIV contenant le title de l'image (ou au pire un texte ajout� au pr�alable dans le code) rentre sur l'image par le c�t� gauche jusqu'au centre, puis reparte d'o� elle vient. Je ne sais pas si je suis clair dans ce que je veux mais j'esp�re l'�tre

    Si quelqu'un peut m'aiguiller ou m�me me proposer un p'tit script qui fait �a que je pourrai adapter � mon code par la suite ce serait beau

    Merci d'avance

  2. #2
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POO�te
    Inscrit en
    Avril 2008
    Messages
    2 652
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activit� : POO�te

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par d�faut
    Dans la mesure o� tu utilises un slide dynamique, je supposerai que tu importes une librairie ^^ (genre jQuery, Mootools, Prototype, ExtJS, ... ou m�me quelque chose de plus petit, cibl� sur quelques fonctionnalit�s th�matiques)
    (il y a tout-�-fait moyen de se passer de librairies pour �a, cf. cette int�ressante discussion mais mon intuition me dit que tu n'as pas cod� tes fonctions � la main ^^)

    Juste pour �tre s�r : as-tu v�rifi� que ta librairie ne propose pas d�j� ce genre de fonctionnalit�s ?

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    18
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 18
    Par d�faut
    Non nous n'utilisons pas de librairies

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    18
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 18
    Par d�faut
    Voici mon code pour ceux qui auraient la merveilleuse id�e de me donner un coup de pouce parce que je pige vraiment pas


    Le sliderJavascript.js
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
     
    var tableauImage = new Array("image01.jpg","image02.jpg","image03.jpg","image04.jpg");
    var tabTxt = new Array("img1", "img2", "img3", "img4");
     
    // Temps d'attente entre 2 images
    var attente = "3000";
     
    // Variables du slider
    var vitesse = 1;
    var temps;
    var positionFin, conteneur, sens;
    var tempsTexte;
    var texte;
     
    // Ajout des images dans la div conteneur
    function creationSlide()
    {
    	var i;
    	var imageSlide;
    	var divSlide;
    	var conteneur = document.getElementById("conteneur");
     
    	for (i=1; i<tableauImage.length; i++)
    	{
    		// Creation du conteneur image
    		divSlide = document.createElement("div");
    		divSlide.className = "cellule";
    		divSlide.id = "cellule"+i;
    		divSlide.objetCellule = divSlide;
     
    		// Creation de l'image
    		imageSlide = document.createElement("img");
    		imageSlide.src = tableauImage[i];
    		imageSlide.className = "image";	
     
    		// Ajout de l'image dans la div
    		divSlide.appendChild(imageSlide);
     
    		// Ajout du div dans le div conteneur
    		conteneur.appendChild(divSlide);
    	}
     
    	temps = setTimeout("calculDistance()",attente);
    } 
     
    // Fonction pour calculer la distance du slide et le sens
    function calculDistance()
    {
    	// Distante totale parcourue par le slide
    	var distance;
     
    	conteneur = document.getElementById("conteneur");
    	distance = conteneur.scrollHeight / tableauImage.length;
     
     
    	// Affectation de la variable sens pour pouvoir le faire repartir si il arrive au bout
    	if (conteneur.scrollTop + distance >=conteneur.scrollHeight)
    	{
    		sens = -1;
    	}
    	if (conteneur.scrollTop<distance)
    	{
    		sens = 1;
    	}
     
    	positionFin = conteneur.scrollTop + sens * distance;
    	temps = setTimeout("defilementImage()", vitesse);
    }
     
     
    // Défilement des images
    function defilementImage()
    {
    	conteneur.scrollTop = conteneur.scrollTop + sens * 2;	
     
    	defilementTexte();
     
    	// Si le slide arrive au bout, il repart dans l'autre sens
    	if (sens == 1)
    	{
    		if (conteneur.scrollTop<positionFin)
    		{
    			temps = setTimeout("defilementImage()", vitesse);
     
    		}	
    		else
    		{
    			temps = setTimeout("calculDistance()",attente);
    		}
     
    	}
    	// Le slide repart dans l'autre sens plus rapidement
    	else
    	{
    		if (conteneur.scrollTop>positionFin)
    		{
    			temps = setTimeout("defilementImage()", vitesse);
    		}	
    		else
    		{
    			temps = setTimeout("calculDistance()", attente);
    		}
     
    	}
     
    }
     
     
     
    // Fonction défilement du texte
    function defilementTexte()
    {
    	texte = document.getElementById("texte");
    	tempsTexte = setTimeout("defilementTexte2()", vitesse);
    	//console.log(texte);
     
    }
     
    function defilementTexte2()
    {
    	//texte.scrollRight = texte.scrollRight + 1 * 2;
    	texte.style.left = texte.style.left + 100 + "px";
    }
    Le sliderJavascript.html
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    		<meta http-equiv="content-language" content="fr"/>
    		<title>Ajax & jQuery - Exercice 10</title>
     
    		<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    		<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>
    		<link rel="stylesheet" type="text/css" href="style.css"/>
    		<link rel="stylesheet" type="text/css" href="ajax.css"/>
    	</head>
    	<body id="exo10" onload="creationSlide()">
    		<header>
    			<div class="Control" id="home">
    				<a class="Button" href="../">Retour à la liste des exercices</a>
    			</div>
    			<hgroup>
    				<h1>Exercice 10 - Slider avance</h1>
    				<h2>Animations</h2>
    			</hgroup>
    		</header>
    		<section>
    			<div class="conteneur" id="conteneur">
    				<img src="image01.jpg" title="Premiere image"/>
    				<div class="texte" id="texte">	
    					texte
    				</div>
    			</div>
     
    		</section>
    		<script type="text/javascript" src="sliderJavascript.js"></script>
    	</body>
    </html>
    Le style.css

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    @CHARSET UTF-8;
     
     
    .conteneur, .cellule
    {
    	height: 331px;	
    	width: 500px;   
    	margin-left: auto;
    	margin-right: auto;
    }
     
    /* CSS pour le conteneur */
    .conteneur
    {
    	border: 10px #303030 solid;		/* Bordure du conteneur */
    	overflow: hidden;
    	-moz-border-radius: 10px;		/* Bordure arrondie */
    	border-radius: 10px;
    	-moz-box-shadow: 0 9px 15px #585858;		/* ombre sur le conteneur */
    	-webkit-box-shadow: 0 9px 15px #585858;
    }
     
     
    /* CSS pour l'image */
    .image
    {
    	height: 331px;
    	width: 500px;	
    }
     
    /* CSS pour le texte */
    .texte
    {
    	width: 300px;
    	position: absolute;
    	top: 500px;
    	/*left: 500px;*/
    	opacity: 0.75;
    	background-color: white;
    	color: black;
    	font-size: 20px;
    }

  5. #5
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POO�te
    Inscrit en
    Avril 2008
    Messages
    2 652
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activit� : POO�te

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par d�faut
    Citation Envoy� par jojojo84 Voir le message
    Code html : S�lectionner tout - Visualiser dans une fen�tre � part
    <title>Ajax & jQuery - Exercice 10</title>
    Une page sur jQuery mais sans jQuery... si c'est pas le comble !

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    18
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 18
    Par d�faut
    C'est le th�me global de nos exercices de la semaine; that's why

    Malheureusement le probl�me se situe ailleurs

Discussions similaires

  1. montrer et cacher des div dynamiquement
    Par kanabzh29 dans le forum G�n�ral JavaScript
    R�ponses: 8
    Dernier message: 17/09/2008, 15h49
  2. Centrage vertical d'un DIV dynamique
    Par thegreatbato dans le forum G�n�ral JavaScript
    R�ponses: 6
    Dernier message: 25/06/2007, 19h05
  3. [AJAX] Div dynamique AJAX. Sous IE, les images ne s'affichent pas
    Par N3odyme dans le forum G�n�ral JavaScript
    R�ponses: 1
    Dernier message: 10/12/2006, 20h56
  4. [ok]remplir des div dynamiquement?
    Par manutudescends dans le forum G�n�ral JavaScript
    R�ponses: 4
    Dernier message: 28/08/2006, 16h24
  5. div dynamique
    Par Invit�(e) dans le forum Balisage (X)HTML et validation W3C
    R�ponses: 11
    Dernier message: 21/10/2005, 22h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo