[Résolu] Tab reseaux sociaux bord de page - Forum Javascript / DOM / Ajax

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  Javascript / DOM / Ajax (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  [Résolu] Tab reseaux sociaux bord de page

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: [Résolu] Tab reseaux sociaux bord de page (Lu 2868 fois)

[Résolu] Tab reseaux sociaux bord de page
« sur: le 09-10-2010 a 09:11:02 »

ludozme
Membre récent

Hors-Ligne

Messages: 6

Salut à toute la communauté,

Je suis à la recherche d'un code (je presume en javascript) afin de pouvoir mettre une sorte d'onglet en bord de page qui, lorsqu'on le survole s'affiche pour faire apparaitre les icones des reseaux sociaux facebook, twitter, etc .... Vous trouverez un exemple sur ce site (bord de page gauche) : http://www.uaredesign.com/.
Merci d'avance pour votre aide

« Dernière Édition: le 11-10-2010 a 14:38:21 par Pad »

Rapporter au modérateur

Re:Tab reseaux sociaux bord de page
« Répondre #1 sur: le 09-10-2010 a 15:44:44 »

Pad
Modérateur Global

Hors-Ligne

Sexe: Male

Messages: 1391

c'est un système créé par le développeur du site... je pense pas que tu puisse le retrouver sous forme de script à installer sur ton site. Regarde plutôt la source du code du site pour comprendre comment il a procédé

Rapporter au modérateur

Webdéveloppeur / Webdesigner Indépendant
http://vincentdapp.fr/
SIRET 517 691 408 00028

Re:Tab reseaux sociaux bord de page
« Répondre #2 sur: le 09-10-2010 a 18:28:24 »

ludozme
Membre récent

Hors-Ligne

Messages: 6

Merci Pad, j'ai le nez dedans depuis le début de l'apres midi mais j'y pige pas grand chose . Je continu de chercher.
J'ai deja vu un système un peu similaire mais je ne sais plus sur quel site .. c un peu ballot
Si quelqu'un trouve un truc dans ce genre en surfant, merci de laisser l'URL pour que je puisse jeter un œil.
@+

Rapporter au modérateur

Re:Tab reseaux sociaux bord de page
« Répondre #3 sur: le 10-10-2010 a 00:59:06 »

Pad
Modérateur Global

Hors-Ligne

Sexe: Male

Messages: 1391

voici une partie du code, manque encore le css sur chaque bloc et il faut utiliser la bibliothèque scriptaculous

Code:

<div id="social-wrapper" >
<div id="social-close"></div>
<div id="social-bullet" style="display:block"></div>
<div id="social-links" style="display:none">
<a href="http://www.facebook.com/uaredesign?v=wall" id="social-fb" target="_blank"></a>
<a href="http://twitter.com/UareDesign/" id="social-twitter" target="_blank"></a>
<a href="http://www.uaredesign.com/rss/catalog/new/?___store=french" id="social-rss" target="_blank"></a>
</div>

</div>

<script type="text/javascript">
var socPos = false;
$('social-close').observe('click', function() {
var el = $('social-wrapper');
if(socPos){
$('social-close').style.backgroundPosition = "0 0";
new Effect.Move(el,{x: -20, mode: 'relative', duration: 0.3});
$('social-links').hide();
new Effect.Appear($('social-bullet'),{duration:0.3});
socPos = false;
}
else {
$('social-close').style.backgroundPosition = "0 -15px";
new Effect.Move(el,{x: 20, mode: 'relative', duration: 0.3});
$('social-bullet').hide();
new Effect.Appear($('social-links'),{duration:0.3});
socPos = true;
}
});
</script>

« Dernière Édition: le 10-10-2010 a 00:59:22 par Pad »

Rapporter au modérateur

Webdéveloppeur / Webdesigner Indépendant
http://vincentdapp.fr/
SIRET 517 691 408 00028

Re:Tab reseaux sociaux bord de page
« Répondre #4 sur: le 10-10-2010 a 09:22:57 »

ludozme
Membre récent

Hors-Ligne

Messages: 6

Je viens de trouver la partie CSS et les images qu'il me faut
Code:

div#social-wrapper{
   background:url(/img/social-bg.png) no-repeat;
   position:fixed;
   top:230px;
   left:-20px;
   width:44px;
   height:156px
   }
