0

I have a content type with field_slides and I want to use it on multiple region in the same page. its a slide show using light gallery, at mobile view I want to hide the first div and show it on the second one.

<body>
<div class="first-div"> {{content.slides}} </div>
<div class="second-div">{{content.slides}} </div>
</body>

The issue is the slides works fine on the first div but if i try to open it on the second div it keeps scrolling to the top ( first div )/reloading the page sometimes. However if I removed the region from the first div it works fine on the second div, I want to have it working on both the divs. Is this possible ?? please help

I also tried this

<script type="text/javascript">

jQuery(document).ready(function() {
  if (($(window).width() < 701 )) {
    $(".first-div").empty();
    $(".second-div").append( "{{content.slides}}" );
   }
  else {
    $(".first-div").append( "{{content.slides}}" );
    $(".second-div").empty();
  }
});
</script>

Its not working either ---

Here is the actual twig template

{% set slider2 = content.content_2_project %}
   <body>
      <div id="fullpage">
        <div class="section">
          <div class="portfolio-section1">
            <div class="port-top">
              {{content.content_1_project}}
              {{content.content_1_punch}}
          </div>
        </div>
      </div>

        <div class="section">
          <div class="portfolio-section2">
              <div class="port-left">
                <div class="port-left-inner">
                  {{content.content_2_body}}
                  {{content.content_2_body_details}}
                </div>
              </div>
              <div class="port-right">
                <div class="port-right-slide-container">
                    {{content.content_2_project}}
                </div>
              </div>
          </div>
        </div>
        <div class="section mobile-section">
          <div class="port-mob-slide-container">
                {{ slider2 }}
          </div>
        </div>
      </div>
    </body>

i'm using Fullpage.js on the drupal 8 site.

  • I told you add the result of markup rendering !!!! JS?!!!! Drupal Theme engine is twig, I suggest you have look at twig.sensiolabs.org. – Yusef Mar 17 '17 at 6:41
0

Try this tricky method

{% set slider2 =content.slides %}
<body>
<div class="first-div"> {{content.slides}} </div>
<div class="second-div">{{slider2}} </div>
</body>
| improve this answer | |
  • thanks ill try tomorrow now --- ill let you know if it work ... ill try removing div contents with jQuery too... – The Naga Tanker Mar 16 '17 at 13:40
  • no it does not work --- the page keeps reloading if i click one second div images. – The Naga Tanker Mar 17 '17 at 5:08
  • @TheNagaTanker it's seems strange, I do this trick several times on my project, is this solution render slider field on second-div? (with getting help of inspect of broswer check it's markup) – Yusef Mar 17 '17 at 5:46
  • i did its as you said -- ill check again – The Naga Tanker Mar 17 '17 at 6:33
  • @TheNagaTanker for better debugging add Markup output of that section to the question. – Yusef Mar 17 '17 at 6:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.