Consultez la formation SEO spéciale Wordpress
par WebRankInfo / Ranking Metrics

Messages: 160

Enregistré le: 28 Avr 2004

Message le Mar Juil 04, 2006 16:13

bonjour à tous,

connaissez vous la méthode utilisée pour afficher le menu "Actualités / Sports / coupe du monde" de la colone du milieu sur le nouveau site de yahoo http://fr.yahoo.com/ qui permet d'afficher du contenu sans recharger la page : css + javascript ?

j'ai jeté un coup d'oeil au code source qui est tres tres long alors si quelqu'un avait une adresse de script à me proposer, ça m'arrangerait bien ;-)

d'avance merci
Haut
28 Réponses
Messages: 15815

Enregistré le: 23 Déc 2003

Message le Mar Juil 04, 2006 16:17

sans regarder je vais dire ... AJAX ? :)
cherche des infos sur l objet xmlhttprequest
Haut
Messages: 160

Enregistré le: 28 Avr 2004

Message le Mar Juil 04, 2006 16:43

ouh la ! C'est la que ça se complique. Va falloir comprendre ce qu'est ajax et comment fonctionne la bete (moi je me suis arrété à l'asp !). il me semble qu'il y des infos sur WRI, je vais déjà voir ça... merci en tout cas pour ta réponse
Haut
Messages: 160

Enregistré le: 28 Avr 2004

Message le Mar Juil 04, 2006 17:19

pour vous tenir informé, j'ai trouvé une solution en CSS et javascript (pas top pour le référencement :( ) mais bien plus rapide à mettre en place et tout aussi joli grace à un bon CSS.
Haut
Messages: 259

Enregistré le: 31 Déc 2004

Message le Mar Juil 04, 2006 17:54

criba a écrit:bonjour à tous,

connaissez vous la méthode utilisée pour afficher le menu "Actualités / Sports / coupe du monde" de la colone du milieu sur le nouveau site de yahoo http://fr.yahoo.com/ qui permet d'afficher du contenu sans recharger la page : css + javascript ?

j'ai jeté un coup d'oeil au code source qui est tres tres long alors si quelqu'un avait une adresse de script à me proposer, ça m'arrangerait bien ;-)

d'avance merci


un menu comme ça tu le fais en 100% CSS et 0% Javascript / Ajax ce que tu veux.
Haut
Messages: 259

Enregistré le: 31 Déc 2004

Message le Mar Juil 04, 2006 17:55

e-kiwi a écrit:sans regarder je vais dire ... AJAX ? :)
cherche des infos sur l objet xmlhttprequest


des fois faut regarder !
Haut
Messages: 194

Enregistré le: 24 Juin 2003

Message le Mar Juil 04, 2006 18:25

ca nous donne pas la solution tout cela lol
Haut
Messages: 259

Enregistré le: 31 Déc 2004

Message le Mar Juil 04, 2006 19:10

EDIT : je rajoute du BBCode


[mode Egoiste Et Humour Pas Drole]on sait garder les bonnes sources pour nous.
un peu comme les scripts multi-blogs ou d'autres trucs du genre. y'a qq mois j'aurais mis directement le code sur le forum, aujourd'hui je suis un peu plus " misanthrope " mais deja je precise que c'est possible donc c'est cool, non ?[/mode Egoiste Et Humour Pas Drole]
Modifié en dernier par etrusco le Mar Juil 04, 2006 22:44, modifié 1 fois.
Haut
Messages: 937

Enregistré le: 21 Mar 2004

Message le Mar Juil 04, 2006 19:31

j'attend avec impatience que tu montres cette solution sans une once de javascript, qui donne le même effet, parce que j'ai un sérieux doute :)
Compatible IE je suppose ? :lol:
Haut
Messages: 15815

Enregistré le: 23 Déc 2003

Message le Mar Juil 04, 2006 20:54

etrusco, il vient sur un forum surtout pas pour aider les gens, juste pour dire qu'il pourrait. retenez le pour quand il posera une question, on lui dira qu'on a la reponse
Haut
Messages: 9

Enregistré le: 4 Juil 2006

Message le Mar Juil 04, 2006 21:06

C'est pas possible sans un bout de Javascript.

En même temps poser des questions de développement sur Webrankinfo c'est comme essayé de d'installer MSN Messenger sur linux...
Haut
Messages: 1564

Enregistré le: 5 Mar 2006

Message le Mar Juil 04, 2006 21:42

Quoi, ça marche pas?


:D
Haut
Messages: 259

Enregistré le: 31 Déc 2004

Message le Mar Juil 04, 2006 22:31

e-kiwi a écrit:etrusco, il vient sur un forum surtout pas pour aider les gens, juste pour dire qu'il pourrait. retenez le pour quand il posera une question, on lui dira qu'on a la reponse


ça marche !
Haut
Messages: 937

Enregistré le: 21 Mar 2004

Message le Mar Juil 04, 2006 22:36

Explique ne serait-ce qu'un peu la technique pour faire changer un contenu suite au clic en css...
Haut
Messages: 259

Enregistré le: 31 Déc 2004

Message le Mar Juil 04, 2006 22:43

disons que tu a plusieurs etat pour un lien

hover active visited

---------------------EDIT

en jouant avec des <span> ( display : none etc ) des balises lien ( a ) en position relative et les proprietes communes a IE FireFox ( a savoir donc les etats hover active visited ) etc.... ben tu peux obtenir un menu comme le menu dont on parle ici.

---------------------Fin EDIT

bon c'est sur que c'est pas non plus aussi simple a mettre en pratique et a exploiter que avec javascript et ses " onclik " etc...



j'ai pas d'exemple précis sous la main dans l'immédiat car il faudrait que je le code ( et c'est pas evident car c'est du sur mesure et que voila... ) mais en gros il faudrait definir un conteneur global, positionner dedans les liens et pour chaque lien ( positionné donc en relavive ) lui attribuer un span ( qui est donc stylé en css pour ressembler à un bloc, à un cadre à ce que tu veux ) rendu invisible par le display:none. Le lien prend l'etat a:active au moment du click de la souris, donc avec un a:active span tu rétablis la visibilité de ton span initialement en display:none mais le soucis c'est de jouer sur les z-index pour que chaque click sur les autre liens viennent cacher le <span> précedemment affiché.
voila en gros pour résumer, j'ai jamais dit que c'etait facile, j'ai dis que c'etait possible en CSS et je donne je crois qq pistes de reflexion qd meme, non ?




---http://www.cssplay.co.uk/

sur ce site, par exemple, il y'a des pistes de reflexion pour obtenir de tels effets en css
Modifié en dernier par etrusco le Mar Juil 04, 2006 22:59, modifié 1 fois.
Haut
Messages: 937

Enregistré le: 21 Mar 2004

Message le Mar Juil 04, 2006 22:52

et quel rapport avec un clic ? :)
Un menu comme ça, c'est faisable au survol, là je suis d'accord :)
Haut
Messages: 259

Enregistré le: 31 Déc 2004

Message le Mar Juil 04, 2006 23:03

Phobos a écrit:et quel rapport avec un clic ? :)
Un menu comme ça, c'est faisable au survol, là je suis d'accord :)


j'ai edité mon message d'avant :
le a:active correspond au click ( sauf si je me trompe ) puisque un lien prend l'etat " active " quand on clicke dessus....

et je rajouterais a mon message precedent que l'etat visited peut aussi servir a cacher les <span>...

enfin bref, je voulais juste dire que c'est possible en CSS mais que ça demande de la rigueur, beaucoup de rigueur....
Haut
Messages: 259

Enregistré le: 31 Déc 2004

Message le Mar Juil 04, 2006 23:09

criba a écrit:bonjour à tous,

connaissez vous la méthode utilisée pour afficher le menu "Actualités / Sports / coupe du monde" de la colone du milieu sur le nouveau site de yahoo http://fr.yahoo.com/ qui permet d'afficher du contenu sans recharger la page : css + javascript ?

j'ai jeté un coup d'oeil au code source qui est tres tres long alors si quelqu'un avait une adresse de script à me proposer, ça m'arrangerait bien ;-)

d'avance merci


