Discussion :

[cid5420]

Bonjour,

Je ne sais pas si je post au bon endroit, mais je dois faire un site responsive, j'utilise bootstrap, fullpage.js sur un projet symfony.

je rencontre un problème avec fullpage.js.

Dans un premier temps, j'ai une page avec un menu et plusieurs section. Dans ces sections, j'ai du contenue et des slides.
Dans mes slides, j'affiche 3 articles pour la version ecran, 2 pour la version tablette et 1 pour la version mobile

Et je pensais pouvoir utiliser les classes de bootstrap avec un visible-lg, hidden-md etc...
Mais en faisant cela, mon menu ne fonctionne plus, en effet lorsque j'affiche le code source de ma page je me retrouve avec tous les blocs qui ne devraient pas être visible. Donc ce qui fait que j'ai plusieurs foi le même id donc fullpage.js se perd complètement.

Donc comment faire pour supprimer du code en fonction de la taille de l'écran ?
j'avais pensé à faire une variable php que je rempli en js pour ensuite la renvoyer et faire des conditions en php mais je ne sais pas si ça se fait !

voici mon code côté twig:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{% extends '::base.html.twig' %}
{% block title %}{% endblock %}
{% block body %}
    {% include "BluewireHomeBundle:Includes:navbar.html.twig" %}
    <div id="fullpage">
        {% include "BluewireHomeBundle:Includes:accueil.html.twig" %}
        {% include "BluewireHomeBundle:Includes:solution.html.twig" %}
        <div class="visible-lg hidden-md hidden-xs">
            {% include "BluewireHomeBundle:Includes:techno-lg.html.twig" %}
            {% include "BluewireHomeBundle:Includes:success-lg.html.twig" %}
        </div>
        <div class="hidden-lg visible-md hidden-xs">
            {% include "BluewireHomeBundle:Includes:techno-md.html.twig" %}
            {% include "BluewireHomeBundle:Includes:success-md.html.twig" %}
        </div>
        <div class="hidden-lg hidden-md visible-xs">
            {% include "BluewireHomeBundle:Includes:techno-xs.html.twig" %}
            {% include "BluewireHomeBundle:Includes:success-xs.html.twig" %}
        </div>
        {% include "BluewireHomeBundle:Includes:contact.html.twig" %}
    </div>
{% endblock %}
{% block javascripts %}
    <script>
        $(document).ready(function(){
            $('#fullpage').fullpage({
                menu: '#top-menu',
                anchors: ['Accueil','Solutions' ,'Technologies', 'Success', 'Contact'],
                easingcss3: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
                scrollingSpeed: 900,
                slidesNavigation: true,
                responsiveWidth: 900,
                responsiveHeight: 600
            });
        });
    </script>
{% endblock %}

et voici le code techno-lg.hmtl.twig

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<section class="section" id="section2">
    <div class="container">
        <h2>{{ 'techno.titre' | trans }}</h2>
        <div class="slide" id="slide1" data-anchor="slide1">
            {% include "BluewireHomeBundle:TechList:tech1.html.twig" %}
            {% include "BluewireHomeBundle:TechList:tech2.html.twig" %}
            {% include "BluewireHomeBundle:TechList:tech3.html.twig" %}
        </div>
        <div class="slide" id="slide2" data-anchor="slide2">
            {% include "BluewireHomeBundle:TechList:tech4.html.twig" %}
            {% include "BluewireHomeBundle:TechList:tech5.html.twig" %}
        </div>
    </div>
</section>

[cid5420]

Oui il est bien importé !

Le problème n'est pas là, j'ai un conflit au niveau des id. La class hidden-lg par exemple ne supprime pas le code, donc dans le code source, j'ai 3 foi le même ID.

Tu vas me dire bah de changer les ID... Mais ceux-ci sont lié au menu donc pas possible de les changer. J'ai essayé de faire des addClass() mes éléments en fonction de screen.width et ensuite ajouter un display:none mais là encore ça ne supprime pas le code donc toujours ce conflit d'ID. Je ne sais pas je suis clair dans ma démarche !