Databases
StackOverflow2013
Postsdbo
POInsert div block into another div, before the specified number of characters
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POInsert div block into another div, before the specified number of characters
    text
    copied!<p>Quite an interesting challenge for me was, i have a <code>div</code> block which contains text(content which can contain different number of any elements like <code>&lt;p&gt; &lt;ul&gt; &lt;div&gt;</code> etc, its like edited Article). This Article have been posted already on my site, and i have added another <code>div</code> block which appers after this Article is loaded. What i need is to put this block at the end of Article and this block should wrap text around Article like on image below. At the moment <em>"Also related to this article"</em> - its a block which i want to insert.</p> <p>Ofcourse i can just append this block before the last <code>&lt;p&gt;</code> element, but last element may be <code>&lt;ul&gt;</code> or another small <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code>, i have different articles, which user can post.</p> <p>What i think is to get the length of my <code>Article div</code> and subtracted from the current length of the number of characters that will suit me and insert <strong>related article</strong> <code>&lt;div&gt;</code> there.</p> <p>So, for examle(Article text is much bigger, but this is just simple):</p> <pre><code>&lt;div id="article"&gt; Lorem Ipsum is simply dummy text of the printing and typesetting industry &lt;p&gt;Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It &lt;/div&gt; &lt;div id="related_article"&gt; &lt;ul&gt; &lt;li&gt; Item1&lt;/li&gt; &lt;li&gt; Item2&lt;/li&gt; &lt;li&gt; Item3&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>Jquery code:</p> <pre><code>$(document).ready(function() { var text_length = $.trim($("#article").text()).length; var length_before = 30;//for example var related = $('div#related_article'); var content = $('div#article'); var substract = text_length - length_before; //is it possible to put this *related* div //into substract point in content at the end of it. }); </code></pre> <p>Should i use regex? or is it possible to do like this somehow? maybe i just stupid and miss something, <code>please show me the way of action</code>.</p> <p><em>english is not my native, so there might be syntax errors</em></p> <p><em>As people asked i provide an example of how can Article looks like</em></p> <p><a href="http://www.homebuilding.co.uk/design/choosing-products/bricks-cladding/stone" rel="nofollow noreferrer">Here is an example of how can looks like my article it can contain a lot of tags</a></p> <p><img src="https://i.stack.imgur.com/cc39P.jpg" alt="enter image description here"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload