Nouveau sujet Aide

il y a 3 h
Et l'eau,

Désolé pour le temps de réponse. J'ai été beaucoup occupé et d'ailleurs, c'est pas vraiment fini. Vivement les congés ^^.

Felipe a écrit :
Bonjour,

1ère règle : ne pas s'en servir s'il n'y en a pas besoin (s'il y a des éléments natifs HTML qui font très bien l'affaire). Smiley smile C'est une boutade qui n'en est pas vraiment une. Smiley cligne

Je ne sais plus où je l'ai lu (mdn ou ici), mais j'ai vu cela. D'ailleurs suivant le W3C ton lien, il est bien stipulé cela.

Felipe a écrit :

La référence pour l'implémentation sont les Design Patterns ARIA (ce qui ne les définit pas mais les utilise en situation ; je ne répond pas trop à ta question).
J'aime beaucoup la présentation de composants par Access&Use : c'est clair, didactique, ça explique pourquoi, etc



Bien sûr avant de poster, j'ai regardé sur le net. J'ai même lu un post où tu parlais de cette fameuse page du W3C qui est très très longue. D'ailleurs en lisant un peu le début, il est préférable de ne rien faire que d'éditer de mauvais attributs. En tout cas ton lien est pas mal du tout. J'ai un peu regardé depuis. Là, ces prochains, je vais m'y atteler. Merci encore pour ton coup de pouce Smiley smile
Modifié par niuxe (24 Apr 2019 - 00:16)

Dans Accessibilité du Web · [Résolu] Attributs aria et role ainsi que les valeurs associées

il y a 3 h
Et l'eau,

je passe en coup de vent. Si tu filtres des données, ce n'est pas "post" mais "get". Ensuite, tu passes un paramètre via ton formulaire et au retour de la page, tu le récupères via le js (window.location) ou même avec ton langage serveur (Python/JS (serveur)/PHP/Ruby/etc.)

@ plus

Dans CSS et mise en forme, CSS3 · Pepin et tabs

il y a 8 h
Bonjour,

Je chereche à faire fonctionner un caroussel bootstrap sous symfony

Je pense avoir suivie correctement la procédure mais ça ne fonctionne pas.

Soit j'ai raté une étapes soit j'ai ma configuré mon code.

Voici mon code :

-Dans la balise head du fichier base.thml.twig

J'ai inclus les js dans cet ordre

<link rel="stylesheet" href="{{asset('bootstrap/css/bootstrap.min.css')}}">

    <script src="{{asset('bootstrap/js/jquery-3.4.0.min.js')}}"></script>
    <script src="{{asset('bootstrap/js/popper.min.js')}}"></script>
    <script src="{{asset('bootstrap/js/bootstrap.min.js')}}"></script>


Et Voici mon code pour carousel :


{% extends 'base.html.twig' %}

{% block body %}
    <div class="container">


   <div class="bd-example">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
                <li data-target="#myCarousel" data-slide-to="4"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="{{ asset('home/Photo1.jpg') }}" class="d-block w-100" alt="Vaisselle">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>First slide label</h5>
                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </div>
                </div>
                <div class="carousel-item active">
                    <img src="{{ asset('home/Photo2.jpg') }}" class="d-block w-100" alt="Vaisselle">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>First slide label</h5>
                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </div>
                </div>
                <div class="carousel-item active">
                    <img src="{{ asset('home/Photo3.jpg') }}" class="d-block w-100" alt="Vaisselle">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>First slide label</h5>
                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </div>
                </div>
                <div class="carousel-item active">
                    <img src="{{ asset('home/Photo4.png') }}" class="d-block w-100" alt="Vaisselle">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>First slide label</h5>
                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </div>
                </div>
                <div class="carousel-item active">
                    <img src="{{ asset('home/Photo5.jpg') }}" class="d-block w-100" alt="Vaisselle">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>First slide label</h5>
                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

    </div>

