java script not working properly

I have this code which not give me desired result

I want output as same

http://www.asteraweb.co.uk/wrap_example.html

same as like first container have

I have this code but its working on no. of word and missing some words in the last

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>wrapped</title>   
      <script type="text/javascript" language="javascript">  
          function set_padd(){   
              var tt = document.getElementById("span_padding").innerHTML;      
              var txt = new Array();          
              txt = tt.split(" ");                     
              var atxt = '';
              var f_txt = '';
              var wrd_pr_linr = 4;     
              var cnt = 1;      
              for(var i = 0; i < txt.length; i++){ 
                 if(txt[i].length > 0){                  
                     txt[i] = txt[i].replace('','');
                     if(cnt < wrd_pr_linr){
                        if(txt[i].length > 0){
                          atxt += ' '+txt[i].replace('','');
                          cnt++;                      
                        }
                     }else{
                        f_txt += '<a class="padd_txt" ><strong>'+atxt+'</a></strong><br />';
                        atxt = '';  
                        cnt = 1;
                     }
                 }
              }  
              document.getElementById("span_padding").innerHTML = f_txt;  
          }  
      </script>  
      <style type="text/css">  
        .padd_txt{padding:7px;background:#009;color:#FFF;line-height:26px;font-size:14px;} 

        body{font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:24px; line-height:1.2em;}
        span{background-color: #009; width:200px; color: #FFF;"}



      </style>
</head> 
<body onload="set_padd();">
  <div style="width: 350px;"> 
      <p>
      <span id="span_padding">
          This is what I want to 
          happen where one
          long string is wrapped 
          and the text has this 
          highlight color behind it.
          behind me.          


      </span>  
   </div>  
</body>  
</html>

out put is:

This is
I want to
happen where one
string is wrapped
and the text
this highlight
behind it. behind

this missing one last word "me " on firefox and two last word "behind me" on IE

this may be a java script problem or css problem
plz help me to short out this problem

Thanx

2

Contributors

6

Replies

1 Week

Discussion Span

3 Years Ago

Last Updated

7

Views

sainiweb

Newbie Poster

15 posts since Apr 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

3 Years Ago

0

this missing one last word "me "

Many other words are also missing.

I give you full marks for plugging away at this but - do you realize that wrd_pr_linr = 4 will never look good for sequences of short or very long "words"

I a I a
highlighthighlight highlighthighlight highlighthighlight highlighthighlight

And even when it works (more or less) it will only look reasonably good for fixed-width fonts of certain sizes?

fxm

Posting Pro

596 posts since Apr 2010

Reputation Points: 40

Solved Threads: 74

Skill Endorsements: 0

3 Years Ago

0

Many other words are also missing.
I give you full marks for plugging away at this but - do you realize that wrd_pr_linr = 4 will never look good for sequences of short or very long "words"
I a I a
highlighthighlight highlighthighlight highlighthighlight highlighthighlight
And even when it works (more or less) it will only look reasonably good for fixed-width fonts of certain sizes?

ya Than what to do I want It asap but I could not able to find best solution till now

sainiweb

Newbie Poster

15 posts since Apr 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

3 Years Ago

0

what to do

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org" />
    <meta http-equiv="Content-Type" content=
    "text/html; charset=us-ascii" />
    <title>
      wrapped
    </title>
    <script type="text/javascript" language="javascript">
        function set_padd() {

            function add_word() {
                line_out += '\u00a0' + text_in[i];
            }

            function put_line() {
                text_out.appendChild(document.createElement('br'));
                text_out.appendChild(document.createTextNode(line_out + '\u00a0'));

            }

            var text_in = document.getElementById("span_in").firstChild.data.split(/\s/);
            var text_out = document.getElementById("span_out");

            var char_max = 30;  // change this to fit the message area

            var line_out = '';
            for (var i = 0; i < text_in.length; i++) {
                if (text_in[i] != '') {
                    if (line_out.length == 0 || text_in[i].length + line_out.length < char_max) {
                        add_word();
                    } else {
                        put_line();
                        line_out = '';
                        add_word();
                    }
                }
            }
            if (line_out.length != 0) {
                put_line();
            }
        }
    </script>
    <style type="text/css">
    	body{font-family:monospace}
    	.pad{background-color: #009; color: #FFF;"}
    </style>
  </head>
  <body onload="set_padd();">
    	<span id="span_in">This is what I want to happen where one long
    		string is wrapped and the text has this highlight color behind
	    	it. behind me.</span> 
	<pre>

	</pre>
	<span class="pad" id="span_out"></span>
  </body>
</html>

fxm

Posting Pro

596 posts since Apr 2010

Reputation Points: 40

Solved Threads: 74

Skill Endorsements: 0

3 Years Ago

0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org" />
    <meta http-equiv="Content-Type" content=
    "text/html; charset=us-ascii" />
    <title>
      wrapped
    </title>
    <script type="text/javascript" language="javascript">
        function set_padd() {

            function add_word() {
                line_out += '\u00a0' + text_in[i];
            }

            function put_line() {
                text_out.appendChild(document.createElement('br'));
                text_out.appendChild(document.createTextNode(line_out + '\u00a0'));

            }

            var text_in = document.getElementById("span_in").firstChild.data.split(/\s/);
            var text_out = document.getElementById("span_out");

            var char_max = 30;  // change this to fit the message area

            var line_out = '';
            for (var i = 0; i < text_in.length; i++) {
                if (text_in[i] != '') {
                    if (line_out.length == 0 || text_in[i].length + line_out.length < char_max) {
                        add_word();
                    } else {
                        put_line();
                        line_out = '';
                        add_word();
                    }
                }
            }
            if (line_out.length != 0) {
                put_line();
            }
        }
    </script>
    <style type="text/css">
    	body{font-family:monospace}
    	.pad{background-color: #009; color: #FFF;"}
    </style>
  </head>
  <body onload="set_padd();">
    	<span id="span_in">This is what I want to happen where one long
    		string is wrapped and the text has this highlight color behind
	    	it. behind me.</span> 
	<pre>

	</pre>
	<span class="pad" id="span_out"></span>
  </body>
</html>

Hi,
fxm
Many thanks. I like what you have done with the max words

Can we have multiple char_max variables according to perhaps span class?

sainiweb

Newbie Poster

15 posts since Apr 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

3 Years Ago

0

Hi

I will have more than one instance of text that needs to be treated like this. For example 1 large span and 3 smaller spans. What I really want is for this wrapping of text to be done by the size of the parent DIV.

But working with what here provided instead where it is based on the number of characters I would need to have different values for char_max according to the div it was in.

e.g. in the large area it might be .largespan char_max=40 while in the smaller areas it was .smallspan char_max=30

I hope that this makes sense.

sainiweb

Newbie Poster

15 posts since Apr 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

3 Years Ago

0

I would need to have different values for char_max according to the div it was in.

One solution would be to give each span an id and add parameters to set_padd(). function set_padd(n,s) {}

set_padd(30,"span1")
set_padd(40,"span2")

fxm

Posting Pro

596 posts since Apr 2010

Reputation Points: 40

Solved Threads: 74

Skill Endorsements: 0

java script not working properly

This article has been dead for over three months: Start a new discussion instead