Créer un slider bouton qui se déroule au passage de la souris

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

Résolu Créer un slider bouton qui se déroule au passage de la souris

Message par Ancients le Dim 28 Fév 2016 - 23:35

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://nsp-d3.forumofficiel.com/

Description du problème

Bonsoir à vous,

Ayant fait des recherches et n'étant pas un pro du codage, j'aimerais quelques conseils / aides pour créer un épingle.

Ce que j'appel épingle est un bouton caché sur le coté qui dépasse un peu et qui se déroule / s'affiche au passage de la souris. J'aimerais mettre ça en place pour cacher lien twitch (en haut à gauche de mon forum) dans un icon twitch et au passage de la souris se déroule le lien que vous voyez en ce moment sur le forum (toujours en haut à gauche.

Merci pour votre aide précieuse.


Dernière édition par Ancients le Dim 6 Mar 2016 - 19:57, édité 2 fois

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un slider bouton qui se déroule au passage de la souris

Message par Ancients le Mar 1 Mar 2016 - 12:10

up

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un slider bouton qui se déroule au passage de la souris

Message par Ancients le Jeu 3 Mar 2016 - 7:27

up

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un slider bouton qui se déroule au passage de la souris

Message par Ancients le Ven 4 Mar 2016 - 7:50

up

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un slider bouton qui se déroule au passage de la souris

Message par Ancients le Dim 6 Mar 2016 - 0:52

up

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Créer un slider bouton qui se déroule au passage de la souris

Message par Milouze14 le Dim 6 Mar 2016 - 7:28

Salut Ancients,

je ne vais pas reprendre le présent sur ton fofo mais te donner l'astuce
afin que tout le monde en profite et ce quelque soit la version utilisée.

Si il n'y a qu'un lien a déposer, ce script fera l'affaire ainsi que la C.S.S associée:

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher sur toutes les pages.

Déposes ceci:
Code:

$(function(){
$('body').append('
<div id="M14_btn_slide">
<a href="https://www.google.fr">Google est ton ami</a>
<img src="http://i.imgur.com/zuYrGru.png"title="Afficher masquer le lien"/>

  </div>
');
$('#M14_btn_slide').hover(function(){
$('#M14_btn_slide').toggleClass('margin');
});
});

Penses à cliquer sur le bouton

Ici, changes le lien du site et celui de l image,attention toutefois pour l'image car la css sera
associée à ses dimensions 29px / 29px:
Code:

<a href="https://www.google.fr">Google est ton ami</a>
<img src="http://i.imgur.com/zuYrGru.png"title="Afficher masquer le lien"/>


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Déposes ceci:
Code:

/*Le bloc du slide*/
#M14_btn_slide
{
position:fixed;/*on fixe le slide*/
top:60px;/* on le positionne a 60px du haut du fofo*/
width:200px;/*on lui donne une largeur en relation avec l image*/
height:29px;/*on donne une hauteur toujours en relation avec la hauteur de l image*/
left:-200px;/*on cache le bloc*/
background:#12a3eb;/*couleur de fond*/
text-align:center;/*on centre le lien*/
  /*La transition*/
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
/*Le slide effectue par le script*/
#M14_btn_slide.margin{left:0px;}
/*on positionne l image*/
#M14_btn_slide img
{
position:absolute;
left:200px;/* en fonction de la largeur du bloc*/
cursor:pointer;
}
/*on donne une apparence au lien*/
#M14_btn_slide a{color:#fff;font-size:11px;line-height: 29px;/*en relation avec la hauteur du bloc*/}







Penses à cliquer sur le bouton


a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4577
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un slider bouton qui se déroule au passage de la souris

Message par Ancients le Dim 6 Mar 2016 - 18:05

Bonjour Milouze, merci pour votre réponse.

Après plusieurs tentatives, j'y suis presque mais pas tout à fait. L'icon "Twitch" est décalé en dessous du slide.



Voici mon JS :

Code:
$(function(){
$('body').append('
<div id="M14_btn_slide">
<iframe id="frametwitch" src="http://streambadge.com/twitch/?username=missjsp&theme=dark"></iframe><img src="http://i84.servimg.com/u/f84/19/42/85/35/14573010.png"title="MissJsp"/>
 
  </div>
');
$('#M14_btn_slide').hover(function(){
$('#M14_btn_slide').toggleClass('margin');
});
});

Voici mon CSS :

Code:
#frametwitch { width: 100%; height: 100%;
        border: 1px solid black; position:relative; }

/*Le bloc du slide*/
#M14_btn_slide
{
position:fixed;/*on fixe le slide*/
top:60px;/* on le positionne a 60px du haut du fofo*/
width:200px;/*on lui donne une largeur en relation avec l image*/
height:64px;/*on donne une hauteur toujours en relation avec la hauteur de l image*/
left:-200px;/*on cache le bloc*/
background:#12a3eb;/*couleur de fond*/
text-align:center;/*on centre le lien*/
  /*La transition*/
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
/*Le slide effectue par le script*/
#M14_btn_slide.margin{left:0px;}
/*on positionne l image*/
#M14_btn_slide img
{
position:absolute;
left:200px;/* en fonction de la largeur du bloc*/
cursor:pointer;
}
/*on donne une apparence au lien*/
#M14_btn_slide a{color:#fff;font-size:11px;line-height: 64px;/*en relation avec la hauteur du bloc*/}

Merci pour votre aide

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un slider bouton qui se déroule au passage de la souris

Message par Milouze14 le Dim 6 Mar 2016 - 18:14

Re,
hum on parlait d'un lien et non d'une iframe,
bref , il n'y a pas de soucis sur ton fofo et non sur le mien (enfin mon fofo de tests):


a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4577
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un slider bouton qui se déroule au passage de la souris

Message par Ancients le Dim 6 Mar 2016 - 19:08

Bonjour,

Pourtant l'affichage sur mon forum est celui-ci :


Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un slider bouton qui se déroule au passage de la souris

Message par Milouze14 le Dim 6 Mar 2016 - 19:12

Re,
hum effectivement sous Chrome , le bug est flagrant.

Donc en fait tu veux jusque que cette iframe soit plus ou moins cachée et au survol qu'elle s'affiche dans sa totalité ?

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4577
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un slider bouton qui se déroule au passage de la souris

Message par Ancients le Dim 6 Mar 2016 - 19:15

Oui c'est ça, c'est un peu ce que je fais (peut être mal à vous de me le dire). Le problème est que l'icon "Twitch" pour le slide est décalé en bas.

Ce bug s'opère sur Chrome et Safari pour moi.

Merci Milouze

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un slider bouton qui se déroule au passage de la souris

Message par Milouze14 le Dim 6 Mar 2016 - 19:20

Re,
on va purement supprimer l'image et laisser apparaitre qu'une partie de ton Iframe.
Remplaces la totalité de la C.S.S donnée par:
Code:

#frametwitch {width: 100%; height: 100%; border: 1px solid black; position:relative; }
   
    /*Le bloc du slide*/
    #M14_btn_slide
    {
    position:fixed;/*on fixe le slide*/
    top:60px;/* on le positionne a 60px du haut du fofo*/
    width:200px;/*on lui donne une largeur en relation avec l image*/
    height:64px;/*on donne une hauteur toujours en relation avec la hauteur de l image*/
    left:-180px;/*on cache le bloc*/
    background:#12a3eb;/*couleur de fond*/
    text-align:center;/*on centre le lien*/
      /*La transition*/
    -webkit-transition: left 0.5s ease-in-out;
    -moz-transition: left 0.5s ease-in-out;
    -o-transition: left 0.5s ease-in-out;
    transition: left 0.5s ease-in-out;
    }
    /*Le slide effectue par le script*/
    #M14_btn_slide.margin{left:0px;}
 
    /*on donne une apparence au lien*/
    #M14_btn_slide a{color:#fff;font-size:11px;line-height: 64px;/*en relation avec la hauteur du bloc*/}



Penses à cliquer sur le bouton

Édites le javascript et remplaces tout le contenu par:

Code:

$(function(){
    $('body').append('
    <div id="M14_btn_slide">
    <iframe id="frametwitch" src="http://streambadge.com/twitch/?username=missjsp&theme=dark"title="MissJsp">
</div>
    ');
    $('#M14_btn_slide').hover(function(){
    $('#M14_btn_slide').toggleClass('margin');
    });
    });


Penses à cliquer sur le bouton

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4577
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un slider bouton qui se déroule au passage de la souris

Message par Ancients le Dim 6 Mar 2016 - 19:29

Le rendu est sympa mais en fait je voulais faire un slide pour cacher l'iframe parce qu'on peut pas le personnaliser (je crois) et qu'il rend pas très jolie sur le forum. D'ou le cacher par un icon (jolie) dans un slide.

Merci pour ton temps Milouze!

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un slider bouton qui se déroule au passage de la souris

Message par Milouze14 le Dim 6 Mar 2016 - 19:44

Re,
cela va être compliqué avec une Iframe mon ami.

Essayes ceci en remplaçant la css dans sa totalité:

Code:

#M14_btn_slide:before
{
  content:"";
  position:absolute;
  background:url(http://i84.servimg.com/u/f84/19/42/85/35/14573010.png)no-repeat;
  width:64px;
  height:64px;
  margin-left:200px;
}



#frametwitch {width: 100%; height: 100%; border: 1px solid black; position:relative; }
   
    /*Le bloc du slide*/

    #M14_btn_slide
    {
    position:fixed;/*on fixe le slide*/
    top:60px;/* on le positionne a 60px du haut du fofo*/
    width:200px;/*on lui donne une largeur en relation avec l image*/
    height:64px;/*on donne une hauteur toujours en relation avec la hauteur de l image*/
    left:-205px;/*on cache le bloc*/
    background:#12a3eb;/*couleur de fond*/
    text-align:center;/*on centre le lien*/
      /*La transition*/
    -webkit-transition: left 0.5s ease-in-out;
    -moz-transition: left 0.5s ease-in-out;
    -o-transition: left 0.5s ease-in-out;
    transition: left 0.5s ease-in-out;
    }
    /*Le slide effectue par le script*/
    #M14_btn_slide.margin{left:0px;}
 


Penses à cliquer sur le bouton

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4577
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un slider bouton qui se déroule au passage de la souris

Message par Ancients le Dim 6 Mar 2016 - 19:47

Rien de trop compliqué pour vous il semblerait. Cela marche très bien.

Merci beaucoup pour votre temps

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un slider bouton qui se déroule au passage de la souris

Message par Milouze14 le Dim 6 Mar 2016 - 19:55

Re,
à force , cela devient assez simple Very Happy .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4577
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 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