div#social-wrapper
a{
   display:block;
   height:28px;
   width:28px;
   background:url(/img/social-icons.png) no-repeat;
   margin:10px 0 0 5px
   }
div#social-wrapper
div#social-links{}
div#social-wrapper
div#social-bullet{
   height:104px;
   width:12px;
   background:url(/img/social-bullet.png) no-repeat;
   margin:13px 0 0 24px
   }
div#social-wrapper
a#social-fb{
   background-position:0 0
   }
div#social-wrapper
a#social-twitter{
   background-position:0 -28px
   }
div#social-wrapper
a#social-rss{
   background-position:0 -56px
   }
div#social-wrapper
a#social-fb:hover{
   background-position:-28px 0
   }
div#social-wrapper
a#social-twitter:hover{
   background-position:-28px -28px
   }
div#social-wrapper
a#social-rss:hover{
   background-position:-28px -56px
   }
div#social-wrapper
div#social-close{
   height:15px;
   width:15px;
   background:url(/img/social-close.png) no-repeat 0 0;
   margin-left:31px;
   cursor:pointer
   }

Je pense qu'il me manque encore le fameux scriptaculous qui permet de faire fonctionner tout cela et là, je dois dire que je nage complétement.

Rapporter au modérateur

Re:Tab reseaux sociaux bord de page
« Répondre #5 sur: le 10-10-2010 a 14:15:23 »

Pad
Modérateur Global

Hors-Ligne

Sexe: Male

Messages: 1391

tout te sera expliquer en tapant sur google "installer scriptaculous"

« Dernière Édition: le 10-10-2010 a 14:15:42 par Pad »

Rapporter au modérateur

Webdéveloppeur / Webdesigner Indépendant
http://vincentdapp.fr/
SIRET 517 691 408 00028

Re:Tab reseaux sociaux bord de page
« Répondre #6 sur: le 10-10-2010 a 17:39:13 »

ludozme
Membre récent

Hors-Ligne

Messages: 6

YESSS !! Vraiment trop fort Pad.

Ça fonctionne mais il me manque juste les icônes des réseaux sociaux que j'ai dû rater quelque part dans le CSS.
Voila ce que ca donne : http://www.ludozme.fr
Je passerais vous dire quand ce sera opérationnel.
Merci mille fois à toi Pad !

Rapporter au modérateur

Re:Tab reseaux sociaux bord de page
« Répondre #7 sur: le 10-10-2010 a 18:56:26 »

ludozme
Membre récent

Hors-Ligne

Messages: 6

Et voilà, tout est OK !!
Merci Pad pour ton aide précieuse.
Si cela peut servir à quelqu'un, n'hésitez pas à suivre le fil du post.

Rapporter au modérateur

Re:Tab reseaux sociaux bord de page
« Répondre #8 sur: le 11-10-2010 a 09:19:51 »

wd-creation
Membre récent

Hors-Ligne

Messages: 12

Tu aurais pu faire quelque chose de semblable avec jQuery,
dommage j'arrive un peu trop tard.

Pour des exemples d'Ajax : www.wd-creation.fr/V2/
(site encore en developpement ).

www.wd-creation.fr

Rapporter au modérateur

Re:Tab reseaux sociaux bord de page
« Répondre #9 sur: le 11-10-2010 a 14:38:07 »

Pad
Modérateur Global

Hors-Ligne

Sexe: Male

Messages: 1391

Parfait ! bien joué... par contre à mon avis, niveau utilisation il faudrait peut-être permettre d'ouvrir le bloc aussi en cliquant sur la bande noire et pas que sur le mini plus...

Rapporter au modérateur

Webdéveloppeur / Webdesigner Indépendant
http://vincentdapp.fr/
SIRET 517 691 408 00028

Re:[Résolu] Tab reseaux sociaux bord de page
« Répondre #10 sur: le 11-10-2010 a 20:03:48 »

ludozme
Membre récent

Hors-Ligne

Messages: 6

Oui Pad, je peux que je m'y pencherais ce week end quand j'aurais un peu de temps
.
@wd-creation : j'ai essayé de faire au plus simple dans un premier temps, je verrais par la suite si je peux bidouiller un truc en JQuery

Rapporter au modérateur