Possibilité de mettre une news slidebox

par kitelnewbba Jeu 18 Avr 2013 - 9:15

Hellow! Comment allez-vous? Moi je pète la forme :3

EXPLICATIONS : Est-il possible de mettre une news slidebox, du genre que quand on passe la curseur sur le bouton, il défile avec le contenu de la news dedans.
C'est exactement le même principe que le widget facebook slide likebox, mais personnaliser son contenu.
Voiçi le widget facebook : [Javascript]

Code:: document.write("<script type=\"text\/javascript\">"); document.write(" \/*<![CDATA[*\/"); document.write(" jQuery(document).ready(function() {jQuery(\".abtlikebox\").hover(function() {jQuery(this).stop().animate({right: \"0\"}, \"medium\");}, function() {jQuery(this).stop().animate({right: \"-250\"}, \"medium\");}, 500);});"); document.write(" \/*]]>*\/"); document.write(" <\/script>"); document.write(" <style type=\"text\/css\">"); document.write(" .abtlikebox{background: url(\"http:\/\/1.bp.blogspot.com\/-yUI3Og8Esko\/TyywzMTqmsI\/AAAAAAAABMs\/z-tTK2uUS-0\/s1600\/Facebook.png\") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 33px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}"); document.write(".abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3C95D9; background:#fafafa;}"); document.write(".abtlikebox span{bottom: 4px;font: 8px \"lucida grande\",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}"); document.write(" .abtlikebox span a{color: gray;text-decoration:none;}"); document.write(" .abtlikebox span a:hover{text-decoration:underline;}"); document.write("}"); document.write("<\/style>"); document.write(" <div class=\"abtlikebox\" style=\"\">"); document.write(" <div>"); document.write(" <iframe src=\"http:\/\/www.facebook.com\/plugins\/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fpixelgraphisme?fref=ts&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270\" scrolling=\"no\" frameborder=\"0\" scrolling=\"no\" style=\"border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;\"><\/iframe><span>Widget by :<a href=\"http:\/\/www.AllBloggingTips.com\"> Kitel for HabbStyle<\/a><\/span>"); document.write(" <\/div>"); document.write(" <\/div>");

Avec cela, serait-il possible de modifier son contenu (mettre notre propre texte ou image)?
PS : je sais comment changer couleur des contours + images juste le contenu à l'intérieur personnalisé!

Merci et bonne chance d'avance ! :p

par kitelnewbba Dim 21 Avr 2013 - 8:46

par manbcr Dim 21 Avr 2013 - 9:32

Mmmm... ouais je voudrais aussi savoir !

par mambo54321 Dim 21 Avr 2013 - 15:58

J'ai tester ton code et rien ne se passe. Pourrait-tu me donner une image de ce qui arrive si tu passe le curseur et se qui arrive si tu ne le passe pas. SVP