{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        $(document).ready(function() {
            $('.carousel').carousel({
                interval: 2000
            })
        });
    </script>
    <script src="{{ asset('js/home/index.js') }}"></script>
{% endblock %}

Modifié par zarm (23 Apr 2019 - 19:20)

Dans Sémantique web et HTML · Carousel bootstrap

il y a 9 h
Hello

d'après le codex de Wordpress, il suffirait d'ajouter cette fonction dans ton fichier functions.php


function modify_read_more_link() {
    return '<a class="more-link" href="' . get_permalink() . '">Your Read More Link Text</a>';
}
add_filter( 'the_content_more_link', 'modify_read_more_link' );

Dans CSS et mise en forme, CSS3 · Problème de réécriture

il y a 10 h
Dans l'onglet "Network" toutes les URLs fonctionnent elles ont un statut 200 mais dans l'onglet "Console" j'ai bien l'URL qui me pose problème. Cela provient du site http://db.onlinewebfonts.com où je prend des polices personnalisés (en woff, ttf, woff2) et dans le code où je l'appelle j'ai essayé d'ajouter https mais cela ne change rien.

Merci de votre réponse

Dans Développement web côté serveur, CMS · Mixed Content: The page at '<URL>' was loaded over HTTPS, but re

il y a 12 h
Oh, je ne connaissais pas l'existance de fadeToggle. Je vais travailler là-dessus, il est possible que ça m'aide à résoudre mon problème final en effet. Merci à toi, je vais travailler dessus et je reviens vers vous pour lock le sujet ou exprimer mon niveau d'avancement Smiley cligne

Sinon, ça ne me dérangeait pas particulièrement de modifier les classes expansion et disparition sur tous les éléments "dernier" et "avant-dernier", c'était même l'objectif. Mon véritable problème, c'est que la fonction n°2 (celle qui s'enclenche supposément au clic sur .exemple) se réenclenche après mon clic sur la croix (cf. les messages de la console sur mon message plus haut), et donc annule les modifications que j'effectue avec la fonction enclenchée au clic sur la croix.
Modifié par Myrial (23 Apr 2019 - 15:33)

Dans JavaScript, DOM et API Web HTML5 · [JQUERY] Faire disparaître des sections

il y a 12 h
Le problème dans ton code lorsque tu fais ceci : 

$('i').click(function(){
                        console.log('i');
                       $('.avant-dernier').removeClass('expansion');
                       $('.dernier').removeClass('disparition');
//J'annule l'affichage du sous-menu au clic sur la croix pour revenir à mon menu général
                    });

C'est que tu vas modifier les classes expansion et disparition sur tout les éléments avant-dernier et dernier. Peu importe où qu'ils soient dans le code. J'imagine que c'est pas ton idée.

J'ai fait un exemple au plus simple
https://codepen.io/Depassage/pen/MRqVgE

Note qu'il est aussi possible de fermer tous les autres .more avant d'ouvrir celui souhaité. J'ai l'impression que c'est ce que tu as voulu faire avec tes classes dernier et avant-dernier mais je n'en suis pas sur Smiley murf

Le principe de fadeToggle c'est de masquer l'élément quand il est affiché et vice versa. C'est plus simple car ça t'évite d'avoir à maintenir l'état de l'élément dans une variable de ce que tu veux afficher/masquer.

http://api.jquery.com/fadetoggle/
http://api.jquery.com/toggleclass/ (ou pour faire la même chose avec une class css)
Modifié par Depassage (23 Apr 2019 - 15:12)

Dans JavaScript, DOM et API Web HTML5 · [JQUERY] Faire disparaître des sections

il y a 15 h
Je n'avais pas mis le code HTML car il est assez long, mais le voici :
<div class="conteneur-buttons">



<button class="accueil-button difference b1 actif">
<p>Votre activité</p>
<svg class="svg-triangle">
  <polygon points="0,0 30,0 15,15" class="selection-triangle"/>
</svg>
<nav>



<div class="grid-parent">
<span class="exemple exemple2">
<nav class="sous-menu">
<i class="icon-home" style="color: #FF5D5D"></i>
<h3>Ce qu&rsquo;on vous propose</h3>
<ul>
<li>
<h4>Imobilier</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Visite virtuelle</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Reportages</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>
</ul>
</nav>



<div class="wp-block-media-text alignwide"><figure class="wp-block-media-text__media"><img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg" alt="" class="wp-image-12" srcset="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg 1024w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-300x200.jpg  300w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-768x512.jpg  768w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280.jpg  1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
<p class="has-large-font-size">Agent immobilier</p>
</div></div>



