Recherche d'un script pour une section "info" interactive

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Recherche d'un script pour une section "info" interactive

Message par KikaChu le Dim 7 Déc 2014 - 12:37

Bonjour, bonsoir à tous.

Je sollicite aujourd'hui humblement votre aide afin de dégoter un sript vu sur un autre forum que notre admin s'occupant de l'apparence de notre forum aimerais intégrer au nouveau thème. Hélas, nous ne parvenons pas à dégoter ce script, ou quelqu'un capable de le coder pour nous.

Voici ce que nous recherchons en image :

Spoiler:



Adresse du forum : http://fairytailmangas.forumgratuit.org/

Ainsi que quelques explications :

Nous nous intéressons donc au petit carré d'informations. Sur ce forum, lorsque l'on passe la souris sur cet espace, deux flèches apparaissent (une à droite et une à gauche du panneau info) permettant à passer à l'info précédente ou suivante en cliquant dessus.

Une âme charitable pourrait-elle nous fournir un code semblable, ou nous rediriger vers un endroit où on pourrait nous aider ?

En vous remerciant d'avance.


Dernière édition par KikaChu le Lun 8 Déc 2014 - 17:49, édité 3 fois (Raison : Rajout du lien vers le forum du script)

KikaChu
Nouveau membre

Messages : 5
Inscrit(e) le : 07/12/2014

http://equestrianations.forumgratuit.be/
KikaChu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Recherche d'un script pour une section "info" interactive

Message par Luluwebmaster le Dim 7 Déc 2014 - 12:50

Salut,

Pourrais tu donner le lien du forum sur le quelle se trouve le script ? Smile

Luluwebmaster
*****

Masculin
Messages : 720
Inscrit(e) le : 10/10/2012

http://test-luluwebmaster.lebonforum.com/
Luluwebmaster a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Recherche d'un script pour une section "info" interactive

Message par KikaChu le Dim 7 Déc 2014 - 13:40

Effectivement, j'ai oublié. Désolé !

Le voici : http://fairytailmangas.forumgratuit.org/

Je le rajoute aussi dans le premier post.

KikaChu
Nouveau membre

Messages : 5
Inscrit(e) le : 07/12/2014

http://equestrianations.forumgratuit.be/
KikaChu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Recherche d'un script pour une section "info" interactive

Message par Luluwebmaster le Dim 7 Déc 2014 - 16:29

Je m'occupe d'essayer de voir pour créer le code Wink

Luluwebmaster
*****

Masculin
Messages : 720
Inscrit(e) le : 10/10/2012

http://test-luluwebmaster.lebonforum.com/
Luluwebmaster a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Recherche d'un script pour une section "info" interactive

Message par Luluwebmaster le Dim 7 Déc 2014 - 18:30

Re,

Bon j'ai bien avancé Very Happy

Voila un peux le code actuellement :

Code:

<!DOCTYPE html>
<html>
<head>
<title>Recherche d'un script pour une section "info" interactive</title>
<meta charset="utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var listeClass = new Array();
var nameClass = "block-info";
var classSelect = 1;
var nbClass = 1 + 9;
function changeInfo(fleche)
{
   //On set toutes les class
   for(i = 1 ;i < nbClass; i++)
   {
      listeClass[i] = nameClass+"-"+ i;
   }
   if(fleche == "left")
   {
      if(classSelect > 1)
      {
         $("."+listeClass[classSelect]).css('width', '0px');
         $("."+listeClass[classSelect]).css('z-index', '0');
         $("."+listeClass[classSelect]).css('overflow', 'hidden');
         classSelect = classSelect-1;
         $("."+listeClass[classSelect]).css('width', '100%');
         $("."+listeClass[classSelect]).css('z-index', '1');
         $("."+listeClass[classSelect]).css('overflow', 'auto');
      }
   }
   else if(fleche == "right")
   {
      if(classSelect < 9)
      {
         $("."+listeClass[classSelect]).css('width', '0px');
         $("."+listeClass[classSelect]).css('z-index', '0');
         $("."+listeClass[classSelect]).css('overflow', 'hidden');
         classSelect = classSelect+1;
         $("."+listeClass[classSelect]).css('width', '100%');
         $("."+listeClass[classSelect]).css('z-index', '1');
         $("."+listeClass[classSelect]).css('overflow', 'auto');
      }
   }
}
</script>
<style>
.block
{
   position:relative;
   height:100px;
   width:300px;
   background-color:yellow;
   text-align:center;
   border:2px solid black;
}
.block-info
{
   position:absolute;
   transition:0.4s;
   background-color:yellow;
   top:0px;
   height:100%;
}
.block-fleche
{
   font-size:20px;
   cursor:pointer;
   position:absolute;
   padding:10px;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
   user-select: none;
   background-color:red;
   top:0px;
   bottom:0px;
   z-index:2;
   opacity:0;
   transition:0.4s;
}
.block:hover .block-fleche
{
   transition:0.4s;
   opacity:0.50;
}
.block-fleche-left
{
   left:0px;
   border-right:2px solid black;
}
.block-fleche-right
{
   right:0px;
   border-left:2px solid black;
}
</style>
</head>
<body>
<div class="block">
   <div class="block-info block-info-1" style="z-index:1;width:100%;">
   Ceci est une info ! - 1
   Ceci est une info ! - 1
   Ceci est une info ! - 1
   </div>
   <div class="block-info block-info-2">
   Ceci est une info ! - 2
   Ceci est une info ! - 2
   Ceci est une info ! - 2
   </div>
   <div class="block-info block-info-3">
   Ceci est une info ! - 3
   Ceci est une info ! - 3
   Ceci est une info ! - 3
   </div>
   <div class="block-info block-info-4">
   Ceci est une info ! - 4
   Ceci est une info ! - 4
   Ceci est une info ! - 4
   </div>
   <div class="block-info block-info-5">
   Ceci est une info ! - 5
   Ceci est une info ! - 5
   Ceci est une info ! - 5
   </div>
   <div class="block-info block-info-6">
   Ceci est une info ! - 6
   Ceci est une info ! - 6
   Ceci est une info ! - 6
   </div>
   <div class="block-info block-info-7">
   Ceci est une info ! - 7
   Ceci est une info ! - 7
   Ceci est une info ! - 7
   </div>
   <div class="block-info block-info-8">
   Ceci est une info ! - 8
   Ceci est une info ! - 8
   Ceci est une info ! - 8
   </div>
   <div class="block-info block-info-9">
   Ceci est une info ! - 9
   Ceci est une info ! - 9
   Ceci est une info ! - 9
   </div>
   <div class="block-fleche block-fleche-left" onClick="changeInfo('left');">
   ◄
   </div>
   <div class="block-fleche block-fleche-right" onClick="changeInfo('right');">
   ►
   </div>
</div>
</body>
</html>

Je t'invite à créer une nouvelle page HTML dans ton PA, et à regarder le résultat, pour voir se que tu en pense.

Par contre, niveau design, veut tu que je le fasse, ou tu arrivera à le changer ?

Luluwebmaster
*****

Masculin
Messages : 720
Inscrit(e) le : 10/10/2012

http://test-luluwebmaster.lebonforum.com/
Luluwebmaster a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Recherche d'un script pour une section "info" interactive

Message par KikaChu le Dim 7 Déc 2014 - 23:47

Tout d'abord, merci ! ^^

La mise en forme est niquel, par contre, les flèches semblent buger quelque peut.

Voici le lien vers le forum test histoire de voir ce que ça donne : http://forumtesten.forumactif.org/

KikaChu
Nouveau membre

Messages : 5
Inscrit(e) le : 07/12/2014

http://equestrianations.forumgratuit.be/
KikaChu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Recherche d'un script pour une section "info" interactive

Message par Luluwebmaster le Dim 7 Déc 2014 - 23:53

Re,

Oui en fait j'avais pas fini le code, et j'avais deux trois trucs à t'expliquer avant tout ^^

Donc tu je n'ai pas besoin de faire le design ?

Luluwebmaster
*****

Masculin
Messages : 720
Inscrit(e) le : 10/10/2012

http://test-luluwebmaster.lebonforum.com/
Luluwebmaster a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Recherche d'un script pour une section "info" interactive

Message par KikaChu le Dim 7 Déc 2014 - 23:59

Non, nous avons déjà quelqu'un qui s'en occupe ^^.

KikaChu
Nouveau membre

Messages : 5
Inscrit(e) le : 07/12/2014

http://equestrianations.forumgratuit.be/
KikaChu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Recherche d'un script pour une section "info" interactive

Message par Luluwebmaster le Lun 8 Déc 2014 - 0:08

Ok,

Donc, pour que ça fonctionne correctement, ajoute déjà ce code dans les codes Javascripts¨:

Code:


var listeClass = new Array();
var nameClass = "block-info";
var classSelect = 1;
var nbClass = 1 + 9;
function changeInfo(fleche)
{
   //On set toutes les class
   for(i = 1 ;i < nbClass; i++)
   {
      listeClass[i] = nameClass+"-"+ i;
   }
   if(fleche == "left")
   {
      if(classSelect > 1)
      {
         $("."+listeClass[classSelect]).css('width', '0px');
         $("."+listeClass[classSelect]).css('z-index', '0');
         $("."+listeClass[classSelect]).css('overflow', 'hidden');
         classSelect = classSelect-1;
         $("."+listeClass[classSelect]).css('width', '100%');
         $("."+listeClass[classSelect]).css('z-index', '1');
         $("."+listeClass[classSelect]).css('overflow', 'auto');
      }
   }
   else if(fleche == "right")
   {
      if(classSelect < 9)
      {
         $("."+listeClass[classSelect]).css('width', '0px');
         $("."+listeClass[classSelect]).css('z-index', '0');
         $("."+listeClass[classSelect]).css('overflow', 'hidden');
         classSelect = classSelect+1;
         $("."+listeClass[classSelect]).css('width', '100%');
         $("."+listeClass[classSelect]).css('z-index', '1');
         $("."+listeClass[classSelect]).css('overflow', 'auto');
      }
   }
}

