11545 sujets

JavaScript, DOM et API Web HTML5

[Résolu] hide/show div, avec effet de glissement le tout accessible

Bonjour à tous et à toutes,

Je sais que ceci ne se demande vraiment pas içi, mais je vais essayer quand même Smiley langue

Je suis vraiment nul avec le javascript, j'ai vraiment du mal à le comprendre.

Mais j'ai compris quelques règles concernant l'accessibilité et le javascript. C'est compatible Smiley lol

En fait, je voudrais faire en javascript un hide/show (montrer/cacher) de div (chaque div sur la page possède sa propre id).

J'ai essayer quelques script trouver sur ce forum et sur google, mais je n'ai pas encore réussi à avoir ce que je souhaitais exactement.

En fait, le javascript servirais à :

- Créer le lien sur une image pour montrer/cacher la div du dessous.
- Afficher/Cacher la div qui a sa propre id.
- Tout cela avec un effet de glissement car c'est très web 1.04 !

Donc pour afficher masquer une div dans les normes, j'ai trouvé ce script qui fonctionne très bien.

Mais le lien est crée manuellement, est je ne sais absolument pas le faire en javascript.

Pour le javascript de glissement, j'ai vu quelques chose comme ceci. Mais ce n'est pas du tout accessible si on n'a pas le javascript d'actif (ca reste cacher).

Alors, que dois-je faire, me résilier à abandonner mon idée, ou me mettre vraiment au javascript, ou puis-je compter sur votre aide ?

Dans tout les cas, merci de m'avoir au moins lu Smiley ravi
Modifié par Super_baloo8 (20 Apr 2007 - 12:57)
Merci pour ce lien, j'utilisais déjà leur librairie (c'est bien ça ?), celle qui est compressé ou je ne comprends rien lol, pour faire un affichages des photos. (magnifique d'ailleurs).

Je vais voir si je peux appronfondir ceci. Merci
Déjà un petit simple pour comprendre le fonctionne de jquery et sa fonction hide/show et toggle

Maintenant je vais chercher à faire fonctione le slide, puis il ne me manquera plus que la création de lien en javascript sur les images.

Voilà le tuto pour le slide
Modifié par Super_baloo8 (18 Apr 2007 - 00:49)
Nikel, j'ai pu le mettre sur mon site, par contre, ce n'est pas encore ça niveau accessibilité ce que je me souci beaucoup.

Voici la page ou les scripts sont actifs.

Si on est valide des mains, pas de souci, on clique. Mais si la personne n'est pas valide ou à un ordinateur ou le seul port qui fonctionne est un ps2 ou est brancher uniquement un clavier ? ( Smiley lol c'est moi Smiley lol )

Il faudrais que je puisse créer des liens avec le javascript, mais comment faire... Là je sèche (encore une fois pfiou).

J'ai encore besoin de vous (je n'arrête pas en ce moment ... si seulement je pouvais m'arrêter lol).


Ce qui reste à faire :

- Créer des liens avec le javascript sur les images contenu dans un h2.
- Créer un texte juste après la div#contenu en javascript aussi.

Yes Smiley lol

Si nous y arriverons, je promet d'écrire un tutorial en exposant les sources dans la partie adéquate de ce forum !
Re à tous,

J'ai essayé de trouver un petit script qui me permettrais d'écrire du texte en javascript et créer des liens autour d'éléments html sans succès.

Peut être que ce script n'existe pas. Je continue mes recherches, mais si vous savez où m'orienté comme Thanh, merci.

Edit : Je viens d'essayer ceci, sans succès. Comment faire pour réecrire le résultat ?
Modifié par Super_baloo8 (19 Apr 2007 - 18:29)
J'ai trouvé comment écrire tout simplement du texte en javascript, il suffit de :

<script type="text/javascript">
//<![CDATA[
document.write("<p>Pour afficher le contenu des articles de presses, cliquez sur chaque logo.</p>")
//]]>
</script>


Par contre, je continue à chercher pour créer automatiquement des liens autour des balise html <h2> du genre :

<h2><a href="#" >mon texte</h2>
J'ai trouver une solution, mais qui est très lourde à mettre en place :

<h2>
 
<scrip type="text/javascript">
//<![CDATA[
document.write("<a href='#'>");
//]]>
</script>
 
<img src="source.jpg" alt="logo source" />
 
<scrip type="text/javascript">
//<![CDATA[
document.write("</a>");
//]]>
</script>
 
</h2>


Existe t'il un moyen de simplifier ceci svp ?
Hello,

Pourquoi ne pas rajouter les liens autour des images directement dans le code HTML de base et appliquer ta fonction d'ouverture javascript au clic sur ces liens plutot qu'au clic sur l'image?

Je m'explique :

Tu remplaces les :
<h2><img src="/images/aides.gif" alt="AIDES, Association de Lutte Contre Le SIDA" /></h2>

par
<h2><a href="#aides" title="AIDES, Association de Lutte Contre Le Sida"><img src="/images/aides.gif" alt="AIDES, Association de Lutte Contre Le SIDA" /></a></h2>

(La valeur du href n'a pas "vraiment" d'importance dans le script mais le mettre vers l'id du bloc à ouvrir est toujours mieux)

Puis tu modifie ta fonction javascript pour qu'elle cible les liens plutot que les images 
$(document).ready(function() {
  $('div#contenu:eq(0)> div').hide();
  $('div#contenu:eq(0)> h2 a').click(function() {
	$(this.parentNode).next().slideToggle('normal'); 
	return false;
  });
});

(J'ai remplacé this par this.parentNode, ciblé le a dans le h2 et ajouté un return false; pour que le lien ne soit pas suivi)

En espérant avoir compris ton problème ^^
Hi Tymlis !

Je ne souhaite pas rajouter de lien dans le html, pour un raison simple, le lien html n'a rien à faire là si le javascript est désactivé. (comme le texte sur la page qui dis de cliquez sur les image pour afficher le contenu).

Si il n'existe pas de solution simple pour effectuer le rajout de lien sur le texte des h2, je passerais par l'ajout de lien directement dans le html.

En tout cas, merci pour ton aide Smiley cligne
Super_baloo8 a écrit :
Je ne souhaite pas rajouter de lien dans le html, pour un raison simple, le lien html n'a rien à faire là si le javascript est désactivé.


Hmm, ca se discute Smiley langue
Je ne dirais pas qu'il n'a rien à faire là, c'est quand même un lien sur un titre qui emmene au clic vers le texte en rapport avec ce titre, ca me parait pas "si" inutile ^^

Imagine que j'ai javascript désactivé, que je veuille filer le lien du texte descriptif de AIDES à un ami, je clique sur le lien, je copie l'url et j'envoie ça à mon pote.
Il la colle dans son browser et ca l'emmene direct dans la page au niveau du texte (bon ok, si lui il a javascript d'activé, il verra pas grand chose...)

Enfin tout ça pour dire que ca ne me semble pas vraiment de la pollution de code ^^

P.S : D'ailleurs en parlant de ça, pourquoi ne pas remplacer tes images des titres par les mêmes mais en CSS, genre avec une background-image ? Smiley cligne
Oui, finalement, je rejoins ton avis Smiley cligne

Je vais pouvoir passer à autre chose, mais avant je vais écrire un petit script dans la partie script du forum pour ceux qui en aurais besoin.

Pour les images en background, je ne les mettrais pas, pour une simple raison, ce site est un site communautaire, si je commence à devoir tout rentrer au fur et a mesure dans la css, je suis cuit Smiley lol

"Tymlis" a écrit :
bon ok, si lui il a javascript d'activé, il verra pas grand chose...)


Tu penses qu'il faudrais que je mette une sorte de teaser dessus ?
Tu pourrai modifier ton script de telle façon qu'au chargement de la page il checke l'adresse de la page (document.location.href), vérifie s'il y a ou nom un #trucmuche et si oui faire ouvrir le div qui va avec
Je voudrais bien le faire, mais j'en suis incapable. Le javascript est un langage que je ne comprends vraiment pas. :s
ca vaut peut-être pas le coup alors ^^
Vu que ca ne sera que pour les gens qui n'ont pas javascript qui donnent le lien à ceux qui l'ont... cas assez rare quand même, je pense que c'est pas la peine de se faire des cheveux blancs pour ça Smiley smile
Sujet clos
Aller à