Welcome visitor
* Login
* Register
It is currently May 21st, 2019, 12:40 am
All times are UTC [ DST ]
* Search
View unanswered posts - View active topics

FORUMS » Client Side » HTML



Post new topic Reply to topic  [ 2 posts ] 
Author Message
  Wrap text around image
PostPosted: October 15th, 2009, 7:17 pm 
User avatar

Posts: 61
do you know if there's a way to put an image inside a parragraph and the text will flow around the image?

Quote:
this text goes a ··································· round and skips the
image that is in ···································· or through the content of
the paragraph


there's the float but it works for one side only.
thanks for your help


Top
 Profile  
 
  Re: text flows around an image
PostPosted: October 15th, 2009, 9:32 pm 
User avatar

Posts: 112
this script takes a paragraph and then slices it into two halves, puts one half on one div, an image in another div and the second half on a third div. This is javascript but it can helps you with any other language.

Notice that on this script I take in consideration the withe spaces to avoid chopping a complete word.
<script type="text/javascript">
function fitit(){
  cellA='';
  cellB='';
  var cells=new Array;
  str=document.getElementById('tofit').innerHTML;
  n=Math.floor(str.length/20)
 
  for(i=0; i<=n; i++){
//change the 20 and 30 if you want bigger or smaller strings
    spc=str.slice(20,30);
    j=spc.search(' ');
    cells[i]=str.substr(0,20+j)
//you only  need this line if you want to cut at the 20th character, dont even need the '+j'
//youcan also change the '20' value
    str=str.slice(20+j);
  }
  n=cells.length;
   
  for(i=0; i<n; i=i+2){cellA+=cells[i]+'<br />';}
  for(i=1; i<n; i=i+2){cellB+=cells[i]+'<br />';}
  document.getElementById('a').innerHTML=cellA;
  document.getElementById('b').innerHTML='<img src="image.jpg" />';
  document.getElementById('c').innerHTML=cellB;
 
}
</script>

<div id="tofit">Here's goes the parragraph to slice........</div>
<input type="button" value="make it fit" onclick="fitit();">
<div id="a" style="float: left"></div>
<div id="b" style="float: left"></div>
<div id="c" style="float: left"></div>


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 2 posts ] 

FORUMS » Client Side » HTML


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron