Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    93
    Thanks
    9
    Thanked 0 Times in 0 Posts

    How to wrap text either above or beside an image

    Hi there, i'm trying to find out if it's possible to wrap text either beside or above an image depending on the image size. At the moment, if the uploaded image is too large, then the text is pushed underneath the image, which is the opposite from what i'd like to implement. Wrapping the text beside smaller images works fine, but i'm developing a content management site where there is a range of image sizes which can be uploaded - hope this makes some degree of sense, any help appreciated

    currently the html is set up as follows:
    Code:
    <div id="content">
    <h3>The Title</h3>
    <p><img src =... class = 'news_image' />paragraph text paragraph text paragraph text</p>
    </div>
    the CSS
    Code:
    .news_image {
    	max-height:300px;
    	max-width:400px;
    	border:2px solid black;
    	float:right;
    }

  • #2
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    I guess you could just add a <br/> tag after the text to get it above the image?

    Liks this:

    Code:
    <div id="content">
    <h3>The Title</h3>
    <p>paragraph text paragraph text paragraph text<br/><img src =... class = 'news_image' /></p>
    </div>

  • #3
    New Coder
    Join Date
    Aug 2007
    Posts
    93
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thx for the reply. The only problem with doing that is that if you don't place the <img> tag before the text content, it won't wrap the text around the image, but instead will just place the image underneath the text. I want to wrap text around smaller images or above images which exceed a certain size - however i have no idea how to do this!

  • #4
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    See below post for better code/clarification:
    Last edited by vtjustinb; 11-08-2007 at 06:53 PM.

  • #5
    New Coder
    Join Date
    Aug 2007
    Posts
    93
    Thanks
    9
    Thanked 0 Times in 0 Posts
    many thanks vtjustinb - i've tried to implement the javascript code, but i'm struggling a bit with it, plus the img.getAttribute('width') function is flagging up an error in the Error Console - "img.getAttribute is not a function". Had a look on the web and this function appears to be widely used, so i'm not sure what the problem is....if you get the chance to shed any more light on this, that would be great

    p.s i have 3 paragraphs in the content section, therefore i think i would have to loop through each one in the javascript function

  • #6
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Yeah it's really b/c I was lazy and made some assumptions in the code.

    Here's a version of the function that will work generally for all <p>'s inside of #content and shouldn't break if you have your markup written differently:

    Code:
    <script type="text/javascript" charset="utf-8">
      var maxWidth = 200;
      function checkImages() {
        var ps = document.getElementById('content').getElementsByTagName('p');
        for (i = 0; i < ps.length; i++) {
          var img = ps[i].getElementsByTagName('img')[0];
          if (img != null) {
            if (img.width > maxWidth) {
              ps[i].removeChild(img);
              ps[i].appendChild(img);
            }
          }
        }
      }
    </script>
    This function assumes you set the width of the image in the image tag in the markup.

    Essentially this code will iterate through your paragraphs that are marked up like this:

    Code:
    <div id="content">
      <h2>Title</h2>
      <p><img src="test.jpg" width="266" height="132" alt="Test" />text text text text</p>
    </div>
    And dynamically change it to this:

    Code:
    <div id="content">
      <h2>Title</h2>
      <p>text text text text <img src="test.jpg" width="266" height="132" alt="Test" /></p>
    </div>
    if the width of the image in question is greater than the max width you specify in "maxWidth" in Javascript.

    This allows the image to be displayed after the text if it's too big to wrap around the image, and if the image is small enough to wrap it will just wrap normally via the float.
    Last edited by vtjustinb; 11-08-2007 at 06:56 PM. Reason: Clarification of preconditions

  • Users who have thanked vtjustinb for this post:

    nicky77 (11-08-2007)

  • #7
    New Coder
    Join Date
    Aug 2007
    Posts
    93
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vtjustinb View Post
    Yeah it's really b/c I was lazy and made some assumptions in the code.

    Here's a version of the function that will work generally for all <p>'s inside of #content and shouldn't break if you have your markup written differently:

    Code:
    <script type="text/javascript" charset="utf-8">
      var maxWidth = 200;
      function checkImages() {
        var ps = document.getElementById('content').getElementsByTagName('p');
        for (i = 0; i < ps.length; i++) {
          var img = ps[i].getElementsByTagName('img')[0];
          if (img != null) {
            if (img.width > maxWidth) {
              ps[i].removeChild(img);
              ps[i].appendChild(img);
            }
          }
        }
      }
    </script>
    you truly are a legend - works like a treat, thanks again!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •