Home/ Questions/Q 7619767
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T03:46:14+00:00

The following code will: Test to see if the characters in a div are

  • 0

The following code will:

  1. Test to see if the characters in a div are more then ten chars long
  2. Shorten the text to less than ten characters
  3. Append ... to the div
  4. On hover, it will show and hide a div that is intended to show the full text

I edited this once I found one of the problems

so far it works with only the first div and no others

<html>

<head>

<title>limit chars 1</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>


<script type="text/javascript">

  $(document).ready(function() {


      $("#div2").hide();

var elem = $("#div1");
var fn1 = function(){ $('#div2').show();};
var fn2 = function(){ $('#div2').hide();};


    if(elem){
        if (elem.text().length > 10)
         elem.text(elem.text().substr(0,12)


    )}

    if(elem){
    if (elem.text().length > 10) 
    elem.text(elem.append("...")
   )};





    if(elem){
    if (elem.text().length > 10) 
    //elem.text(elem.append("...")


  $(elem).mouseover(fn1).mouseout(fn2);



   };


//$(elem).mouseover(fn1).mouseout(fn2);

  });//end
</script>

<style>

#div2{color:blue; }

</style>




</head>


<body>

this is where the fun begins.
<div id="div1">
12345ebfkqbweub qiuweiu 
</div>
<div id="div2">full text in tooltip</div>


</body>



</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try assigning your event handlers in your if (elem.text().length > 10) block.

    if(elem){
    if (elem.text().length > 10)
        elem.text(elem.text().substr(0,12));
        elem.mouseover(fn1).mouseout(fn2);
    }

    ...

    To work on multiple divs, you would want to use the jQuery.each function: http://api.jquery.com/each/

    $( '.someclass' ).each( function( ) {
    // do your work in here, $(this) refers to the current element
} );
    • 0