</span><span class="exemple exemple2">
<nav class="sous-menu">
<i class="icon-home" style="color: #FF5D5D"></i>
<h3>Ce qu&rsquo;on vous propose</h3>
<ul>
<li>
<h4 class="color-immo">Immobilier</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4 class="color-vv">Visite virtuelle</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4 class="color-reportages">Reportages</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>
</ul>
</nav>



<div class="wp-block-media-text alignwide"><figure class="wp-block-media-text__media"><img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg" alt="" class="wp-image-12" srcset="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg 1024w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-300x200.jpg  300w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-768x512.jpg  768w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280.jpg  1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
<p class="has-large-font-size">Hôtellerie et gîtes</p>
</div></div>



</span><span class="exemple exemple2">
<nav class="sous-menu">
<i class="icon-home" style="color: #FF5D5D"></i>
<h3>Ce qu&rsquo;on vous propose</h3>
<ul>
<li>
<h4>Immobilier</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Visite virtuelle</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Reportages</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>
</ul>
</nav>



<div class="wp-block-media-text alignwide"><figure class="wp-block-media-text__media"><img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg" alt="" class="wp-image-12" srcset="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg 1024w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-300x200.jpg  300w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-768x512.jpg  768w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280.jpg  1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
<p class="has-large-font-size">E-commerce</p>
</div></div>



</div>
<div class="grid-parent2">
</span><span class="exemple ligne2">
<nav class="sous-menu">
<i class="icon-home" style="color: #FF5D5D"></i>
<h3>Ce qu&rsquo;on vous propose</h3>
<ul>
<li>
<h4>Imobilier</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Visite virtuelle</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Reportages</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>
</ul>
</nav>



<div class="wp-block-media-text alignwide"><figure class="wp-block-media-text__media"><img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg" alt="" class="wp-image-12" srcset="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg 1024w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-300x200.jpg  300w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-768x512.jpg  768w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280.jpg  1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
<p class="has-large-font-size">Commerces et artisans</p>
</div></div>



</span>



<span class="exemple ligne2 avant-dernier">
<nav class="sous-menu">
<i class="icon-home" style="color: #FF5D5D"></i>
<h3>Ce qu&rsquo;on vous propose</h3>
<ul>
<li>
<h4>Imobilier</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Visite virtuelle</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Reportages</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>
</ul>
</nav>



<div class="wp-block-media-text alignwide"><figure class="wp-block-media-text__media"><img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg" alt="" class="wp-image-12" srcset="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg 1024w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-300x200.jpg  300w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-768x512.jpg  768w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280.jpg  1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
<p class="has-large-font-size">Institutions</p>
</div></div>



</span><span class="exemple exemple2">
<nav class="sous-menu">
<i class="icon-home" style="color: #FF5D5D"></i>
<h3>Ce qu&rsquo;on vous propose</h3>
<ul>
<li>
<h4>Immobilier1</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Visite virtuelle</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Reportages</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>
</ul>
</nav>



<div class="wp-block-media-text alignwide dernier"><figure class="wp-block-media-text__media"><img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg" alt="" class="wp-image-12" srcset="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg 1024w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-300x200.jpg  300w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-768x512.jpg  768w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280.jpg  1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
<p class="has-large-font-size">Lieux touristiques</p>
</div></div>



</span>



</nav>
</button>

Désolé pour l'indentation, c'est un code issu du code source je travaille avec Wordpress.

J'ai été contraint d'imbriquer mes événements car étant donné qu'ils s'appliquent à un code qui est généré par un événement préalable ils n'étaient pas fonctionnels si séparés. Concernant ce que tu me dis, je comprends l'idée mais j'ai un peu de mal à imaginer comment ce code peut fonctionner avec $(this). Aurais-tu un petit exemple à me donner ?
Merci encore d'essayer de m'aider. Je pense qu'en effet, commencer par éviter de tout imbriquer peut peut-être même résoudre le problème que je rencontre par la suite avec la croix.

Dans JavaScript, DOM et API Web HTML5 · [JQUERY] Faire disparaître des sections

25 Dernières réponses
Aller à