breaking up an umbraco field for styling

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

emma burstow 43 posts 251 karma points MVP 3x hq c-trib

Jan 06, 2016 @ 09:37

Using Umbraco 7

Umbraco 7

Ok, so. I have a content box and it can be edited to the user's content. In the middle of said box, there's a floating DIV containing a caption. How do I break up the data entered into the RTE to format it around the DIV?

As flat HTML it wraps nicely around the DIV. Is there a function that effectively breaks the data entered in half and then continues it beyond the next funtion?

An example of the code is below where the Lorem Ipsum text with the DIVs in the middle would be replaced with an @Umbraco.Field("ContentText") if it's possible.

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                                            <div class="box keypoint pull-left">
                                                <div class="shadow">
                                                    <div class="content">
                                                        <h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</h3>
                                                        <a class="btn" href="#" title="">Lorem Ipsum <i class="fa fa-chevron-right"></i><img src="content/images/btn-cap.png" alt="" title=""></a>
                                                    </div><!--content-->
                                                </div><!--shadow-->
                                            </div><!--box-->
                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Copy Link

Darren Wilson 228 posts 596 karma points

Jan 06, 2016 @ 12:28

0

Hi Emma,

You can probably solve this using some CSS, do you have a live example?

Darren

Copy Link

Darren Wilson 228 posts 596 karma points

Jan 06, 2016 @ 13:47

Hi Emma,

Try these solutions...

CSS Solution:

You can add a float to your box to wrap the content around it.

.box { float: right }

This should wrap your body copy around your box - you can change the margins around the box to suit.

jQuery method

If you want to include the DIV in total to a specific level there’s a jquery method (I’ve not tested this!) Here’s your mark-up:

<div class="box keypoint pull-left">
   <div class="shadow">
   <div class="content">
       <h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</h3>
          <a class="btn" href="#" title="">Lorem Ipsum <i class="fa fa-chevron-right"></i><img src="content/images/btn-cap.png" alt="" title=""></a>
        </div><!--content-->
   </div><!--shadow-->
</div><!--box—>
<div id="main-content”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
</div>

Here’s the jquery:

<script>

var appender=1;
    function addText(){
        var parentDiv = document.getElementById('main-content');
        var input = document.getElementById(‘box').value;    
        var node = document.createElement("DIV");
        var textnode = document.createTextNode(box);
        node.appendChild(textnode);     
        node.id = 'custom-div_' + appender;
        var child = parentDiv.children[2];
        parentDiv.insertBefore(node, child);
        appender++;

    }
</script>

Remember to include this AFTER your jquery call (if you are using bootstrap this will be in the footer).

Hope this helps as a start

Darren

Copy Link

emma burstow 43 posts 251 karma points MVP 3x hq c-trib

Jan 06, 2016 @ 14:40

0

Thanks Darren! You've been a great help. I'll get on these.

Emma

Copy Link
is working on a reply...

Please Sign in or register to post replies