OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Adding vertical space between html elements (divs) within the same container

  • Thread starter Thread starter lyman
  • Start date Start date
L

lyman

Guest
(Edit: as after applying the below solution I'm now able to have spaces between feed blocks on desktop view but it didn't worked on mobile view)

I have the following code and it works well by shuffling the elements within the container but the problem is that the content blocks show up close to each other with no vertical space between them.

I tried to add many tags like p and br between them to get the desired space but it caused a non arranged space so some blocks got the space and some not and sometimes it stops the shuffling at all.

So I need some way to add space between all div elements while keeping the shuffling function on.


Code:
  // Function to shuffle the order of elements within a container
  function shuffleElements(container) {
    var elements = container.children;
    for (var i = elements.length; i >= 0; i--) {
      container.appendChild(elements[Math.random() * i | 0]);
    
    }
  }

  // Wait for the page to fully load before shuffling the elements
  window.addEventListener('load', function() {
    var container = document.getElementById('your-container-id'); // Replace 'your-container-id' with the ID of the container div that holds the RSS feed divs
    shuffleElements(container);

  });

Code:
<div id="your-container-id">

<div class="fb-page" data-href="https://www.facebook.com/saudioffers6" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false">
<blockquote cite="https://www.facebook.com/saudioffers6" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/saudioffers6">‏عروض السعودية  saudi offers‏</a></blockquote>
</div>

<div class="fb-page" data-href="https://www.facebook.com/diyprocom" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false"><blockquote cite="https://www.facebook.com/diyprocom" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/diyprocom">‏‎Diy pro‎‏</a></blockquote></div>

<div class="fb-page" data-href="https://www.facebook.com/MarinaFish2019" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false"><blockquote cite="https://www.facebook.com/MarinaFish2019" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/MarinaFish2019">‏مارينا للأسماك والرخويات‏</a></blockquote></div>

<div class="fb-page" data-href="https://www.facebook.com/nursery.libya" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false"><blockquote cite="https://www.facebook.com/nursery.libya" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/nursery.libya">‏مشتل تمنهنت‏</a></blockquote></div>
</div>
<p>(Edit: as after applying the below solution I'm now able to have spaces between feed blocks on desktop view but it didn't worked on mobile view)</p>
<p>I have the following code and it works well by shuffling the elements within the container but the problem is that the content blocks show up close to each other with no vertical space between them.</p>
<p>I tried to add many tags like p and br between them to get the desired space but it caused a non arranged space so some blocks got the space and some not and sometimes it stops the shuffling at all.</p>
<p>So I need some way to add space between all div elements while keeping the shuffling function on.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> // Function to shuffle the order of elements within a container
function shuffleElements(container) {
var elements = container.children;
for (var i = elements.length; i >= 0; i--) {
container.appendChild(elements[Math.random() * i | 0]);

}
}

// Wait for the page to fully load before shuffling the elements
window.addEventListener('load', function() {
var container = document.getElementById('your-container-id'); // Replace 'your-container-id' with the ID of the container div that holds the RSS feed divs
shuffleElements(container);

});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div id="your-container-id">

<div class="fb-page" data-href="https://www.facebook.com/saudioffers6" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false">
<blockquote cite="https://www.facebook.com/saudioffers6" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/saudioffers6">‏عروض السعودية saudi offers‏</a></blockquote>
</div>

<div class="fb-page" data-href="https://www.facebook.com/diyprocom" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false"><blockquote cite="https://www.facebook.com/diyprocom" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/diyprocom">‏‎Diy pro‎‏</a></blockquote></div>

<div class="fb-page" data-href="https://www.facebook.com/MarinaFish2019" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false"><blockquote cite="https://www.facebook.com/MarinaFish2019" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/MarinaFish2019">‏مارينا للأسماك والرخويات‏</a></blockquote></div>

<div class="fb-page" data-href="https://www.facebook.com/nursery.libya" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false"><blockquote cite="https://www.facebook.com/nursery.libya" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/nursery.libya">‏مشتل تمنهنت‏</a></blockquote></div>
</div></code></pre>
</div>
</div>
</p>
Continue reading...
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top