Dans ce code, tu devra modifier le numéro qui se trouve dans la variable "var nbClass = 1 + 9;", change le nombre en rouge par le nombre d'annonce que tu veux mettre Wink

Ensuite, dans ta feuille de style, ajouter ce bout de code :

Code:

/*Design des Annonces par @luluwebmaster*/
.block
{
   position:relative;
   height:100px;
   width:300px;
   background-color:yellow;
   text-align:center;
   border:2px solid black;
}
.block-info
{
   position:absolute;
   transition:0.4s;
   background-color:yellow;
   top:0px;
   height:100%;
}
.block-fleche
{
   font-size:30px;
   cursor:pointer;
   position:absolute;
   padding:10px;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
   user-select: none;
   background-color:red;
   top:0px;
   bottom:0px;
   z-index:2;
   opacity:0;
   transition:0.4s;
   padding-top:32px;
}
.block:hover .block-fleche
{
   transition:0.4s;
   opacity:0.50;
}
.block-fleche-left
{
   left:0px;
   border-right:2px solid black;
}
.block-fleche-right
{
   right:0px;
   border-left:2px solid black;
}

Et enfin, le code HTML :

Code:

<div class="block">
   <div class="block-info block-info-1" style="z-index:1;width:100%;">
   Ceci est une info ! - 1
   Ceci est une info ! - 1
   Ceci est une info ! - 1
   </div>
   <div class="block-fleche block-fleche-left" onClick="changeInfo('left');">
   ◄
   </div>
   <div class="block-fleche block-fleche-right" onClick="changeInfo('right');">
   ►
   </div>
</div>

Quand tu voudra ajouter une annonce, tu devra ajouter ce bout de code juste avant "<div class="block-fleche block-fleche-left" onClick="changeInfo('left');">" :

Code:

   <div class="block-info block-info-1" style="z-index:1;width:100%;">
   Ceci est une info ! - 1
   Ceci est une info ! - 1
   Ceci est une info ! - 1
   </div>

Et ne pas oublier de modifier "var nbClass = 1 + 9;" Wink

Luluwebmaster
*****

Masculin
Messages : 720
Inscrit(e) le : 10/10/2012

http://test-luluwebmaster.lebonforum.com/
Luluwebmaster a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Recherche d'un script pour une section "info" interactive

Message par Luluwebmaster le Lun 8 Déc 2014 - 0:18

J'aillais oublier, quand tu ajoutera un annonce, n'oublie pas de modifier la class ( le code est volontairement pas mis entre les balises [code] ) :

<div class="block-info block-info-1" style="z-index:1;width:100%;">
Ceci est une info ! - 1
Ceci est une info ! - 1
Ceci est une info ! - 1
</div>

Remplacer le "1" par le numéro de l'annonce, dans l'ordre chronologique Wink

Sur ce, je vais au lit, à demain ^^

Luluwebmaster
*****

Masculin
Messages : 720
Inscrit(e) le : 10/10/2012

http://test-luluwebmaster.lebonforum.com/
Luluwebmaster a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Recherche d'un script pour une section "info" interactive

Message par KikaChu le Lun 8 Déc 2014 - 17:49

Nous sommes en train de tester avec de plus en plus d'info (pour le moment sans image) et tout fonctionne comme prévus pour le moment ! Je ne pense pas qu'un problème puisse se poser en image si nous respectons les bonnes dimensions, alors je passe le sujet en résolu.

Merci beaucoup pour ce code ! Je ne sais pas si tu souhaite que l'on te cite quelque part pour cette réalisation ?

KikaChu
Nouveau membre

Messages : 5
Inscrit(e) le : 07/12/2014

http://equestrianations.forumgratuit.be/
KikaChu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Recherche d'un script pour une section "info" interactive

Message par Luluwebmaster le Lun 8 Déc 2014 - 18:14

De rien, tu peux ajouter un @luluwebmaster quelque par si tu veux Wink

Luluwebmaster
*****

Masculin
Messages : 720
Inscrit(e) le : 10/10/2012

http://test-luluwebmaster.lebonforum.com/
Luluwebmaster a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum