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 238 karma points MVP 2x c-trib
    Jan 06, 2016 @ 09:37
    emma burstow
    0

    Breaking up an Umbraco field for styling

    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>
    
  • Darren Wilson 218 posts 556 karma points
    Jan 06, 2016 @ 12:28
    Darren Wilson
    0

    Hi Emma,

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

    Darren

  • Darren Wilson 218 posts 556 karma points
    Jan 06, 2016 @ 13:47
    Darren Wilson
    100

    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

  • emma burstow 43 posts 238 karma points MVP 2x c-trib
    Jan 06, 2016 @ 14:40
    emma burstow
    0

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

    Emma

Please Sign in or register to post replies

Write your reply to:

Draft