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.

Improve this question
1
  • I told you add the result of markup rendering !!!! JS?!!!! Drupal Theme engine is twig, I suggest you have look at twig.sensiolabs.org.
    – Yuseferi
    Mar 17, 2017 at 6:41

1 Answer 1

Reset to default
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
8
  • 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, 2017 at 13:40
  • no it does not work --- the page keeps reloading if i click one second div images.
    – The Naga Tanker
    Mar 17, 2017 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)
    – Yuseferi
    Mar 17, 2017 at 5:46
  • i did its as you said -- ill check again
    – The Naga Tanker
    Mar 17, 2017 at 6:33
  • @TheNagaTanker for better debugging add Markup output of that section to the question.
    – Yuseferi
    Mar 17, 2017 at 6:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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