java script not working properly

Question

sainiweb 0 Newbie Poster

14 Years Ago

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

html-css javascript perl

Edited 11 Years Ago by Reverend Jim because: Fixed formatting

2 Contributors
6 Replies
161 Views
1 Week Discussion Span
Latest Post 14 Years Ago Latest Post by fxm

fxm 23 Posting Pro

14 Years Ago

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 23 Posting Pro

14 Years Ago

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>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sainiweb 0 Newbie Poster · Answer 1 · 2010-04-27T21:56:58+00:00

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 0 Newbie Poster · Answer 2 · 2010-04-28T19:25:18+00:00

<!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 0 Newbie Poster · Answer 3 · 2010-05-02T19:19:26+00:00

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.

fxm 23 Posting Pro · Answer 4 · 2010-05-06T06:06:01+00:00

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")