(Je n'ai pas de facebook)

par manbcr Lun 22 Avr 2013 - 4:40

mambo54321 a écrit:J'ai tester ton code et rien ne se passe. Pourrait-tu me donner une image de ce qui arrive si tu passe le curseur et se qui arrive si tu ne le passe pas. SVP

(Je n'ai pas de facebook)

En faite sa te fait un truc du genre : y a écrit facebook à droite du forum comme une Cb latérale sauf que la t'as pas besoin de cliquer dessus t'as juste à mettre le curseur dessus et tadaa... t'as le gadget qui apparaît sauf que quand je l'ai testé y avait rien à l'intérieur :p

par kitelnewbba Lun 22 Avr 2013 - 8:39

Oui voilà, il a tout dit ^^

par Adam_sfp Lun 22 Avr 2013 - 9:49

Bonjour

regardez ici
https://forum.forumactif.com/t348644-gadjet-flottant-fans-facebook

Vous pouvez remplacez l'iframe facebook par autres choses...

Cordialement.

par manbcr Lun 22 Avr 2013 - 11:58

Merci pour le lien mais y a un truc j'ai pas compris :

Adam_sfp a écrit:et la partie HTML
A mettre en fonction de l'endroit ou vous voulez que slide apparaisse.

En page d'accueil, dans un widget même déjà existant du portail, via le template overall_header après la balise <body>

Code:
<div class="w2bslikebox" style=""><div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/forumactif& width=245&colorscheme=light&show_faces=true& connections=12&stream=false&header=false&height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://allbestuto.blogspot.com/2012/07/comment-ajouter-le-gadget-flottant-fans.html" target='_blank'>Avoir Ce Gadget</a></span></div></div>

Je ne sais pas où le mettre ni comment le faire !?!? J'ai testé avec le widget sur le portail et sa fonctionne mais quand je le rajoute sur le forum via le widget sa déforme le forum donc c'est pas bon... c'est pour cela que je voudrais savoir l'autre méthode pour l'installer... merci

Edit : Non c'est bon j'ai pris le premier code javascript de kitelnewbba qui est plus simple à installer Mr. Green

par kitelnewbba Lun 22 Avr 2013 - 13:40

En clair, sur mon code ci-dessus, pour changer son contenu je dois modifié ce qui se trouve entre les balises <iframe></iframe>

Donc ça :

Code:: <iframe src=\"http:\/\/www.facebook.com\/plugins\/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fpixelgraphisme?fref=ts&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270\" scrolling=\"no\" frameborder=\"0\" scrolling=\"no\" style=\"border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;\"><\/iframe>

?
Merci d'vos réponses ! ^^

par manbcr Mar 23 Avr 2013 - 1:02

Ouais peut-être bien... reflexion

Tu l'as essayé ? Franchement j'y connais rien en code... ^^

par kitelnewbba Mar 23 Avr 2013 - 8:56

j'vais voir, je t'en dirais des nouvelles x)

EDIT : Franchement je n'arrive pas à faire cela.. désolé, une autre réponse peut-être?

par Adam_sfp Mar 23 Avr 2013 - 10:20

Bonjour

Vous pouvez essayer de remplacer

Code:: <iframe src=\"http:\/\/www.facebook.com\/plugins\/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fpixelgraphisme?fref=ts&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270\" scrolling=\"no\" frameborder=\"0\" scrolling=\"no\" style=\"border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;\"><\/iframe>

Par

Code:: <div class="content">Contenu</div>

En mettant ce que vous voulez mettre à la place de Contenu.

Cordialement.

par manbcr Mer 24 Avr 2013 - 4:47

Adam_sfp a écrit:Bonjour

Code:
<div class="content">Contenu</div>

En mettant ce que vous voulez mettre à la place de Contenu.

Cordialement.

Et on met sa où ? et quoi dedans ? un code javascript ? html ? merci et désolé pour mon noobisme Embarassed

par kitelnewbba Mer 24 Avr 2013 - 8:45

Un contenu en HTML, en tout cas , moi j'ai essayé, mais aucun résultat, au contraire, l'image de facebook n'est plus présente..plus de slide, plus rien x)

par Adam_sfp Mer 24 Avr 2013 - 8:49

Bonjour

Quel code avez vous essayé?

Cordialement.

par kitelnewbba Mer 24 Avr 2013 - 10:15

Code:: document.write("<script type="text\/javascript">"); document.write(" \/*<![CDATA[*\/"); document.write(" jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});"); document.write(" \/*]]>*\/"); document.write(" <\/script>"); document.write(" <style type="text\/css">"); document.write(" .abtlikebox{background: url("http:\/\/1.bp.blogspot.com\/-yUI3Og8Esko\/TyywzMTqmsI\/AAAAAAAABMs\/z-tTK2uUS-0\/s1600\/Facebook.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 33px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}"); document.write(".abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3C95D9; background:#fafafa;}"); document.write(".abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}"); document.write(" .abtlikebox span a{color: gray;text-decoration:none;}"); document.write(" .abtlikebox span a:hover{text-decoration:underline;}"); document.write("}"); document.write("<\/style>"); document.write(" <div class="abtlikebox" style="">"); document.write(" <div>"); document.write(" <div class="content">Test du contenu</div><span>Widget by :<a href="http:\/\/www.AllBloggingTips.com"> Kitel for HabbStyle<\/a><\/span>"); document.write(" <\/div>"); document.write(" <\/div>");

J'ai remplacé ça :<iframe src="http:\/\/www.facebook.com\/plugins\/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fpixelgraphisme?fref=ts&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"><\/iframe>

par ça : <div class="content">Test du contenu</div>

par Adam_sfp Mer 24 Avr 2013 - 11:03

Bonjour

Oops désolé si vous utilisez le script de cette manière.

"En reprenant une astuce de EA
Pour ce qui est du contenu à ajouter, il doit s'agir de texte ou html sous la forme de chaîne javascript, si vous ne savez pas comment en faire une, cet outil le permet : http://www.maonyn.com/h16-

Donc si on met ceci dans ce générateur

Code:: <div class="content">Contenu</div>

on obtient

Code:: <div class=\"content\">Test du contenu</div>

comme ceci cela devrait fonctionner.

Sinon vous pouvez séparer les différents éléments JS CSS HTML comme cet exemple
http://jsfiddle.net/adam_sfp/MKkjY/1/

Cordialement.

par kitelnewbba Mer 24 Avr 2013 - 19:30

J'essayerais ceci demain, je rentre du sport je suis K.O ^^

par kitelnewbba Jeu 25 Avr 2013 - 12:48

Bonjour, j'ai essayé votre code, c'est pareil, on ne voit plus le widget, que dalle x) Par contre j'ai laissé tel quel le *Test de votre contenu*, devrais-je y insérer un contenu HTML pour que cela s'active et soit visible?