meme si je suis à l'origine du derapage incontrole de ce topic ( hin hin hin hi hi hi ===>>>> Désolé je sors ), voici un lien vers ( que j'ai utilisé pour un de mes sites mais pas celui de mon www ) un script sympa javascript/CSS qui te permettra de facilement mettre en oeuvre ce que tu demande et qui n'a pas un rendu trop degeu si javascript est aux alouettes et qui en plus est valide XHTML.

------http://webfx.eae.net/dhtml/tabpane/tabpane.html
Haut
Messages: 937

Enregistré le: 21 Mar 2004

Message le Mar Juil 04, 2006 23:11

un lien est active lorsqu'on clique dessus mais ne le reste pas après le clic, active est l'état entre le moment où on appuie et celui où on relache ;)

Merci pour le lien, c'est sympa quand même, même si javascript javascript ;)
Haut
Messages: 259

Enregistré le: 31 Déc 2004

Message le Mar Juil 04, 2006 23:25

Phobos a écrit:un lien est active lorsqu'on clique dessus mais ne le reste pas après le clic, active est l'état entre le moment où on appuie et celui où on relache ;)

Merci pour le lien, c'est sympa quand même, même si javascript javascript ;)


de rien,
si j'ai le temps, j'ecrirais un petit exemple CSS mais c'est pas un engagement ni une promesse...

allez a plus !
Haut
Messages: 975

Enregistré le: 3 Nov 2004

Message le Mer Juil 05, 2006 9:51

Tout ca pour dire qu'il suffit de 3 divs, 3 liens
Les 3 divs sont superposés avec 3 id différents.
Après dans les attributs des liens un truc du genre : onClick="javascript:document.getById('id_div_1').display = 'visible';"

Je sais pas trop si ca marcherait, je suis pas trop javascript ;) Mais c'est dans l'idée ... Pas besoin de se prendre la tête avec CSS...
Haut
Messages: 160

Enregistré le: 28 Avr 2004

Message le Mer Juil 05, 2006 10:50

je ne pensais pas qu'un topic comme celui-ci déchenerait autant les passions...
Je vous remercie pour les pistes que vous m'avez données et notamment le lien d'etrusco que je vais étudier.
PS : je sais bien que WRI n'est pas un forum de développement mais si quelqu'un a une solution simple et toute faite, je suis preneur...(ça coute rien de demander ;-) )
Haut
Messages: 937

Enregistré le: 21 Mar 2004

Message le Mer Juil 05, 2006 13:21

mowmow, sans te prendre la tête avec les CSS tes divs tu les superpose comment ? :)
Haut
Messages: 1117

Enregistré le: 12 Nov 2003

Message le Mer Juil 05, 2006 15:38

il me semble qu'il ya un tuto à propos de ce genre de trucs sur alsacreation
Haut
Messages: 975

Enregistré le: 3 Nov 2004

Message le Mer Juil 05, 2006 15:45

Phobos a écrit:mowmow, sans te prendre la tête avec les CSS tes divs tu les superpose comment ? :)


Lol heu, position absolute ? ^^
Haut
Messages: 937

Enregistré le: 21 Mar 2004

Message le Mer Juil 05, 2006 15:53

c'est pas du css ça ? :mrgreen:
Haut
Messages: 730

Enregistré le: 11 Avr 2005

Message le Mer Sep 13, 2006 14:34

et hop sans javascript

http://test.2imahl.fr/tabs.php
Haut
Messages: 730

Enregistré le: 11 Avr 2005

Message le Mer Sep 13, 2006 14:37

(au temps pour moi, ça ne semble pas bien marcher sous internet explorer en l'état.
mais je suis sûr que c'est possible, puisque ceci fonctionne sous ie. à creuser)

edit : bon je lâche l'affaire, si quelqu'un trouve... marre de développer pour un browser handicapé.
Haut
Messages: 730

Enregistré le: 11 Avr 2005

Message le Mer Sep 13, 2006 15:16

je me re-réponds à moi même

c'est un peu le même genre d'effet ici :
http://www.2imahl.fr/gallery-actuel-mobilier.htm
(également piqué à cssplay, et là, ça marche sur explorer)
Haut

Formation recommandée sur ce thème :

Formation SEO spéciale Wordpress : apprenez à optimiser le référencement naturel d'un site fait avec Wordpress... Formation Ranking Metrics animée par un expert SEO / Wordpress.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.