par Adam_sfp Jeu 25 Avr 2013 - 14:13

Bonjour

Quel code avez vous essayé?

cordialement.

par Loü Jeu 25 Avr 2013 - 15:54

Pourquoi ne pas utiliser un simple volet glissant ?

Tu mets ça où tu veux sur ta PA ou tes Templates :

Code:: <div class="dessous"> <div class="dessus"></div> Ton contenu (qui peut aussi être du texte) </div>

Et puis ensuite tu personnalises ce code dans ta fiche css :

Code:: /* Bloc principal */ .dessous { position: relative; /* important ! */ overflow: hidden; /* cache tout ce qui dépasse du bloc. Si vous voulez que votre volet dépasse, retirez cette ligne */ width: 250px; /* largeur du bloc */ height: 150px; /* hauteur du bloc */ background: red; /* couleur de fond */ } /* Bloc de recouvrement */ .dessus{ position: absolute; /* positionnement absolu (important) */ top: 0; /* (important) */ left: 0; /* (important) */ width: 250px; /* largeur du bloc (identique au bloc principal) */ height: 150px; /* hauteur du bloc (identique au bloc principal) */ background: green; /* couleur de fond */ /* réglage de la transition */ -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear; } /* Changement au survol */ .dessous:hover > .dessus { left: -250px; /* le bloc se décalera vers la gauche de 250px; (largeur du bloc) */ }

Je n'ai pas mieux mais l'effet est à peu près le même non ? (à moins que j'ai mal compris).

par manbcr Ven 26 Avr 2013 - 8:47

Salut ! On ne peut pas mettre sa dans les code javascript ? Je viens de tester mais y a rien... O_o donc j'en déduis qu'il faut mettre dans les templates ou Page d'accueil ! ::betise::

par kitelnewbba Ven 26 Avr 2013 - 9:15

- Lou, dans quel template dois-je placé ton code HTML?
Index_body?

- Adam_sfp, ce code-là (avec un texte d'y insérer sans code HTML)

Code:: document.write("<script type="text\/javascript">"); document.write(" \/*<![CDATA[*\/"); document.write(" jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});"); document.write(" \/*]]>*\/"); document.write(" <\/script>"); document.write(" <style type="text\/css">"); document.write(" .abtlikebox{background: url("http:\/\/1.bp.blogspot.com\/-yUI3Og8Esko\/TyywzMTqmsI\/AAAAAAAABMs\/z-tTK2uUS-0\/s1600\/Facebook.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 33px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}"); document.write(".abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3C95D9; background:#fafafa;}"); document.write(".abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}"); document.write(" .abtlikebox span a{color: gray;text-decoration:none;}"); document.write(" .abtlikebox span a:hover{text-decoration:underline;}"); document.write("}"); document.write("<\/style>"); document.write(" <div class="abtlikebox" style="">"); document.write(" <div>"); document.write(" <div class=\"content\">Test du contenu</div><span>Widget by :<a href="http:\/\/www.AllBloggingTips.com"> Kitel for HabbStyle<\/a><\/span>"); document.write(" <\/div>"); document.write(" <\/div>");

par Adam_sfp Ven 26 Avr 2013 - 9:46

bonjour

il y a une erreur dans votre code..
essayez ce code

Code:: document.write("<script type=\"text\/javascript\">"); document.write(" \/*<![CDATA[*\/"); document.write(" jQuery(document).ready(function() {jQuery(\".abtlikebox\").hover(function() {jQuery(this).stop().animate({right: \"0\"}, \"medium\");}, function() {jQuery(this).stop().animate({right: \"-250\"}, \"medium\");}, 500);});"); document.write(" \/*]]>*\/"); document.write(" <\/script>"); document.write(" <style type=\"text\/css\">"); document.write(" .abtlikebox{background: url(\"http:\/\/1.bp.blogspot.com\/-yUI3Og8Esko\/TyywzMTqmsI\/AAAAAAAABMs\/z-tTK2uUS-0\/s1600\/Facebook.png\") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 33px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}"); document.write(".abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3C95D9; background:#fafafa;}"); document.write(".abtlikebox span{bottom: 4px;font: 8px \"lucida grande\",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}"); document.write(" .abtlikebox span a{color: gray;text-decoration:none;}"); document.write(" .abtlikebox span a:hover{text-decoration:underline;}"); document.write("}"); document.write("<\/style>"); document.write(" <div class=\"abtlikebox\" style=\"\">"); document.write(" <div>"); document.write(" <div class=\"content\">Test du contenu</div><span>Widget by :<a href=\"http:\/\/www.AllBloggingTips.com\"> Kitel for HabbStyle<\/a><\/span>"); document.write(" <\/div>"); document.write(" <\/div>");

Cordialement.

*en l'installant de cette manière
http://jsfiddle.net/adam_sfp/MKkjY/1/

Vous avez moins de risques d'avoir des erreurs car pas besoin de passer par cet outil
http://www.maonyn.com/h16-

par kitelnewbba Ven 26 Avr 2013 - 13:27

En l'installant de votre manière, ou dois-je alors placer le HTML?
Dans le template index_body?

par Adam_sfp Ven 26 Avr 2013 - 13:46

Bonjour

Si vous placez le code en mettant les différents éléments séparément CSS Javascript et HTML

Vous pouvez mettre le html dans le template overall_header après body.

Ou en page d"accueil ,dans un widget du forum ( même déjà existant) etc...
Cordialement.

par kitelnewbba Ven 26 Avr 2013 - 13:57

J'ai testé ceci, au passage de la souris, le widget à l'air de bugé, quand il s'ouvre [1fois sur2] le fond de cette box est transparente, mais on voit le contenu.

Code HTML modifié :

Code:: <div class="w2bslikebox" style=""><div> <div class="content">widgetblalvbfdjgioesmdhgsinhogsedugs</div><span></span></div></div>

placé dans overall_header après <head>

Aperçu : http://habbstyletest.keuf.net/

par Adam_sfp Ven 26 Avr 2013 - 14:02

Bonjour

Si vous mettez ce code cela fonctionne et c'est normal que le fond soit transparent..et vous avez ces mots :widgetblalvbfdjgioesmdhgsinhogsedugs

http://jsfiddle.net/adam_sfp/MKkjY/2/
A vous de mettre en forme ce que vous voulez mettre dans ce slide...
couleur fond etc....

Cordialement.

par kitelnewbba Ven 26 Avr 2013 - 14:13

Toujours le même problème, le widget tremblote au passage de la souris.

PS : Comment changer le fond de la box [en blanc]
et mettre les bordures de 2px?

Merci Smile

par Adam_sfp Ven 26 Avr 2013 - 14:35

Bonjour

Vous pouvez faire la mise en forme via le CSS
par exemple
http://jsfiddle.net/adam_sfp/MKkjY/9/

A vous de changer rajouter ce que vous voulez....
Vous pouvez faire vos test sur cette page (enlever changer faire des tests)
http://jsfiddle.net/adam_sfp/MKkjY/9/

il faut juste cliquer sur RUN pour voir le résultat..

Cordialement.

Possibilité de mettre une news slidebox

Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox

Re: Possibilité de mettre une news slidebox